feat: add talisman

package.json

@@ -48,6 +48,7 @@
     "@react-stately/tooltip": "^3.2.3",
     "@react-stately/tree": "^3.4.1",
     "@tailwindcss/forms": "^0.3.2",
+    "@talismn/connect-wallets": "^1.2.3",
     "big.js": "^6.1.1",
     "chart.js": "^2.9.4",
     "clsx": "^1.1.1",

src/App.tsx

@@ -19,6 +19,7 @@ import { PAGES } from '@/utils/constants/links';
 
 import { Layout, TransactionModal } from './components';
 import * as constants from './constants';
+import { useApi } from './hooks/api/use-api';
 import { FeatureFlags, useFeatureFlag } from './hooks/use-feature-flag';
 import TestnetBanner from './legacy-components/TestnetBanner';
 
@@ -41,6 +42,8 @@ const Actions = React.lazy(() => import(/* webpackChunkName: 'actions' */ '@/pag
 const NoMatch = React.lazy(() => import(/* webpackChunkName: 'no-match' */ '@/pages/NoMatch'));
 
 const App = (): JSX.Element => {
+  useApi();
+
   const { selectedAccount, extensions } = useSubstrateSecureState();
   const { setSelectedAccount } = useSubstrate();
 

src/components/AuthModal/AccountStep.tsx → src/components/WalletModalTrigger/AccountStep.tsx

@@ -1,4 +1,3 @@
-import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types';
 import { mergeProps } from '@react-aria/utils';
 import { useTranslation } from 'react-i18next';
 import { useCopyToClipboard } from 'react-use';
@@ -7,14 +6,13 @@ import { DocumentDuplicate } from '@/assets/icons';
 import { shortAddress } from '@/common/utils/utils';
 import { CTA, Divider, Flex, P, Span, Tooltip, WalletIcon } from '@/component-library';
 import { useCopyTooltip } from '@/hooks/use-copy-tooltip';
-import { KeyringPair } from '@/lib/substrate';
-import { WalletData } from '@/utils/constants/wallets';
+import { WalletAccountData, WalletData } from '@/lib/wallet/types';
 import { StepComponentProps, withStep } from '@/utils/hocs/step';
 
 import { StyledAccountItem, StyledCopyItem, StyledP } from './AuthModal.style';
 import { AuthModalSteps } from './types';
 
-type CopyAddressProps = { account: InjectedAccountWithMeta };
+type CopyAddressProps = { account: WalletAccountData };
 
 const CopyAddress = ({ account }: CopyAddressProps) => {
   const [, copy] = useCopyToClipboard();
@@ -26,7 +24,7 @@ const CopyAddress = ({ account }: CopyAddressProps) => {
     <Tooltip {...tooltipProps}>
       <StyledCopyItem
         {...mergeProps(buttonProps, { onPress: handleCopy })}
-        aria-label={`copy ${`${account.meta.name} address` || shortAddress(account.address)} to clipboard`}
+        aria-label={`copy ${`${account.name} address` || shortAddress(account.address)} to clipboard`}
         elementType='div'
       >
         <DocumentDuplicate />
@@ -36,24 +34,22 @@ const CopyAddress = ({ account }: CopyAddressProps) => {
 };
 
 type AccountStepProps = {
-  accounts: InjectedAccountWithMeta[];
+  value?: WalletAccountData;
+  accounts: WalletAccountData[];
   wallet: WalletData;
-  selectedAccount?: KeyringPair;
   onChangeWallet?: () => void;
-  onSelectionChange: (account: InjectedAccountWithMeta) => void;
+  onSelectionChange: (account: WalletAccountData) => void;
 } & StepComponentProps;
 
 const AccountComponent = ({
+  value,
   accounts,
   wallet,
-  selectedAccount,
   onChangeWallet,
   onSelectionChange
 }: AccountStepProps): JSX.Element | null => {
   const { t } = useTranslation();
 
-  const walletAccounts = accounts.filter(({ meta: { source } }) => source === wallet.extensionName);
-
   return (
     <Flex direction='column' marginTop='spacing6'>
       <Divider color='default' />
@@ -70,8 +66,8 @@ const AccountComponent = ({
       </Flex>
       <Divider color='default' />
       <Flex elementType='ul' direction='column' gap='spacing4' marginTop='spacing6'>
-        {walletAccounts.map((account) => {
-          const isSelected = selectedAccount?.address === account.address;
+        {accounts.map((account) => {
+          const isSelected = value?.address === account.address;
 
           return (
             <Flex key={account.address} elementType='li' gap='spacing4'>
@@ -84,7 +80,7 @@ const AccountComponent = ({
                 isSelected={isSelected}
               >
                 <StyledP weight='bold' $isSelected={isSelected}>
-                  {account.meta.name}
+                  {account.name}
                 </StyledP>
                 <StyledP $isSelected={isSelected}>({shortAddress(account.address)})</StyledP>
               </StyledAccountItem>

src/components/AuthModal/AuthModal.style.tsx → src/components/WalletModalTrigger/AuthModal.style.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 import { ArrowRight } from '@/assets/icons';
-import { Flex, P, theme } from '@/component-library';
+import { CTA, Flex, P, theme } from '@/component-library';
 
 import { AuthListItem } from './AuthListItem';
 
@@ -47,4 +47,9 @@ const StyledP = styled(P)<StyledArrowRightProps>`
   color: ${({ $isSelected }) => $isSelected && theme.list.text};
 `;
 
-export { StyledAccountItem, StyledArrowRight, StyledCopyItem, StyledItem, StyledP, StyledWalletItem };
+const StyledCTA = styled(CTA)`
+  padding: ${theme.spacing.spacing3};
+  border: ${theme.border.default};
+`;
+
+export { StyledAccountItem, StyledArrowRight, StyledCopyItem, StyledCTA, StyledItem, StyledP, StyledWalletItem };

src/components/WalletModalTrigger/AuthModal.tsx

@@ -0,0 +1,126 @@
+import { useCallback, useEffect, useState } from 'react';
+import { TFunction, useTranslation } from 'react-i18next';
+
+import { CTA, Modal, ModalBody, ModalFooter, ModalHeader, ModalProps } from '@/component-library';
+import { useSignMessage } from '@/hooks/use-sign-message';
+import { WalletAccountData, WalletData } from '@/lib/wallet/types';
+import { useEnableWallet } from '@/lib/wallet/use-enable-wallet';
+import { useGetWalletAccounts } from '@/lib/wallet/use-get-wallet-accounts';
+import { useGetWallets } from '@/lib/wallet/use-get-wallets';
+import { useWallet } from '@/lib/wallet/WalletProvider';
+
+import { AccountStep } from './AccountStep';
+import { Disclaimer } from './Disclaimer';
+import { AuthModalSteps } from './types';
+import { WalletStep } from './WalletStep';
+
+const getTitle = (t: TFunction, step: AuthModalSteps, hasNoInstalledWallet: boolean) => {
+  if (step === AuthModalSteps.ACCOUNT) {
+    return t('account_modal.please_select_an_account');
+  }
+
+  if (hasNoInstalledWallet) {
+    return t('account_modal.please_install_supported_wallet');
+  }
+
+  return t('account_modal.please_select_a_wallet');
+};
+
+type InheritAttrs = Omit<ModalProps, 'children'>;
+
+type AuthModalProps = InheritAttrs;
+
+// TODO: handle better
+const AuthModal = ({ isOpen, onClose, ...props }: AuthModalProps): JSX.Element => {
+  const { t } = useTranslation();
+
+  const { account, setAccount, disconnect } = useWallet();
+
+  const { data: wallets } = useGetWallets();
+
+  const { selectProps } = useSignMessage();
+
+  const [step, setStep] = useState<AuthModalSteps>(AuthModalSteps.ACCOUNT);
+  const [wallet, setWallet] = useState<WalletData | undefined>();
+
+  const { mutateAsync: enableWalletAsync } = useEnableWallet(wallet?.extensionName);
+
+  const { data: accounts, mutateAsync: mutateAccountsAsync } = useGetWalletAccounts(wallet?.extensionName);
+
+  const handleWalletSelect = useCallback(
+    async (wallet: WalletData) => {
+      setWallet(wallet);
+      await enableWalletAsync(wallet);
+      await mutateAccountsAsync(wallet);
+    },
+    [enableWalletAsync, mutateAccountsAsync]
+  );
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    setStep(account ? AuthModalSteps.ACCOUNT : AuthModalSteps.WALLET);
+    setWallet(account?.wallet);
+  }, [isOpen, account]);
+
+  useEffect(() => {
+    if (!isOpen || !wallet) return;
+
+    handleWalletSelect(wallet);
+  }, [isOpen, wallet, handleWalletSelect]);
+
+  useEffect(() => {
+    if (!accounts) return;
+
+    setStep(AuthModalSteps.ACCOUNT);
+  }, [accounts]);
+
+  const handleChangeWallet = () => {
+    setStep(AuthModalSteps.WALLET);
+  };
+
+  const handleAccountSelection = (account: WalletAccountData) => {
+    setAccount(account);
+    selectProps.onSelectionChange(account);
+    onClose?.();
+  };
+
+  const handleDisconnect = () => {
+    onClose?.();
+    disconnect();
+  };
+
+  const title = getTitle(t, step, wallets.hasInstalled);
+
+  const hasDisconnect = step === AuthModalSteps.ACCOUNT && account;
+
+  return (
+    <Modal align='top' isOpen={isOpen} onClose={onClose} {...props}>
+      <ModalHeader align='start'>{title}</ModalHeader>
+      <ModalBody>
+        <Disclaimer />
+        <WalletStep wallets={wallets.available} step={step} onSelectionChange={handleWalletSelect} value={wallet} />
+        {wallet && accounts && (
+          <AccountStep
+            step={step}
+            wallet={wallet}
+            accounts={accounts}
+            value={account}
+            onSelectionChange={handleAccountSelection}
+            onChangeWallet={handleChangeWallet}
+          />
+        )}
+      </ModalBody>
+      {hasDisconnect && (
+        <ModalFooter>
+          <CTA size='large' variant='outlined' onPress={handleDisconnect}>
+            {t('account_modal.disconnect')}
+          </CTA>
+        </ModalFooter>
+      )}
+    </Modal>
+  );
+};
+
+export { AuthModal, AuthModalSteps };
+export type { AuthModalProps };

src/components/WalletModalTrigger/WalletModalTrigger.tsx

@@ -0,0 +1,32 @@
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { showAccountModalAction } from '@/common/actions/general.actions';
+import { StoreType } from '@/common/types/util.types';
+import { useWallet } from '@/lib/wallet/WalletProvider';
+
+import { AuthModal } from './AuthModal';
+import { StyledCTA } from './AuthModal.style';
+
+const WalletModalTrigger = (): JSX.Element => {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+  const { account } = useWallet();
+
+  const { showAccountModal } = useSelector((state: StoreType) => state.general);
+
+  const handleModalOpen = () => dispatch(showAccountModalAction(true));
+
+  const handleModalClose = () => dispatch(showAccountModalAction(false));
+
+  return (
+    <>
+      <StyledCTA variant='outlined' onPress={handleModalOpen}>
+        {account ? account?.name || 'Wallet' : t('connect_wallet')}
+      </StyledCTA>
+      <AuthModal isOpen={showAccountModal} onClose={handleModalClose} />
+    </>
+  );
+};
+
+export { WalletModalTrigger };