feat: pass wallet address in URL path (#35)

* add address from search params * remove unused import and lockfile update * fix: pass address into faucet --------- Co-authored-by: Shankar Warang <shankar@edgeware.agency>
edgeware-network · Aug 15, 2024 · 0e8290d · 0e8290d
1 parent 70a4dfe
commit 0e8290d
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 15 deletions.
diff --git a/app/[id]/page.tsx → app/[...slug]/page.tsx b/app/[id]/page.tsx → app/[...slug]/page.tsx
@@ -5,12 +5,12 @@ import ParticlesComponent from "@/components/ParticlesComponent";
 export default function FaucetPage({
   params,
 }: {
-  params: { id: string };
+  params: { slug: [string, string] };
 }) {
   return (
     <main className="relative z-0">
       <ParticlesComponent />
-      <Faucet url={params.id} />
+      <Faucet url={params.slug[0]} address={params.slug[1]} />
     </main>
   );
 };
diff --git a/components/Faucet.tsx b/components/Faucet.tsx
@@ -13,12 +13,14 @@ import { Disburse } from "@/app/page";
 
 function FaucetForm(
   { url,
+    address,
     buttonText,
     setButtonText,
     setIsSubmitting,
     isSubmitting
    }: {
     url: string;
+    address: string;
     buttonText: string;
     setButtonText: (text: string) => void;
     setIsSubmitting: (submitting: boolean) => void;
@@ -290,8 +292,8 @@ function FaucetForm(
               onKeyDown={checkAmount}
               inputMode="decimal"
               onChange={(e) => setUser({ ...user, amount: e.target.value.replace(",", ".") })} />
-            <button 
-              onClick={getMaxAmount} 
+            <button
+              onClick={getMaxAmount}
               className="w-1/2 h-full p-2 flex gap-2 items-center justify-center bg-[rgba(0,102,255,0.1)] text-base text-[#0066FF] font-medium rounded-[8px] outline-none"
             > Max
             </button>
@@ -327,7 +329,7 @@ function FaucetForm(
     </form>
   );
 };
-export default function Faucet({ url }: { url: string }) {
+export default function Faucet({ url, address }: { url: string, address: string }) {
   const [isLoading, setLoading] = useState(true);
   const [buttonText, setButtonText] = useState("Request Tokens");
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -342,7 +344,7 @@ export default function Faucet({ url }: { url: string }) {
       {isLoading ? (
         <Loading />
       ) : (
-        <FaucetForm url={url} buttonText={buttonText} setButtonText={setButtonText} setIsSubmitting={setIsSubmitting} isSubmitting={isSubmitting}  />
+        <FaucetForm address={address} url={url} buttonText={buttonText} setButtonText={setButtonText} setIsSubmitting={setIsSubmitting} isSubmitting={isSubmitting}  />
       )}
     </div>
   );

diff --git a/context/index.tsx b/context/index.tsx
@@ -94,10 +94,11 @@ export const FaucetProvider = ({ children }: { children: React.ReactNode }) => {
   const [switcherMode, setSwitcherMode] = useState<Chain | undefined>();
   const [selectorMode, setSelectorMode] = useState<Chain[]>([]);
   const path = usePathname().split("/")[1];
+  const address = usePathname().split("/")[2];
 
   const [user, setUser] = useState<User>({
     chain: "",
-    address: "",
+    address: address || "",
     amount: "",
   });
   const [toggle, setToggle] = useState<boolean>(true);
@@ -147,16 +148,25 @@ export const FaucetProvider = ({ children }: { children: React.ReactNode }) => {
             symbol: chain.nativeCurrency.symbol,
           };
         }));
-        // console.log("polkadot accounts", balances);
+        console.log("polkadot accounts", balances);
         setPolkadotAccounts(balances);
-        setSelectedPolkadotAccount(encodeAddress(decodeAddress(sessionStorage.getItem("selectedAccount") || balances[0].address), chain.prefix));
-        setUser((previous) => ({ ...previous, address: encodeAddress(decodeAddress(sessionStorage.getItem("selectedAccount") || balances[0].address), chain.prefix), chain: sessionStorage.getItem("selectedChain") || balances[0].chain }));
+        if(address) {
+          balances.forEach(balance => {
+            if (balance.address === address) {
+              setSelectedPolkadotAccount(encodeAddress(decodeAddress(balance.address), chain.prefix));
+              setUser((previous) => ({ ...previous, address: encodeAddress(decodeAddress(balance.address), chain.prefix), chain: balance.chain }));
+            }
+          });
+        } else {
+          setSelectedPolkadotAccount(encodeAddress(decodeAddress(sessionStorage.getItem("selectedAccount") || balances[0].address), chain.prefix));
+          setUser((previous) => ({ ...previous, address: encodeAddress(decodeAddress(sessionStorage.getItem("selectedAccount") || balances[0].address), chain.prefix), chain: sessionStorage.getItem("selectedChain") || balances[0].chain }));
+        }
         return true;
       };
     } catch (err) {
       console.log(err);
     }
-  }, [setSelectedPolkadotAccount]);
+  }, [setSelectedPolkadotAccount, address]);
 
   const updateEthereumBalances = useCallback(async (chain: Chain) => {
     console.log(`Updating ${chain.name} balances...`);
@@ -388,7 +398,6 @@ export const FaucetProvider = ({ children }: { children: React.ReactNode }) => {
     async function connectSubstrateOnReload() {
       const isSubstrateConnected = sessionStorage.getItem("isSubstrateConnected");
       const chain = chains.find((chain) => chain.name === sessionStorage.getItem("selectedChain"))!;
-      console.log(chain);
       if (isSubstrateConnected === "true") {
         const res = await updatePolkadotBalances(chain);
         if (res) {

diff --git a/yarn.lock b/yarn.lock
@@ -2419,9 +2419,9 @@ eastasianwidth@^0.2.0:
   integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
 
 electron-to-chromium@^1.5.4:
-  version "1.5.7"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.7.tgz#425d2a7f76ecfa564fdca1040d11fb1979851f3c"
-  integrity sha512-6FTNWIWMxMy/ZY6799nBlPtF1DFDQ6VQJ7yyDP27SJNt5lwtQ5ufqVvHylb3fdQefvRcgA3fKcFMJi9OLwBRNw==
+  version "1.5.8"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.8.tgz#0a3225b305212f347be48f159a3c0a117d5e9801"
+  integrity sha512-4Nx0gP2tPNBLTrFxBMHpkQbtn2hidPVr/+/FTtcCiBYTucqc70zRyVZiOLj17Ui3wTO7SQ1/N+hkHYzJjBzt6A==
 
 elliptic@^6.5.4:
   version "6.5.7"