chore: update vault page (#1361)

dydxprotocol · Dec 11, 2024 · bb0f73e · bb0f73e
1 parent 9af3aa8
commit bb0f73e
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -57,7 +57,7 @@
     "@datadog/browser-logs": "^5.23.3",
     "@dydxprotocol/v4-abacus": "1.13.39",
     "@dydxprotocol/v4-client-js": "1.12.2",
-    "@dydxprotocol/v4-localization": "^1.1.254",
+    "@dydxprotocol/v4-localization": "^1.1.256",
     "@dydxprotocol/v4-proto": "^7.0.0-dev.0",
     "@funkit/connect": "^4.0.2",
     "@emotion/is-prop-valid": "^1.3.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/constants/tooltips/vault.ts b/src/constants/tooltips/vault.ts
@@ -16,7 +16,8 @@ export const vaultTooltips = {
   'vault-all-time-pnl': ({ stringGetter }) => ({
     body: stringGetter({ key: TOOLTIP_STRING_KEYS.YOUR_ALL_TIME_PNL_BODY }),
   }),
-  'vault-apr': ({ stringGetter }) => ({
+  'vault-apr': ({ stringGetter, urlConfigs }) => ({
     body: stringGetter({ key: TOOLTIP_STRING_KEYS.VAULT_APR_BODY }),
+    learnMoreLink: urlConfigs?.vaultLearnMore,
   }),
 } satisfies TooltipStrings;
diff --git a/src/pages/portfolio/Portfolio.tsx b/src/pages/portfolio/Portfolio.tsx
@@ -123,7 +123,7 @@ const PortfolioPage = () => {
               <VaultTransactionsTable
                 withOuterBorders
                 withTxHashLink
-                emptyString={stringGetter({ key: STRING_KEYS.YOU_HAVE_NO_VAULT_DEPOSITS })}
+                emptyString={stringGetter({ key: STRING_KEYS.YOU_HAVE_NO_VAULT_BALANCE })}
               />
             }
           />

diff --git a/src/pages/vaults/VaultDepositWithdrawForm.tsx b/src/pages/vaults/VaultDepositWithdrawForm.tsx
@@ -449,10 +449,10 @@ export const VaultDepositWithdrawForm = ({
   const inputFormConfig =
     operation === 'DEPOSIT'
       ? {
-          formLabel: stringGetter({ key: STRING_KEYS.AMOUNT_TO_DEPOSIT }),
+          formLabel: stringGetter({ key: STRING_KEYS.AMOUNT_TO_ADD }),
           buttonLabel: confirmationStep
-            ? stringGetter({ key: STRING_KEYS.CONFIRM_DEPOSIT })
-            : stringGetter({ key: STRING_KEYS.PREVIEW_DEPOSIT }),
+            ? stringGetter({ key: STRING_KEYS.CONFIRM })
+            : stringGetter({ key: STRING_KEYS.REVIEW }),
           inputReceiptItems: [
             {
               key: 'cross-free-collateral',
@@ -481,15 +481,15 @@ export const VaultDepositWithdrawForm = ({
           },
         }
       : {
-          formLabel: stringGetter({ key: STRING_KEYS.AMOUNT_TO_WITHDRAW }),
+          formLabel: stringGetter({ key: STRING_KEYS.AMOUNT_TO_REMOVE }),
           buttonLabel: confirmationStep
-            ? stringGetter({ key: STRING_KEYS.CONFIRM_WITHDRAW })
-            : stringGetter({ key: STRING_KEYS.PREVIEW_WITHDRAW }),
+            ? stringGetter({ key: STRING_KEYS.CONFIRM })
+            : stringGetter({ key: STRING_KEYS.REVIEW }),
           inputReceiptItems: [
             {
               key: 'vault-balance',
               tooltip: 'vault-available-to-withdraw',
-              label: stringGetter({ key: STRING_KEYS.AVAILABLE_TO_WITHDRAW }),
+              label: stringGetter({ key: STRING_KEYS.AVAILABLE_TO_REMOVE }),
               value: availableToWithdrawDiff,
             },
           ] satisfies DetailsItem[],
@@ -568,7 +568,7 @@ export const VaultDepositWithdrawForm = ({
           $active={operation === 'DEPOSIT'}
           onClick={() => setOperation('DEPOSIT')}
         >
-          {stringGetter({ key: STRING_KEYS.DEPOSIT })}
+          {stringGetter({ key: STRING_KEYS.ADD_FUNDS })}
         </$TypeButton>
         <$TypeButton
           shape={ButtonShape.Rectangle}
@@ -577,7 +577,7 @@ export const VaultDepositWithdrawForm = ({
           $active={operation === 'WITHDRAW'}
           onClick={() => setOperation('WITHDRAW')}
         >
-          {stringGetter({ key: STRING_KEYS.WITHDRAW })}
+          {stringGetter({ key: STRING_KEYS.REMOVE_FUNDS })}
         </$TypeButton>
       </div>
 

diff --git a/src/pages/vaults/VaultLockedSharesTable.tsx b/src/pages/vaults/VaultLockedSharesTable.tsx
@@ -38,7 +38,7 @@ export const VaultLockedSharesCard = ({ className }: { className?: string }) =>
     <div className={className} tw="rounded-[0.7rem] border border-solid border-color-border">
       <div tw="flex justify-between px-1 py-0.625">
         <div tw="flex gap-0.5">
-          <h3 tw="pt-[5px]">Locked Balance</h3>
+          <h3 tw="pt-[5px]">{stringGetter({ key: STRING_KEYS.LOCKED_BALANCE })}</h3>
           <span tw="text-color-text-0">
             <Output value={lockedSharesTotalValue} type={OutputType.CompactFiat} />
           </span>

diff --git a/src/pages/vaults/VaultPnlChart.tsx b/src/pages/vaults/VaultPnlChart.tsx
@@ -189,7 +189,7 @@ export const VaultPnlChart = ({ className }: VaultPnlChartProps) => {
           size={ButtonSize.Small}
           items={[
             { value: 'pnl', label: stringGetter({ key: STRING_KEYS.VAULT_PNL }) },
-            { value: 'equity', label: stringGetter({ key: STRING_KEYS.VAULT_EQUITY }) },
+            { value: 'equity', label: stringGetter({ key: STRING_KEYS.VAULT_TVL }) },
           ]}
           value={selectedChart}
           onValueChange={setSelectedChart}

diff --git a/src/pages/vaults/VaultTransactions.tsx b/src/pages/vaults/VaultTransactions.tsx
@@ -33,7 +33,7 @@ export const VaultTransactionsCard = ({ className }: { className?: string }) =>
         <>
           <div tw="flex justify-between px-1 py-0.625">
             <h3 tw="leading-7">
-              {stringGetter({ key: STRING_KEYS.YOUR_DEPOSITS_AND_WITHDRAWALS })}
+              {stringGetter({ key: STRING_KEYS.YOUR_MEGAVAULT_HISTORY })}
               <span tw="ml-0.5 text-color-text-0">{transactions.length}</span>
             </h3>
             <$ShowHideHistoryButton
@@ -53,13 +53,15 @@ export const VaultTransactionsCard = ({ className }: { className?: string }) =>
           <div>
             <Icon iconName={IconName.OrderPending} size="2rem" tw="mb-0.75" />
           </div>
-          <div>{stringGetter({ key: STRING_KEYS.YOU_HAVE_NO_VAULT_DEPOSITS })}</div>
+          <div>{stringGetter({ key: STRING_KEYS.YOU_HAVE_NO_VAULT_BALANCE })}</div>
         </div>
       )}
     </div>
   );
 };
+
 const $ShowHideHistoryButton = styled(Button)``;
+
 export const VaultTransactionsTable = ({
   className,
   withOuterBorders,
@@ -105,9 +107,9 @@ export const VaultTransactionsTable = ({
               <Output
                 value={
                   type?.name === 'DEPOSIT'
-                    ? stringGetter({ key: STRING_KEYS.DEPOSIT })
+                    ? stringGetter({ key: STRING_KEYS.ADD_FUNDS })
                     : type?.name === 'WITHDRAWAL'
-                      ? stringGetter({ key: STRING_KEYS.WITHDRAW })
+                      ? stringGetter({ key: STRING_KEYS.REMOVE_FUNDS })
                       : undefined
                 }
                 type={OutputType.Text}