Adds an address changer tool

docs/learn-accounts.md

@@ -353,3 +353,17 @@ need to place the deposit and Alice will receive her deposit back.
 - [Understanding Accounts and Keys in Polkadot](https://www.crowdcast.io/e/polkadot-keys) - An
   explanation of what the different kinds of accounts and keys are used for in Polkadot, with Bill
   Laboon and Chinmay Patel of BlockX Labs.
+
+## Address Changer
+
+You can use the tool below to change the format of your address for different networks.
+
+<div class="address-changer">
+  <input class="address-changer-input" id="input" placeholder="Paste your address" oninput="globalThis.addressChanger()" />
+  <select class="address-changer-select" id="prefix-select" oninput="globalThis.addressChanger()">
+    <option value="0">Polkadot</option>
+    <option value="2">Kusama</option>
+    <option value="42">Substrate</option>
+  </select>
+  <span class="address-changer-output" id="output" />
+</div>

package.json

@@ -27,6 +27,7 @@
   "dependencies": {
     "@octokit/rest": "^18.0.5",
     "@polkadot/api": "^1.32.1",
+    "@polkadot/keyring": "^3.4.1",
     "axios": "^0.20.0",
     "fs-extra": "^9.0.1",
     "ipfs-http-client": "^46.1.1",

website/i18n/en.json

@@ -143,7 +143,6 @@
       },
       "kusama-parameters": {
         "title": "Kusama Parameters",
-
         "sidebar_label": "Parameters"
       },
       "kusama-social-recovery": {
@@ -178,10 +177,18 @@
         "title": "Availability and Validity",
         "sidebar_label": "Availability and Validity"
       },
+      "learn-balance-transfers": {
+        "title": "Balance Transfers",
+        "sidebar_label": "How to transfer Balances"
+      },
       "learn-bridges": {
         "title": "Bridges",
         "sidebar_label": "Bridges"
       },
+      "learn-collator": {
+        "title": "Collator",
+        "sidebar_label": "Collator"
+      },
       "learn-comparisons-dfinity": {
         "title": "Polkadot and Dfinity",
         "sidebar_label": "Dfinity"
@@ -238,6 +245,14 @@
         "title": "Polkadot Launch Phases",
         "sidebar_label": "Polkadot Launch Phases"
       },
+      "learn-ledger": {
+        "title": "Using the Polkadot Ledger Application",
+        "sidebar_label": "Ledger Application"
+      },
+      "learn-nominator": {
+        "title": "Nominator",
+        "sidebar_label": "Nominator"
+      },
       "learn-parachains": {
         "title": "Parachains",
         "sidebar_label": "Parachains"
@@ -282,22 +297,18 @@
         "title": "Transaction Fees",
         "sidebar_label": "Transaction Fees"
       },
-      "learn-balance-transfers": {
-        "title": "Balance Transfers",
-        "sidebar_label": "How to transfer Balances"
-      },
       "learn-treasury": {
         "title": "Treasury",
         "sidebar_label": "Treasury"
       },
+      "learn-validator": {
+        "title": "Validator",
+        "sidebar_label": "Validator"
+      },
       "learn-wasm": {
         "title": "WebAssembly (Wasm)",
         "sidebar_label": "WebAssembly (Wasm)"
       },
-      "maintain-collator": {
-        "title": "Collator",
-        "sidebar_label": "Collator"
-      },
       "maintain-errors": {
         "title": "Errors and How to Resolve Them",
         "sidebar_label": "Resolving Errors"
@@ -327,8 +338,8 @@
         "sidebar_label": "Nominator Guide"
       },
       "maintain-guides-how-to-nominate-polkadot": {
-        "title": "Nomination Guide",
-        "sidebar_label": "Nomination Guide"
+        "title": "How to Nominate on Polkadot",
+        "sidebar_label": "How to Nominate on Polkadot"
       },
       "maintain-guides-how-to-setup-sentry-node": {
         "title": "Set Up a Sentry Node - Public Node",
@@ -339,8 +350,8 @@
         "sidebar_label": "Using systemd for the Validator Node"
       },
       "maintain-guides-how-to-unbond": {
-        "title": "Stop Being a Nominator",
-        "sidebar_label": "Stop Being a Nominator"
+        "title": "Unbonding and Rebonding",
+        "sidebar_label": "Unbonding and Rebonding"
       },
       "maintain-guides-how-to-upgrade": {
         "title": "How to Upgrade Your Validator",
@@ -386,10 +397,6 @@
         "title": "Networks",
         "sidebar_label": "Networks"
       },
-      "maintain-nominator": {
-        "title": "Nominator",
-        "sidebar_label": "Nominator"
-      },
       "maintain-polkadot-parameters": {
         "title": "Polkadot Parameters",
         "sidebar_label": "Parameters"
@@ -398,10 +405,6 @@
         "title": "Set up a Full Node",
         "sidebar_label": "Set up a Full Node"
       },
-      "maintain-validator": {
-        "title": "Validator",
-        "sidebar_label": "Validator"
-      },
       "maintain-wss": {
         "title": "Set up Secure WebSocket for Remote Connections",
         "sidebar_label": "Set up Secure WebSocket for Remote Connections"

website/siteConfig.js

@@ -64,6 +64,7 @@ const siteConfig = {
     "/js/custom.js",
     "/js/klaro-config.js",
     "/js/klaro.js",
+    '/js/packaged/addressChanger.js'
   ],
 
   stylesheets: [

website/static/css/custom.css

@@ -1027,3 +1027,28 @@ footer .list-social-links a {
     transform: translateY(0);
   }
 }
+
+.address-changer {
+  width: 100%;
+  padding: 10px;
+  border: 2px solid black;
+}
+
+.address-changer-input {
+  width: 74%;
+}
+
+.address-changer-select {
+  height: 30px;
+  width: 25%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.address-changer-output {
+  height: 30px;
+  display: flex;
+  padding: 10px;
+  justify-content: center;
+  align-items: center;
+}

website/static/js/addressChanger.js

@@ -0,0 +1,30 @@
+const { decodeAddress, encodeAddress } = require("@polkadot/keyring");
+
+const addressChanger = () => {
+  const inEl = document.getElementById('input');
+  const prefEl = document.getElementById('prefix-select');
+  const outEl = document.getElementById('output');
+
+  const prefix = prefEl.options[prefEl.selectedIndex].value;
+
+  try {
+    const decoded = decodeAddress(inEl.value);
+    const encoded = encodeAddress(decoded, prefix);
+    outEl.textContent = encoded.toString();
+  } catch (err) {
+    console.log(err);
+  }
+}
+
+globalThis.addressChanger = addressChanger;
+
+const test = () => {
+  const addr = "5CJK5pSJWjZ7V3tiuo6jJPZKX7hxSPhNQds1g28icsrmUXaT";
+  const decoded = decodeAddress(addr);
+  const encoded = encodeAddress(decoded, "2");
+  console.log(encoded.toString())
+}
+
+// test();
+
+// npx browserify addressChanger.js > addressChanger-browser.js; npx uglify-es --mangle --compress -- addressChanger-browser.js > packaged/addressChanger.js; rm addressChanger-browser.js