Revamp connect wallet flow and design

.prettierrc

@@ -0,0 +1,13 @@
+{
+  "arrowParens": "always",
+  "printWidth": 120,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "proseWrap": "always",
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindConfig": "./tailwind.config.js"
+}

package.json

@@ -116,6 +116,7 @@
     "postcss": "^8.4.21",
     "postcss-import": "^15.1.0",
     "prettier": "^3.1.1",
+    "prettier-plugin-tailwindcss": "^0.6.4",
     "react-error-overlay": "6.0.9",
     "react-table": "^7.8.0",
     "sass": "^1.58.3",

src/GlobalStateProvider/helpers.ts

@@ -0,0 +1,52 @@
+import { getWalletBySource, WalletAccount } from '@talismn/connect-wallets';
+import { getSdkError } from '@walletconnect/utils';
+import { storageService } from '../services/storage/local';
+import { walletConnectService } from '../services/walletConnect';
+import { initiateMetamaskInjectedAccount } from '../services/metamask';
+import { chainIds } from '../config/walletConnect';
+import { TenantName } from '../models/Tenant';
+import { LocalStorageKeys } from '../hooks/useLocalStorage';
+
+const initTalisman = async (dAppName: string, selected?: string) => {
+    const name = storageService.get(LocalStorageKeys.SELECTED_WALLET_NAME);
+    if (!name?.length) return;
+    const wallet = getWalletBySource(name);
+    if (!wallet) return;
+    await wallet.enable(dAppName);
+    const accounts = await wallet.getAccounts();
+    const selectedWallet = accounts.find((a) => a.address === selected) || accounts[0];
+    return selectedWallet;
+};
+
+const initWalletConnect = async (chainId: string) => {
+    const provider = await walletConnectService.getProvider();
+    if (!provider?.session) return;
+    return await walletConnectService.init(provider?.session, chainId);
+};
+
+const initMetamask = async (tenantName: TenantName) => {
+    const metamaskWalletAddress = storageService.get(LocalStorageKeys.SELECTED_WALLET_NAME);
+    if (metamaskWalletAddress) {
+      const injectedAccounts = await initiateMetamaskInjectedAccount(tenantName);
+      return injectedAccounts[0];
+    }
+};
+
+export const initSelectedWallet = async (dAppName: TenantName, tenantName: TenantName, storageAddress: string) => {
+  const appName = dAppName || TenantName.Amplitude;
+  return (await initTalisman(appName, storageAddress)) ||
+  (await initWalletConnect(chainIds[tenantName])) ||
+  (await initMetamask(tenantName));
+}
+
+export const handleWalletConnectDisconnect = async (walletAccount: WalletAccount | undefined) => {
+  if (walletAccount?.wallet?.extensionName === 'WalletConnect') {
+    const topic = walletConnectService.session?.topic;
+    if (topic) {
+      await walletConnectService.provider?.client.disconnect({
+        topic,
+        reason: getSdkError('USER_DISCONNECTED'),
+      });
+    }
+  }
+}

src/GlobalStateProvider.tsx → src/GlobalStateProvider/index.tsx

@@ -1,17 +1,14 @@
-import { getWalletBySource, WalletAccount } from '@talismn/connect-wallets';
-import { getSdkError } from '@walletconnect/utils';
 import { ComponentChildren, createContext } from 'preact';
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'preact/compat';
 import { useLocation } from 'react-router-dom';
-import { config } from './config';
-import { chainIds } from './config/walletConnect';
-import { storageKeys } from './constants/localStorage';
-import { useLocalStorage } from './hooks/useLocalStorage';
-import { TenantName } from './models/Tenant';
-import { ThemeName } from './models/Theme';
-import { initiateMetamaskInjectedAccount, WALLET_SOURCE_METAMASK } from './services/metamask/metamask';
-import { storageService } from './services/storage/local';
-import { walletConnectService } from './services/walletConnect';
+import { WalletAccount } from '@talismn/connect-wallets';
+import { config } from '../config';
+import { storageKeys } from '../constants/localStorage';
+import { LocalStorageKeys, useLocalStorage } from '../hooks/useLocalStorage';
+import { TenantName } from '../models/Tenant';
+import { ThemeName } from '../models/Theme';
+import { storageService } from '../services/storage/local';
+import { handleWalletConnectDisconnect, initSelectedWallet } from './helpers';
 
 const SECONDS_IN_A_DAY = 86400;
 const EXPIRATION_PERIOD = 2 * SECONDS_IN_A_DAY; // 2 days
