update

package.json

@@ -38,9 +38,9 @@
     "@cosmjs/proto-signing": "^0.31.0",
     "@cosmjs/stargate": "^0.31.0",
     "@cosmjs/tendermint-rpc": "^0.31.0",
-    "@dydxprotocol/v4-abacus": "^0.7.6",
+    "@dydxprotocol/v4-abacus": "^0.7.2",
     "@dydxprotocol/v4-client-js": "^0.40.3",
-    "@dydxprotocol/v4-localization": "^0.1.30",
+    "@dydxprotocol/v4-localization": "^0.1.32",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
     "@radix-ui/react-collapsible": "^1.0.3",

pnpm-lock.yaml

@@ -27,14 +27,14 @@ dependencies:
     specifier: ^0.31.0
     version: 0.31.0
   '@dydxprotocol/v4-abacus':
-    specifier: ^0.7.6
-    version: 0.7.6
+    specifier: ^0.7.2
+    version: 0.7.2
   '@dydxprotocol/v4-client-js':
     specifier: ^0.40.3
     version: 0.40.3
   '@dydxprotocol/v4-localization':
-    specifier: ^0.1.30
-    version: 0.1.30
+    specifier: ^0.1.32
+    version: 0.1.32
   '@ethersproject/providers':
     specifier: ^5.7.2
     version: 5.7.2
@@ -979,8 +979,8 @@ packages:
     resolution: {integrity: sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==}
     dev: true
 
-  /@dydxprotocol/v4-abacus@0.7.6:
-    resolution: {integrity: sha512-FdDXRaFMfxhyrJJs0dNrb1KG6X95lPHelua1yCn/SVgzwGaAqlJczrzmdh98INntuRAgIxOu69R5mCGyekumyg==}
+  /@dydxprotocol/v4-abacus@0.7.2:
+    resolution: {integrity: sha512-5foamomN82FH6ko3EuzwFlSoAEY6Sal8fDgvZo2RsB19Ks6SFgFDeeOcEDdfoa3DNwvl8yW0C9cfxeQ+BfU8uA==}
     dev: false
 
   /@dydxprotocol/v4-client-js@0.40.3:
@@ -1011,8 +1011,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@dydxprotocol/v4-localization@0.1.30:
-    resolution: {integrity: sha512-xTlQuQmPz7wfGkjd07giYMAxRrolDbJE3DryJSIMB6R1MBq1wLzAcwp/iR/nELRwilRX9c44Tap0gGt+oAajiQ==}
+  /@dydxprotocol/v4-localization@0.1.32:
+    resolution: {integrity: sha512-ZtXScxgFLjUt0Ag52RyFnQe9aEl1Aky5fp+vMGOBduVkFiCEMRMkSsSgg6grMdyw/x0AbnxOTRkhYoX2MsK9Ow==}
     dev: false
 
   /@dydxprotocol/v4-proto@0.4.1:

src/constants/account.ts

@@ -44,4 +44,4 @@ export type EvmDerivedAddresses = {
   };
 };
 
-export const AMOUNT_RESERVED_FOR_GAS_USDC = 0.1;
+export const AMOUNT_RESERVED_FOR_GAS_USDC = 100_000;

src/hooks/useSubaccount.tsx

