From 29526b927f7ff60ec57365640acd0e62352afcff Mon Sep 17 00:00:00 2001 From: Jared Vu Date: Wed, 3 Jan 2024 09:56:01 -0800 Subject: [PATCH] Update deposit and withdrawal receipts (#212) * Update receipts * Remove duplicate const * Restore env * format * Try using raw * Use 3 spaces T.T * copy from main * Update abacus, display proper toAmount and toAmountMin * nits --- package.json | 2 +- pnpm-lock.yaml | 14 ++- src/constants/tooltips/deposit.ts | 4 + src/constants/tooltips/withdraw.ts | 4 + src/hooks/useNotificationTypes.tsx | 4 +- src/pages/trade/HorizontalPanel.tsx | 1 - .../ChainSelectMenu.tsx | 10 +- .../DepositForm/DepositButtonAndReceipt.tsx | 113 ++++++++++++------ .../AccountManagementForms/WithdrawForm.tsx | 5 +- .../WithdrawForm/WithdrawButtonAndReceipt.tsx | 88 ++++++++------ 10 files changed, 157 insertions(+), 88 deletions(-) diff --git a/package.json b/package.json index 5ce9377..c271bf8 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "@cosmjs/proto-signing": "^0.31.0", "@cosmjs/stargate": "^0.31.0", "@cosmjs/tendermint-rpc": "^0.31.0", - "@dydxprotocol/v4-abacus": "^1.1.31", + "@dydxprotocol/v4-abacus": "^1.1.32", "@dydxprotocol/v4-client-js": "^1.0.11", "@dydxprotocol/v4-localization": "^1.1.5", "@ethersproject/providers": "^5.7.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e0c1b0d..552ea95 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -27,8 +27,8 @@ dependencies: specifier: ^0.31.0 version: 0.31.0 '@dydxprotocol/v4-abacus': - specifier: ^1.1.31 - version: 1.1.31 + specifier: ^1.1.32 + version: 1.1.32 '@dydxprotocol/v4-client-js': specifier: ^1.0.11 version: 1.0.11 @@ -988,8 +988,8 @@ packages: resolution: {integrity: sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==} dev: true - /@dydxprotocol/v4-abacus@1.1.31: - resolution: {integrity: sha512-CBfK78u/y2/9KR/w2f7IGhU6tKt/seoKHlsal0vk2WlJsjXnlTKoOQ3HpCSGoMmI5ZLQeqbFClvNH4RZLhEwzg==} + /@dydxprotocol/v4-abacus@1.1.32: + resolution: {integrity: sha512-1KM3ILBg/YrdiVhCp/DXUgyCnJurxeYAIwL6+MWZisEGtdhPf9R7MNKUyVcTeNwEyiyxh4AzXNLRp3IPeHAsAw==} dev: false /@dydxprotocol/v4-client-js@1.0.11: @@ -7986,7 +7986,7 @@ packages: resolution: {integrity: sha512-WIdaQ8uW1vIbYvNnAVunkC6yxTrneJC7VQ5UUQ0kuw8b0C0A39KTIpoQHCfc8tV7o9vF4niwRhdXEdfAgQEsQQ==} dependencies: cosmos-directory-types: 0.0.6 - node-fetch-native: 1.4.1 + node-fetch-native: 1.6.1 dev: false /cosmos-directory-types@0.0.6: @@ -11752,6 +11752,10 @@ packages: resolution: {integrity: sha512-NsXBU0UgBxo2rQLOeWNZqS3fvflWePMECr8CoSWoSTqCqGbVVsvl9vZu1HfQicYN0g5piV9Gh8RTEvo/uP752w==} dev: false + /node-fetch-native@1.6.1: + resolution: {integrity: sha512-bW9T/uJDPAJB2YNYEpWzE54U5O3MQidXsOyTfnbKYtTtFexRvGzb1waphBN4ZwP6EcIvYYEOwW0b72BpAqydTw==} + dev: false + /node-fetch@2.6.12: resolution: {integrity: sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==} engines: {node: 4.x || >=6.0.0} diff --git a/src/constants/tooltips/deposit.ts b/src/constants/tooltips/deposit.ts index a358def..de30ab2 100644 --- a/src/constants/tooltips/deposit.ts +++ b/src/constants/tooltips/deposit.ts @@ -1,6 +1,10 @@ import { type TooltipStrings, TOOLTIP_STRING_KEYS } from '@/constants/localization'; export const depositTooltips: TooltipStrings = { + 'minimum-deposit-amount': ({ stringGetter }) => ({ + title: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_DEPOSIT_AMOUNT_TITLE }), + body: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_DEPOSIT_AMOUNT_BODY }), + }), swap: ({ stringGetter }) => ({ title: stringGetter({ key: TOOLTIP_STRING_KEYS.SWAP_TITLE }), body: stringGetter({ key: TOOLTIP_STRING_KEYS.SWAP_BODY }), diff --git a/src/constants/tooltips/withdraw.ts b/src/constants/tooltips/withdraw.ts index 4b91aa7..e5c0f41 100644 --- a/src/constants/tooltips/withdraw.ts +++ b/src/constants/tooltips/withdraw.ts @@ -5,6 +5,10 @@ export const withdrawTooltips: TooltipStrings = { title: stringGetter({ key: TOOLTIP_STRING_KEYS.FAST_WITHDRAW_FEE_TITLE }), body: stringGetter({ key: TOOLTIP_STRING_KEYS.FAST_WITHDRAW_FEE_BODY }), }), + 'minimum-amount-received': ({ stringGetter }) => ({ + title: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_AMOUNT_RECEIVED_TITLE }), + body: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_AMOUNT_RECEIVED_BODY }), + }), 'withdraw-types': ({ stringGetter }) => ({ title: stringGetter({ key: TOOLTIP_STRING_KEYS.WITHDRAW_TYPES_TITLE }), body: stringGetter({ key: TOOLTIP_STRING_KEYS.WITHDRAW_TYPES_BODY }), diff --git a/src/hooks/useNotificationTypes.tsx b/src/hooks/useNotificationTypes.tsx index e76ff65..870e03e 100644 --- a/src/hooks/useNotificationTypes.tsx +++ b/src/hooks/useNotificationTypes.tsx @@ -157,8 +157,8 @@ export const notificationTypes: NotificationTypeConfig[] = [ const isFinished = Boolean(status) && status?.squidTransactionStatus !== 'ongoing'; const icon = ; - const transferType = type ?? - fromChainId === ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId + const transferType = + type ?? fromChainId === ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId ? TransferNotificationTypes.Withdrawal : TransferNotificationTypes.Deposit; diff --git a/src/pages/trade/HorizontalPanel.tsx b/src/pages/trade/HorizontalPanel.tsx index c1c2e41..6024679 100644 --- a/src/pages/trade/HorizontalPanel.tsx +++ b/src/pages/trade/HorizontalPanel.tsx @@ -83,7 +83,6 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => { const tabItems = useMemo( () => [ { - asChild: true, value: InfoSection.Position, label: stringGetter({ key: showCurrentMarket ? STRING_KEYS.POSITION : STRING_KEYS.POSITIONS, diff --git a/src/views/forms/AccountManagementForms/ChainSelectMenu.tsx b/src/views/forms/AccountManagementForms/ChainSelectMenu.tsx index 9badaea..f77fac0 100644 --- a/src/views/forms/AccountManagementForms/ChainSelectMenu.tsx +++ b/src/views/forms/AccountManagementForms/ChainSelectMenu.tsx @@ -18,11 +18,7 @@ type ElementProps = { onSelectChain: (chain: string) => void; }; -export const ChainSelectMenu = ({ - label, - selectedChain, - onSelectChain, -}: ElementProps) => { +export const ChainSelectMenu = ({ label, selectedChain, onSelectChain }: ElementProps) => { const stringGetter = useStringGetter(); const { type, depositOptions, withdrawalOptions, resources } = useSelector(getTransferInputs, shallowEqual) || {}; @@ -38,7 +34,7 @@ export const ChainSelectMenu = ({ slotBefore: , })); - const selectedOption = chains.find((item) => item.type === selectedChain); + const selectedOption = chains.find((item) => item.type === selectedChain); return ( Bridge Fee, + label: {stringGetter({ key: STRING_KEYS.BRIDGE_FEE })}, value: , }); } @@ -112,12 +108,68 @@ export const DepositButtonAndReceipt = ({ const totalFees = (summary?.bridgeFee || 0) + (summary?.gasFee || 0); + const { toAmount, toAmountMin } = useMemo(() => { + if (isCctp) { + return { + toAmount: summary?.toAmount, + toAmountMin: summary?.toAmountMin, + }; + } else { + return { + toAmount: summary?.toAmount && formatUnits(BigInt(summary.toAmount), usdcDecimals), + toAmountMin: summary?.toAmountMin && formatUnits(BigInt(summary.toAmountMin), usdcDecimals), + }; + } + }, [isCctp, summary]); + const submitButtonReceipt = [ + { + key: 'expected-deposit-amount', + label: ( + + {stringGetter({ key: STRING_KEYS.EXPECTED_DEPOSIT_AMOUNT })} {usdcLabel} + + ), + value: , + subitems: [ + { + key: 'minimum-deposit-amount', + label: ( + + {stringGetter({ key: STRING_KEYS.MINIMUM_DEPOSIT_AMOUNT })} {usdcLabel} + + ), + value: ( + + ), + tooltip: 'minimum-deposit-amount', + }, + ], + }, + { + key: 'exchange-rate', + label: {stringGetter({ key: STRING_KEYS.EXCHANGE_RATE })}, + value: + typeof summary?.exchangeRate === 'number' ? ( + + + = + + + ) : ( + + ), + }, { key: 'equity', label: ( - {stringGetter({ key: STRING_KEYS.EQUITY })} USDC + {stringGetter({ key: STRING_KEYS.EQUITY })} {usdcLabel} ), value: ( @@ -134,7 +186,7 @@ export const DepositButtonAndReceipt = ({ key: 'buying-power', label: ( - {stringGetter({ key: STRING_KEYS.BUYING_POWER })} USDC + {stringGetter({ key: STRING_KEYS.BUYING_POWER })} {usdcLabel} ), value: ( @@ -147,17 +199,6 @@ export const DepositButtonAndReceipt = ({ /> ), }, - { - key: 'exchange-rate', - label: {stringGetter({ key: STRING_KEYS.EXCHANGE_RATE })}, - value: typeof summary?.exchangeRate === 'number' && ( - - - = - - - ), - }, !isCctp && { key: 'total-fees', label: {stringGetter({ key: STRING_KEYS.TOTAL_FEES })}, @@ -179,18 +220,22 @@ export const DepositButtonAndReceipt = ({ { key: 'estimatedRouteDuration', label: {stringGetter({ key: STRING_KEYS.ESTIMATED_TIME })}, - value: typeof summary?.estimatedRouteDuration === 'number' && ( + value: ( ), }, diff --git a/src/views/forms/AccountManagementForms/WithdrawForm.tsx b/src/views/forms/AccountManagementForms/WithdrawForm.tsx index b98f104..5a629ec 100644 --- a/src/views/forms/AccountManagementForms/WithdrawForm.tsx +++ b/src/views/forms/AccountManagementForms/WithdrawForm.tsx @@ -289,10 +289,7 @@ export const WithdrawForm = () => { const errorMessage = useMemo(() => { if (error) { - return stringGetter({ - key: STRING_KEYS.SOMETHING_WENT_WRONG_WITH_MESSAGE, - params: { ERROR_MESSAGE: error }, - }); + return error; } if (routeErrors) { diff --git a/src/views/forms/AccountManagementForms/WithdrawForm/WithdrawButtonAndReceipt.tsx b/src/views/forms/AccountManagementForms/WithdrawForm/WithdrawButtonAndReceipt.tsx index d66e8d0..763e4d8 100644 --- a/src/views/forms/AccountManagementForms/WithdrawForm/WithdrawButtonAndReceipt.tsx +++ b/src/views/forms/AccountManagementForms/WithdrawForm/WithdrawButtonAndReceipt.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useMemo, useState } from 'react'; import { shallowEqual, useSelector } from 'react-redux'; import styled, { type AnyStyledComponent } from 'styled-components'; import { formatUnits } from 'viem'; @@ -6,14 +6,11 @@ import { formatUnits } from 'viem'; import { TransferInputTokenResource } from '@/constants/abacus'; import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons'; import { STRING_KEYS } from '@/constants/localization'; -import { NumberSign } from '@/constants/numbers'; - -import { formatSeconds } from '@/lib/timeUtils'; +import { NumberSign, TOKEN_DECIMALS } from '@/constants/numbers'; import { layoutMixins } from '@/styles/layoutMixins'; -import { useStringGetter } from '@/hooks'; -import { useAccountBalance } from '@/hooks/useAccountBalance'; +import { useStringGetter, useTokenConfigs } from '@/hooks'; import { Button } from '@/components/Button'; @@ -58,13 +55,9 @@ export const WithdrawButtonAndReceipt = ({ const stringGetter = useStringGetter(); const { leverage } = useSelector(getSubaccount, shallowEqual) || {}; - const { summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {}; + const { isCctp, summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {}; const canAccountTrade = useSelector(calculateCanAccountTrade, shallowEqual); - - const toAmount = - summary?.toAmount && - withdrawToken?.decimals && - formatUnits(BigInt(summary.toAmount), withdrawToken?.decimals); + const { usdcLabel } = useTokenConfigs(); const feeSubitems: DetailsItem[] = []; @@ -92,6 +85,26 @@ export const WithdrawButtonAndReceipt = ({ const totalFees = (summary?.bridgeFee || 0) + (summary?.gasFee || 0); + const { toAmount, toAmountMin } = useMemo(() => { + if (isCctp) { + return { + toAmount: summary?.toAmount, + toAmountMin: summary?.toAmountMin, + }; + } else { + return { + toAmount: + summary?.toAmount && + withdrawToken?.decimals && + formatUnits(BigInt(summary.toAmount), withdrawToken.decimals), + toAmountMin: + summary?.toAmountMin && + withdrawToken?.decimals && + formatUnits(BigInt(summary.toAmountMin), withdrawToken.decimals), + }; + } + }, [isCctp, summary, withdrawToken]); + const submitButtonReceipt = [ { key: 'total-fees', @@ -99,24 +112,12 @@ export const WithdrawButtonAndReceipt = ({ value: , subitems: feeSubitems, }, - { - key: 'slippage', - label: {stringGetter({ key: STRING_KEYS.MAX_SLIPPAGE })}, - value: ( - - ), - }, { key: 'exchange-rate', label: {stringGetter({ key: STRING_KEYS.EXCHANGE_RATE })}, value: withdrawToken && typeof summary?.exchangeRate === 'number' && ( - + = {stringGetter({ key: STRING_KEYS.ESTIMATED_TIME })}, value: typeof summary?.estimatedRouteDuration === 'number' && ( - {stringGetter({ key: STRING_KEYS.MINIMUM_AMOUNT_RECEIVED })}{' '} + {stringGetter({ key: STRING_KEYS.EXPECTED_AMOUNT_RECEIVED })}{' '} {withdrawToken && {withdrawToken?.symbol}} ), + value: , + subitems: [ + { + key: 'minimum-amount-received', + label: ( + + {stringGetter({ key: STRING_KEYS.MINIMUM_AMOUNT_RECEIVED })}{' '} + {withdrawToken && {withdrawToken?.symbol}} + + ), + value: ( + + ), + tooltip: 'minimum-amount-received', + }, + ], + }, + { + key: 'slippage', + label: {stringGetter({ key: STRING_KEYS.MAX_SLIPPAGE })}, value: ( - ), },