Fix external wallet proxies and delegates

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<string, BN>
+  setBalanceMap: (address: string, balance: BN) => void
+}>((set) => ({
+  balanceMap: new Map(),
+  setBalanceMap: (address, balance) => {
+    set(({ balanceMap }) => ({
+      balanceMap: new Map(balanceMap).set(address, balance),
+    }))
+  },
+}))

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<string, BN>
-  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

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};
+  }
 `

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
         />
-        <SGroupContainer>
-          {filteredAccounts.map(({ address, displayAddress, name }) => {
-            return (
-              <SContainer key={address}>
-                <SLeaf />
-                <Web3ConnectAccount
-                  isActive={address === currentAccount?.delegate}
-                  provider={externalWallet?.proxyWalletProvider}
-                  name={name ?? "N/A"}
-                  address={address}
-                  onClick={async () => {
-                    setAccount({
-                      ...account,
-                      displayAddress,
-                      name: externalWallet.proxyAccountName,
-                      delegate: address,
-                    })
-                    await externalWallet?.enableProxy(POLKADOT_APP_NAME)
-                    toggle()
-                  }}
-                />
-              </SContainer>
-            )
-          })}
-        </SGroupContainer>
       </SContainer>
+      <SGroupContainer>
+        {filteredAccounts.map(({ address, displayAddress, name }) => {
+          return (
+            <SContainer key={address}>
+              <SLeaf />
+              <Web3ConnectAccount
+                isActive={address === currentAccount?.delegate}
+                provider={externalWallet?.proxyWalletProvider}
+                name={name ?? "N/A"}
+                address={address}
+                balance={balanceMap.get(address)}
+                onClick={async () => {
+                  setAccount({
+                    ...account,
+                    displayAddress,
+                    name: externalWallet.proxyAccountName,
+                    delegate: address,
+                  })
+                  await externalWallet?.enableProxy(POLKADOT_APP_NAME)
+                  toggle()
+                }}
+              />
+            </SContainer>
+          )
+        })}
+      </SGroupContainer>
     </div>
   )
 }

src/sections/web3-connect/modal/Web3ConnectExternalForm.tsx

@@ -213,10 +213,13 @@ export const Web3ConnectExternalForm = ({
           </Button>
         )}
         <Button
-          disabled={!form.formState.isValid}
+          disabled={
+            form.formState.errors.delegates ? false : !form.formState.isValid
+          }
           variant="primary"
           type="submit"
           fullWidth
+          isLoading={form.formState.isSubmitting}
         >
           {form.formState.errors.delegates
             ? t("walletConnect.accountSelect.viewAsWallet")