fix: data fetching

paritytech · Mar 26, 2024 · 66e2c7c · 66e2c7c
1 parent 75236f4
commit 66e2c7c
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 38 deletions.
diff --git a/projects/wallet-template/src/background/storage.ts b/projects/wallet-template/src/background/storage.ts
@@ -1,11 +1,12 @@
 import type { KeystoreV4 } from "./keystore"
+import { Keyset } from "./types"
 
 const STORAGE_PREFIX = "wallet-template/"
 
 type StorageConfig = {
   password: KeystoreV4
   keysets: {
-    [key: string]: any
+    [key: string]: Keyset
   }
   primaryKeysetName: string
   // TODO: add other entries

diff --git a/projects/wallet-template/src/containers/WalletPopup/pages/Accounts/Accounts.tsx b/projects/wallet-template/src/containers/WalletPopup/pages/Accounts/Accounts.tsx
@@ -6,14 +6,12 @@ import {
   RotateCcw,
   PlusCircle,
 } from "lucide-react"
-import { Link, useNavigate, useLocation } from "react-router-dom"
+import { Link, useNavigate } from "react-router-dom"
 import { ss58Address } from "@polkadot-labs/hdkd-helpers"
 import { rpc } from "../../api"
-import useSWR from "swr"
+import useSWR, { useSWRConfig } from "swr"
 import { IconButton } from "../../../../components"
 import { Keyset } from "../../../../background/types"
-import { useEffect, useState } from "react"
-import { ulid } from "@std/ulid"
 
 type AccountItemProps = {
   bgColor: string
@@ -111,27 +109,33 @@ const AccountsList: React.FC<AccountsListProps> = ({ keysetName, keyset }) => {
 
 export const Accounts = () => {
   const navigate = useNavigate()
-  const location = useLocation()
-  const [fetchId, setFetchId] = useState(ulid())
-  const { data } = useSWR(`/rpc/keysets/:primary/${fetchId}`, async () => {
-    const primaryKeysetName = await rpc.client.getPrimaryKeysetName()
-    const keysets = await rpc.client.listKeysets()
-
-    if (primaryKeysetName && keysets[primaryKeysetName]) {
-      return [primaryKeysetName, keysets[primaryKeysetName]] as const
-    } else if (keysets && Object.entries(keysets).length > 0) {
-      return Object.entries(keysets)[0]
-    } else {
-      return
-    }
-  })
-
-  useEffect(() => {
-    setFetchId(ulid())
-  }, [location])
+  const { mutate } = useSWRConfig()
+  const { data: keysets } = useSWR(
+    "/rpc/keysets",
+    () => rpc.client.listKeysets(),
+    { revalidateOnFocus: true },
+  )
+  const { data: primaryKeysetName } = useSWR(
+    "/rpc/primaryKeysetName",
+    () => rpc.client.getPrimaryKeysetName(),
+    { revalidateOnFocus: true },
+  )
+  const { data: keyset } = useSWR(
+    keysets && primaryKeysetName ? `/rpc/keysets/${primaryKeysetName}` : null,
+    async () => {
+      if (keysets![primaryKeysetName!]) {
+        return [primaryKeysetName!, keysets![primaryKeysetName!]] as const
+      } else if (keysets && Object.entries(keysets).length > 0) {
+        return Object.entries(keysets)[0]
+      } else {
+        return
+      }
+    },
+  )
 
   const reset = async () => {
     await rpc.client.clearKeysets()
+    await mutate("/rpc/keysets")
     navigate(0)
   }
 
@@ -149,10 +153,10 @@ export const Accounts = () => {
                   <Plus />
                 </IconButton>
               </Link>
-              <IconButton disabled={!data}>
+              <IconButton disabled={!keyset}>
                 <Link
                   to="/accounts/switch"
-                  className={!data ? "pointer-events-none" : ""}
+                  className={!keyset ? "pointer-events-none" : ""}
                 >
                   <ArrowRightLeft />
                 </Link>
@@ -163,8 +167,8 @@ export const Accounts = () => {
             </div>
           </div>
         </div>
-        {data ? (
-          <AccountsList keysetName={data[0]} keyset={data[1]} />
+        {keyset ? (
+          <AccountsList keysetName={keyset[0]} keyset={keyset[1]} />
         ) : (
           <EmptyAccounts />
         )}

diff --git a/projects/wallet-template/src/containers/WalletPopup/pages/Accounts/AddAccount/index.tsx b/projects/wallet-template/src/containers/WalletPopup/pages/Accounts/AddAccount/index.tsx
@@ -1,5 +1,5 @@
 import { ArrowRight, CheckCircle, Copy } from "lucide-react"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import {
   entropyToMiniSecret,
   generateMnemonic,
@@ -11,7 +11,7 @@ import { toHex } from "@polkadot-api/utils"
 import { useNavigate } from "react-router-dom"
 import { rpc } from "../../../api"
 import { StepIndicator } from "../../../components"
-import useSWR from "swr"
+import useSWR, { useSWRConfig } from "swr"
 import { sr25519CreateDerive } from "@polkadot-labs/hdkd"
 
 type FormFields = {
@@ -22,11 +22,11 @@ type FormFields = {
 export const AddAccount = () => {
   const navigate = useNavigate()
   const [mnemonic, _] = useState(generateMnemonic(256).split(" "))
-  const { data: keysets, isLoading: isKeysetsLoading } = useSWR(
+  const { mutate } = useSWRConfig()
+  const { data: keysets, isLoading: areKeysetsLoading } = useSWR(
     "/rpc/keysets",
-    async () => {
-      return rpc.client.listKeysets()
-    },
+    () => rpc.client.listKeysets(),
+    { revalidateOnFocus: true },
   )
 
   // HACK: work around for double submit
@@ -67,6 +67,8 @@ export const AddAccount = () => {
         scheme: "Sr25519",
         derivationPaths,
       })
+      await rpc.client.setPrimaryKeysetName(data.keysetName)
+      mutate(["/rpc/keysets", "/rpc/primaryKeysetName"])
     } finally {
       navigate("/accounts")
     }
@@ -234,7 +236,7 @@ export const AddAccount = () => {
                 type="button"
                 onClick={nextStep}
                 className="flex items-center px-4 py-2 text-white bg-teal-500 rounded hover:bg-teal-600"
-                disabled={isKeysetsLoading || isSubmitting}
+                disabled={areKeysetsLoading || isSubmitting}
               >
                 Next <ArrowRight size="16" className="ml-2" />
               </button>

diff --git a/projects/wallet-template/src/containers/WalletPopup/pages/Accounts/SwitchAccount.tsx b/projects/wallet-template/src/containers/WalletPopup/pages/Accounts/SwitchAccount.tsx
@@ -1,6 +1,6 @@
 import { User } from "lucide-react"
 import React, { useEffect, useState } from "react"
-import useSWR from "swr"
+import useSWR, { useSWRConfig } from "swr"
 import { rpc } from "../../api"
 import { RadioGroup } from "@headlessui/react"
 import { SubmitHandler, useForm } from "react-hook-form"
@@ -9,9 +9,12 @@ import { useNavigate } from "react-router-dom"
 export const SwitchAccount: React.FC = () => {
   const navigate = useNavigate()
 
-  const { data: keysets } = useSWR("/rpc/keysets", async () => {
-    return rpc.client.listKeysets()
-  })
+  const { mutate } = useSWRConfig()
+  const { data: keysets } = useSWR(
+    "/rpc/keysets",
+    () => rpc.client.listKeysets(),
+    { revalidateOnFocus: true },
+  )
 
   const [selectedKeysetName, setSelectedKeysetName] = useState<string>("")
   const { handleSubmit } = useForm()
@@ -28,6 +31,7 @@ export const SwitchAccount: React.FC = () => {
   const onSubmit: SubmitHandler<Record<string, any>> = async () => {
     try {
       await rpc.client.setPrimaryKeysetName(selectedKeysetName)
+      await mutate("/rpc/primaryKeysetName")
     } finally {
       navigate("/accounts")
     }