privy theme

dev-dist/registerSW.js

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

package.json

@@ -39,12 +39,12 @@
     "@cosmjs/proto-signing": "^0.31.0",
     "@cosmjs/stargate": "^0.31.0",
     "@cosmjs/tendermint-rpc": "^0.31.0",
-    "@dydxprotocol/v4-abacus": "^1.2.4",
+    "@dydxprotocol/v4-abacus": "^1.2.5",
     "@dydxprotocol/v4-client-js": "^1.0.11",
     "@dydxprotocol/v4-localization": "^1.1.11",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
-    "@privy-io/react-auth": "^1.53.0",
+    "@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",
@@ -153,6 +153,7 @@
     "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,7 +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 type { PrivyClientConfig } from '@privy-io/react-auth';
 import { PrivyProvider } from '@privy-io/react-auth';
 import { PrivyWagmiConnector } from '@privy-io/wagmi-connector';
 import { QueryClient, QueryClientProvider } from 'react-query';

src/hooks/useAccounts.tsx

@@ -164,6 +164,7 @@ 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]);
@@ -173,6 +174,11 @@ const useAccountsContext = () => {
     [localDydxWallet]
   );
 
+  const nobleAddress = useMemo(
+    () => localNobleWallet?.address,
+    [localNobleWallet]
+  );
+
   const setWalletFromEvmSignature = async (signature: string) => {
     const { wallet, mnemonic, privateKey, publicKey } = await getWalletFromEvmSignature({
       signature,
@@ -187,7 +193,6 @@ const useAccountsContext = () => {
     }
   }, [evmAddress, dydxAddress]);
 
-  // 1. Switch network
   const selectedNetwork = useSelector(getSelectedNetwork);
 
   const chainId = Number(ENVIRONMENT_CONFIG_MAP[selectedNetwork].ethereumChainId);
@@ -247,7 +252,15 @@ const useAccountsContext = () => {
         dispatch(setOnboardingState(OnboardingState.Disconnected));
       }
     })();
