From 3f637fd56a14557b51944fc112f37c41f0f47da1 Mon Sep 17 00:00:00 2001
From: samepant <sampanter@gmail.com>
Date: Sun, 30 Jan 2022 09:06:08 -0500
Subject: [PATCH] adds chain info to url for easier linking

---
 components/inputs/Select.js |  7 +++++++
 context/AppContext.js       | 38 ++++++++++++++++++++++++++++++++++++-
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/components/inputs/Select.js b/components/inputs/Select.js
index 591172a..def7d19 100644
--- a/components/inputs/Select.js
+++ b/components/inputs/Select.js
@@ -43,6 +43,13 @@ const StyledSelect = (props) => {
       ...provided,
       color: "rgba(255,255,255, 0.6)",
     }),
+    dropdownIndicator: (provided) => ({
+      ...provided,
+      color: "rgba(255, 255, 255, 0.6)",
+      "&:hover": {
+        color: "rgba(255, 255, 255, 1)",
+      },
+    }),
   };
 
   return <Select {...props} styles={customStyles} />;
diff --git a/context/AppContext.js b/context/AppContext.js
index f506321..6b28c97 100644
--- a/context/AppContext.js
+++ b/context/AppContext.js
@@ -3,19 +3,55 @@ import React, { useEffect, createContext, useContext, useReducer } from "react";
 import { AppReducer, initialState } from "./AppReducer";
 
 const AppContext = createContext();
+
+function getChainInfoFromUrl() {
+  const url = location.search;
+  const params = new URLSearchParams(url);
+  const chainInfo = {
+    nodeAddress: decodeURIComponent(params.get("nodeAddress")),
+    denom: params.get("denom"),
+    displayDenom: params.get("displayDenom"),
+    displayDenomExponent: parseInt(params.get("displayDenomExponent"), 10),
+    gasPrice: params.get("gasPrice"),
+    chainId: params.get("chainId"),
+    chainDisplayName: decodeURIComponent(params.get("chainDisplayName")),
+    addressPrefix: params.get("addressPrefix"),
+    explorerLink: decodeURIComponent(params.get("explorerLink")),
+  };
+
+  return chainInfo;
+}
+
+function setChainInfoParams(chainInfo) {
+  const params = new URLSearchParams();
+
+  Object.keys(chainInfo).forEach((key) => {
+    params.set(key, encodeURIComponent(chainInfo[key]));
+  });
+
+  window.history.replaceState({}, "", `${location.pathname}?${params}`);
+}
+
 export function AppWrapper({ children }) {
   let existingState;
   if (typeof window !== "undefined") {
     existingState = JSON.parse(localStorage.getItem("state"));
+    const urlChainInfo = getChainInfoFromUrl();
+
+    // query params should override saved state
+    if (urlChainInfo.chainId) {
+      console.log("setting state from url");
+      existingState = { chain: urlChainInfo };
+    }
   }
   const [state, dispatch] = useReducer(AppReducer, existingState ? existingState : initialState);
 
   const contextValue = { state, dispatch };
 
   useEffect(() => {
-    // create and/or set a new localstorage variable called "state"
     if (state && state !== initialState) {
       localStorage.setItem("state", JSON.stringify(state));
+      setChainInfoParams(state.chain);
     }
   }, [state]);