Make addresses chain aware

.env.sample

@@ -1,4 +1,5 @@
 FAUNADB_SECRET=
 NEXT_PUBLIC_NODE_ADDRESS=https://cosmoshub.validator.network:443
 NEXT_PUBLIC_DENOM=uatom
-NEXT_PUBLIC_CHAIN_ID=cosmoshub-4
+NEXT_PUBLIC_CHAIN_ID=cosmoshub-4
+NEXT_PUBLIC_ADDRESS_PREFIX=cosmos

components/forms/FindMultisigForm.js

@@ -5,6 +5,7 @@ import { withRouter } from "next/router";
 import Button from "../inputs/Button";
 import StackableContainer from "../layout/StackableContainer";
 import Input from "../inputs/Input";
+import { exampleAddress } from "../../lib/displayHelpers";
 
 class FindMultisigForm extends React.Component {
   constructor(props) {
@@ -45,7 +46,7 @@ class FindMultisigForm extends React.Component {
             value={this.state.address}
             label="Multisig Address"
             name="address"
-            placeholder="cosmos1vqpjljwsynsn58dugz0w8ut7kun7t8ls2qkmsq"
+            placeholder={exampleAddress()}
           />
           <Button
             label="Use this Multisig"

components/forms/MultisigForm.js

@@ -8,6 +8,7 @@ import { createMultisigFromCompressedSecp256k1Pubkeys } from "../../lib/multisig
 import Input from "../inputs/Input";
 import StackableContainer from "../layout/StackableContainer";
 import ThresholdInput from "../inputs/ThresholdInput";
+import { exampleAddress } from "../../lib/displayHelpers";
 
 let emptyPubKeyGroup = () => {
   return { address: "", compressedPubkey: "", keyError: "", isPubkey: false };
@@ -162,7 +163,7 @@ class MultiSigForm extends React.Component {
                     placeholder={
                       pubkeyGroup.isPubkey
                         ? "Akd/qKMWdZXyiMnSu6aFLpQEGDO0ijyal9mXUIcVaPNX"
-                        : "cosmos1vqpjljwsynsn58dugz0w8ut7kun7t8ls2qkmsq"
+                        : exampleAddress(index)
                     }
                     error={pubkeyGroup.keyError}
                     onBlur={(e) => {

components/forms/TransactionForm.js

@@ -7,6 +7,7 @@ import { withRouter } from "next/router";
 import Button from "../../components/inputs/Button";
 import Input from "../../components/inputs/Input";
 import StackableContainer from "../layout/StackableContainer";
+import { exampleAddress } from "../../lib/displayHelpers";
 
 class TransactionForm extends React.Component {
   constructor(props) {
@@ -84,7 +85,7 @@ class TransactionForm extends React.Component {
             value={this.state.toAddress}
             onChange={this.handleChange}
             error={this.state.addressError}
-            placeholder="cosmos1fjrzd7ycxzse05zme3r2zqwpsvcrskv80wj82h"
+            placeholder={exampleAddress()}
           />
         </div>
         <div className="form-item">

lib/displayHelpers.js

@@ -1,3 +1,5 @@
+import { Bech32 } from "@cosmjs/encoding";
+import { sha512 } from "@cosmjs/crypto";
 import { Decimal } from "@cosmjs/math";
 
 /**
@@ -42,4 +44,18 @@ const printableCoins = (coins) => {
   return printableCoin(coins[0]);
 }
 
-export { abbreviateLongString, printableCoin, printableCoins };
+/**
+ * Generates an example address for the configured blockchain.
+ * 
+ * `index` can be set to a small integer in order to get different addresses. Defaults to 0.
+ */
+const exampleAddress = (index) => {
+  const usedIndex = index || 0;
+  let data = Bech32.decode("cosmos1vqpjljwsynsn58dugz0w8ut7kun7t8ls2qkmsq").data;
+  for (let i = 0; i < usedIndex; ++i) {
+    data = sha512(data).slice(0, data.length); // hash one time and trim to original length
+  }
+  return Bech32.encode(process.env.NEXT_PUBLIC_ADDRESS_PREFIX, data);
+}
+
+export { abbreviateLongString, printableCoin, printableCoins, exampleAddress };

lib/multisigHelpers.js

@@ -24,7 +24,7 @@ const createMultisigFromCompressedSecp256k1Pubkeys = async (
       };
     });
     const multisigPubkey = createMultisigThresholdPubkey(pubkeys, threshold);
-    const multisigAddress = pubkeyToAddress(multisigPubkey, "cosmos");
+    const multisigAddress = pubkeyToAddress(multisigPubkey, process.env.NEXT_PUBLIC_ADDRESS_PREFIX);
 
     // save multisig to fauna
     const multisig = {

package-lock.json

@@ -7,6 +7,7 @@
       "name": "create-next-example-app",
       "dependencies": {
         "@cosmjs/amino": "^0.27.0",
+        "@cosmjs/crypto": "^0.27.0",
         "@cosmjs/encoding": "^0.27.0",
         "@cosmjs/math": "^0.27.0",
         "@cosmjs/proto-signing": "^0.27.0",

package.json

@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "@cosmjs/amino": "^0.27.0",
+    "@cosmjs/crypto": "^0.27.0",
     "@cosmjs/encoding": "^0.27.0",
     "@cosmjs/math": "^0.27.0",
     "@cosmjs/proto-signing": "^0.27.0",