From 0457d16ae3d04f83618a091c956b7da2fd0c7895 Mon Sep 17 00:00:00 2001 From: Nikos Kontakis Date: Sun, 8 Sep 2024 15:47:32 +0300 Subject: [PATCH 1/7] Change wallet --- package.json | 5 +-- pnpm-lock.yaml | 12 +++--- src/App.tsx | 44 ++++++++++----------- src/components/ui/dialog.tsx | 2 +- src/contexts/AccountsContext.tsx | 38 +++++++++++++------ src/header.tsx | 65 ++++++++++++++++++++------------ src/lib/utils.ts | 15 ++++++++ src/redot.d.ts | 7 ---- src/walletConfigs.ts | 20 ---------- 9 files changed, 110 insertions(+), 98 deletions(-) delete mode 100644 src/redot.d.ts delete mode 100644 src/walletConfigs.ts diff --git a/package.json b/package.json index 93f101c..ade7afd 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ }, "dependencies": { "@polkadot-api/descriptors": "file:.papi/descriptors", - "@polkadot-ui/react": "0.0.1-alpha.15", + "@polkadot-ui/react": "0.0.1-alpha.30", "@polkadot-ui/utils": "0.0.1-alpha.5", "@radix-ui/react-dialog": "^1.1.1", "@radix-ui/react-dropdown-menu": "^2.1.1", @@ -31,13 +31,10 @@ "@radix-ui/react-toggle": "^1.1.0", "@radix-ui/react-toggle-group": "^1.1.0", "@radix-ui/react-tooltip": "^1.1.2", - "@reactive-dot/core": "^0.10.0", - "@reactive-dot/react": "^0.10.0", "@tanstack/react-table": "^8.20.5", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "copy-to-clipboard": "^3.3.3", - "dot-connect": "^0.6.0", "lucide-react": "^0.437.0", "next-themes": "^0.3.0", "polkadot-api": "^1.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 02c6ec5..6d588d4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -12,8 +12,8 @@ importers: specifier: file:.papi/descriptors version: file:.papi/descriptors(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1)) '@polkadot-ui/react': - specifier: 0.0.1-alpha.15 - version: 0.0.1-alpha.15(@noble/hashes@1.5.0)(@polkadot-api/substrate-bindings@0.6.3)(@polkadot-ui/assets@0.0.1-alpha.2)(@polkadot-ui/core@0.0.1-alpha.2)(@polkadot-ui/utils@0.0.1-alpha.5(@polkadot/keyring@13.0.2(@polkadot/util-crypto@13.0.2(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 0.0.1-alpha.30 + version: 0.0.1-alpha.30(@noble/hashes@1.5.0)(@polkadot-api/substrate-bindings@0.6.3)(@polkadot-ui/assets@0.0.1-alpha.2)(@polkadot-ui/core@0.0.1-alpha.2)(@polkadot-ui/utils@0.0.1-alpha.5(@polkadot/keyring@13.0.2(@polkadot/util-crypto@13.0.2(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@polkadot-ui/utils': specifier: 0.0.1-alpha.5 version: 0.0.1-alpha.5(@polkadot/keyring@13.0.2(@polkadot/util-crypto@13.0.2(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(@polkadot/util@13.0.2) @@ -743,15 +743,15 @@ packages: '@polkadot-ui/core@0.0.1-alpha.2': resolution: {integrity: sha512-gXEgPwN/fD+pSJVmgvFUE6PJWcp2I+v3Kp2kbRn78bLUwYIuc0pfURcuINK1rE/URyTjvKSmMqyfsERNAdp1iQ==} - '@polkadot-ui/react@0.0.1-alpha.15': - resolution: {integrity: sha512-QRaCFsS1ii6s4Ww9E4W0iHEValwoutR78xtvFO8TiOFZt3WtqT5M9g6SEThqcL9GGWdg+GictoQw/1QQna/7iw==} + '@polkadot-ui/react@0.0.1-alpha.30': + resolution: {integrity: sha512-7ITBPYRxMTu4L9UgIexyUHkl7Hs/h5LUHhZwUPbUhjdzWMIWXGo6lEclkR3Siss1TNZR4TZiNb9K/jzXySfTtg==} peerDependencies: '@noble/hashes': ^1.4.0 '@polkadot-api/substrate-bindings': ^0.6.0 '@polkadot-ui/assets': 0.0.1-alpha.2 '@polkadot-ui/core': ^0.0.1-alpha.2 '@polkadot-ui/utils': ^0.0.1-alpha.5 - polkadot-api: ^0.12.0 + polkadot-api: ^1.1.0 react: ^18.2.0 react-dom: ^18.2.0 @@ -3757,7 +3757,7 @@ snapshots: '@polkadot-ui/core@0.0.1-alpha.2': {} - '@polkadot-ui/react@0.0.1-alpha.15(@noble/hashes@1.5.0)(@polkadot-api/substrate-bindings@0.6.3)(@polkadot-ui/assets@0.0.1-alpha.2)(@polkadot-ui/core@0.0.1-alpha.2)(@polkadot-ui/utils@0.0.1-alpha.5(@polkadot/keyring@13.0.2(@polkadot/util-crypto@13.0.2(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@polkadot-ui/react@0.0.1-alpha.30(@noble/hashes@1.5.0)(@polkadot-api/substrate-bindings@0.6.3)(@polkadot-ui/assets@0.0.1-alpha.2)(@polkadot-ui/core@0.0.1-alpha.2)(@polkadot-ui/utils@0.0.1-alpha.5(@polkadot/keyring@13.0.2(@polkadot/util-crypto@13.0.2(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@noble/hashes': 1.5.0 '@polkadot-api/substrate-bindings': 0.6.3 diff --git a/src/App.tsx b/src/App.tsx index 9ce73af..da48c8c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,8 +7,6 @@ import { Toaster } from '@/components/ui/sonner' import './index.css' import { Content } from './Content' import 'dot-connect/font.css' -import { config } from './walletConfigs' -import { ReDotProvider, ReDotChainProvider } from '@reactive-dot/react' import { Suspense } from 'react' import { AccountContextProvider } from './contexts/AccountsContext' import { LocksContextProvider } from './contexts/LocksContext' @@ -25,29 +23,25 @@ const App = () => { return ( - - - Loading...}> - - - - - -
- -
-
- -
-
- - - - - - - - + Loading...}> + + + + + +
+ +
+
+ +
+
+ + + + + + diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx index 330ecba..c16cf3e 100644 --- a/src/components/ui/dialog.tsx +++ b/src/components/ui/dialog.tsx @@ -36,7 +36,7 @@ const DialogContent = React.forwardRef< > accounts: InjectedPolkadotAccount[] selectAccount: (account: InjectedPolkadotAccount | undefined) => void } @@ -24,15 +26,28 @@ export interface IAccountContext { const AccountContext = createContext(undefined) const AccountContextProvider = ({ children }: AccountContextProps) => { - const accounts = useRedotAccounts() - const [selectedAccount, setSelected] = useState< - InjectedPolkadotAccount | undefined - >() const [ localStorageAccount, setLocalStorageAccount, removeLocalStorageAccount, - ] = useLocalStorage(SELECTED_ACCOUNT_KEY, '') + ] = useLocalStorage(localStorageKeyAccount, '') + + const { connectedAccounts, connectedExtensions } = useConnect() + + const [connAccounts, setConnAccounts] = + useState(connectedAccounts) + + useEffect(() => { + const acc: InjectedPolkadotAccount[] = [] + for (const [, value] of connectedExtensions) { + acc.push(...value.getAccounts()) + } + setConnAccounts(acc) + }, [connectedExtensions]) + + const [selectedAccount, setSelected] = useState< + InjectedPolkadotAccount | undefined + >() const selectAccount = useCallback( (account: InjectedPolkadotAccount | undefined) => { @@ -49,21 +64,22 @@ const AccountContextProvider = ({ children }: AccountContextProps) => { useEffect(() => { if (localStorageAccount) { - const account = accounts.find( + const account = connAccounts.find( (account) => account.address === localStorageAccount, ) if (account) { selectAccount(account) } } else { - selectAccount(accounts[0]) + // selectAccount(connAccounts[0]) } - }, [accounts, localStorageAccount, selectAccount]) + }, [connAccounts, localStorageAccount, selectAccount]) return ( { const { network, setNetwork } = useNetwork() + const [sAccount, setSAccount] = useState( + {} as InjectedPolkadotAccount, + ) const { accounts, selectAccount, selectedAccount } = useAccounts() - const [, disconnectAll] = useWalletDisconnector() - const [isConnectionDialiogOpen, setIsConnectionDialiogOpen] = useState(false) + + useEffect(() => { + selectAccount(sAccount) + }, [sAccount, selectAccount]) useEffect(() => { if (!selectedAccount?.address && accounts.length > 0) { @@ -56,6 +66,13 @@ export const Header = () => { } }, [accounts, selectAccount, selectedAccount?.address]) + const [modalOpen, setModalOpen] = useState(false) + + const connectConfig: ConnectConfiguration = { + downloadIcon: , + disconnectIcon: , + } + return ( <>
@@ -124,10 +141,24 @@ export const Header = () => { ))} + {!accounts.length && ( - + setModalOpen(v)} open={modalOpen}> + + + + + +
Connect
+ + + + )} {!!accounts.length && ( @@ -168,26 +199,12 @@ export const Header = () => { )} ))} - { - disconnectAll() - selectAccount(undefined) - }} - > - Logout - )}
- setIsConnectionDialiogOpen(false)} - /> ) } diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 0473993..886aec0 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -10,6 +10,9 @@ import { InjectedPolkadotAccount } from 'polkadot-api/pjs-signer' import { DEFAULT_TIME, lockPeriod, ONE_DAY, THRESHOLD } from './constants' import { bnMin } from './bnMin' import { DelegationLock, LockType, VoteLock } from '@/contexts/LocksContext' +import { useEffect, useRef } from 'react' +import { Any } from '@polkadot-ui/react' +import React from 'react' export const cn = (...inputs: ClassValue[]) => { return twMerge(clsx(inputs)) @@ -107,3 +110,15 @@ export const getLockTimes = async (api: ApiType) => { {} as Record, ) } + +export const usePrevious = (value: T): T | null => { + const [current, setCurrent] = React.useState(value) + const [previous, setPrevious] = React.useState(null) + + if (value !== current) { + setPrevious(current) + setCurrent(value) + } + + return previous +} diff --git a/src/redot.d.ts b/src/redot.d.ts deleted file mode 100644 index 998b8f2..0000000 --- a/src/redot.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -import type { config } from './walletConfigs' -import type { InferChains } from '@reactive-dot/core' - -declare module '@reactive-dot/core' { - // eslint-disable-next-line @typescript-eslint/no-empty-object-type - export interface Chains extends InferChains {} -} diff --git a/src/walletConfigs.ts b/src/walletConfigs.ts deleted file mode 100644 index 47770e7..0000000 --- a/src/walletConfigs.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { dot } from '@polkadot-api/descriptors' -import type { Config } from '@reactive-dot/core' -import { InjectedWalletAggregator } from '@reactive-dot/core/wallets.js' -import { registerDotConnect } from 'dot-connect' -import { getWsProvider } from 'polkadot-api/ws-provider/web' - -export const config = { - chains: { - polkadot: { - descriptor: dot, - provider: getWsProvider('wss://dot-rpc.stakeworld.io'), - }, - }, - wallets: [new InjectedWalletAggregator()], -} satisfies Config - -// Register dot-connect custom elements & configure supported wallets -registerDotConnect({ - wallets: config.wallets, -}) From 31f5c35b1ff12a2f1e96ea947e6be2d7cfbf2d60 Mon Sep 17 00:00:00 2001 From: Nikos Kontakis Date: Sun, 8 Sep 2024 15:51:10 +0300 Subject: [PATCH 2/7] Remove dependency --- pnpm-lock.yaml | 273 ------------------------------------------------- src/App.tsx | 1 - 2 files changed, 274 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6d588d4..148447c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -50,12 +50,6 @@ importers: '@radix-ui/react-tooltip': specifier: ^1.1.2 version: 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@reactive-dot/core': - specifier: ^0.10.0 - version: 0.10.0(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1)) - '@reactive-dot/react': - specifier: ^0.10.0 - version: 0.10.0(@types/react@18.3.5)(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1))(react@18.3.1) '@tanstack/react-table': specifier: ^8.20.5 version: 8.20.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -68,9 +62,6 @@ importers: copy-to-clipboard: specifier: ^3.3.3 version: 3.3.3 - dot-connect: - specifier: ^0.6.0 - version: 0.6.0(@reactive-dot/core@0.10.0(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1)))(@types/react@18.3.5)(react@18.3.1) lucide-react: specifier: ^0.437.0 version: 0.437.0(react@18.3.1) @@ -621,20 +612,6 @@ packages: '@jridgewell/trace-mapping@0.3.25': resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==} - '@lit-labs/preact-signals@1.0.2': - resolution: {integrity: sha512-HFgIhqLB5IiNbvJxEN3+o6n9x/fNZo7pqfElG56NHrOFBsIFW7wswbp6hHeoGzATQDOB2ZmrH/VrRGYdcgl29g==} - - '@lit-labs/ssr-dom-shim@1.2.1': - resolution: {integrity: sha512-wx4aBmgeGvFmOKucFKY+8VFJSYZxs9poN3SDNQFF6lT6NrQUnHiPB2PWz2sc4ieEcAaYYzN+1uWahEeTq2aRIQ==} - - '@lit/react@1.0.5': - resolution: {integrity: sha512-RSHhrcuSMa4vzhqiTenzXvtQ6QDq3hSPsnHHO3jaPmmvVFeoNNm4DHoQ0zLdKAUvY3wP3tTENSUf7xpyVfrDEA==} - peerDependencies: - '@types/react': 17 || 18 - - '@lit/reactive-element@2.0.4': - resolution: {integrity: sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==} - '@noble/curves@1.6.0': resolution: {integrity: sha512-TlaHRXDehJuRNR9TfZDNQ45mMEd5dwUwmicsafcIX4SsNiqnCHKjE/1alYPd/lDRVhxdhUAlv8uEhMCI5zjIJQ==} engines: {node: ^14.21.3 || >=16} @@ -844,9 +821,6 @@ packages: resolution: {integrity: sha512-Lq08H2OnVXj97uaOwg7tcmRS7a4VJYkHEeWO4FyEMOk6P6lU6W8OVNjjxG0se9PCEgmyZPUDbJI//1ynzP4cXw==} engines: {node: '>=18'} - '@preact/signals-core@1.8.0': - resolution: {integrity: sha512-OBvUsRZqNmjzCZXWLxkZfhcgT+Fk8DDcT/8vD6a1xhDemodyy87UJRJfASMuSD8FaAIeGgGm85ydXhm7lr4fyA==} - '@radix-ui/number@1.1.0': resolution: {integrity: sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==} @@ -1246,26 +1220,6 @@ packages: '@radix-ui/rect@1.1.0': resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==} - '@reactive-dot/core@0.10.0': - resolution: {integrity: sha512-CC19qv3ETZI3/H+BNy202dRcVccjyXZgFG9g88NKAoBMTbvibXEBnIoI1/IvGHgDqACnmchk9OuyTJhFhRnYEg==} - peerDependencies: - '@walletconnect/modal': 2.x - '@walletconnect/universal-provider': 2.x - polkadot-api: ^1.0.0 - peerDependenciesMeta: - '@walletconnect/modal': - optional: true - '@walletconnect/universal-provider': - optional: true - - '@reactive-dot/react@0.10.0': - resolution: {integrity: sha512-9u0GuyQ2sqTZUnpYZLsqZ31AwZyIl6T24m2bTnJ5t6uq657ufNvnN0YmIa0md3UyvAyxnGxtzhohh+XCODYxyQ==} - peerDependencies: - react: 18.x - - '@reactive-dot/utils@0.8.0': - resolution: {integrity: sha512-7jHOQB3LvVk+ro/HUeL4Xy1ruE1+Ct9WOc8ULIWIbqOUtWjcxg52kkpSJmfRcPLDVw/ni9bDlKPCHIFVitFf1w==} - '@remix-run/router@1.19.1': resolution: {integrity: sha512-S45oynt/WH19bHbIXjtli6QmwNYvaz+vtnubvNpNDvUOoA/OWh6j1OikIP3G+v5GHdxyC6EXoChG3HgYGEUfcg==} engines: {node: '>=14.0.0'} @@ -1499,9 +1453,6 @@ packages: '@types/react@18.3.5': resolution: {integrity: sha512-WeqMfGJLGuLCqHGYRGHxnKrXcTitc6L/nBUWfWPcTarG3t9PsquqUMuVeXZeca+mglY4Vo5GZjCi0A3Or2lnxA==} - '@types/trusted-types@2.0.7': - resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==} - '@typescript-eslint/eslint-plugin@8.3.0': resolution: {integrity: sha512-FLAIn63G5KH+adZosDYiutqkOkYEx0nvcwNNfJAf+c7Ae/H35qWwTYvPZUKFj5AS+WfHG/WJJfWnDnyNUlp8UA==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} @@ -1683,10 +1634,6 @@ packages: resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==} engines: {node: '>= 6'} - camelcase@5.3.1: - resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==} - engines: {node: '>=6'} - camelcase@6.3.0: resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==} engines: {node: '>=10'} @@ -1721,9 +1668,6 @@ packages: resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==} engines: {node: '>=6'} - cliui@6.0.0: - resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==} - clsx@2.0.0: resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==} engines: {node: '>=6'} @@ -1803,10 +1747,6 @@ packages: supports-color: optional: true - decamelize@1.2.0: - resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==} - engines: {node: '>=0.10.0'} - deep-is@0.1.4: resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==} @@ -1824,9 +1764,6 @@ packages: didyoumean@1.2.2: resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==} - dijkstrajs@1.0.3: - resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==} - dir-glob@3.0.1: resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==} engines: {node: '>=8'} @@ -1841,15 +1778,6 @@ packages: dot-case@3.0.4: resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==} - dot-connect@0.6.0: - resolution: {integrity: sha512-eFZsPjnRBLwhERBNRGTx0h2tHMfZSV5LTpoQIHcsaJVyjGbKRl1KEhALnaBILgZUwYeD7nrpXeQAtcwPBbLupQ==} - peerDependencies: - '@reactive-dot/core': '*' - react: '>= 18' - peerDependenciesMeta: - react: - optional: true - eastasianwidth@0.2.0: resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==} @@ -2042,10 +1970,6 @@ packages: resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==} engines: {node: '>=6.9.0'} - get-caller-file@2.0.5: - resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==} - engines: {node: 6.* || 8.* || >= 10.*} - get-east-asian-width@1.2.0: resolution: {integrity: sha512-2nk+7SIVb14QrgXFHcm84tD4bKQz0RxPuMT8Ag5KPOq7J5fEmAg0UbXdTOSHqNuHSU28k55qnceesxXRZGzKWA==} engines: {node: '>=18'} @@ -2224,24 +2148,6 @@ packages: resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==} hasBin: true - jotai-scope@0.7.2: - resolution: {integrity: sha512-Gwed97f3dDObrO43++2lRcgOqw4O2sdr4JCjP/7eHK1oPACDJ7xKHGScpJX9XaflU+KBHXF+VhwECnzcaQiShg==} - peerDependencies: - jotai: '>=2.9.2' - react: '>=17.0.0' - - jotai@2.9.3: - resolution: {integrity: sha512-IqMWKoXuEzWSShjd9UhalNsRGbdju5G2FrqNLQJT+Ih6p41VNYe2sav5hnwQx4HJr25jq9wRqvGSWGviGG6Gjw==} - engines: {node: '>=12.20.0'} - peerDependencies: - '@types/react': '>=17.0.0' - react: '>=17.0.0' - peerDependenciesMeta: - '@types/react': - optional: true - react: - optional: true - joycon@3.1.1: resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==} engines: {node: '>=10'} @@ -2296,15 +2202,6 @@ packages: lines-and-columns@1.2.4: resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} - lit-element@4.1.0: - resolution: {integrity: sha512-gSejRUQJuMQjV2Z59KAS/D4iElUhwKpIyJvZ9w+DIagIQjfJnhR20h2Q5ddpzXGS+fF0tMZ/xEYGMnKmaI/iww==} - - lit-html@3.2.0: - resolution: {integrity: sha512-pwT/HwoxqI9FggTrYVarkBKFN9MlTUpLrDHubTmW4SrkL3kkqW5gxwbxMMUnbbRHBC0WTZnYHcjDSCM559VyfA==} - - lit@3.2.0: - resolution: {integrity: sha512-s6tI33Lf6VpDu7u4YqsSX78D28bYQulM+VAzsGch4fx2H0eLZnJsUBsPWmGYSGoKDNbjtRv02rio1o+UdPVwvw==} - load-tsconfig@0.2.5: resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} @@ -2548,10 +2445,6 @@ packages: resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==} engines: {node: '>=8'} - pngjs@5.0.0: - resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==} - engines: {node: '>=10.13.0'} - polkadot-api@1.1.0: resolution: {integrity: sha512-WIfOS1xlqL6jYAOKvO7DVGFg4Hd1rVJ0N4tu3G2eQMzQq2yMrtVPA6QOKVlan6xtj9xfhXNmSTbMtsgFqLYmyA==} hasBin: true @@ -2689,11 +2582,6 @@ packages: resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==} engines: {node: '>=6'} - qrcode@1.5.4: - resolution: {integrity: sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==} - engines: {node: '>=10.13.0'} - hasBin: true - queue-microtask@1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} @@ -2769,13 +2657,6 @@ packages: resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} engines: {node: '>=8.10.0'} - require-directory@2.1.1: - resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==} - engines: {node: '>=0.10.0'} - - require-main-filename@2.0.0: - resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==} - resolve-from@4.0.0: resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==} engines: {node: '>=4'} @@ -2827,9 +2708,6 @@ packages: engines: {node: '>=10'} hasBin: true - set-blocking@2.0.0: - resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==} - shebang-command@2.0.0: resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==} engines: {node: '>=8'} @@ -3138,9 +3016,6 @@ packages: whatwg-url@7.1.0: resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==} - which-module@2.0.1: - resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==} - which@2.0.2: resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==} engines: {node: '>= 8'} @@ -3150,10 +3025,6 @@ packages: resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==} engines: {node: '>=0.10.0'} - wrap-ansi@6.2.0: - resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==} - engines: {node: '>=8'} - wrap-ansi@7.0.0: resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==} engines: {node: '>=10'} @@ -3189,9 +3060,6 @@ packages: utf-8-validate: optional: true - y18n@4.0.3: - resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==} - yallist@3.1.1: resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==} @@ -3205,14 +3073,6 @@ packages: engines: {node: '>= 14'} hasBin: true - yargs-parser@18.1.3: - resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==} - engines: {node: '>=6'} - - yargs@15.4.1: - resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==} - engines: {node: '>=8'} - yocto-queue@0.1.0: resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} engines: {node: '>=10'} @@ -3577,21 +3437,6 @@ snapshots: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.5.0 - '@lit-labs/preact-signals@1.0.2': - dependencies: - '@preact/signals-core': 1.8.0 - lit: 3.2.0 - - '@lit-labs/ssr-dom-shim@1.2.1': {} - - '@lit/react@1.0.5(@types/react@18.3.5)': - dependencies: - '@types/react': 18.3.5 - - '@lit/reactive-element@2.0.4': - dependencies: - '@lit-labs/ssr-dom-shim': 1.2.1 - '@noble/curves@1.6.0': dependencies: '@noble/hashes': 1.5.0 @@ -3878,8 +3723,6 @@ snapshots: '@polkadot/x-global': 13.0.2 tslib: 2.7.0 - '@preact/signals-core@1.8.0': {} - '@radix-ui/number@1.1.0': {} '@radix-ui/primitive@1.1.0': {} @@ -4295,25 +4138,6 @@ snapshots: '@radix-ui/rect@1.1.0': {} - '@reactive-dot/core@0.10.0(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1))': - dependencies: - '@reactive-dot/utils': 0.8.0 - polkadot-api: 1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1) - - '@reactive-dot/react@0.10.0(@types/react@18.3.5)(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1))(react@18.3.1)': - dependencies: - '@reactive-dot/core': 0.10.0(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1)) - jotai: 2.9.3(@types/react@18.3.5)(react@18.3.1) - jotai-scope: 0.7.2(jotai@2.9.3(@types/react@18.3.5)(react@18.3.1))(react@18.3.1) - react: 18.3.1 - transitivePeerDependencies: - - '@types/react' - - '@walletconnect/modal' - - '@walletconnect/universal-provider' - - polkadot-api - - '@reactive-dot/utils@0.8.0': {} - '@remix-run/router@1.19.1': {} '@rollup/pluginutils@5.1.0(rollup@4.21.2)': @@ -4521,8 +4345,6 @@ snapshots: '@types/prop-types': 15.7.12 csstype: 3.1.3 - '@types/trusted-types@2.0.7': {} - '@typescript-eslint/eslint-plugin@8.3.0(@typescript-eslint/parser@8.3.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4)': dependencies: '@eslint-community/regexpp': 4.11.0 @@ -4716,8 +4538,6 @@ snapshots: camelcase-css@2.0.1: {} - camelcase@5.3.1: {} - camelcase@6.3.0: {} caniuse-lite@1.0.30001655: {} @@ -4757,12 +4577,6 @@ snapshots: cli-spinners@2.9.2: {} - cliui@6.0.0: - dependencies: - string-width: 4.2.3 - strip-ansi: 6.0.1 - wrap-ansi: 6.2.0 - clsx@2.0.0: {} clsx@2.1.1: {} @@ -4820,8 +4634,6 @@ snapshots: dependencies: ms: 2.1.2 - decamelize@1.2.0: {} - deep-is@0.1.4: {} deepmerge-ts@7.1.0: {} @@ -4832,8 +4644,6 @@ snapshots: didyoumean@1.2.2: {} - dijkstrajs@1.0.3: {} - dir-glob@3.0.1: dependencies: path-type: 4.0.0 @@ -4849,18 +4659,6 @@ snapshots: no-case: 3.0.4 tslib: 2.7.0 - dot-connect@0.6.0(@reactive-dot/core@0.10.0(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1)))(@types/react@18.3.5)(react@18.3.1): - dependencies: - '@lit-labs/preact-signals': 1.0.2 - '@lit/react': 1.0.5(@types/react@18.3.5) - '@reactive-dot/core': 0.10.0(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1)) - lit: 3.2.0 - qrcode: 1.5.4 - optionalDependencies: - react: 18.3.1 - transitivePeerDependencies: - - '@types/react' - eastasianwidth@0.2.0: {} electron-to-chromium@1.5.13: {} @@ -5133,8 +4931,6 @@ snapshots: gensync@1.0.0-beta.2: {} - get-caller-file@2.0.5: {} - get-east-asian-width@1.2.0: {} get-nonce@1.0.1: {} @@ -5293,16 +5089,6 @@ snapshots: jiti@1.21.6: {} - jotai-scope@0.7.2(jotai@2.9.3(@types/react@18.3.5)(react@18.3.1))(react@18.3.1): - dependencies: - jotai: 2.9.3(@types/react@18.3.5)(react@18.3.1) - react: 18.3.1 - - jotai@2.9.3(@types/react@18.3.5)(react@18.3.1): - optionalDependencies: - '@types/react': 18.3.5 - react: 18.3.1 - joycon@3.1.1: {} js-tokens@4.0.0: {} @@ -5344,22 +5130,6 @@ snapshots: lines-and-columns@1.2.4: {} - lit-element@4.1.0: - dependencies: - '@lit-labs/ssr-dom-shim': 1.2.1 - '@lit/reactive-element': 2.0.4 - lit-html: 3.2.0 - - lit-html@3.2.0: - dependencies: - '@types/trusted-types': 2.0.7 - - lit@3.2.0: - dependencies: - '@lit/reactive-element': 2.0.4 - lit-element: 4.1.0 - lit-html: 3.2.0 - load-tsconfig@0.2.5: {} locate-path@5.0.0: @@ -5579,8 +5349,6 @@ snapshots: dependencies: find-up: 4.1.0 - pngjs@5.0.0: {} - polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1): dependencies: '@polkadot-api/cli': 0.8.0(jiti@1.21.6)(postcss@8.4.42)(smoldot@2.0.30)(yaml@2.5.1) @@ -5672,12 +5440,6 @@ snapshots: punycode@2.3.1: {} - qrcode@1.5.4: - dependencies: - dijkstrajs: 1.0.3 - pngjs: 5.0.0 - yargs: 15.4.1 - queue-microtask@1.2.3: {} react-dom@18.3.1(react@18.3.1): @@ -5752,10 +5514,6 @@ snapshots: dependencies: picomatch: 2.3.1 - require-directory@2.1.1: {} - - require-main-filename@2.0.0: {} - resolve-from@4.0.0: {} resolve-from@5.0.0: {} @@ -5817,8 +5575,6 @@ snapshots: semver@7.6.3: {} - set-blocking@2.0.0: {} - shebang-command@2.0.0: dependencies: shebang-regex: 3.0.0 @@ -6113,20 +5869,12 @@ snapshots: tr46: 1.0.1 webidl-conversions: 4.0.2 - which-module@2.0.1: {} - which@2.0.2: dependencies: isexe: 2.0.0 word-wrap@1.2.5: {} - wrap-ansi@6.2.0: - dependencies: - ansi-styles: 4.3.0 - string-width: 4.2.3 - strip-ansi: 6.0.1 - wrap-ansi@7.0.0: dependencies: ansi-styles: 4.3.0 @@ -6163,8 +5911,6 @@ snapshots: ws@8.18.0: {} - y18n@4.0.3: {} - yallist@3.1.1: {} yaml@2.5.0: {} @@ -6172,25 +5918,6 @@ snapshots: yaml@2.5.1: optional: true - yargs-parser@18.1.3: - dependencies: - camelcase: 5.3.1 - decamelize: 1.2.0 - - yargs@15.4.1: - dependencies: - cliui: 6.0.0 - decamelize: 1.2.0 - find-up: 4.1.0 - get-caller-file: 2.0.5 - require-directory: 2.1.1 - require-main-filename: 2.0.0 - set-blocking: 2.0.0 - string-width: 4.2.3 - which-module: 2.0.1 - y18n: 4.0.3 - yargs-parser: 18.1.3 - yocto-queue@0.1.0: {} yoctocolors@2.1.1: {} diff --git a/src/App.tsx b/src/App.tsx index da48c8c..e553a59 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,7 +6,6 @@ import { useLocalStorage } from 'usehooks-ts' import { Toaster } from '@/components/ui/sonner' import './index.css' import { Content } from './Content' -import 'dot-connect/font.css' import { Suspense } from 'react' import { AccountContextProvider } from './contexts/AccountsContext' import { LocksContextProvider } from './contexts/LocksContext' From 0e571bfe7542afaf0ee49e466bafbf326644d1a0 Mon Sep 17 00:00:00 2001 From: Nikos Kontakis Date: Mon, 9 Sep 2024 14:18:26 +0300 Subject: [PATCH 3/7] Fix the hooks --- package.json | 2 +- pnpm-lock.yaml | 10 +++++----- src/contexts/AccountsContext.tsx | 16 ++++++++++++---- src/header.tsx | 22 +++++++++++++--------- 4 files changed, 31 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index ade7afd..efd7aa0 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ }, "dependencies": { "@polkadot-api/descriptors": "file:.papi/descriptors", - "@polkadot-ui/react": "0.0.1-alpha.30", + "@polkadot-ui/react": "0.0.1-alpha.31", "@polkadot-ui/utils": "0.0.1-alpha.5", "@radix-ui/react-dialog": "^1.1.1", "@radix-ui/react-dropdown-menu": "^2.1.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 148447c..175af74 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -12,8 +12,8 @@ importers: specifier: file:.papi/descriptors version: file:.papi/descriptors(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1)) '@polkadot-ui/react': - specifier: 0.0.1-alpha.30 - version: 0.0.1-alpha.30(@noble/hashes@1.5.0)(@polkadot-api/substrate-bindings@0.6.3)(@polkadot-ui/assets@0.0.1-alpha.2)(@polkadot-ui/core@0.0.1-alpha.2)(@polkadot-ui/utils@0.0.1-alpha.5(@polkadot/keyring@13.0.2(@polkadot/util-crypto@13.0.2(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 0.0.1-alpha.31 + version: 0.0.1-alpha.31(@noble/hashes@1.5.0)(@polkadot-api/substrate-bindings@0.6.3)(@polkadot-ui/assets@0.0.1-alpha.2)(@polkadot-ui/core@0.0.1-alpha.2)(@polkadot-ui/utils@0.0.1-alpha.5(@polkadot/keyring@13.0.2(@polkadot/util-crypto@13.0.2(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@polkadot-ui/utils': specifier: 0.0.1-alpha.5 version: 0.0.1-alpha.5(@polkadot/keyring@13.0.2(@polkadot/util-crypto@13.0.2(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(@polkadot/util@13.0.2) @@ -720,8 +720,8 @@ packages: '@polkadot-ui/core@0.0.1-alpha.2': resolution: {integrity: sha512-gXEgPwN/fD+pSJVmgvFUE6PJWcp2I+v3Kp2kbRn78bLUwYIuc0pfURcuINK1rE/URyTjvKSmMqyfsERNAdp1iQ==} - '@polkadot-ui/react@0.0.1-alpha.30': - resolution: {integrity: sha512-7ITBPYRxMTu4L9UgIexyUHkl7Hs/h5LUHhZwUPbUhjdzWMIWXGo6lEclkR3Siss1TNZR4TZiNb9K/jzXySfTtg==} + '@polkadot-ui/react@0.0.1-alpha.31': + resolution: {integrity: sha512-dAZMYu2tF84f/NzOV9FoubqRcYwlKrca9+0vkrAH3VjG/Jw7swgnDymg3uewnXLPJfll3Tp1tOfqUdhJH4ziyA==} peerDependencies: '@noble/hashes': ^1.4.0 '@polkadot-api/substrate-bindings': ^0.6.0 @@ -3602,7 +3602,7 @@ snapshots: '@polkadot-ui/core@0.0.1-alpha.2': {} - '@polkadot-ui/react@0.0.1-alpha.30(@noble/hashes@1.5.0)(@polkadot-api/substrate-bindings@0.6.3)(@polkadot-ui/assets@0.0.1-alpha.2)(@polkadot-ui/core@0.0.1-alpha.2)(@polkadot-ui/utils@0.0.1-alpha.5(@polkadot/keyring@13.0.2(@polkadot/util-crypto@13.0.2(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@polkadot-ui/react@0.0.1-alpha.31(@noble/hashes@1.5.0)(@polkadot-api/substrate-bindings@0.6.3)(@polkadot-ui/assets@0.0.1-alpha.2)(@polkadot-ui/core@0.0.1-alpha.2)(@polkadot-ui/utils@0.0.1-alpha.5(@polkadot/keyring@13.0.2(@polkadot/util-crypto@13.0.2(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@noble/hashes': 1.5.0 '@polkadot-api/substrate-bindings': 0.6.3 diff --git a/src/contexts/AccountsContext.tsx b/src/contexts/AccountsContext.tsx index c8fe4ef..297ce0a 100644 --- a/src/contexts/AccountsContext.tsx +++ b/src/contexts/AccountsContext.tsx @@ -8,9 +8,12 @@ import React, { Dispatch, } from 'react' import { InjectedPolkadotAccount } from 'polkadot-api/pjs-signer' -import { useLocalStorage } from 'usehooks-ts' -import { localStorageKeyAccount, useConnect } from '@polkadot-ui/react' +import { + useConnectLocalStorage, + localStorageKeyAccount, + useConnect, +} from '@polkadot-ui/react' type AccountContextProps = { children: React.ReactNode | React.ReactNode[] @@ -30,10 +33,12 @@ const AccountContextProvider = ({ children }: AccountContextProps) => { localStorageAccount, setLocalStorageAccount, removeLocalStorageAccount, - ] = useLocalStorage(localStorageKeyAccount, '') + ] = useConnectLocalStorage(localStorageKeyAccount, '') const { connectedAccounts, connectedExtensions } = useConnect() + console.log('2', connectedAccounts, connectedExtensions) + const [connAccounts, setConnAccounts] = useState(connectedAccounts) @@ -45,6 +50,8 @@ const AccountContextProvider = ({ children }: AccountContextProps) => { setConnAccounts(acc) }, [connectedExtensions]) + console.log('3', connAccounts) + const [selectedAccount, setSelected] = useState< InjectedPolkadotAccount | undefined >() @@ -64,6 +71,7 @@ const AccountContextProvider = ({ children }: AccountContextProps) => { useEffect(() => { if (localStorageAccount) { + console.log('4', connAccounts) const account = connAccounts.find( (account) => account.address === localStorageAccount, ) @@ -71,7 +79,7 @@ const AccountContextProvider = ({ children }: AccountContextProps) => { selectAccount(account) } } else { - // selectAccount(connAccounts[0]) + selectAccount(connAccounts[0]) } }, [connAccounts, localStorageAccount, selectAccount]) diff --git a/src/header.tsx b/src/header.tsx index 29b63c3..5e4f0a6 100644 --- a/src/header.tsx +++ b/src/header.tsx @@ -51,14 +51,15 @@ if (import.meta.env.DEV) { export const Header = () => { const { network, setNetwork } = useNetwork() - const [sAccount, setSAccount] = useState( - {} as InjectedPolkadotAccount, - ) const { accounts, selectAccount, selectedAccount } = useAccounts() - useEffect(() => { - selectAccount(sAccount) - }, [sAccount, selectAccount]) + console.log('accounts', accounts) + console.log('--------------------') + console.log('selectedAccount', selectedAccount) + + const [sAccount, setSAccount] = useState( + selectedAccount as InjectedPolkadotAccount, + ) useEffect(() => { if (!selectedAccount?.address && accounts.length > 0) { @@ -154,8 +155,11 @@ export const Header = () => { + console.log('OnSelectExtensions', ext) + } /> @@ -170,7 +174,7 @@ export const Header = () => { > @@ -184,7 +188,7 @@ export const Header = () => { selectAccount(account)} + onClick={() => setSAccount(account)} > Date: Sat, 14 Sep 2024 21:08:24 +0300 Subject: [PATCH 4/7] Finalize the wallet design --- package.json | 2 +- pnpm-lock.yaml | 10 +++---- src/contexts/AccountsContext.tsx | 26 ++++++++++------ src/header.tsx | 51 +++++++++++++++++++++----------- 4 files changed, 57 insertions(+), 32 deletions(-) diff --git a/package.json b/package.json index ec8cb9e..76a396e 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "@polkadot-api/descriptors": "file:.papi/descriptors", "@polkadot-labs/hdkd": "^0.0.8", "@polkadot-labs/hdkd-helpers": "^0.0.8", - "@polkadot-ui/react": "0.0.1-alpha.33", + "@polkadot-ui/react": "0.0.1-alpha.34", "@polkadot-ui/utils": "0.0.3", "@radix-ui/react-dialog": "^1.1.1", "@radix-ui/react-dropdown-menu": "^2.1.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8e97c37..5a1b14b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -18,8 +18,8 @@ importers: specifier: ^0.0.8 version: 0.0.8 '@polkadot-ui/react': - specifier: 0.0.1-alpha.33 - version: 0.0.1-alpha.33(@noble/hashes@1.5.0)(@polkadot-api/substrate-bindings@0.7.0)(@polkadot-ui/assets@0.0.1-alpha.2)(@polkadot-ui/core@0.0.1-alpha.2)(@polkadot-ui/utils@0.0.3(@polkadot/keyring@13.0.2(@polkadot/util-crypto@13.0.2(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(polkadot-api@1.2.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 0.0.1-alpha.34 + version: 0.0.1-alpha.34(@noble/hashes@1.5.0)(@polkadot-api/substrate-bindings@0.7.0)(@polkadot-ui/assets@0.0.1-alpha.2)(@polkadot-ui/core@0.0.1-alpha.2)(@polkadot-ui/utils@0.0.3(@polkadot/keyring@13.0.2(@polkadot/util-crypto@13.0.2(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(polkadot-api@1.2.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@polkadot-ui/utils': specifier: 0.0.3 version: 0.0.3(@polkadot/keyring@13.0.2(@polkadot/util-crypto@13.0.2(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(@polkadot/util@13.0.2) @@ -738,8 +738,8 @@ packages: '@polkadot-ui/core@0.0.1-alpha.2': resolution: {integrity: sha512-gXEgPwN/fD+pSJVmgvFUE6PJWcp2I+v3Kp2kbRn78bLUwYIuc0pfURcuINK1rE/URyTjvKSmMqyfsERNAdp1iQ==} - '@polkadot-ui/react@0.0.1-alpha.33': - resolution: {integrity: sha512-h1k01i2QEsidTZusONvlz9bxIXV5Q4V4Nb4gD3Dj0kh/Ktl4MDEeKWJ+pgDEd1pH9hYIXbejEuBgJD3cxyl9aw==} + '@polkadot-ui/react@0.0.1-alpha.34': + resolution: {integrity: sha512-iRSB+Bx5JbqU97MQLaq+S3o512aTHejVCPwGfvuhEPqVZJBn1EK8Bi/WE44uubCkIwaTb19yDchH/60xjrqqBQ==} peerDependencies: '@noble/hashes': ^1.4.0 '@polkadot-api/substrate-bindings': ^0.6.0 @@ -3657,7 +3657,7 @@ snapshots: '@polkadot-ui/core@0.0.1-alpha.2': {} - '@polkadot-ui/react@0.0.1-alpha.33(@noble/hashes@1.5.0)(@polkadot-api/substrate-bindings@0.7.0)(@polkadot-ui/assets@0.0.1-alpha.2)(@polkadot-ui/core@0.0.1-alpha.2)(@polkadot-ui/utils@0.0.3(@polkadot/keyring@13.0.2(@polkadot/util-crypto@13.0.2(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(polkadot-api@1.2.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@polkadot-ui/react@0.0.1-alpha.34(@noble/hashes@1.5.0)(@polkadot-api/substrate-bindings@0.7.0)(@polkadot-ui/assets@0.0.1-alpha.2)(@polkadot-ui/core@0.0.1-alpha.2)(@polkadot-ui/utils@0.0.3(@polkadot/keyring@13.0.2(@polkadot/util-crypto@13.0.2(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(polkadot-api@1.2.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@noble/hashes': 1.5.0 '@polkadot-api/substrate-bindings': 0.7.0 diff --git a/src/contexts/AccountsContext.tsx b/src/contexts/AccountsContext.tsx index 7be56b1..c7a4970 100644 --- a/src/contexts/AccountsContext.tsx +++ b/src/contexts/AccountsContext.tsx @@ -16,9 +16,9 @@ type AccountContextProps = { export interface IAccountContext { selectedAccount?: InjectedPolkadotAccount - connectAccounts?: (accounts: InjectedPolkadotAccount[]) => void accounts: InjectedPolkadotAccount[] selectAccount: (account: InjectedPolkadotAccount | undefined) => void + setConnectedAccounts: (accounts: InjectedPolkadotAccount[]) => void } const AccountContext = createContext(undefined) @@ -43,9 +43,12 @@ const AccountContextProvider = ({ children }: AccountContextProps) => { InjectedPolkadotAccount | undefined >() - const connectAccounts = useCallback((accounts: InjectedPolkadotAccount[]) => { - setConnAccounts(accounts) - }, []) + const setConnectedAccounts = useCallback( + (accounts: InjectedPolkadotAccount[]) => { + setConnAccounts(accounts) + }, + [], + ) const selectAccount = useCallback( (account: InjectedPolkadotAccount | undefined) => { @@ -61,27 +64,32 @@ const AccountContextProvider = ({ children }: AccountContextProps) => { ) useEffect(() => { - if (localStorageAccount?.address) { + if (localStorageAccount?.address && connAccounts?.length !== 0) { const account = connAccounts.find( (account) => account.address === localStorageAccount?.address, ) - console.log('- account -', account, localStorageAccount) if (account?.address) { selectAccount(account) } } else { - selectAccount(connAccounts[0]) + if (connAccounts?.length === 0) { + setLocalStorageAccount('') + setSelected(undefined) + selectAccount(undefined) + } else { + selectAccount(connAccounts[0]) + } } - }, [connAccounts, localStorageAccount, selectAccount]) + }, [connAccounts, localStorageAccount, selectAccount, setLocalStorageAccount]) return ( {children} diff --git a/src/header.tsx b/src/header.tsx index 8655455..bfc9ee8 100644 --- a/src/header.tsx +++ b/src/header.tsx @@ -39,6 +39,7 @@ import { useTheme } from './components/theme-provider' import { Link, useLocation } from 'react-router-dom' import { FaCheckCircle, FaGithub } from 'react-icons/fa' import { TbLoaderQuarter } from 'react-icons/tb' +import { useMediaQuery } from 'usehooks-ts' interface NetworkDisplay { name: SupportedNetworkNames @@ -60,17 +61,30 @@ if (import.meta.env.DEV) { export const Header = () => { const { network, selectNetwork, lightClientLoaded, isLight } = useNetwork() - const { accounts, selectAccount, selectedAccount, connectAccounts } = + const { accounts, selectAccount, selectedAccount, setConnectedAccounts } = useAccounts() // eslint-disable-next-line const { theme, setTheme } = useTheme() const { search } = useLocation() const [modalOpen, setModalOpen] = useState(false) + const isDesktop = useMediaQuery('(min-width: 768px)') const connectConfig: ConnectConfiguration = { downloadIcon: , disconnectIcon: , + modal: { + width: isDesktop ? '50vw' : '100%', + top: isDesktop ? '' : '20%', + bgColor: theme === 'light' ? '#fff' : '#171c17', + titleColor: theme === 'light' ? '#000' : '#fff', + }, + bg: { + selected: theme === 'light' ? '#ccc' : '#000', + }, + hover: { + bg: theme === 'light' ? '#ccc' : '#000', + }, } return ( @@ -173,22 +187,7 @@ export const Header = () => { ))} - - { - connectAccounts!(acc.length ? acc : []) - }} - title={'Connect'} - show={modalOpen} - onClose={(): void => { - setModalOpen(false) - }} - /> - {!!accounts.length || selectedAccount?.address ? ( + {selectedAccount?.address ? ( )} -
+ + {modalOpen && ( +
{ - setConnectedAccounts(acc) - }} + getConnectedAccounts={setAccounts} title={'Connect'} show={modalOpen} - onClose={(): void => { + onClose={() => { setModalOpen(false) }} />
- + )} ) } From 8a4c08b6cf821d9cb773c67683f85975b239e266 Mon Sep 17 00:00:00 2001 From: Nikos Kontakis Date: Wed, 18 Sep 2024 09:43:41 +0300 Subject: [PATCH 7/7] Update src/header.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> --- src/header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/header.tsx b/src/header.tsx index e74a06f..c609012 100644 --- a/src/header.tsx +++ b/src/header.tsx @@ -193,7 +193,7 @@ export const Header = () => { /> {account.name} - {index !== accounts.length - 1 && } + {index !== accounts.length - 1 && } ))}