add icons and update stories

* connect wagmi on deposit if remember me

* use alert message instead of button message

* clear input state when closing transfers forms to renable trade place order button

dev-dist/registerSW.js

@@ -1 +0,0 @@
-if('serviceWorker' in navigator) navigator.serviceWorker.register('/dev-sw.js?dev-sw', { scope: '/', type: 'classic' })

package.json

@@ -44,8 +44,6 @@
     "@dydxprotocol/v4-localization": "^1.1.11",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
-    "@privy-io/react-auth": "^1.53.1",
-    "@privy-io/wagmi-connector": "^0.1.12",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.0.3",
@@ -153,7 +151,6 @@
     "url-polyfill": "^1.1.12",
     "util": "^0.12.5",
     "vite": "^4.3.9",
-    "vite-plugin-pwa": "^0.17.4",
     "vite-plugin-svgr": "^3.2.0",
     "vitest": "^0.32.2",
     "w3name": "^1.0.8",

src/App.tsx

@@ -2,8 +2,6 @@ import { lazy, Suspense } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 import styled, { AnyStyledComponent, css } from 'styled-components';
 import { WagmiConfig } from 'wagmi';
-import { PrivyProvider } from '@privy-io/react-auth';
-import { PrivyWagmiConnector } from '@privy-io/wagmi-connector';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { GrazProvider } from 'graz';
 
@@ -34,7 +32,7 @@ import { NotificationsToastArea } from '@/layout/NotificationsToastArea';
 import { DialogManager } from '@/layout/DialogManager';
 import { GlobalCommandDialog } from '@/views/dialogs/GlobalCommandDialog';
 
-import { config, privyConfig } from '@/lib/wagmi';
+import { config } from '@/lib/wagmi';
 
 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';