@@ -29,31 +26,6 @@ export interface GlobalState {
 export const defaultTenant = TenantName.Pendulum;
 const GlobalStateContext = createContext<GlobalState | undefined>(undefined);
 
-const initTalisman = async (dAppName: string, selected?: string) => {
-  const name = storageService.get('@talisman-connect/selected-wallet-name');
-  if (!name?.length) return;
-  const wallet = getWalletBySource(name);
-  if (!wallet) return;
-  await wallet.enable(dAppName);
-  const accounts = await wallet.getAccounts();
-  const selectedWallet = accounts.find((a) => a.address === selected) || accounts[0];
-  return selectedWallet;
-};
-const initWalletConnect = async (chainId: string) => {
-  const provider = await walletConnectService.getProvider();
-  //const pairings = provider.client.pairing.getAll({ active: true });
-  if (!provider?.session) return;
-  return await walletConnectService.init(provider?.session, chainId);
-};
-
-const initMetamaskWallet = async (tenantName: TenantName) => {
-  const metamaskWalletAddress = storageService.get(`metamask-snap-account`);
-  if (metamaskWalletAddress) {
-    return await initiateMetamaskInjectedAccount(tenantName);
-  }
-  return;
-};
-
 const GlobalStateProvider = ({ children }: { children: ComponentChildren }) => {
   const tenantRef = useRef<string>();
   const [walletAccount, setWallet] = useState<WalletAccount | undefined>(undefined);
@@ -71,6 +43,7 @@ const GlobalStateProvider = ({ children }: { children: ComponentChildren }) => {
     [tenantName],
   );
 
+  // Get currently selected wallet account from local storage
   const {
     state: storageAddress,
     set,
@@ -80,34 +53,22 @@ const GlobalStateProvider = ({ children }: { children: ComponentChildren }) => {
     expire: EXPIRATION_PERIOD,
   });
 
-  const handleWalletConnectDisconnect = useCallback(async () => {
-    if (walletAccount?.wallet?.extensionName === 'WalletConnect') {
-      const topic = walletConnectService.session?.topic;
-      if (topic) {
-        await walletConnectService.provider?.client.disconnect({
-          topic,
-          reason: getSdkError('USER_DISCONNECTED'),
-        });
-      }
-    }
-  }, [walletAccount]);
+
+  const clearLocalStorageWallets = () => {
+    storageService.remove(LocalStorageKeys.SELECTED_WALLET_NAME);
+  }
 
   const removeWalletAccount = useCallback(async () => {
-    await handleWalletConnectDisconnect();
+    await handleWalletConnectDisconnect(walletAccount);
     clear();
-    // remove talisman
-    storageService.remove('@talisman-connect/selected-wallet-name');
-    storageService.remove(`metamask-snap-account`);
+    clearLocalStorageWallets()
     setWallet(undefined);
-  }, [clear, handleWalletConnectDisconnect]);
+  }, [clear, walletAccount]);
 
   const setWalletAccount = useCallback(
-    (wallet: WalletAccount | undefined) => {
-      set(wallet?.address);
-      setWallet(wallet);
-      if (wallet?.source === WALLET_SOURCE_METAMASK) {
-        storageService.set(`metamask-snap-account`, wallet.address);
-      }
+    (newWalletAccount: WalletAccount | undefined) => {
+      set(newWalletAccount?.address);
+      setWallet(newWalletAccount);
     },
     [set],
   );
@@ -122,11 +83,7 @@ const GlobalStateProvider = ({ children }: { children: ComponentChildren }) => {
       // skip if tenant already initialized
       if (tenantRef.current === tenantName || accountAddress) return;
       tenantRef.current = tenantName;
-      const appName = dAppName || TenantName.Amplitude;
-      const selectedWallet =
-        (await initTalisman(appName, storageAddress)) ||
-        (await initWalletConnect(chainIds[tenantName])) ||
-        (await initMetamaskWallet(tenantName));
+      const selectedWallet = await initSelectedWallet(dAppName, tenantName, storageAddress)
       if (selectedWallet) setWallet(selectedWallet);
     };
     run();

src/TermsAndConditions.tsx

@@ -1,9 +1,9 @@
 import { PropsWithChildren, useState } from 'preact/compat';
 import { Button, Checkbox, Link, Modal } from 'react-daisyui';
-import { useLocalStorage } from './hooks/useLocalStorage';
+import { useLocalStorage, LocalStorageKeys } from './hooks/useLocalStorage';
 
 const TermsAndConditions = (_props: PropsWithChildren) => {
-  const { state, set } = useLocalStorage<string | undefined>({ key: 'termsAndConditions' });
+  const { state, set } = useLocalStorage<string | undefined>({ key: LocalStorageKeys.TERMS_AND_CONDITIONS });
   const [checked, setChecked] = useState<boolean>(false);
 
   const acceptTerms = () => {

src/assets/CloseIcon.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'preact/compat';
+import { FC } from "preact/compat";
 
 interface Props {
   className?: string;

src/assets/spacewalk.tsx

@@ -3,7 +3,7 @@ import { HTMLAttributes } from 'preact/compat';
 const SpacewalkIcon = (props: HTMLAttributes<SVGSVGElement>) => (
   <svg width="32" height="32" {...props} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="m16,5.03c-6.06,0-10.97,4.91-10.97,10.97s4.91,10.97,10.97,10.97,10.97-4.91,10.97-10.97-4.91-10.97-10.97-10.97Zm0,19.8c-4.87,0-8.83-3.96-8.83-8.83s3.96-8.83,8.83-8.83,8.83,3.96,8.83,8.83-3.96,8.83-8.83,8.83Z" />
-    <path d="m16.99,9.37c-2.31,0-4.52,1.75-5.83,4.42-1.7,3.46-1.2,7.17,1.74,8.59.68.33,1.38.48,2.06.48,2.31,0,4.51-1.76,5.82-4.43,1.7-3.46,1.39-7.08-1.74-8.59-.68-.33-1.36-.48-2.04-.48h0Zm0,1.76c.42,0,.83.1,1.23.3,1.07.52,1.56,1.42,1.67,2.45l-4.59-2.23c.55-.33,1.12-.51,1.68-.51h0Zm-4.87,5.59c.08-.5.22-1.01.42-1.53l6.23,3.03c-.28.48-.6.91-.94,1.28l-5.71-2.78Zm1.04-2.81c.28-.48.6-.91.94-1.28l5.73,2.79c-.09.51-.25,1.03-.44,1.52l-6.23-3.03Zm.54,6.8c-.87-.42-1.4-1.17-1.59-2.22-.01-.07-.02-.14-.03-.2l4.54,2.21c-.55.33-1.12.51-1.67.51-.42,0-.84-.1-1.25-.3Z" />{' '}
+    <path d="m16.99,9.37c-2.31,0-4.52,1.75-5.83,4.42-1.7,3.46-1.2,7.17,1.74,8.59.68.33,1.38.48,2.06.48,2.31,0,4.51-1.76,5.82-4.43,1.7-3.46,1.39-7.08-1.74-8.59-.68-.33-1.36-.48-2.04-.48h0Zm0,1.76c.42,0,.83.1,1.23.3,1.07.52,1.56,1.42,1.67,2.45l-4.59-2.23c.55-.33,1.12-.51,1.68-.51h0Zm-4.87,5.59c.08-.5.22-1.01.42-1.53l6.23,3.03c-.28.48-.6.91-.94,1.28l-5.71-2.78Zm1.04-2.81c.28-.48.6-.91.94-1.28l5.73,2.79c-.09.51-.25,1.03-.44,1.52l-6.23-3.03Zm.54,6.8c-.87-.42-1.4-1.17-1.59-2.22-.01-.07-.02-.14-.03-.2l4.54,2.21c-.55.33-1.12.51-1.67.51-.42,0-.84-.1-1.25-.3Z" />
   </svg>
 );
 

src/components/AccountCard/index.tsx

@@ -0,0 +1,25 @@
+import { WalletAccount } from '@talismn/connect-wallets';
+import { trimAddress } from '../../helpers/addressFormatter';
+import { useGlobalState } from '../../GlobalStateProvider';
+import ChainLogo from '../../assets/ChainLogo';
+
+interface AccountProps {
+  account: WalletAccount;
+}
+
+export const AccountCard = ({ account }: AccountProps) => {
+  const { setWalletAccount } = useGlobalState();
+
+  return (
+    <li className="w-full">
+      <button
+        aria-label={`Select ${account.address}`}
+        className="flex w-full cursor-pointer items-center rounded border-l-2 border-transparent p-1.5 hover:border-primary hover:bg-base-100"
+        onClick={() => setWalletAccount(account)}
+      >
+        <ChainLogo className="w-8 h-8" />
+        <p className="ml-2.5">{trimAddress(account.address)}</p>
+      </button>
+    </li>
+  );
+};

src/components/ChainSelector.tsx

@@ -1,5 +1,5 @@
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
-import { Button, Dropdown } from 'react-daisyui';
+import { isDesktop } from 'react-device-detect';
 import AmplitudeLogo from '../assets/AmplitudeLogo';
 import PendulumLogo from '../assets/PendulumLogo';
 import { toTitle } from '../helpers/string';
@@ -11,34 +11,34 @@ const options = [TenantName.Pendulum, TenantName.Amplitude, TenantName.Foucoco];
 const ChainSelector = (): JSX.Element => {
   const { switchChain, currentTenant } = useSwitchChain();
   return (
-    <Dropdown vertical="bottom" end className="w-30">
-      <Button
-        size="sm"
-        color="ghost"
-        className="text-sm border-base-300 bg-base-200 min-h-[2.1rem] h-auto px-2 sm:px-3"
+    <details className="w-30 dropdown">
+      <summary
+        className="text-sm border-base-300 bg-base-200 min-h-[2.1rem] h-auto px-2 sm:px-3 btn btn-sm btn-ghost"
         title={currentTenant}
       >
         {currentTenant === TenantName.Pendulum ? (
           <PendulumLogo className="w-4 h-5 mr-1" />
         ) : (
           <AmplitudeLogo className="w-4 h-4 mr-1 " />
         )}
-        <span className="text-sm mr-1 sm:mr-2">{currentTenant ? toTitle(currentTenant) : ''}</span>
+        {isDesktop ? <span className="mr-1 text-sm sm:mr-2">{currentTenant ? toTitle(currentTenant) : ''}</span> : <></>}
         <ChevronDownIcon className="w-4 h-4" stroke-width="2" />
-      </Button>
-      <Dropdown.Menu className="w-30 mt-1.5 p-1 text-sm border-base-300 border bg-base-200 rounded-xl shadow-none">
+      </summary>
+      <ul className="text-sm border-base-300 border bg-base-200 rounded-xl shadow-none menu dropdown-content z-[1]">
         {options.map((option, i) => (
-          <Dropdown.Item key={i} onClick={() => switchChain(option)}>
-            {option === TenantName.Pendulum ? (
-              <PendulumLogo light={currentTenant !== TenantName.Pendulum} className="w-5 h-6 mr-1" />
-            ) : (
-              <AmplitudeLogo className="w-5 h-5 mr-1" />
-            )}
-            <span className="text-sm mr-3">{toTitle(option)}</span>
-          </Dropdown.Item>
+          <li key={i} onClick={() => switchChain(option)}>
+            <a>
+              {option === TenantName.Pendulum ? (
+                <PendulumLogo light={currentTenant !== TenantName.Pendulum} className="w-5 h-6 mr-1" />
+              ) : (
+                <AmplitudeLogo className="w-5 h-5 mr-1" />
+              )}
+              <span className="mr-3 text-sm">{toTitle(option)}</span>
+            </a>
+          </li>
         ))}
-      </Dropdown.Menu>
-    </Dropdown>
+      </ul>
+    </details>
   );
 };
 

src/pages/staking/dialogs/Dialog.tsx → src/components/Dialog/index.tsx

@@ -1,14 +1,13 @@
 import { Modal } from 'react-daisyui';
 import { FC, createPortal, useCallback, useEffect, useRef, useState } from 'preact/compat';
-
-import { CloseButton } from '../../../components/CloseButton';
+import { CloseButton } from '../CloseButton';
 
 interface DialogProps {
   visible: boolean;
   onClose: () => void;
   headerText?: string;
   content: JSX.Element;
-  actions: JSX.Element;
+  actions?: JSX.Element;
   form?: {
     onSubmit: (event?: Event) => void | Promise<void>;
     className?: string;

src/components/GetToken/index.tsx

@@ -9,6 +9,7 @@ import { useAccountBalance } from '../../shared/useAccountBalance';
 import useSwitchChain from '../../hooks/useSwitchChain';
 import { useNodeInfoState } from '../../NodeInfoProvider';
 import { TenantName } from '../../models/Tenant';
+import { isDesktop } from 'react-device-detect';
 
 const tenantColors = {
   [TenantName.Pendulum]: {
@@ -78,20 +79,28 @@ export const GetToken = () => {
 
   const isBalanceZero = Number(total) === 0;
 
+  const showCurrentToken = getTokenIcon(currentTenant)
   return (
     <section className="flex items-center">
-      {isBalanceZero && (
+      {(isBalanceZero && isDesktop) ? (
         <>
           <InsufficientFundsTooltip tenantName={currentTenant} />
           <JumpingArrow tenantName={currentTenant} />
         </>
-      )}
+      ) : <></>
+      }
 
       {tokenSymbol ? (
         <NavLink to={link}>
           <Button size="sm" className={`text-sm px-2 sm:px-3 ${getTenantColors(currentTenant).button}`} type="button">
-            {getTokenIcon(currentTenant)}
+            <div className="hidden md:flex">
+            {showCurrentToken}
             <p className="text-neutral">GET {tokenSymbol}</p>
+            </div>
+            <div className="flex md:hidden">
+              <p className="mr-2 text-neutral">GET</p>
+              {showCurrentToken}
+            </div>
           </Button>
         </NavLink>
       ) : (