From a9b36989281f12df07703ad169e8730f3f91a39e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Von=C3=A1=C5=A1ek?= Date: Wed, 2 Oct 2024 15:59:39 +0200 Subject: [PATCH] Fix external wallet delegates --- .../web3-connect/Web3Connect.utils.ts | 14 +++ .../accounts/Web3ConnectAccountList.tsx | 15 +--- .../Web3ConnectExternalAccount.styled.ts | 33 +++++-- .../accounts/Web3ConnectExternalAccount.tsx | 89 +++++++++++++------ .../modal/Web3ConnectExternalForm.tsx | 5 +- 5 files changed, 103 insertions(+), 53 deletions(-) diff --git a/src/sections/web3-connect/Web3Connect.utils.ts b/src/sections/web3-connect/Web3Connect.utils.ts index 25ed1f8c3..02d41dfe1 100644 --- a/src/sections/web3-connect/Web3Connect.utils.ts +++ b/src/sections/web3-connect/Web3Connect.utils.ts @@ -52,6 +52,8 @@ import { Talisman } from "sections/web3-connect/wallets/Talisman" import { chainsMap } from "@galacticcouncil/xcm-cfg" import { EvmChain } from "@galacticcouncil/xcm-core" import { MetadataStore } from "@galacticcouncil/ui" +import { create } from "zustand" +import BN from "bignumber.js" export type { WalletProvider } from "./wallets" export { WalletProviderType, getSupportedWallets } @@ -544,3 +546,15 @@ export function getWalletModeIcon(mode: WalletMode) { return "" } catch (e) {} } + +export const useAccountBalanceMap = create<{ + balanceMap: Map + setBalanceMap: (address: string, balance: BN) => void +}>((set) => ({ + balanceMap: new Map(), + setBalanceMap: (address, balance) => { + set(({ balanceMap }) => ({ + balanceMap: new Map(balanceMap).set(address, balance), + })) + }, +})) diff --git a/src/sections/web3-connect/accounts/Web3ConnectAccountList.tsx b/src/sections/web3-connect/accounts/Web3ConnectAccountList.tsx index c81bd98af..6fbefe7c8 100644 --- a/src/sections/web3-connect/accounts/Web3ConnectAccountList.tsx +++ b/src/sections/web3-connect/accounts/Web3ConnectAccountList.tsx @@ -2,6 +2,7 @@ import { FC, Fragment, useMemo, useState } from "react" import { WalletProviderType, useAccount, + useAccountBalanceMap, } from "sections/web3-connect/Web3Connect.utils" import { Account, @@ -18,7 +19,6 @@ import { Web3ConnectSubstrateAccount } from "./Web3ConnectSubstrateAccount" import { useDebounce, useShallowCompareEffect } from "react-use" import { useWalletAssetsTotals } from "sections/wallet/assets/WalletAssets.utils" import { Web3ConnectAccountPlaceholder } from "sections/web3-connect/accounts/Web3ConnectAccountPlaceholder" -import BN from "bignumber.js" import { useTranslation } from "react-i18next" import { arraySearch } from "utils/helpers" import NoActivities from "assets/icons/NoActivities.svg?react" @@ -29,7 +29,6 @@ import { Alert } from "components/Alert/Alert" import { EVM_PROVIDERS } from "sections/web3-connect/constants/providers" import { Web3ConnectModeFilter } from "sections/web3-connect/modal/Web3ConnectModeFilter" import { useShallow } from "hooks/useShallow" -import { create } from "zustand" import { isEvmAccount } from "utils/evm" const getAccountComponentByType = (type: WalletProviderType | null) => { @@ -43,18 +42,6 @@ const getAccountComponentByType = (type: WalletProviderType | null) => { return Web3ConnectSubstrateAccount } -const useAccountBalanceMap = create<{ - balanceMap: Map - setBalanceMap: (address: string, balance: BN) => void -}>((set) => ({ - balanceMap: new Map(), - setBalanceMap: (address, balance) => { - set(({ balanceMap }) => ({ - balanceMap: new Map(balanceMap).set(address, balance), - })) - }, -})) - const AccountComponent: FC< Account & { isReady: boolean diff --git a/src/sections/web3-connect/accounts/Web3ConnectExternalAccount.styled.ts b/src/sections/web3-connect/accounts/Web3ConnectExternalAccount.styled.ts index 984531c01..ae7602d49 100644 --- a/src/sections/web3-connect/accounts/Web3ConnectExternalAccount.styled.ts +++ b/src/sections/web3-connect/accounts/Web3ConnectExternalAccount.styled.ts @@ -4,7 +4,7 @@ import { theme } from "theme" export const SContainer = styled.div` position: relative; - margin-left: 20px; + margin-left: 15px; ` export const SGroupContainer = styled.div` @@ -16,14 +16,14 @@ export const SGroupContainer = styled.div` flex-direction: column; gap: 10px; - margin-left: -10px; - padding-left: 10px; - padding-top: 14px; + margin-left: -6px; + padding-left: 6px; + padding-top: 6px; ` export const SLine = styled.div` position: absolute; - left: -25px; + left: -20px; width: 1px; height: 100%; @@ -33,13 +33,28 @@ export const SLine = styled.div` export const SLeaf = styled.div` position: absolute; - bottom: 140px; - left: -25px; + top: 0; + left: -20px; border: solid ${theme.colors.basic800}; border-width: 0 0 1px 1px; border-bottom-left-radius: 14px; - height: calc(100% + 40px); - width: 19px; + height: 50%; + width: 12px; + + &::after { + content: ""; + position: absolute; + + left: 100%; + bottom: 0; + + width: 4px; + height: 4px; + margin-bottom: -2px; + border-radius: 50%; + + background: ${theme.colors.basic800}; + } ` diff --git a/src/sections/web3-connect/accounts/Web3ConnectExternalAccount.tsx b/src/sections/web3-connect/accounts/Web3ConnectExternalAccount.tsx index 20d9d0475..46e801d68 100644 --- a/src/sections/web3-connect/accounts/Web3ConnectExternalAccount.tsx +++ b/src/sections/web3-connect/accounts/Web3ConnectExternalAccount.tsx @@ -4,10 +4,14 @@ import { useShallow } from "hooks/useShallow" import { ComponentPropsWithoutRef, FC, useEffect } from "react" import { getWalletProviderByType, + useAccountBalanceMap, useWalletAccounts, } from "sections/web3-connect/Web3Connect.utils" import { Web3ConnectAccount } from "sections/web3-connect/accounts/Web3ConnectAccount" -import { useWeb3ConnectStore } from "sections/web3-connect/store/useWeb3ConnectStore" +import { + useWeb3ConnectStore, + WalletProviderStatus, +} from "sections/web3-connect/store/useWeb3ConnectStore" import { WalletProviderType } from "sections/web3-connect/constants/providers" import { ExternalWallet } from "sections/web3-connect/wallets/ExternalWallet" import { HYDRA_ADDRESS_PREFIX, POLKADOT_APP_NAME } from "utils/api" @@ -29,8 +33,18 @@ export const Web3ConnectExternalAccount: FC< setAccount, toggle, account: currentAccount, + setStatus, + getConnectedProviders, } = useWeb3ConnectStore( - useShallow((s) => pick(s, ["setAccount", "toggle", "account"])), + useShallow((s) => + pick(s, [ + "setAccount", + "toggle", + "account", + "setStatus", + "getConnectedProviders", + ]), + ), ) const { address, provider } = account @@ -52,17 +66,33 @@ export const Web3ConnectExternalAccount: FC< const isProxy = externalWalletData?.isProxy ?? false const delegates = externalWalletData?.delegates ?? [] + const { balanceMap } = useAccountBalanceMap() + useEffect(() => { if (isProxy && externalWallet) { const { wallet: proxyWallet } = getWalletProviderByType( externalWallet.proxyWalletProvider, ) - if (proxyWallet?.installed && !proxyWallet?.extension) { + const { installed, extension } = proxyWallet ?? {} + const connected = getConnectedProviders().some( + ({ type }) => type === externalWallet.proxyWalletProvider, + ) + + if (!installed) return + + if (!extension) { proxyWallet?.enable(POLKADOT_APP_NAME) } + + if (!connected) { + setStatus( + externalWallet.proxyWalletProvider, + WalletProviderStatus.Connected, + ) + } } - }, [externalWallet, isProxy]) + }, [externalWallet, getConnectedProviders, isProxy, setStatus]) const { data: accounts } = useWalletAccounts( externalWallet?.proxyWalletProvider, @@ -126,32 +156,33 @@ export const Web3ConnectExternalAccount: FC< balance={balance} isProxy /> - - {filteredAccounts.map(({ address, displayAddress, name }) => { - return ( - - - { - setAccount({ - ...account, - displayAddress, - name: externalWallet.proxyAccountName, - delegate: address, - }) - await externalWallet?.enableProxy(POLKADOT_APP_NAME) - toggle() - }} - /> - - ) - })} - + + {filteredAccounts.map(({ address, displayAddress, name }) => { + return ( + + + { + setAccount({ + ...account, + displayAddress, + name: externalWallet.proxyAccountName, + delegate: address, + }) + await externalWallet?.enableProxy(POLKADOT_APP_NAME) + toggle() + }} + /> + + ) + })} + ) } diff --git a/src/sections/web3-connect/modal/Web3ConnectExternalForm.tsx b/src/sections/web3-connect/modal/Web3ConnectExternalForm.tsx index b5cf399c6..170562320 100644 --- a/src/sections/web3-connect/modal/Web3ConnectExternalForm.tsx +++ b/src/sections/web3-connect/modal/Web3ConnectExternalForm.tsx @@ -213,10 +213,13 @@ export const Web3ConnectExternalForm = ({ )}