-  }, [evmAddress, evmDerivedAddresses, signerWagmi, connectedDydxAddress, signerGraz]);
+  }, [
+    evmAddress,
+    evmDerivedAddresses,
+    signerWagmi,
+    connectedDydxAddress,
+    signerGraz,
+    authenticated,
+    ready,
+  ]);
 
   // abacus
   useEffect(() => {
@@ -260,6 +273,7 @@ const useAccountsContext = () => {
       if (hdKey?.mnemonic) {
         const nobleWallet = await LocalWallet.fromMnemonic(hdKey.mnemonic, NOBLE_BECH32_PREFIX);
         abacusStateManager.setNobleWallet(nobleWallet);
+        setLocalNobleWallet(nobleWallet);
       }
     };
     setNobleWallet();
@@ -358,6 +372,7 @@ const useAccountsContext = () => {
     localDydxWallet,
     dydxAccounts,
     dydxAddress,
+    nobleAddress,
 
     // Onboarding state
     saveHasAcknowledgedTerms,

src/hooks/useWalletConnection.ts

@@ -119,7 +119,6 @@ export const useWalletConnection = () => {
           throw new Error('Onboarding: No wallet connection found.');
         } else if (walletConnection.type === WalletConnectionType.Privy) {
 
-          console.log({ isConnectedWagmi, authenticated, ready });
           if (!isConnectedWagmi && !authenticated && ready) {
             login();
           }
@@ -165,7 +164,7 @@ export const useWalletConnection = () => {
         walletConnectionType: walletConnection.type,
       };
     },
-    [isConnectedGraz, signerGraz, isConnectedWagmi, signerWagmi]
+    [isConnectedGraz, signerGraz, isConnectedWagmi, signerWagmi, login, ready, authenticated]
   );
 
   const disconnectWallet = useCallback(async () => {

src/lib/testFlags.ts

@@ -11,16 +11,16 @@ class TestFlags {
     const params = new URLSearchParams(queryParamsString);
 
     for (const [key, value] of params) {
-      this.queryParams[key] = value;
+      this.queryParams[key.toLowerCase()] = value;
     }
   }
 
   get displayInitializingMarkets() {
-    return !!this.queryParams.displayInitializingMarkets;
+    return !!this.queryParams.displayinitializingmarkets;
   }
 
-  get withCCTP() {
-    return !!this.queryParams.withCCTP;
+  get showMobileSignInOption() {
+    return !!this.queryParams.mobilesignin;
   }
 }
 

src/lib/wagmi.ts

@@ -92,7 +92,10 @@ export const privyConfig: PrivyClientConfig = {
     requireUserPasswordOnCreate: true,
     noPromptOnSignature: true,
   },
-  loginMethods: ['email', 'sms', 'twitter'],
+  loginMethods: ['email', 'sms', 'twitter', 'google', 'apple'],
+  appearance: {
+    theme: '#28283c',
+  },
   defaultChain: sepolia
 };
 

src/views/MarketDetails.tsx

@@ -29,7 +29,6 @@ export const MarketDetails: React.FC = () => {
   if (!configs) return null;
 
   const {
-    basePositionNotional,
     tickSize,
     stepSize,
     initialMarginFraction,

src/views/dialogs/OnboardingDialog/ChooseWallet.tsx

@@ -1,6 +1,4 @@
-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';
@@ -13,7 +11,7 @@ import { Button } from '@/components/Button';
 import { Icon } from '@/components/Icon';
 import { Link } from '@/components/Link';
 
-import { useAccounts, useStringGetter, useURLConfigs } from '@/hooks';
+import { useAccounts, useBreakpoints, useStringGetter, useURLConfigs } from '@/hooks';
 import { useDisplayedWallets } from '@/hooks/useDisplayedWallets';
 
 import { breakpoints } from '@/styles';
@@ -27,6 +25,8 @@ export const ChooseWallet = () => {
 
   const { selectWalletType, selectedWalletType, selectedWalletError } = useAccounts();
 
+  const { isMobile } = useBreakpoints();
+
   return (
     <>
       {selectedWalletType && selectedWalletError && (
@@ -59,7 +59,7 @@ export const ChooseWallet = () => {
             <div>
               {walletType !== WalletType.Privy && import.meta.env.VITE_PRIVY_APP_ID
                 ? stringGetter({ key: wallets[walletType].stringKey })
-                : 'Socials (Email, SMS, etc.)'}
+                : `Socials ${isMobile ? '' : '(Email, SMS, etc.)'}`}
             </div>
           </Styled.WalletButton>
         ))}

src/views/forms/AccountManagementForms/ChainSelectMenu.tsx

@@ -34,11 +34,30 @@ export const ChainSelectMenu = ({ label, selectedChain, onSelectChain }: Element
     slotBefore: <Styled.Img src={chain.iconUrl} alt="" />,
   }));
 
-  const selectedOption = chains.find((item) => item.type === selectedChain);
+  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="" />,
+    }
+  ];
 
   return (
     <SearchSelectMenu
       items={[
+        {
+          group: 'exchanges',
+          groupLabel: 'Exchanges',
+          items: exchanges,
+        },
         {
           group: 'chains',
           groupLabel: stringGetter({ key: STRING_KEYS.CHAINS }),

src/views/forms/AccountManagementForms/DepositForm.tsx

@@ -38,12 +38,14 @@ 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 } from '@/lib/wallet';
+import { parseWalletError, truncateAddress } 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;
@@ -55,8 +57,9 @@ 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 } = useAccounts();
+  const { evmAddress, signerWagmi, publicClientWagmi, nobleAddress } = useAccounts();
 
   const { addTransferNotification } = useLocalNotifications();
 
@@ -133,7 +136,10 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
   }, [error]);
 
   const onSelectChain = useCallback((chain: string) => {
-    if (chain) {
+    if (chain === 'coinbase') {
+      setIsCoinbase(true);
+    } else if (chain) {
+      setIsCoinbase(false);
       abacusStateManager.clearTransferInputValues();
       abacusStateManager.setTransferValue({
         field: TransferInputField.chain,
@@ -364,9 +370,43 @@ 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>
+    );
+  }
+
   return (
     <Styled.Form onSubmit={onSubmit}>
-      <ChainSelectMenu selectedChain={chainIdStr || undefined} onSelectChain={onSelectChain} />
+      <ChainSelectMenu
+        selectedChain={isCoinbase ? 'coinbase' : chainIdStr || undefined}
+        onSelectChain={onSelectChain}
+      />
       <TokenSelectMenu selectedToken={sourceToken || undefined} onSelectToken={onSelectToken} />
       <Styled.WithDetailsReceipt side="bottom" detailItems={amountInputReceipt}>
         <FormInput
@@ -427,3 +467,13 @@ 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/menus/AccountMenu.tsx

@@ -10,6 +10,9 @@ import { STRING_KEYS, StringGetterFunction, TOOLTIP_STRING_KEYS } from '@/consta
 import { isMainnet } from '@/constants/networks';
 import { DydxChainAsset, wallets } from '@/constants/wallets';
 
+import { layoutMixins } from '@/styles/layoutMixins';
+import { headerMixins } from '@/styles/headerMixins';
+
 import {
   useAccounts,
   useBreakpoints,
@@ -35,10 +38,8 @@ import { getOnboardingState, getSubaccount } from '@/state/accountSelectors';
 
 import { isTruthy } from '@/lib/isTruthy';
 import { truncateAddress } from '@/lib/wallet';
-
-import { layoutMixins } from '@/styles/layoutMixins';
-import { headerMixins } from '@/styles/headerMixins';
 import { MustBigNumber } from '@/lib/numbers';
+import { testFlags } from '@/lib/testFlags';
 
 export const AccountMenu = () => {
   const stringGetter = useStringGetter();
@@ -178,7 +179,7 @@ export const AccountMenu = () => {
         },
         ...(onboardingState === OnboardingState.AccountConnected && hdKey
           ? [
-              !isMainnet && {
+              (!isMainnet || testFlags.showMobileSignInOption) && {
                 value: 'MobileQrSignIn',
                 icon: <Icon iconName={IconName.Qr} />,
                 label: stringGetter({ key: STRING_KEYS.TITLE_SIGN_INTO_MOBILE }),

vite.config.ts

@@ -2,6 +2,7 @@ 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 }) => ({
@@ -50,6 +51,12 @@ export default defineConfig(({ mode }) => ({
     svgr({
       exportAsDefault: true,
     }),
+    VitePWA({
+      registerType: 'autoUpdate',
+      devOptions: {
+        enabled: true,
+      },
+    }),
   ],
   publicDir: 'public',
 }));