fix the hooks

packages/ui-react/lib/components/Connect/ConnectAccounts.tsx

@@ -10,12 +10,11 @@ import type {
   InjectedExtension,
   InjectedPolkadotAccount,
 } from "polkadot-api/pjs-signer"
-import { useConnectLocalStorage, useSelectedExtensions } from "./hooks"
+import { useAccountLocalStorage, useSelectedExtensions } from "./hooks"
 import { SignerCtx } from "./signerCtx"
 
 import { getExtensionIcon } from "@polkadot-ui/assets/extensions"
 import type { CommonConfigType, ConnectConfiguration } from "./types"
-import { localStorageKeyAccount } from "./utils"
 
 const AccountsList: React.FC<{
   extension: InjectedExtension
@@ -30,10 +29,7 @@ const AccountsList: React.FC<{
     extension.getAccounts
   )
 
-  const [accountLocalStorage, setAccountLocalStorage] = useConnectLocalStorage(
-    localStorageKeyAccount,
-    ""
-  )
+  const [accountLocalStorage, setAccountLocalStorage] = useAccountLocalStorage()
 
   useEffect(() => {
     const accounts = extension.getAccounts()

packages/ui-react/lib/components/Connect/ConnectExtensions.tsx

@@ -3,10 +3,10 @@ import type { Dispatch, PropsWithChildren, SetStateAction } from "react"
 import { useEffect, useState, useSyncExternalStore } from "react"
 import { extensionCtx } from "./extensionCtx"
 import { getExtensionIcon } from "@polkadot-ui/assets/extensions"
-import { useAvailableExtensions, useConnectLocalStorage } from "./hooks"
+import { useAvailableExtensions, useExtLocalStorage } from "./hooks"
 import type { ConnectConfiguration, NameUrlType } from "./types"
 import { Any } from "../../utils"
-import { getExtensionsStore, localStorageKeyExtensions } from "./utils"
+import { getExtensionsStore } from "./utils"
 import {
   InjectedExtension,
   InjectedPolkadotAccount,
@@ -55,8 +55,7 @@ export const ConnectExtensions: FC<
   onSelectExtensions,
   getConnectedAccounts,
 }) => {
-  const [extensionLocalStorage, setExtensionLocalStorage] =
-    useConnectLocalStorage(localStorageKeyExtensions, "")
+  const [extensionLocalStorage, setExtensionLocalStorage] = useExtLocalStorage()
 
   const [nonInstalledXts, setNonInstalledXts] = useState<NameUrlType[]>([])
   const availXts = useAvailableExtensions()

packages/ui-react/lib/components/Connect/hooks.tsx

@@ -43,15 +43,33 @@ export const useAvailableExtensions = (): string[] => {
   return useMemo(() => extensions?.split(",") ?? [], [extensions])
 }
 
-export const useConnectLocalStorage = (key: string, defaultValue: string) => {
+export const useAccountLocalStorage = () => {
+  const [value, setValue] = useState(() => {
+    const getStorageValue = () => {
+      const saved = localStorage.getItem(localStorageKeyAccount)
+      const initial = saved ? JSON.parse(saved) : ""
+      return initial || ""
+    }
+
+    return getStorageValue()
+  })
+
+  useEffect(() => {
+    localStorage.setItem(localStorageKeyAccount, JSON.stringify(value))
+  }, [value])
+
+  return [value, setValue]
+}
+
+export const useExtLocalStorage = () => {
   const [value, setLocal] = useState(() => {
-    const getStorageValue = (key: string, defaultValue: string) => {
-      const saved = localStorage.getItem(key)
+    const getStorageValue = () => {
+      const saved = localStorage.getItem(localStorageKeyExtensions)
       const initial = JSON.parse(saved)
-      return initial || defaultValue
+      return initial || ""
     }
 
-    return getStorageValue(key, defaultValue)
+    return getStorageValue()
   })
 
   const setValue = (name: string) => {
@@ -60,19 +78,20 @@ export const useConnectLocalStorage = (key: string, defaultValue: string) => {
     if (a.includes(name)) {
       const index = a.indexOf(name)
       if (index > -1) a.splice(index, 1)
-      b = a
+      b = a.filter((c) => c)
     } else {
-      b = [...a, name]
+      b = [...a, name].filter((c) => c)
     }
+
     setLocal(b.join(","))
   }
 
   useEffect(() => {
-    localStorage.setItem(key, JSON.stringify(value))
-  }, [key, value])
+    localStorage.setItem(localStorageKeyExtensions, JSON.stringify(value))
+  }, [value])
 
   const removeItem = () => {
-    localStorage.removeItem(key)
+    localStorage.removeItem(localStorageKeyExtensions)
   }
 
   return [value, setValue, removeItem]
@@ -89,13 +108,10 @@ export const useExtensionAccounts = () => {
 const extensionsStore = getExtensionsStore()
 
 export const useConnect = () => {
-  const [extensionLocalStorage, , removeExtItem] = useConnectLocalStorage(
-    localStorageKeyExtensions,
-    ""
-  )
+  const [extensionLocalStorage, , removeExtItem] = useExtLocalStorage()
 
   const [accountLocalStorage, setAccountLocalStorage, remAccItem] =
-    useConnectLocalStorage(localStorageKeyAccount, "")
+    useAccountLocalStorage()
 
   const [connectedAccounts, setConnectedAccounts] = useState<
     InjectedPolkadotAccount[]

packages/ui-react/lib/components/Connect/index.ts

@@ -6,7 +6,8 @@ export {
   useSelectedExtensions,
   useAvailableExtensions,
   useConnect,
-  useConnectLocalStorage,
+  useAccountLocalStorage,
+  useExtLocalStorage,
 } from "./hooks"
 export { Provider as ConnectAccountsProvider } from "./extensionCtx"
 export type {

packages/ui-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@polkadot-ui/react",
   "license": "MIT",
-  "version": "0.0.1-alpha.31",
+  "version": "0.0.1-alpha.32",
   "author": "Nikolaos Kontakis<[email protected]>",
   "type": "module",
   "description": "Functional React components for Polkadot dApps.",