@@ -74,12 +74,13 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
     () => ({
       depositToSubaccount: async ({
         subaccountClient,
+        assetId = 0,
         amount,
       }: {
         subaccountClient: SubaccountClient;
         assetId?: number;
-        amount: number;
-      }) => await compositeClient?.depositToSubaccount(subaccountClient, amount.toString()),
+        amount: Long;
+      }) => await compositeClient?.validatorClient.post.deposit(subaccountClient, assetId, amount),
 
       withdrawFromSubaccount: async ({
         subaccountClient,
@@ -200,9 +201,13 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
     async (balance: AccountBalance) => {
       if (!localDydxWallet) return;
 
-      const amount = parseFloat(balance.amount) - AMOUNT_RESERVED_FOR_GAS_USDC;
+      const amountAfterDust = MustBigNumber(balance.amount)
+        .minus(AMOUNT_RESERVED_FOR_GAS_USDC) // keep 0.1 USDC in user's wallet for gas
+        .toString();
 
-      if (amount > 0) {
+      const amount = Long.fromString(amountAfterDust || '0');
+
+      if (amount.greaterThan(Long.ZERO)) {
         const subaccountClient = new SubaccountClient(localDydxWallet, 0);
         await depositToSubaccount({ amount, subaccountClient });
       }
@@ -220,7 +225,7 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
   }, [usdcCoinBalance]);
 
   const deposit = useCallback(
-    async (amount: number) => {
+    async (amount: Long) => {
       if (!subaccountClient) {
         return;
       }

src/views/dialogs/OnboardingDialog.tsx

@@ -37,7 +37,7 @@ export const OnboardingDialog = ({ setIsOpen }: ElementProps) => {
   const stringGetter = useStringGetter();
   const { isMobile } = useBreakpoints();
 
-  const { walletType } = useAccounts();
+  const { disconnect, walletType } = useAccounts();
 
   const currentOnboardingStep = useSelector(calculateOnboardingStep);
 
@@ -45,10 +45,17 @@ export const OnboardingDialog = ({ setIsOpen }: ElementProps) => {
     if (!currentOnboardingStep) setIsOpen?.(false);
   }, [currentOnboardingStep]);
 
+  const setIsOpenFromDialog = (open: boolean) => {
+    if (!open && currentOnboardingStep === OnboardingSteps.AcknowledgeTerms) {
+      disconnect();
+    }
+    setIsOpen?.(open);
+  }
+
   return (
     <Styled.Dialog
       isOpen={Boolean(currentOnboardingStep)}
-      setIsOpen={setIsOpen}
+      setIsOpen={setIsOpenFromDialog}
       {...(currentOnboardingStep &&
         {
           [OnboardingSteps.ChooseWallet]: {
@@ -87,10 +94,10 @@ export const OnboardingDialog = ({ setIsOpen }: ElementProps) => {
             title: stringGetter({ key: STRING_KEYS.ACKNOWLEDGE_TERMS }),
             children: (
               <Styled.Content>
-                <AcknowledgeTerms />
+                <AcknowledgeTerms onClose={() => setIsOpenFromDialog?.(false)} />
               </Styled.Content>
             ),
-            width: '20rem',
+            width: '30rem',
           },
           [OnboardingSteps.DepositFunds]: {
             title: stringGetter({ key: STRING_KEYS.DEPOSIT }),

src/views/dialogs/OnboardingDialog/AcknowledgeTerms.tsx

@@ -6,14 +6,17 @@ import { AppRoute } from '@/constants/routes';
 import { STRING_KEYS } from '@/constants/localization';
 import { ButtonAction } from '@/constants/buttons';
 
+import { layoutMixins } from '@/styles/layoutMixins';
+
 import { Button } from '@/components/Button';
 import { Link } from '@/components/Link';
 
 type ElementProps = {
+  onClose?: () => void;
   onContinue?: () => void;
 };
 
-export const AcknowledgeTerms = ({ onContinue }: ElementProps) => {
+export const AcknowledgeTerms = ({ onClose, onContinue }: ElementProps) => {
   const stringGetter = useStringGetter();
 
   const { saveHasAcknowledgedTerms } = useAccounts();
@@ -25,26 +28,40 @@ export const AcknowledgeTerms = ({ onContinue }: ElementProps) => {
 
   return (
     <>
-      <span>
+      <p>
         {stringGetter({
-          key: STRING_KEYS.LEGAL_UPDATES_DESCRIPTION,
+          key: STRING_KEYS.TOS_TITLE,
           params: {
-            TOU: (
+            TERMS_LINK: (
               <Styled.Link href={`/#${AppRoute.Terms}`}>
                 {stringGetter({ key: STRING_KEYS.TERMS_OF_USE })}
               </Styled.Link>
             ),
-            PRIVACY_POLICY: (
+            PRIVACY_POLICY_LINK: (
               <Styled.Link href={`/#${AppRoute.Privacy}`}>
                 {stringGetter({ key: STRING_KEYS.PRIVACY_POLICY })}
               </Styled.Link>
             ),
           },
         })}
-      </span>
-      <Button onClick={onAcknowledgement} action={ButtonAction.Primary}>
-        {stringGetter({ key: STRING_KEYS.I_AGREE })}
-      </Button>
+      </p>
+      <Styled.TOS>
+        <ul>
+          <li>{stringGetter({ key: STRING_KEYS.TOS_LINE1 })}</li>
+          <li>{stringGetter({ key: STRING_KEYS.TOS_LINE2 })}</li>
+          <li>{stringGetter({ key: STRING_KEYS.TOS_LINE3 })}</li>
+          <li>{stringGetter({ key: STRING_KEYS.TOS_LINE4 })}</li>
+          <li>{stringGetter({ key: STRING_KEYS.TOS_LINE5 })}</li>
+        </ul>
+      </Styled.TOS>
+      <Styled.Row>
+        <Styled.Button onClick={onClose} action={ButtonAction.Base}>
+          {stringGetter({ key: STRING_KEYS.CLOSE })}
+        </Styled.Button>
+        <Styled.Button onClick={onAcknowledgement} action={ButtonAction.Primary}>
+          {stringGetter({ key: STRING_KEYS.I_AGREE })}
+        </Styled.Button>
+      </Styled.Row>
     </>
   );
 };
@@ -59,3 +76,23 @@ Styled.Link = styled(Link)`
     color: var(--color-accent);
   }
 `;
+
+Styled.TOS = styled.section`
+  background-color: var(--color-layer-4);
+  padding: 1rem 1rem 1rem 2rem;
+  border-radius: 0.875rem;
+  > ul {
+    ${layoutMixins.column};
+    gap: 1rem;
+  }
+`;
+
+Styled.Row = styled.div`
+  ${layoutMixins.row};
+
+  gap: 1rem;
+`;
+
+Styled.Button = styled(Button)`
+  flex-grow: 1;
+`;