@@ -122,13 +120,8 @@ const wrapProvider = (Component: React.ComponentType<any>, props?: any) => {
 };
 
 const providers = [
-  wrapProvider(PrivyProvider, {
-    appId: import.meta.env.VITE_PRIVY_APP_ID,
-    config: privyConfig,
-  }),
   wrapProvider(QueryClientProvider, { client: queryClient }),
   wrapProvider(GrazProvider),
-  wrapProvider(PrivyWagmiConnector, { wagmiChainsConfig: config }),
   wrapProvider(WagmiConfig, { config }),
   wrapProvider(LocaleProvider),
   wrapProvider(RestrictionProvider),

src/components/DiffArrow.stories.tsx

@@ -14,7 +14,7 @@ export const DiffArrowStory: Story<DiffArrowProps> = (args) => (
 
 DiffArrowStory.argTypes = {
   direction: {
-    options: ['left', 'right'],
+    options: ['left', 'right', 'up', 'down'],
     control: { type: 'select' },
     defaultValue: 'right',
   },

src/components/DiffArrow.tsx

@@ -10,7 +10,7 @@ type ElementProps = {
 
 type StyleProps = {
   className?: string;
-  direction?: 'right' | 'left';
+  direction?: 'right' | 'left' | 'up' | 'down';
 };
 
 export type DiffArrowProps = ElementProps & StyleProps;
@@ -57,5 +57,11 @@ Styled.DiffArrowContainer = styled.span<DiffArrowProps>`
       left: css`
         transform: scaleX(-1);
       `,
+      up: css`
+        transform: rotate(-90deg);
+      `,
+      down: css`
+        transform: rotate(90deg);
+      `
     }[direction || 'right'])}
 `;

src/components/Icon.tsx

@@ -44,6 +44,7 @@ import {
   MenuIcon,
   MigrateIcon,
   MintscanIcon,
+  MoonIcon,
   OrderbookIcon,
   OrderCanceledIcon,
   OrderFilledIcon,
@@ -66,6 +67,7 @@ import {
   ShowIcon,
   TogglesMenuIcon,
   StarIcon,
+  SunIcon,
   TerminalIcon,
   TradeIcon,
   TransferIcon,
@@ -119,6 +121,7 @@ export enum IconName {
   Menu = 'Menu',
   Migrate = 'Migrate',
   Mintscan = 'Mintscan',
+  Moon = 'Moon',
   Onboarding = 'Onboarding',
   Orderbook = 'OrderbookIcon',
   OrderCanceled = 'OrderCanceled',
@@ -141,6 +144,7 @@ export enum IconName {
   Share = 'Share',
   Show = 'Show',
   Star = 'Star',
+  Sun = 'Sun',
   Terminal = 'Terminal',
   TogglesMenu = 'TogglesMenu',
   Trade = 'Trade',
@@ -195,6 +199,7 @@ const icons = {
   [IconName.Menu]: MenuIcon,
   [IconName.Migrate]: MigrateIcon,
   [IconName.Mintscan]: MintscanIcon,
+  [IconName.Moon]: MoonIcon,
   [IconName.Orderbook]: OrderbookIcon,
   [IconName.OrderCanceled]: OrderCanceledIcon,
   [IconName.OrderFilled]: OrderFilledIcon,
@@ -216,6 +221,7 @@ const icons = {
   [IconName.Share]: ShareIcon,
   [IconName.Show]: ShowIcon,
   [IconName.Star]: StarIcon,
+  [IconName.Sun]: SunIcon,
   [IconName.Terminal]: TerminalIcon,
   [IconName.TogglesMenu]: TogglesMenuIcon,
   [IconName.Trade]: TradeIcon,

src/constants/wallets.ts

@@ -31,7 +31,6 @@ import { DydxNetwork, ENVIRONMENT_CONFIG_MAP } from './networks';
 export enum WalletConnectionType {
   CoinbaseWalletSdk = 'coinbaseWalletSdk',
   CosmosSigner = 'CosmosSigner',
-  Privy = 'Privy',
   InjectedEip1193 = 'injectedEip1193',
   WalletConnect2 = 'walletConnect2',
 }
@@ -69,9 +68,6 @@ export const walletConnectionTypes: Record<WalletConnectionType, WalletConnectio
   [WalletConnectionType.CosmosSigner]: {
     name: 'CosmosSigner',
   },
-  [WalletConnectionType.Privy]: {
-    name: 'Privy',
-  },
 };
 
 // Wallets
@@ -94,7 +90,6 @@ export enum WalletType {
   WalletConnect2 = 'WALLETCONNECT_2',
   // TestWallet = 'TEST_WALLET',
   OtherWallet = 'OTHER_WALLET',
-  Privy = 'PRIVY',
 }
 
 const WALLET_CONNECT_EXPLORER_RECOMMENDED_WALLETS = {
@@ -248,12 +243,6 @@ export const wallets: Record<WalletType, WalletConfig> = {
     icon: KeplrIcon,
     connectionTypes: [WalletConnectionType.CosmosSigner],
   },
-  [WalletType.Privy]: {
-    type: WalletType.Privy,
-    stringKey: STRING_KEYS.KEPLR,
-    icon: GenericWalletIcon,
-    connectionTypes: [WalletConnectionType.Privy],
-  },
 };
 
 // Injected EIP-1193 Providers

src/hooks/useAccounts.tsx

@@ -1,19 +1,13 @@
 import { useCallback, useContext, createContext, useEffect, useState, useMemo } from 'react';
 
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { AES, enc } from 'crypto-js';
 import { NOBLE_BECH32_PREFIX, LocalWallet, type Subaccount } from '@dydxprotocol/v4-client-js';
 
 import { OnboardingGuard, OnboardingState, type EvmDerivedAddresses } from '@/constants/account';
 import { DialogTypes } from '@/constants/dialogs';
 import { LocalStorageKey, LOCAL_STORAGE_VERSIONS } from '@/constants/localStorage';
-import {
-  DydxAddress,
-  EvmAddress,
-  PrivateInformation,
-  WalletConnectionType,
-  getSignTypedData,
-} from '@/constants/wallets';
+import { DydxAddress, EvmAddress, PrivateInformation } from '@/constants/wallets';
 
 import { setOnboardingState, setOnboardingGuard } from '@/state/account';
 import { forceOpenDialog } from '@/state/dialogs';
@@ -26,11 +20,6 @@ import { useLocalStorage } from './useLocalStorage';
 import { useRestrictions } from './useRestrictions';
 import { useWalletConnection } from './useWalletConnection';
 
-import { useSignTypedData } from 'wagmi';
-import { getSelectedNetwork } from '@/state/appSelectors';
-import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
-import { usePrivy } from '@privy-io/react-auth';
-
 const AccountsContext = createContext<ReturnType<typeof useAccountsContext> | undefined>(undefined);
 
 AccountsContext.displayName = 'Accounts';
@@ -164,7 +153,6 @@ const useAccountsContext = () => {
 
   // dYdX wallet / onboarding state
   const [localDydxWallet, setLocalDydxWallet] = useState<LocalWallet>();
-  const [localNobleWallet, setLocalNobleWallet] = useState<LocalWallet>();
   const [hdKey, setHdKey] = useState<PrivateInformation>();
 
   const dydxAccounts = useMemo(() => localDydxWallet?.accounts, [localDydxWallet]);
@@ -174,11 +162,6 @@ const useAccountsContext = () => {
     [localDydxWallet]
   );
 
-  const nobleAddress = useMemo(
-    () => localNobleWallet?.address,
-    [localNobleWallet]
-  );
-
   const setWalletFromEvmSignature = async (signature: string) => {
     const { wallet, mnemonic, privateKey, publicKey } = await getWalletFromEvmSignature({
       signature,
@@ -193,20 +176,6 @@ const useAccountsContext = () => {
     }
   }, [evmAddress, dydxAddress]);
 
-  const selectedNetwork = useSelector(getSelectedNetwork);
-
-  const chainId = Number(ENVIRONMENT_CONFIG_MAP[selectedNetwork].ethereumChainId);
-
-  const signTypedData = getSignTypedData(selectedNetwork);
-  const { signTypedDataAsync } = useSignTypedData({
-    ...signTypedData,
-    domain: {
-      ...signTypedData.domain,
-      chainId,
-    },
-  });
-  const { ready, authenticated } = usePrivy();
-
   useEffect(() => {
     (async () => {
       if (connectedDydxAddress && signerGraz) {
@@ -223,17 +192,7 @@ const useAccountsContext = () => {
 
           const evmDerivedAccount = evmDerivedAddresses[evmAddress];
 
-          if (walletConnectionType === WalletConnectionType.Privy && authenticated && ready) {
-            try {
-              const signature = await signTypedDataAsync();
-
-              await setWalletFromEvmSignature(signature);
-              dispatch(setOnboardingState(OnboardingState.AccountConnected));
-            } catch (error) {
-              log('useAccounts/decryptSignature', error);
-              forgetEvmSignature();
-            }
-          } else if (evmDerivedAccount?.encryptedSignature) {
+          if (evmDerivedAccount?.encryptedSignature) {
             try {
               const signature = decryptSignature(evmDerivedAccount.encryptedSignature);
 
@@ -252,15 +211,7 @@ const useAccountsContext = () => {
         dispatch(setOnboardingState(OnboardingState.Disconnected));
       }
     })();
-  }, [
-    evmAddress,
-    evmDerivedAddresses,
-    signerWagmi,
-    connectedDydxAddress,
-    signerGraz,
-    authenticated,
-    ready,
-  ]);
+  }, [evmAddress, evmDerivedAddresses, signerWagmi, connectedDydxAddress, signerGraz]);
 
   // abacus
   useEffect(() => {
@@ -273,7 +224,6 @@ const useAccountsContext = () => {
       if (hdKey?.mnemonic) {
         const nobleWallet = await LocalWallet.fromMnemonic(hdKey.mnemonic, NOBLE_BECH32_PREFIX);
         abacusStateManager.setNobleWallet(nobleWallet);
-        setLocalNobleWallet(nobleWallet);
       }
     };
     setNobleWallet();
@@ -372,7 +322,6 @@ const useAccountsContext = () => {
     localDydxWallet,
     dydxAccounts,
     dydxAddress,
-    nobleAddress,
 
     // Onboarding state
     saveHasAcknowledgedTerms,

src/hooks/useDisplayedWallets.ts

@@ -21,7 +21,6 @@ export const useDisplayedWallets = () => {
     // WalletType.BitKeep,
     // WalletType.Coin98,
 
-    WalletType.Privy,
     WalletType.OtherWallet,
   ].filter(isTruthy);
 };

src/hooks/useMatchingEvmNetwork.ts

@@ -1,9 +1,5 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { useNetwork, useSwitchNetwork } from 'wagmi';
-import { useSwitchNetwork as useSwitchNetworkPrivy } from '@privy-io/wagmi-connector';
-import { WalletConnectionType } from '@/constants/wallets';
-
-import { useWalletConnection } from './useWalletConnection';
 
 export const useMatchingEvmNetwork = ({
   chainId,
@@ -15,10 +11,7 @@ export const useMatchingEvmNetwork = ({
   onError?: (error: Error) => void;
 }) => {
   const { chain } = useNetwork();
-  const { walletConnectionType } = useWalletConnection();
   const { isLoading, switchNetworkAsync } = useSwitchNetwork({ onError });
-  const { isLoading: isLoadingPrivy, switchNetworkAsync: switchNetworkAsyncPrivy } =
-    useSwitchNetworkPrivy({ onError });
 
   // If chainId is not a number, we can assume it is a non EVM compatible chain
   const isMatchingNetwork = useMemo(
@@ -28,11 +21,7 @@ export const useMatchingEvmNetwork = ({
 
   const matchNetwork = useCallback(async () => {
     if (!isMatchingNetwork) {
-      if (walletConnectionType === WalletConnectionType.Privy) {
-        await switchNetworkAsyncPrivy?.(Number(chainId));
-      } else {
-        await switchNetworkAsync?.(Number(chainId));
-      }
+      await switchNetworkAsync?.(Number(chainId));
     }
   }, [chainId, chain]);
 
@@ -45,6 +34,6 @@ export const useMatchingEvmNetwork = ({
   return {
     isMatchingNetwork,
     matchNetwork,
-    isSwitchingNetwork: isLoading || isLoadingPrivy,
+    isSwitchingNetwork: isLoading,
   };
 };

src/hooks/useWalletConnection.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState, useMemo } from 'react';
 import { useSelector } from 'react-redux';
-import { usePrivy, useLogout } from '@privy-io/react-auth';
 
+import { EvmDerivedAddresses } from '@/constants/account';
 import { LocalStorageKey } from '@/constants/localStorage';
 import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
 
@@ -107,21 +107,20 @@ export const useWalletConnection = () => {
 
   const { connectAsync: connectWagmi } = useConnectWagmi({ connector: wagmiConnector });
   const { suggestAndConnect: connectGraz } = useConnectGraz();
-  const { login, ready, authenticated } = usePrivy();
-  const { logout } = useLogout();
+  const [evmDerivedAddresses] = useLocalStorage({
+    key: LocalStorageKey.EvmDerivedAddresses,
+    defaultValue: {} as EvmDerivedAddresses,
+  });
 
   const connectWallet = useCallback(
-    async ({ walletType }: { walletType: WalletType }) => {
+    async ({ walletType, forceConnect }: { walletType?: WalletType; forceConnect?: boolean }) => {
+      if (!walletType) return { walletType, walletConnectionType };
+
       const walletConnection = getWalletConnection({ walletType });
 
       try {
         if (!walletConnection) {
           throw new Error('Onboarding: No wallet connection found.');
-        } else if (walletConnection.type === WalletConnectionType.Privy) {
-
-          if (!isConnectedWagmi && !authenticated && ready) {
-            login();
-          }
         } else if (walletConnection.type === WalletConnectionType.CosmosSigner) {
           const cosmosWalletType = {
             [WalletType.Keplr as string]: CosmosWalletType.KEPLR,
@@ -140,7 +139,11 @@ export const useWalletConnection = () => {
             });
           }
         } else {
-          if (!isConnectedWagmi) {
+          const isAccountConnected = Boolean(
+            evmAddress && evmDerivedAddresses[evmAddress]?.encryptedSignature
+          );
+          // if account connected (via remember me), do not show wagmi popup until forceConnect
+          if (!isConnectedWagmi && (forceConnect || !isAccountConnected)) {
             await connectWagmi({
               connector: resolveWagmiConnector({
                 walletType,
@@ -164,7 +167,7 @@ export const useWalletConnection = () => {
         walletConnectionType: walletConnection.type,
       };
     },
-    [isConnectedGraz, signerGraz, isConnectedWagmi, signerWagmi, login, ready, authenticated]
+    [isConnectedGraz, signerGraz, isConnectedWagmi, signerWagmi]
   );
 
   const disconnectWallet = useCallback(async () => {
@@ -173,7 +176,6 @@ export const useWalletConnection = () => {
 
     if (isConnectedWagmi) await disconnectWagmi();
     if (isConnectedGraz) await disconnectGraz();
-    if (authenticated) await logout();
   }, [isConnectedGraz, isConnectedWagmi]);
 
   // Wallet selection
@@ -237,6 +239,12 @@ export const useWalletConnection = () => {
     evmAddressWagmi,
     signerWagmi,
     publicClientWagmi,
+    isConnectedWagmi,
+    connectWallet: () =>
+      connectWallet({
+        walletType: selectedWalletType,
+        forceConnect: true,
+      }),
 
     // Wallet connection (Cosmos)
     dydxAddress,

src/icons/index.ts

@@ -39,6 +39,7 @@ export { default as MarketsIcon } from './markets.svg';
 export { default as MenuIcon } from './menu.svg';
 export { default as MigrateIcon } from './migrate.svg';
 export { default as MintscanIcon } from './logos/mintscan.svg';
+export { default as MoonIcon } from './moon.svg';
 export { default as OrderbookIcon } from './orderbook.svg';
 export { default as OverviewIcon } from './overview.svg';
 export { default as PencilIcon } from './pencil.svg';
@@ -56,6 +57,7 @@ export { default as SendIcon } from './send.svg';
 export { default as ShareIcon } from './share.svg';
 export { default as ShowIcon } from './show.svg';
 export { default as StarIcon } from './star.svg';
+export { default as SunIcon } from './sun.svg';
 export { default as TerminalIcon } from './terminal.svg';
 export { default as TogglesMenuIcon } from './toggles-menu.svg';
 export { default as TradeIcon } from './trade.svg';

src/icons/moon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
+</svg>

src/icons/sun.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
+</svg>

src/lib/abacus/dydxChainTransactions.ts

@@ -56,6 +56,10 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
     this.store = undefined;
   }
 
+  get isNobleClientConnected(): boolean {
+    return this.nobleClient?.isConnected ?? false;
+  }
+
   setStore(store: RootStore): void {
     this.store = store;
   }

src/lib/abacus/index.ts

@@ -171,6 +171,15 @@ class AbacusStateManager {
     this.setTransferValue({ value: null, field: TransferInputField.usdcSize });
   };
 
+  resetInputState = () => {
+    this.clearTransferInputValues();
+    this.setTransferValue({
+      field: TransferInputField.type,
+      value: null,
+    });
+    this.clearTradeInputValues();
+  };
+
   // ------ Set Data ------ //
   setStore = (store: RootStore) => {
     this.store = store;
@@ -262,11 +271,7 @@ class AbacusStateManager {
   ) => this.stateManager.cancelOrder(orderId, callback);
 
   cctpWithdraw = (
-    callback: (
-      success: boolean,
-      parsingError: Nullable<ParsingError>,
-      data: string,
-    ) => void
+    callback: (success: boolean, parsingError: Nullable<ParsingError>, data: string) => void
   ): void => this.stateManager.commitCCTPWithdraw(callback);
 
   // ------ Utils ------ //

src/lib/wagmi.ts

@@ -1,6 +1,5 @@
 import { createConfig, configureChains, mainnet, Chain } from 'wagmi';
 import { goerli } from 'wagmi/chains';
-import type { PrivyClientConfig } from '@privy-io/react-auth';
 
 import {
   arbitrum,
@@ -86,19 +85,6 @@ export const WAGMI_SUPPORTED_CHAINS: Chain[] = [
   kava,
 ];
 
-export const privyConfig: PrivyClientConfig = {
-  embeddedWallets: {
-    createOnLogin: 'users-without-wallets',
-    requireUserPasswordOnCreate: true,
-    noPromptOnSignature: true,
-  },
-  loginMethods: ['email', 'sms', 'twitter', 'google', 'apple'],
-  appearance: {
-    theme: '#28283c',
-  },
-  defaultChain: sepolia
-};
-
 const { chains, publicClient, webSocketPublicClient } = configureChains(
   WAGMI_SUPPORTED_CHAINS,
   [

src/lib/wallet/index.ts

@@ -62,12 +62,6 @@ export const getWalletConnection = ({
           type: WalletConnectionType.CosmosSigner,
         };
       }
-
-      case WalletConnectionType.Privy: {
-        return {
-          type: WalletConnectionType.Privy,
-        };
-      }
     }
   }
 };

src/views/dialogs/OnboardingDialog/ChooseWallet.tsx

@@ -1,4 +1,6 @@
+import { useState } from 'react';
 import styled, { AnyStyledComponent } from 'styled-components';
+import { useDispatch } from 'react-redux';
 
 import { AlertType } from '@/constants/alerts';
 import { STRING_KEYS } from '@/constants/localization';
@@ -11,7 +13,7 @@ import { Button } from '@/components/Button';
 import { Icon } from '@/components/Icon';
 import { Link } from '@/components/Link';
 
-import { useAccounts, useBreakpoints, useStringGetter, useURLConfigs } from '@/hooks';
+import { useAccounts, useStringGetter, useURLConfigs } from '@/hooks';
 import { useDisplayedWallets } from '@/hooks/useDisplayedWallets';
 
 import { breakpoints } from '@/styles';
@@ -25,8 +27,6 @@ export const ChooseWallet = () => {
 
   const { selectWalletType, selectedWalletType, selectedWalletError } = useAccounts();
 
-  const { isMobile } = useBreakpoints();
-
   return (
     <>
       {selectedWalletType && selectedWalletError && (
@@ -56,11 +56,7 @@ export const ChooseWallet = () => {
             slotLeft={<Styled.Icon iconComponent={wallets[walletType].icon} />}
             size={ButtonSize.Small}
           >
-            <div>
-              {walletType !== WalletType.Privy && import.meta.env.VITE_PRIVY_APP_ID
-                ? stringGetter({ key: wallets[walletType].stringKey })
-                : `Socials ${isMobile ? '' : '(Email, SMS, etc.)'}`}
-            </div>
+            <div>{stringGetter({ key: wallets[walletType].stringKey })}</div>
           </Styled.WalletButton>
         ))}
       </Styled.Wallets>

src/views/dialogs/OnboardingDialog/GenerateKeys.tsx

@@ -72,6 +72,7 @@ export const GenerateKeys = ({
       if (message) {
         log('GenerateKeys/switchNetwork', error, { walletErrorType });
         setError(message);
+        throw error;
       }
     }
   };

src/views/forms/AccountManagementForms/ChainSelectMenu.tsx

@@ -34,30 +34,11 @@ export const ChainSelectMenu = ({ label, selectedChain, onSelectChain }: Element
     slotBefore: <Styled.Img src={chain.iconUrl} alt="" />,
   }));
 
-  const selectedOption = selectedChain === 'coinbase' ?  {
-    stringKey: 'Coinbase',
-    iconUrl: '/wallets/coinbase-wallet.png',
-  } : chains.find((item) => item.type === selectedChain);
-
-  const exchanges = [
-    {
-      value: 'coinbase',
-      label: 'Coinbase',
-      onSelect: () => {
-        onSelectChain('coinbase');
-      },
-      slotBefore: <Styled.Img src="/wallets/coinbase-wallet.png" alt="" />,
-    }
-  ];
+  const selectedOption = chains.find((item) => item.type === selectedChain);
 
   return (
     <SearchSelectMenu
       items={[
-        {
-          group: 'exchanges',
-          groupLabel: 'Exchanges',
-          items: exchanges,
-        },
         {
           group: 'chains',
           groupLabel: stringGetter({ key: STRING_KEYS.CHAINS }),

src/views/forms/AccountManagementForms/DepositForm.tsx

@@ -17,6 +17,7 @@ import type { EvmAddress } from '@/constants/wallets';
 import { useAccounts, useDebounce, useStringGetter, useSelectedNetwork } from '@/hooks';
 import { useAccountBalance, CHAIN_DEFAULT_TOKEN_ADDRESS } from '@/hooks/useAccountBalance';
 import { useLocalNotifications } from '@/hooks/useLocalNotifications';
+import { useWalletConnection } from '@/hooks/useWalletConnection';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 import { formMixins } from '@/styles/formMixins';
@@ -38,14 +39,12 @@ import abacusStateManager from '@/lib/abacus';
 import { MustBigNumber } from '@/lib/numbers';
 import { getNobleChainId, NATIVE_TOKEN_ADDRESS } from '@/lib/squid';
 import { log } from '@/lib/telemetry';
-import { parseWalletError, truncateAddress } from '@/lib/wallet';
+import { parseWalletError } from '@/lib/wallet';
 
 import { ChainSelectMenu } from './ChainSelectMenu';
 import { TokenSelectMenu } from './TokenSelectMenu';
 
 import { DepositButtonAndReceipt } from './DepositForm/DepositButtonAndReceipt';
-import { QrCode } from '@/components/QrCode';
-import { CopyButton } from '@/components/CopyButton';
 
 type DepositFormProps = {
   onDeposit?: () => void;
@@ -57,9 +56,8 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
   const [error, setError] = useState<Error | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const { selectedNetwork } = useSelectedNetwork();
-  const [isCoinbase, setIsCoinbase] = useState(false);
 
-  const { evmAddress, signerWagmi, publicClientWagmi, nobleAddress } = useAccounts();
+  const { evmAddress, signerWagmi, publicClientWagmi } = useAccounts();
 
   const { addTransferNotification } = useLocalNotifications();
 
@@ -123,11 +121,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
     });
 
     return () => {
-      abacusStateManager.clearTransferInputValues();
-      abacusStateManager.setTransferValue({
-        field: TransferInputField.type,
-        value: null,
-      });
+      abacusStateManager.resetInputState();
     };
   }, []);
 
@@ -136,10 +130,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
   }, [error]);
 
   const onSelectChain = useCallback((chain: string) => {
-    if (chain === 'coinbase') {
-      setIsCoinbase(true);
-    } else if (chain) {
-      setIsCoinbase(false);
+    if (chain) {
       abacusStateManager.clearTransferInputValues();
       abacusStateManager.setTransferValue({
         field: TransferInputField.chain,
@@ -241,6 +232,10 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
           throw new Error('Missing request payload');
         }
 
+        if (isCctp && !abacusStateManager.chainTransactions.isNobleClientConnected) {
+          throw new Error('Noble RPC endpoint unaccessible');
+        }
+
         setIsLoading(true);
 
         await validateTokenApproval();
@@ -370,43 +365,11 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
     return <LoadingSpace id="DepositForm" />;
   }
 
-  if (isCoinbase) {
-    return (
-      <Styled.Form onSubmit={onSubmit}>
-        <ChainSelectMenu
-          selectedChain={isCoinbase ? 'coinbase' : chainIdStr || undefined}
-          onSelectChain={onSelectChain}
-        />
-        {nobleAddress && (
-          <>
-            <Styled.ReceiveQr
-              side="bottom"
-              detailItems={[
-                {
-                  key: 'nobleAddress',
-                  label: "Noble Address",
-                  value: nobleAddress,
-                },
-              ]}
-            >
-              <QrCode size={432} value={nobleAddress} />
-            </Styled.ReceiveQr>
-            <p>
-              * This address only supports transfers of USDC to the Noble chain.
-            </p>
-            <CopyButton value={nobleAddress} />
-          </>
-        )}
-      </Styled.Form>
-    );
-  }
+  const [requireUserActionInWallet, setRequireUserActionInWallet] = useState(false);
 
   return (
     <Styled.Form onSubmit={onSubmit}>
-      <ChainSelectMenu
-        selectedChain={isCoinbase ? 'coinbase' : chainIdStr || undefined}
-        onSelectChain={onSelectChain}
-      />
+      <ChainSelectMenu selectedChain={chainIdStr || undefined} onSelectChain={onSelectChain} />
       <TokenSelectMenu selectedToken={sourceToken || undefined} onSelectToken={onSelectToken} />
       <Styled.WithDetailsReceipt side="bottom" detailItems={amountInputReceipt}>
         <FormInput
@@ -422,7 +385,11 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
         />
       </Styled.WithDetailsReceipt>
       {errorMessage && <AlertMessage type={AlertType.Error}>{errorMessage}</AlertMessage>}
-
+      {requireUserActionInWallet && (
+        <AlertMessage type={AlertType.Warning}>
+          {stringGetter({ key: STRING_KEYS.CHECK_WALLET_FOR_REQUEST })}
+        </AlertMessage>
+      )}
       <Styled.Footer>
         <DepositButtonAndReceipt
           isDisabled={isDisabled}
@@ -431,6 +398,8 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
           setSlippage={onSetSlippage}
           slippage={slippage}
           sourceToken={sourceToken || undefined}
+          setRequireUserActionInWallet={setRequireUserActionInWallet}
+          setError={setError}
         />
       </Styled.Footer>
     </Styled.Form>
@@ -467,13 +436,3 @@ Styled.TransactionInfo = styled.span`
 Styled.FormInputButton = styled(Button)`
   ${formMixins.inputInnerButton}
 `;
-
-Styled.Exchange = styled.div`
-  ${layoutMixins.flexColumn}
-  gap: 1rem;
-
-  align-items: center;
-`;
-
-Styled.ReceiveQr = styled(WithDetailsReceipt)`
-`;

src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx

@@ -1,8 +1,7 @@
-import { type Dispatch, type ReactNode, type SetStateAction, useState, useMemo } from 'react';
+import { type Dispatch, type SetStateAction, useState, type ReactNode, useEffect } from 'react';
 import styled, { type AnyStyledComponent } from 'styled-components';
 import { shallowEqual, useSelector } from 'react-redux';
 import type { RouteData } from '@0xsquid/sdk';
-import { formatUnits } from 'viem';
 
 import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons';
 
@@ -12,6 +11,7 @@ import { NumberSign, TOKEN_DECIMALS } from '@/constants/numbers';
 
 import { useStringGetter, useTokenConfigs } from '@/hooks';
 import { useMatchingEvmNetwork } from '@/hooks/useMatchingEvmNetwork';
+import { useWalletConnection } from '@/hooks/useWalletConnection';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 
@@ -39,7 +39,8 @@ type ElementProps = {
   isLoading?: boolean;
 
   chainId?: string | number;
-  setError?: Dispatch<SetStateAction<Error | undefined>>;
+  setError?: Dispatch<SetStateAction<Error | null>>;
+  setRequireUserActionInWallet: (val: boolean) => void;
   slippage: number;
   slotError?: ReactNode;
   setSlippage: (slippage: number) => void;
@@ -57,6 +58,7 @@ export const DepositButtonAndReceipt = ({
   isDisabled,
   isLoading,
   slotError,
+  setRequireUserActionInWallet,
 }: ElementProps) => {
   const [showFeeBreakdown, setShowFeeBreakdown] = useState(false);
   const [isEditingSlippage, setIsEditingSlipapge] = useState(false);
@@ -64,6 +66,24 @@ export const DepositButtonAndReceipt = ({
 
   const canAccountTrade = useSelector(calculateCanAccountTrade, shallowEqual);
 
+  const { connectWallet, isConnectedWagmi } = useWalletConnection();
+
+  const connectWagmi = async () => {
+    try {
+      setRequireUserActionInWallet(false);
+      await connectWallet();
+      setRequireUserActionInWallet(false);
+    } catch (e) {
+      setRequireUserActionInWallet(true);
+    }
+  };
+
+  useEffect(() => {
+    if (!isConnectedWagmi && canAccountTrade) {
+      connectWagmi();
+    }
+  }, [isConnectedWagmi, canAccountTrade]);
+
   const {
     matchNetwork: switchNetwork,
     isSwitchingNetwork,
@@ -80,7 +100,7 @@ export const DepositButtonAndReceipt = ({
     useSelector(getSubaccountBuyingPower, shallowEqual) || {};
 
   const { isCctp, summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
-  const { usdcDecimals, usdcLabel } = useTokenConfigs();
+  const { usdcLabel } = useTokenConfigs();
 
   const feeSubitems: DetailsItem[] = [];
 
@@ -116,7 +136,9 @@ export const DepositButtonAndReceipt = ({
           {stringGetter({ key: STRING_KEYS.EXPECTED_DEPOSIT_AMOUNT })} <Tag>{usdcLabel}</Tag>
         </span>
       ),
-      value: <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={summary?.toAmount} />,
+      value: (
+        <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={summary?.toAmount} />
+      ),
       subitems: [
         {
           key: 'minimum-deposit-amount',
@@ -126,7 +148,11 @@ export const DepositButtonAndReceipt = ({
             </span>
           ),
           value: (
-            <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={summary?.toAmountMin} />
+            <Output
+              type={OutputType.Fiat}
+              fractionDigits={TOKEN_DECIMALS}
+              value={summary?.toAmountMin}
+            />
           ),
           tooltip: 'minimum-deposit-amount',
         },
@@ -253,6 +279,8 @@ export const DepositButtonAndReceipt = ({
     >
       {!canAccountTrade ? (
         <OnboardingTriggerButton size={ButtonSize.Base} />
+      ) : !isConnectedWagmi ? (
+        <Button action={ButtonAction.Primary} onClick={connectWallet} state={{ isLoading: true }} />
       ) : !isMatchingNetwork ? (
         <Button
           action={ButtonAction.Primary}

src/views/forms/AccountManagementForms/WithdrawForm.tsx

@@ -101,11 +101,7 @@ export const WithdrawForm = () => {
     });
 
     return () => {
-      abacusStateManager.clearTransferInputValues();
-      abacusStateManager.setTransferValue({
-        field: TransferInputField.type,
-        value: null,
-      });
+      abacusStateManager.resetInputState();
     };
   }, []);
 
@@ -148,6 +144,10 @@ export const WithdrawForm = () => {
           throw new Error('Invalid request payload');
         }
 
+        if (isCctp && !abacusStateManager.chainTransactions.isNobleClientConnected) {
+          throw new Error('Noble RPC endpoint unaccessible');
+        }
+
         setIsLoading(true);
         setError(undefined);
 

src/views/forms/TransferForm.tsx

@@ -118,11 +118,7 @@ export const TransferForm = ({
     onChangeAsset(selectedAsset);
 
     return () => {
-      abacusStateManager.clearTransferInputValues();
-      abacusStateManager.setTransferValue({
-        field: TransferInputField.type,
-        value: null,
-      });
+      abacusStateManager.resetInputState();
     };
   }, []);
 

vite.config.ts

@@ -2,7 +2,6 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
 import svgr from 'vite-plugin-svgr';
-import { VitePWA } from 'vite-plugin-pwa';
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => ({
@@ -51,12 +50,6 @@ export default defineConfig(({ mode }) => ({
     svgr({
       exportAsDefault: true,
     }),
-    VitePWA({
-      registerType: 'autoUpdate',
-      devOptions: {
-        enabled: true,
-      },
-    }),
   ],
   publicDir: 'public',
 }));