From 1237d8d344d0d425d5d15a461e5a43b90b1b4ca8 Mon Sep 17 00:00:00 2001
From: Simon Warta <simon@warta.it>
Date: Tue, 11 Jan 2022 15:35:56 +0100
Subject: [PATCH] Make addresses chain aware

---
 .env.sample                          |  3 ++-
 components/forms/FindMultisigForm.js |  3 ++-
 components/forms/MultisigForm.js     |  3 ++-
 components/forms/TransactionForm.js  |  3 ++-
 lib/displayHelpers.js                | 18 +++++++++++++++++-
 lib/multisigHelpers.js               |  2 +-
 package-lock.json                    |  1 +
 package.json                         |  1 +
 8 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/.env.sample b/.env.sample
index 9a3782a..2aec944 100644
--- a/.env.sample
+++ b/.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
\ No newline at end of file
+NEXT_PUBLIC_CHAIN_ID=cosmoshub-4
+NEXT_PUBLIC_ADDRESS_PREFIX=cosmos
diff --git a/components/forms/FindMultisigForm.js b/components/forms/FindMultisigForm.js
index 70be330..5fcb9e0 100644
--- a/components/forms/FindMultisigForm.js
+++ b/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"
diff --git a/components/forms/MultisigForm.js b/components/forms/MultisigForm.js
index bcb95ab..b2ce34a 100644
--- a/components/forms/MultisigForm.js
+++ b/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) => {
diff --git a/components/forms/TransactionForm.js b/components/forms/TransactionForm.js
index 4beec76..bd07499 100644
--- a/components/forms/TransactionForm.js
+++ b/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">
diff --git a/lib/displayHelpers.js b/lib/displayHelpers.js
index 0aad502..c81292a 100644
--- a/lib/displayHelpers.js
+++ b/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 };
diff --git a/lib/multisigHelpers.js b/lib/multisigHelpers.js
index be0de85..69d1d9e 100644
--- a/lib/multisigHelpers.js
+++ b/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 = {
diff --git a/package-lock.json b/package-lock.json
index bd8106d..2760eff 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 3e31d2d..0d3afda 100644
--- a/package.json
+++ b/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",