diff --git a/packages/ui-react/lib/components/Connect/ConnectAccounts.tsx b/packages/ui-react/lib/components/Connect/ConnectAccounts.tsx index 3a2f66c0..ad189e51 100644 --- a/packages/ui-react/lib/components/Connect/ConnectAccounts.tsx +++ b/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() diff --git a/packages/ui-react/lib/components/Connect/ConnectExtensions.tsx b/packages/ui-react/lib/components/Connect/ConnectExtensions.tsx index 87ad1599..97dae2d9 100644 --- a/packages/ui-react/lib/components/Connect/ConnectExtensions.tsx +++ b/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([]) const availXts = useAvailableExtensions() diff --git a/packages/ui-react/lib/components/Connect/hooks.tsx b/packages/ui-react/lib/components/Connect/hooks.tsx index 26a124cc..ed855598 100644 --- a/packages/ui-react/lib/components/Connect/hooks.tsx +++ b/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[] diff --git a/packages/ui-react/lib/components/Connect/index.ts b/packages/ui-react/lib/components/Connect/index.ts index 1ef99b53..aa7a62f2 100644 --- a/packages/ui-react/lib/components/Connect/index.ts +++ b/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 { diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json index 6e830252..8e4b23ed 100644 --- a/packages/ui-react/package.json +++ b/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", "type": "module", "description": "Functional React components for Polkadot dApps.",