From 6c41fd566d155975459f1c5a7aec19d4de220a6a Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Sun, 22 Sep 2024 19:15:15 -0700 Subject: [PATCH 01/35] WIP Swap USD --- src/swap/components/SwapAmountInput.tsx | 5 +++++ src/swap/components/SwapProvider.tsx | 8 ++++++++ src/swap/hooks/useFromTo.ts | 6 ++++++ src/swap/types.ts | 4 ++++ 4 files changed, 23 insertions(+) diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index 1cba4a713e..0c05927f04 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -106,6 +106,11 @@ export function SwapAmountInput({
{''} + {source.amountUSD && ( + {`~$${getRoundedAmount(source.amountUSD, 8)}`} + )}
{source.balance && ( { const [fromAmount, setFromAmount] = useState(''); + const [fromAmountUSD, setFromAmountUSD] = useState('') const [fromToken, setFromToken] = useState(); const [toAmount, setToAmount] = useState(''); + const [toAmountUSD, setToAmountUSD] = useState(''); const [toToken, setToToken] = useState(); const [toLoading, setToLoading] = useState(false); const [fromLoading, setFromLoading] = useState(false); @@ -27,6 +29,8 @@ export const useFromTo = (address?: Address): FromTo => { balanceResponse: fromTokenResponse, amount: fromAmount, setAmount: setFromAmount, + amountUSD: fromAmountUSD, + setAmountUSD: setFromAmountUSD, token: fromToken, setToken: setFromToken, loading: fromLoading, @@ -38,6 +42,8 @@ export const useFromTo = (address?: Address): FromTo => { balance: toBalanceString, balanceResponse: toTokenResponse, amount: toAmount, + amountUSD: toAmountUSD, + setAmountUSD: setToAmountUSD, setAmount: setToAmount, token: toToken, setToken: setToToken, diff --git a/src/swap/types.ts b/src/swap/types.ts index b99811b0c7..f35ff950f7 100644 --- a/src/swap/types.ts +++ b/src/swap/types.ts @@ -89,7 +89,9 @@ export type LifecycleStatus = statusName: 'amountChange'; statusData: { amountFrom: string; + amountFromUSD: string; amountTo: string; + amountToUSD: string, tokenFrom?: Token; tokenTo?: Token; } & LifecycleStatusDataShared; @@ -338,11 +340,13 @@ export type SwapTransactionType = 'Batched' | 'ERC20' | 'Permit2' | 'Swap'; // C export type SwapUnit = { amount: string; + amountUSD: string; balance?: string; balanceResponse?: UseBalanceReturnType | UseReadContractReturnType; error?: SwapError; loading: boolean; setAmount: Dispatch>; + setAmountUSD: Dispatch>; setLoading: Dispatch>; setToken: Dispatch>; token: Token | undefined; From 5b3ec629ba30fade19936f39edc9a93ad8abff89 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Sun, 22 Sep 2024 19:40:41 -0700 Subject: [PATCH 02/35] save --- src/swap/components/SwapProvider.tsx | 12 ++++++++++-- src/swap/types.ts | 2 ++ 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/swap/components/SwapProvider.tsx b/src/swap/components/SwapProvider.tsx index dbe5be78f4..49631aadd7 100644 --- a/src/swap/components/SwapProvider.tsx +++ b/src/swap/components/SwapProvider.tsx @@ -278,14 +278,22 @@ export function SwapProvider({ response.toAmount, response.to.decimals, ); + const formattedFromAmountUSD = formatTokenAmount( + response.fromAmountUSDC, + response.to.decimals, // make const = 6?, OR response.to.decimals + ) + const formattedToAmountUSD = formatTokenAmount( + response.fromAmountUSDC, + response.to.decimals, // make const = 6?, OR response.to.decimals + ) destination.setAmount(formattedAmount); updateLifecycleStatus({ statusName: 'amountChange', statusData: { amountFrom: type === 'from' ? amount : formattedAmount, - amountFromUSD: from.amountUSD, + amountFromUSD: formattedFromAmountUSD, amountTo: type === 'to' ? amount : formattedAmount, - amountToUSD: to.amountUSD, + amountToUSD: formattedToAmountUSD, tokenFrom: from.token, tokenTo: to.token, // if quote was fetched successfully, we diff --git a/src/swap/types.ts b/src/swap/types.ts index f35ff950f7..5d9fc99edf 100644 --- a/src/swap/types.ts +++ b/src/swap/types.ts @@ -244,11 +244,13 @@ export type SwapQuote = { amountReference: string; // The reference amount for the quote from: Token; // The source token for the swap fromAmount: string; // The amount of the source token + fromAmountUSDC: string; // hasHighPriceImpact: boolean; // Whether the price impact is high priceImpact: string; // The price impact of the swap slippage: string; // The slippage of the swap to: Token; // The destination token for the swap toAmount: string; // The amount of the destination token + toAmountUSDC: string; warning?: QuoteWarning; // The warning associated with the quote }; From 7cc497fda9b623f9a7c3ca05d5dcf9f835f3e349 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Sun, 22 Sep 2024 21:29:15 -0700 Subject: [PATCH 03/35] styling stuff --- src/swap/components/SwapAmountInput.tsx | 15 ++++++++++----- src/swap/types.ts | 4 ++-- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index 0c05927f04..d29c67e42b 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -105,12 +105,17 @@ export function SwapAmountInput({ )}
+
+ {/* {source.amountUSD && ( + {`~$${getRoundedAmount(source.amountUSD, 8)}`} + )} */} + + {`~$1988.33`} + +
{''} - {source.amountUSD && ( - {`~$${getRoundedAmount(source.amountUSD, 8)}`} - )}
{source.balance && ( Date: Sun, 22 Sep 2024 21:37:25 -0700 Subject: [PATCH 04/35] changes --- src/swap/components/SwapAmountInput.tsx | 19 +++++++++++-------- src/swap/components/SwapProvider.tsx | 4 ++-- src/swap/hooks/useFromTo.ts | 2 +- src/swap/types.ts | 2 +- 4 files changed, 15 insertions(+), 12 deletions(-) diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index d29c67e42b..20cd61b8de 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -106,14 +106,17 @@ export function SwapAmountInput({
- {/* {source.amountUSD && ( - {`~$${getRoundedAmount(source.amountUSD, 8)}`} - )} */} - - {`~$1988.33`} - + {type === 'from' ? ( + + {source.amountUSD + ? `~$${getRoundedAmount(source.amountUSD, 8)}` + : '~$0.0'} + + ) : type === 'to' ? null : ( + + {source.amountUSD && `~$${getRoundedAmount(source.amountUSD, 8)}`} + + )}
{''}
diff --git a/src/swap/components/SwapProvider.tsx b/src/swap/components/SwapProvider.tsx index 49631aadd7..f47bad7950 100644 --- a/src/swap/components/SwapProvider.tsx +++ b/src/swap/components/SwapProvider.tsx @@ -281,11 +281,11 @@ export function SwapProvider({ const formattedFromAmountUSD = formatTokenAmount( response.fromAmountUSDC, response.to.decimals, // make const = 6?, OR response.to.decimals - ) + ); const formattedToAmountUSD = formatTokenAmount( response.fromAmountUSDC, response.to.decimals, // make const = 6?, OR response.to.decimals - ) + ); destination.setAmount(formattedAmount); updateLifecycleStatus({ statusName: 'amountChange', diff --git a/src/swap/hooks/useFromTo.ts b/src/swap/hooks/useFromTo.ts index 2dfd8e258a..3731035ae5 100644 --- a/src/swap/hooks/useFromTo.ts +++ b/src/swap/hooks/useFromTo.ts @@ -7,7 +7,7 @@ import { useSwapBalances } from './useSwapBalances'; export const useFromTo = (address?: Address): FromTo => { const [fromAmount, setFromAmount] = useState(''); - const [fromAmountUSD, setFromAmountUSD] = useState('') + const [fromAmountUSD, setFromAmountUSD] = useState(''); const [fromToken, setFromToken] = useState(); const [toAmount, setToAmount] = useState(''); const [toAmountUSD, setToAmountUSD] = useState(''); diff --git a/src/swap/types.ts b/src/swap/types.ts index b9d1e1c881..2e65ad33b7 100644 --- a/src/swap/types.ts +++ b/src/swap/types.ts @@ -91,7 +91,7 @@ export type LifecycleStatus = amountFrom: string; amountFromUSD: string; amountTo: string; - amountToUSD: string, + amountToUSD: string; tokenFrom?: Token; tokenTo?: Token; } & LifecycleStatusDataShared; From 0b618b012fcff503d43e8244a68ee328354f8bc9 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 23 Sep 2024 15:10:36 -0700 Subject: [PATCH 05/35] look --- src/swap/components/SwapAmountInput.tsx | 6 +++++- src/swap/components/SwapProvider.tsx | 20 ++++++++++---------- src/swap/types.ts | 4 ++-- 3 files changed, 17 insertions(+), 13 deletions(-) diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index 20cd61b8de..ab317c1175 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -22,6 +22,9 @@ export function SwapAmountInput({ const source = useValue(type === 'from' ? from : to); const destination = useValue(type === 'from' ? to : from); + console.log('source.amountUSD: ', source.amountUSD); + console.log('destination.amountUSD: ', destination.amountUSD); + useEffect(() => { if (token) { source.setToken(token); @@ -114,7 +117,8 @@ export function SwapAmountInput({ ) : type === 'to' ? null : ( - {source.amountUSD && `~$${getRoundedAmount(source.amountUSD, 8)}`} + {destination.amountUSD && + `~$${getRoundedAmount(destination.amountUSD, 8)}`} )}
diff --git a/src/swap/components/SwapProvider.tsx b/src/swap/components/SwapProvider.tsx index f47bad7950..3435882d93 100644 --- a/src/swap/components/SwapProvider.tsx +++ b/src/swap/components/SwapProvider.tsx @@ -278,22 +278,22 @@ export function SwapProvider({ response.toAmount, response.to.decimals, ); - const formattedFromAmountUSD = formatTokenAmount( - response.fromAmountUSDC, - response.to.decimals, // make const = 6?, OR response.to.decimals - ); - const formattedToAmountUSD = formatTokenAmount( - response.fromAmountUSDC, - response.to.decimals, // make const = 6?, OR response.to.decimals - ); + // const formattedFromAmountUSD = formatTokenAmount( + // response.fromAmountUSDC, + // response.to.decimals, // make const = 6?, OR response.to.decimals + // ); + // const formattedToAmountUSD = formatTokenAmount( + // response.fromAmountUSDC, + // response.to.decimals, // make const = 6?, OR response.to.decimals + // ); destination.setAmount(formattedAmount); updateLifecycleStatus({ statusName: 'amountChange', statusData: { amountFrom: type === 'from' ? amount : formattedAmount, - amountFromUSD: formattedFromAmountUSD, + amountFromUSD: response.fromAmountUSD, amountTo: type === 'to' ? amount : formattedAmount, - amountToUSD: formattedToAmountUSD, + amountToUSD: response.toAmountUSD, tokenFrom: from.token, tokenTo: to.token, // if quote was fetched successfully, we diff --git a/src/swap/types.ts b/src/swap/types.ts index 2e65ad33b7..652869023a 100644 --- a/src/swap/types.ts +++ b/src/swap/types.ts @@ -244,13 +244,13 @@ export type SwapQuote = { amountReference: string; // The reference amount for the quote from: Token; // The source token for the swap fromAmount: string; // The amount of the source token - fromAmountUSDC: string; // The USD value of the source token + fromAmountUSD: string; // The USD value of the source token hasHighPriceImpact: boolean; // Whether the price impact is high priceImpact: string; // The price impact of the swap slippage: string; // The slippage of the swap to: Token; // The destination token for the swap toAmount: string; // The amount of the destination token - toAmountUSDC: string; // The USD value of the destination token + toAmountUSD: string; // The USD value of the destination token warning?: QuoteWarning; // The warning associated with the quote }; From 2078fe69163cb2b731c38bd01b200af379a13225 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 23 Sep 2024 15:40:54 -0700 Subject: [PATCH 06/35] Displaying UI --- src/swap/components/SwapAmountInput.tsx | 12 +++++---- src/swap/components/SwapProvider.tsx | 34 ++++++++++++++----------- 2 files changed, 26 insertions(+), 20 deletions(-) diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index ab317c1175..2052e5aea0 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -109,16 +109,18 @@ export function SwapAmountInput({
- {type === 'from' ? ( + {type === 'from' && ( {source.amountUSD - ? `~$${getRoundedAmount(source.amountUSD, 8)}` + ? `~$${getRoundedAmount(source.amountUSD, 2)}` : '~$0.0'} - ) : type === 'to' ? null : ( + )} + {type === 'to' && ( - {destination.amountUSD && - `~$${getRoundedAmount(destination.amountUSD, 8)}`} + {destination.amountUSD + ? `~$${getRoundedAmount(destination.amountUSD, 2)}` + : '~$0.0'} )}
diff --git a/src/swap/components/SwapProvider.tsx b/src/swap/components/SwapProvider.tsx index 3435882d93..6dd17e738a 100644 --- a/src/swap/components/SwapProvider.tsx +++ b/src/swap/components/SwapProvider.tsx @@ -78,7 +78,7 @@ export function SwapProvider({ const persistedStatusData = prevStatus.statusName === 'error' ? (({ error, code, message, ...statusData }) => statusData)( - prevStatus.statusData, + prevStatus.statusData ) : prevStatus.statusData; return { @@ -90,7 +90,7 @@ export function SwapProvider({ } as LifecycleStatus; }); }, - [], + [] ); const [hasHandledSuccess, setHasHandledSuccess] = useState(false); @@ -201,7 +201,7 @@ export function SwapProvider({ type: 'from' | 'to', amount: string, sToken?: Token, - dToken?: Token, + dToken?: Token // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: TODO Refactor this component ) => { const source = type === 'from' ? from : to; @@ -276,24 +276,28 @@ export function SwapProvider({ } const formattedAmount = formatTokenAmount( response.toAmount, - response.to.decimals, + response.to.decimals ); - // const formattedFromAmountUSD = formatTokenAmount( - // response.fromAmountUSDC, - // response.to.decimals, // make const = 6?, OR response.to.decimals - // ); - // const formattedToAmountUSD = formatTokenAmount( - // response.fromAmountUSDC, - // response.to.decimals, // make const = 6?, OR response.to.decimals - // ); + const formattedFromAmountUSD = formatTokenAmount( + response.fromAmountUSD, + response.to.decimals // make const = 6 + ); + const formattedToAmountUSD = formatTokenAmount( + response.fromAmountUSD, + response.to.decimals // make const = 6?, OR response.to.decimals + ); + destination.setAmount(formattedAmount); + source.setAmountUSD(formattedFromAmountUSD); + destination.setAmountUSD(formattedToAmountUSD); + updateLifecycleStatus({ statusName: 'amountChange', statusData: { amountFrom: type === 'from' ? amount : formattedAmount, - amountFromUSD: response.fromAmountUSD, + amountFromUSD: formattedFromAmountUSD, amountTo: type === 'to' ? amount : formattedAmount, - amountToUSD: response.toAmountUSD, + amountToUSD: formattedToAmountUSD, tokenFrom: from.token, tokenTo: to.token, // if quote was fetched successfully, we @@ -315,7 +319,7 @@ export function SwapProvider({ destination.setLoading(false); } }, - [from, to, lifecycleStatus, updateLifecycleStatus, useAggregator], + [from, to, lifecycleStatus, updateLifecycleStatus, useAggregator] ); const handleSubmit = useCallback(async () => { From 38259e6017cd32464c0ec59188cb117d52cc8264 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 23 Sep 2024 16:50:54 -0700 Subject: [PATCH 07/35] saving --- src/swap/components/SwapAmountInput.tsx | 17 +++++++------ src/swap/components/SwapProvider.tsx | 32 ++++++++++++++++++------- 2 files changed, 32 insertions(+), 17 deletions(-) diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index 2052e5aea0..894ddb7122 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -21,9 +21,8 @@ export function SwapAmountInput({ const source = useValue(type === 'from' ? from : to); const destination = useValue(type === 'from' ? to : from); - - console.log('source.amountUSD: ', source.amountUSD); - console.log('destination.amountUSD: ', destination.amountUSD); + console.log('SwapAmountInput source.amountUSD: ', source.amountUSD); + console.log('SwapAmountInput destination.amountUSD: ', destination.amountUSD); useEffect(() => { if (token) { @@ -43,7 +42,7 @@ export function SwapAmountInput({ (amount: string) => { handleAmountChange(type, amount); }, - [handleAmountChange, type], + [handleAmountChange, type] ); const handleSetToken = useCallback( @@ -51,7 +50,7 @@ export function SwapAmountInput({ source.setToken(token); handleAmountChange(type, source.amount, token); }, - [source.amount, source.setToken, handleAmountChange, type], + [source.amount, source.setToken, handleAmountChange, type] ); // We are mocking the token selectors so I'm not able @@ -59,7 +58,7 @@ export function SwapAmountInput({ const sourceTokenOptions = useMemo(() => { return ( swappableTokens?.filter( - ({ symbol }: Token) => symbol !== destination.token?.symbol, + ({ symbol }: Token) => symbol !== destination.token?.symbol ) ?? [] ); }, [swappableTokens, destination.token]); @@ -73,7 +72,7 @@ export function SwapAmountInput({ background.alternate, 'box-border flex w-full flex-col items-start', 'h-[148px] rounded-md p-4', - className, + className )} data-testid="ockSwapAmountInput_Container" > @@ -85,7 +84,7 @@ export function SwapAmountInput({ className={cn( 'mr-2 w-full border-[none] bg-transparent font-display text-[2.5rem]', 'leading-none outline-none', - hasInsufficientBalance && address ? color.error : color.foreground, + hasInsufficientBalance && address ? color.error : color.foreground )} placeholder="0.0" delayMs={delayMs} @@ -109,7 +108,7 @@ export function SwapAmountInput({
- {type === 'from' && ( + {type === 'from' && ( {source.amountUSD ? `~$${getRoundedAmount(source.amountUSD, 2)}` diff --git a/src/swap/components/SwapProvider.tsx b/src/swap/components/SwapProvider.tsx index 6dd17e738a..11d68ed32d 100644 --- a/src/swap/components/SwapProvider.tsx +++ b/src/swap/components/SwapProvider.tsx @@ -176,7 +176,9 @@ export function SwapProvider({ const handleToggle = useCallback(() => { from.setAmount(to.amount); + from.setAmountUSD(to.amountUSD); to.setAmount(from.amount); + to.setAmountUSD(from.amountUSD); from.setToken(to.token); to.setToken(from.token); @@ -228,7 +230,10 @@ export function SwapProvider({ return; } if (amount === '' || amount === '.' || Number.parseFloat(amount) === 0) { - return destination.setAmount(''); + destination.setAmount(''); + destination.setAmountUSD(''); + source.setAmountUSD(''); + return; } // When toAmount changes we fetch quote for fromAmount @@ -240,9 +245,9 @@ export function SwapProvider({ // when fetching quote, the previous // amount is irrelevant amountFrom: type === 'from' ? amount : '', - amountFromUSD: from.amountUSD, + amountFromUSD: type === 'from' ? from.amountUSD : '', amountTo: type === 'to' ? amount : '', - amountToUSD: to.amountUSD, + amountToUSD: type === 'to' ? to.amountUSD : '', tokenFrom: from.token, tokenTo: to.token, // when fetching quote, the destination @@ -283,21 +288,32 @@ export function SwapProvider({ response.to.decimals // make const = 6 ); const formattedToAmountUSD = formatTokenAmount( - response.fromAmountUSD, - response.to.decimals // make const = 6?, OR response.to.decimals + response.toAmountUSD, + response.to.decimals // make const = 6? ); - + destination.setAmount(formattedAmount); + + source.setAmountUSD(formattedFromAmountUSD); destination.setAmountUSD(formattedToAmountUSD); + console.log( + 'SwapProvider formattedFromAmountUSD: ', + formattedFromAmountUSD + ); + console.log( + 'SwapProvider formattedToAmountUSD: ', + formattedToAmountUSD + ); + updateLifecycleStatus({ statusName: 'amountChange', statusData: { amountFrom: type === 'from' ? amount : formattedAmount, - amountFromUSD: formattedFromAmountUSD, + amountFromUSD: type === 'from' ? from.amountUSD : formattedFromAmountUSD, amountTo: type === 'to' ? amount : formattedAmount, - amountToUSD: formattedToAmountUSD, + amountToUSD: type === 'to' ? to.amountUSD : formattedToAmountUSD, tokenFrom: from.token, tokenTo: to.token, // if quote was fetched successfully, we From 8be4e40ed71ecc9fa4447785dc505053b78bc920 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 23 Sep 2024 16:51:32 -0700 Subject: [PATCH 08/35] format --- src/swap/components/SwapAmountInput.tsx | 10 +++++----- src/swap/components/SwapProvider.tsx | 22 +++++++++++----------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index 894ddb7122..e23a639bcf 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -42,7 +42,7 @@ export function SwapAmountInput({ (amount: string) => { handleAmountChange(type, amount); }, - [handleAmountChange, type] + [handleAmountChange, type], ); const handleSetToken = useCallback( @@ -50,7 +50,7 @@ export function SwapAmountInput({ source.setToken(token); handleAmountChange(type, source.amount, token); }, - [source.amount, source.setToken, handleAmountChange, type] + [source.amount, source.setToken, handleAmountChange, type], ); // We are mocking the token selectors so I'm not able @@ -58,7 +58,7 @@ export function SwapAmountInput({ const sourceTokenOptions = useMemo(() => { return ( swappableTokens?.filter( - ({ symbol }: Token) => symbol !== destination.token?.symbol + ({ symbol }: Token) => symbol !== destination.token?.symbol, ) ?? [] ); }, [swappableTokens, destination.token]); @@ -72,7 +72,7 @@ export function SwapAmountInput({ background.alternate, 'box-border flex w-full flex-col items-start', 'h-[148px] rounded-md p-4', - className + className, )} data-testid="ockSwapAmountInput_Container" > @@ -84,7 +84,7 @@ export function SwapAmountInput({ className={cn( 'mr-2 w-full border-[none] bg-transparent font-display text-[2.5rem]', 'leading-none outline-none', - hasInsufficientBalance && address ? color.error : color.foreground + hasInsufficientBalance && address ? color.error : color.foreground, )} placeholder="0.0" delayMs={delayMs} diff --git a/src/swap/components/SwapProvider.tsx b/src/swap/components/SwapProvider.tsx index 11d68ed32d..34c80fe083 100644 --- a/src/swap/components/SwapProvider.tsx +++ b/src/swap/components/SwapProvider.tsx @@ -78,7 +78,7 @@ export function SwapProvider({ const persistedStatusData = prevStatus.statusName === 'error' ? (({ error, code, message, ...statusData }) => statusData)( - prevStatus.statusData + prevStatus.statusData, ) : prevStatus.statusData; return { @@ -90,7 +90,7 @@ export function SwapProvider({ } as LifecycleStatus; }); }, - [] + [], ); const [hasHandledSuccess, setHasHandledSuccess] = useState(false); @@ -203,7 +203,7 @@ export function SwapProvider({ type: 'from' | 'to', amount: string, sToken?: Token, - dToken?: Token + dToken?: Token, // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: TODO Refactor this component ) => { const source = type === 'from' ? from : to; @@ -281,37 +281,37 @@ export function SwapProvider({ } const formattedAmount = formatTokenAmount( response.toAmount, - response.to.decimals + response.to.decimals, ); const formattedFromAmountUSD = formatTokenAmount( response.fromAmountUSD, - response.to.decimals // make const = 6 + response.to.decimals, // make const = 6 ); const formattedToAmountUSD = formatTokenAmount( response.toAmountUSD, - response.to.decimals // make const = 6? + response.to.decimals, // make const = 6? ); destination.setAmount(formattedAmount); - source.setAmountUSD(formattedFromAmountUSD); destination.setAmountUSD(formattedToAmountUSD); console.log( 'SwapProvider formattedFromAmountUSD: ', - formattedFromAmountUSD + formattedFromAmountUSD, ); console.log( 'SwapProvider formattedToAmountUSD: ', - formattedToAmountUSD + formattedToAmountUSD, ); updateLifecycleStatus({ statusName: 'amountChange', statusData: { amountFrom: type === 'from' ? amount : formattedAmount, - amountFromUSD: type === 'from' ? from.amountUSD : formattedFromAmountUSD, + amountFromUSD: + type === 'from' ? from.amountUSD : formattedFromAmountUSD, amountTo: type === 'to' ? amount : formattedAmount, amountToUSD: type === 'to' ? to.amountUSD : formattedToAmountUSD, tokenFrom: from.token, @@ -335,7 +335,7 @@ export function SwapProvider({ destination.setLoading(false); } }, - [from, to, lifecycleStatus, updateLifecycleStatus, useAggregator] + [from, to, lifecycleStatus, updateLifecycleStatus, useAggregator], ); const handleSubmit = useCallback(async () => { From 9331e54a704b0eac2f77bb5cb0f89ab6d65cb53f Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 23 Sep 2024 17:17:26 -0700 Subject: [PATCH 09/35] changes --- src/swap/components/SwapAmountInput.tsx | 6 ++--- src/swap/components/SwapProvider.tsx | 35 +++++++++---------------- src/swap/types.ts | 1 + 3 files changed, 16 insertions(+), 26 deletions(-) diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index e23a639bcf..4b3ec01a11 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -35,12 +35,12 @@ export function SwapAmountInput({ return; } source.setAmount(source.balance); - handleAmountChange(type, source.balance); + handleAmountChange(type, source.balance, source.amountUSD); }, [source.balance, source.setAmount, handleAmountChange, type]); const handleChange = useCallback( (amount: string) => { - handleAmountChange(type, amount); + handleAmountChange(type, amount, source.amountUSD); }, [handleAmountChange, type], ); @@ -48,7 +48,7 @@ export function SwapAmountInput({ const handleSetToken = useCallback( (token: Token) => { source.setToken(token); - handleAmountChange(type, source.amount, token); + handleAmountChange(type, source.amount, source.amountUSD, token); }, [source.amount, source.setToken, handleAmountChange, type], ); diff --git a/src/swap/components/SwapProvider.tsx b/src/swap/components/SwapProvider.tsx index 34c80fe083..e87c827ea3 100644 --- a/src/swap/components/SwapProvider.tsx +++ b/src/swap/components/SwapProvider.tsx @@ -202,6 +202,7 @@ export function SwapProvider({ async ( type: 'from' | 'to', amount: string, + amountUSD: string, sToken?: Token, dToken?: Token, // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: TODO Refactor this component @@ -232,7 +233,6 @@ export function SwapProvider({ if (amount === '' || amount === '.' || Number.parseFloat(amount) === 0) { destination.setAmount(''); destination.setAmountUSD(''); - source.setAmountUSD(''); return; } @@ -245,9 +245,9 @@ export function SwapProvider({ // when fetching quote, the previous // amount is irrelevant amountFrom: type === 'from' ? amount : '', - amountFromUSD: type === 'from' ? from.amountUSD : '', + amountFromUSD: type === 'from' ? amountUSD : '', amountTo: type === 'to' ? amount : '', - amountToUSD: type === 'to' ? to.amountUSD : '', + amountToUSD: type === 'to' ? amountUSD : '', tokenFrom: from.token, tokenTo: to.token, // when fetching quote, the destination @@ -283,37 +283,26 @@ export function SwapProvider({ response.toAmount, response.to.decimals, ); - const formattedFromAmountUSD = formatTokenAmount( - response.fromAmountUSD, - response.to.decimals, // make const = 6 - ); - const formattedToAmountUSD = formatTokenAmount( + // const formattedFromAmountUSD = formatTokenAmount( + // response.fromAmountUSD, + // response.to.decimals, // make const = 6 + // ); + const formattedAmountUSD = formatTokenAmount( response.toAmountUSD, response.to.decimals, // make const = 6? ); destination.setAmount(formattedAmount); - - source.setAmountUSD(formattedFromAmountUSD); - destination.setAmountUSD(formattedToAmountUSD); - - console.log( - 'SwapProvider formattedFromAmountUSD: ', - formattedFromAmountUSD, - ); - console.log( - 'SwapProvider formattedToAmountUSD: ', - formattedToAmountUSD, - ); + // source.setAmountUSD(formattedFromAmountUSD); + destination.setAmountUSD(formattedAmountUSD); updateLifecycleStatus({ statusName: 'amountChange', statusData: { amountFrom: type === 'from' ? amount : formattedAmount, - amountFromUSD: - type === 'from' ? from.amountUSD : formattedFromAmountUSD, + amountFromUSD: type === 'from' ? amountUSD : formattedAmountUSD, amountTo: type === 'to' ? amount : formattedAmount, - amountToUSD: type === 'to' ? to.amountUSD : formattedToAmountUSD, + amountToUSD: type === 'to' ? amountUSD : formattedAmountUSD, tokenFrom: from.token, tokenTo: to.token, // if quote was fetched successfully, we diff --git a/src/swap/types.ts b/src/swap/types.ts index 652869023a..5789bac311 100644 --- a/src/swap/types.ts +++ b/src/swap/types.ts @@ -208,6 +208,7 @@ export type SwapContextType = { handleAmountChange: ( t: 'from' | 'to', amount: string, + amountUSD: string, st?: Token, dt?: Token, ) => void; From ec29b72172f52fb0932720ea8329e82e419657a0 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 23 Sep 2024 17:35:35 -0700 Subject: [PATCH 10/35] asfd --- src/swap/components/SwapAmountInput.tsx | 6 +++--- src/swap/components/SwapProvider.tsx | 27 +------------------------ src/swap/types.ts | 1 - 3 files changed, 4 insertions(+), 30 deletions(-) diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index 4b3ec01a11..e23a639bcf 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -35,12 +35,12 @@ export function SwapAmountInput({ return; } source.setAmount(source.balance); - handleAmountChange(type, source.balance, source.amountUSD); + handleAmountChange(type, source.balance); }, [source.balance, source.setAmount, handleAmountChange, type]); const handleChange = useCallback( (amount: string) => { - handleAmountChange(type, amount, source.amountUSD); + handleAmountChange(type, amount); }, [handleAmountChange, type], ); @@ -48,7 +48,7 @@ export function SwapAmountInput({ const handleSetToken = useCallback( (token: Token) => { source.setToken(token); - handleAmountChange(type, source.amount, source.amountUSD, token); + handleAmountChange(type, source.amount, token); }, [source.amount, source.setToken, handleAmountChange, type], ); diff --git a/src/swap/components/SwapProvider.tsx b/src/swap/components/SwapProvider.tsx index e87c827ea3..ec91f772c5 100644 --- a/src/swap/components/SwapProvider.tsx +++ b/src/swap/components/SwapProvider.tsx @@ -176,9 +176,7 @@ export function SwapProvider({ const handleToggle = useCallback(() => { from.setAmount(to.amount); - from.setAmountUSD(to.amountUSD); to.setAmount(from.amount); - to.setAmountUSD(from.amountUSD); from.setToken(to.token); to.setToken(from.token); @@ -186,9 +184,7 @@ export function SwapProvider({ statusName: 'amountChange', statusData: { amountFrom: from.amount, - amountFromUSD: from.amountUSD, amountTo: to.amount, - amountToUSD: to.amountUSD, tokenFrom: from.token, tokenTo: to.token, // token is missing @@ -202,7 +198,6 @@ export function SwapProvider({ async ( type: 'from' | 'to', amount: string, - amountUSD: string, sToken?: Token, dToken?: Token, // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: TODO Refactor this component @@ -219,9 +214,7 @@ export function SwapProvider({ statusName: 'amountChange', statusData: { amountFrom: from.amount, - amountFromUSD: from.amountUSD, amountTo: to.amount, - amountToUSD: to.amountUSD, tokenFrom: from.token, tokenTo: to.token, // token is missing @@ -231,9 +224,7 @@ export function SwapProvider({ return; } if (amount === '' || amount === '.' || Number.parseFloat(amount) === 0) { - destination.setAmount(''); - destination.setAmountUSD(''); - return; + return destination.setAmount(''); } // When toAmount changes we fetch quote for fromAmount @@ -245,9 +236,7 @@ export function SwapProvider({ // when fetching quote, the previous // amount is irrelevant amountFrom: type === 'from' ? amount : '', - amountFromUSD: type === 'from' ? amountUSD : '', amountTo: type === 'to' ? amount : '', - amountToUSD: type === 'to' ? amountUSD : '', tokenFrom: from.token, tokenTo: to.token, // when fetching quote, the destination @@ -283,26 +272,12 @@ export function SwapProvider({ response.toAmount, response.to.decimals, ); - // const formattedFromAmountUSD = formatTokenAmount( - // response.fromAmountUSD, - // response.to.decimals, // make const = 6 - // ); - const formattedAmountUSD = formatTokenAmount( - response.toAmountUSD, - response.to.decimals, // make const = 6? - ); - destination.setAmount(formattedAmount); - // source.setAmountUSD(formattedFromAmountUSD); - destination.setAmountUSD(formattedAmountUSD); - updateLifecycleStatus({ statusName: 'amountChange', statusData: { amountFrom: type === 'from' ? amount : formattedAmount, - amountFromUSD: type === 'from' ? amountUSD : formattedAmountUSD, amountTo: type === 'to' ? amount : formattedAmount, - amountToUSD: type === 'to' ? amountUSD : formattedAmountUSD, tokenFrom: from.token, tokenTo: to.token, // if quote was fetched successfully, we diff --git a/src/swap/types.ts b/src/swap/types.ts index 5789bac311..652869023a 100644 --- a/src/swap/types.ts +++ b/src/swap/types.ts @@ -208,7 +208,6 @@ export type SwapContextType = { handleAmountChange: ( t: 'from' | 'to', amount: string, - amountUSD: string, st?: Token, dt?: Token, ) => void; From 69db2d501a6a3662f25095cd551bbc27ab3b6ecf Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 23 Sep 2024 18:03:47 -0700 Subject: [PATCH 11/35] asdf --- src/swap/components/SwapAmountInput.tsx | 5 ++--- src/swap/components/SwapProvider.tsx | 6 +++++- src/swap/types.ts | 2 -- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index e23a639bcf..8ee92836a9 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -21,9 +21,8 @@ export function SwapAmountInput({ const source = useValue(type === 'from' ? from : to); const destination = useValue(type === 'from' ? to : from); - console.log('SwapAmountInput source.amountUSD: ', source.amountUSD); - console.log('SwapAmountInput destination.amountUSD: ', destination.amountUSD); - + console.log('source.amountUSD: ', source.amountUSD); + console.log('destination.amountUSD: ', destination.amountUSD); useEffect(() => { if (token) { source.setToken(token); diff --git a/src/swap/components/SwapProvider.tsx b/src/swap/components/SwapProvider.tsx index ec91f772c5..c2fa8b746d 100644 --- a/src/swap/components/SwapProvider.tsx +++ b/src/swap/components/SwapProvider.tsx @@ -272,7 +272,11 @@ export function SwapProvider({ response.toAmount, response.to.decimals, ); - destination.setAmount(formattedAmount); + + destination.setAmount(formatTokenAmount(response.toAmountUSD, 6)); + destination.setAmountUSD(formattedAmount); + source.setAmountUSD(formatTokenAmount(response.fromAmountUSD, 6)); + updateLifecycleStatus({ statusName: 'amountChange', statusData: { diff --git a/src/swap/types.ts b/src/swap/types.ts index 652869023a..a3406028dc 100644 --- a/src/swap/types.ts +++ b/src/swap/types.ts @@ -89,9 +89,7 @@ export type LifecycleStatus = statusName: 'amountChange'; statusData: { amountFrom: string; - amountFromUSD: string; amountTo: string; - amountToUSD: string; tokenFrom?: Token; tokenTo?: Token; } & LifecycleStatusDataShared; From af0fab4f1a33c9e278eaf8ce640502a1766930ce Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 23 Sep 2024 18:04:33 -0700 Subject: [PATCH 12/35] asdf --- src/swap/components/SwapAmountInput.tsx | 3 +-- src/swap/components/SwapProvider.tsx | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index 8ee92836a9..9cbc20da09 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -21,8 +21,7 @@ export function SwapAmountInput({ const source = useValue(type === 'from' ? from : to); const destination = useValue(type === 'from' ? to : from); - console.log('source.amountUSD: ', source.amountUSD); - console.log('destination.amountUSD: ', destination.amountUSD); + useEffect(() => { if (token) { source.setToken(token); diff --git a/src/swap/components/SwapProvider.tsx b/src/swap/components/SwapProvider.tsx index c2fa8b746d..138e65b67f 100644 --- a/src/swap/components/SwapProvider.tsx +++ b/src/swap/components/SwapProvider.tsx @@ -272,7 +272,6 @@ export function SwapProvider({ response.toAmount, response.to.decimals, ); - destination.setAmount(formatTokenAmount(response.toAmountUSD, 6)); destination.setAmountUSD(formattedAmount); source.setAmountUSD(formatTokenAmount(response.fromAmountUSD, 6)); From 4c3fd51e7b531a582488f5b7bcb730b42e5d8fe3 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 23 Sep 2024 18:07:52 -0700 Subject: [PATCH 13/35] const --- src/swap/components/SwapProvider.tsx | 10 +++++++--- src/swap/constants.ts | 1 + 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/swap/components/SwapProvider.tsx b/src/swap/components/SwapProvider.tsx index 138e65b67f..bcd2fe810f 100644 --- a/src/swap/components/SwapProvider.tsx +++ b/src/swap/components/SwapProvider.tsx @@ -17,7 +17,7 @@ import { formatTokenAmount } from '../../internal/utils/formatTokenAmount'; import type { Token } from '../../token'; import { GENERIC_ERROR_MESSAGE } from '../../transaction/constants'; import { isUserRejectedRequestError } from '../../transaction/utils/isUserRejectedRequestError'; -import { DEFAULT_MAX_SLIPPAGE } from '../constants'; +import { DEFAULT_MAX_SLIPPAGE, USDC_TOKEN_DECIMALS } from '../constants'; import { useAwaitCalls } from '../hooks/useAwaitCalls'; import { useFromTo } from '../hooks/useFromTo'; import { useResetInputs } from '../hooks/useResetInputs'; @@ -272,9 +272,13 @@ export function SwapProvider({ response.toAmount, response.to.decimals, ); - destination.setAmount(formatTokenAmount(response.toAmountUSD, 6)); + destination.setAmount( + formatTokenAmount(response.toAmountUSD, USDC_TOKEN_DECIMALS), + ); destination.setAmountUSD(formattedAmount); - source.setAmountUSD(formatTokenAmount(response.fromAmountUSD, 6)); + source.setAmountUSD( + formatTokenAmount(response.fromAmountUSD, USDC_TOKEN_DECIMALS), + ); updateLifecycleStatus({ statusName: 'amountChange', diff --git a/src/swap/constants.ts b/src/swap/constants.ts index 0a8c8ea33a..cd22d49763 100644 --- a/src/swap/constants.ts +++ b/src/swap/constants.ts @@ -10,6 +10,7 @@ export const UNCAUGHT_SWAP_QUOTE_ERROR_CODE = 'UNCAUGHT_SWAP_QUOTE_ERROR'; export const UNCAUGHT_SWAP_ERROR_CODE = 'UNCAUGHT_SWAP_ERROR'; export const UNIVERSALROUTER_CONTRACT_ADDRESS = '0x3fC91A3afd70395Cd496C647d5a6CC9D4B2b7FAD'; +export const USDC_TOKEN_DECIMALS = 6; export const USER_REJECTED_ERROR_CODE = 'USER_REJECTED'; export enum SwapMessage { BALANCE_ERROR = 'Error fetching token balance', From ce84047d06d5b053efce79912dbc7044c00fbf76 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 23 Sep 2024 18:18:44 -0700 Subject: [PATCH 14/35] set values back to 0 --- src/swap/components/SwapProvider.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/swap/components/SwapProvider.tsx b/src/swap/components/SwapProvider.tsx index bcd2fe810f..9f1e1f612b 100644 --- a/src/swap/components/SwapProvider.tsx +++ b/src/swap/components/SwapProvider.tsx @@ -224,7 +224,10 @@ export function SwapProvider({ return; } if (amount === '' || amount === '.' || Number.parseFloat(amount) === 0) { - return destination.setAmount(''); + destination.setAmount(''); + destination.setAmountUSD(''); + source.setAmountUSD(''); + return } // When toAmount changes we fetch quote for fromAmount @@ -279,7 +282,6 @@ export function SwapProvider({ source.setAmountUSD( formatTokenAmount(response.fromAmountUSD, USDC_TOKEN_DECIMALS), ); - updateLifecycleStatus({ statusName: 'amountChange', statusData: { From 6a04533a2a33ee3e7b011445bf948981c3085c38 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 23 Sep 2024 18:23:45 -0700 Subject: [PATCH 15/35] asdf --- src/swap/components/SwapProvider.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/swap/components/SwapProvider.tsx b/src/swap/components/SwapProvider.tsx index 9f1e1f612b..c47f4cc9d2 100644 --- a/src/swap/components/SwapProvider.tsx +++ b/src/swap/components/SwapProvider.tsx @@ -227,7 +227,7 @@ export function SwapProvider({ destination.setAmount(''); destination.setAmountUSD(''); source.setAmountUSD(''); - return + return; } // When toAmount changes we fetch quote for fromAmount @@ -275,10 +275,10 @@ export function SwapProvider({ response.toAmount, response.to.decimals, ); - destination.setAmount( + destination.setAmountUSD( formatTokenAmount(response.toAmountUSD, USDC_TOKEN_DECIMALS), ); - destination.setAmountUSD(formattedAmount); + destination.setAmount(formattedAmount); source.setAmountUSD( formatTokenAmount(response.fromAmountUSD, USDC_TOKEN_DECIMALS), ); From 70933c8bda6c4e31a88a5232f2ee04be83b7fb95 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 23 Sep 2024 18:48:57 -0700 Subject: [PATCH 16/35] fix rendering of input --- src/swap/components/SwapAmountInput.tsx | 22 +++++++--------------- 1 file changed, 7 insertions(+), 15 deletions(-) diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index 9cbc20da09..0cdd9fbc72 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -21,7 +21,8 @@ export function SwapAmountInput({ const source = useValue(type === 'from' ? from : to); const destination = useValue(type === 'from' ? to : from); - + console.log('source.amountUSD:', source.amountUSD); + console.log('destination.amountUSD:', destination.amountUSD); useEffect(() => { if (token) { source.setToken(token); @@ -106,20 +107,11 @@ export function SwapAmountInput({
- {type === 'from' && ( - - {source.amountUSD - ? `~$${getRoundedAmount(source.amountUSD, 2)}` - : '~$0.0'} - - )} - {type === 'to' && ( - - {destination.amountUSD - ? `~$${getRoundedAmount(destination.amountUSD, 2)}` - : '~$0.0'} - - )} + + {source.amountUSD + ? `~$${getRoundedAmount(source.amountUSD, 2)}` + : '~$0.0'} +
{''}
From ded84f9ccb5c73b72d5ae9e5fc5ccd36da42ca4a Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 23 Sep 2024 18:49:25 -0700 Subject: [PATCH 17/35] remove logs --- src/swap/components/SwapAmountInput.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index 0cdd9fbc72..2337dc157b 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -21,8 +21,6 @@ export function SwapAmountInput({ const source = useValue(type === 'from' ? from : to); const destination = useValue(type === 'from' ? to : from); - console.log('source.amountUSD:', source.amountUSD); - console.log('destination.amountUSD:', destination.amountUSD); useEffect(() => { if (token) { source.setToken(token); From 0aba458897ac081ff0c8bcd27a2ef5df03e18812 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 23 Sep 2024 20:12:42 -0700 Subject: [PATCH 18/35] ETH -> DEGEN price working before this --- src/swap/components/SwapAmountInput.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index 2337dc157b..302aa14192 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -63,6 +63,14 @@ export function SwapAmountInput({ const hasInsufficientBalance = type === 'from' && Number(source.balance) < Number(source.amount); + const formatUSD = (amount: string) => { + if (!amount) { + return '~$0.00'; + } + const roundedAmount = Number(getRoundedAmount(amount, 2) || 0); + return `~$${roundedAmount.toFixed(2)}`; + }; + return (
- {source.amountUSD - ? `~$${getRoundedAmount(source.amountUSD, 2)}` - : '~$0.0'} + {formatUSD(source.amountUSD)}
{''} From f2b02fc686cd4a5b657f5ab4ab90580553c0fb54 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 23 Sep 2024 20:35:06 -0700 Subject: [PATCH 19/35] tests --- src/swap/components/SwapAmountInput.test.tsx | 98 ++++++++++++++++++-- 1 file changed, 89 insertions(+), 9 deletions(-) diff --git a/src/swap/components/SwapAmountInput.test.tsx b/src/swap/components/SwapAmountInput.test.tsx index b43d4649dc..08d6da3891 100644 --- a/src/swap/components/SwapAmountInput.test.tsx +++ b/src/swap/components/SwapAmountInput.test.tsx @@ -9,6 +9,7 @@ import { it, vi, } from 'vitest'; +import { getRoundedAmount } from '../../internal/utils/getRoundedAmount'; import type { Token } from '../../token'; import { DAI_TOKEN, ETH_TOKEN, USDC_TOKEN } from '../mocks'; import type { SwapContextType } from '../types'; @@ -66,6 +67,10 @@ const mockContextValue = { handleAmountChange: vi.fn(), } as SwapContextType; +vi.mock('../../internal/utils/getRoundedAmount', () => ({ + getRoundedAmount: vi.fn(), +})); + const mockSwappableTokens: Token[] = [ETH_TOKEN, USDC_TOKEN, DAI_TOKEN]; describe('SwapAmountInput', () => { @@ -79,15 +84,6 @@ describe('SwapAmountInput', () => { expect(screen.getByText('From')).toBeInTheDocument(); }); - it('should render from token input with max button and balance', () => { - useSwapContextMock.mockReturnValue(mockContextValue); - render(); - expect(screen.getByText('Balance: 0.00028518')).toBeInTheDocument(); - expect( - screen.getByTestId('ockSwapAmountInput_MaxButton'), - ).toBeInTheDocument(); - }); - it('should not render max button for to token input', () => { useSwapContextMock.mockReturnValue(mockContextValue); render(); @@ -295,4 +291,88 @@ describe('SwapAmountInput', () => { 'custom-class', ); }); + + it('should return ~$0.00 when amountUSD is an empty string', () => { + const mockContextValueWithEmptyAmountUSD = { + ...mockContextValue, + from: { + ...mockContextValue.from, + amountUSD: '', + }, + }; + + useSwapContextMock.mockReturnValue(mockContextValueWithEmptyAmountUSD); + + render(); + + expect(screen.getByText('~$0.00')).toBeInTheDocument(); + }); + + it('should return ~$0.00 when amountUSD is null', () => { + const mockContextValueWithNullAmountUSD = { + ...mockContextValue, + from: { + ...mockContextValue.from, + amountUSD: null as unknown as string, + }, + }; + + useSwapContextMock.mockReturnValue(mockContextValueWithNullAmountUSD); + + render(); + + expect(screen.getByText('~$0.00')).toBeInTheDocument(); + }); + + it('should return ~$0.00 when amountUSD is undefined', () => { + const mockContextValueWithUndefinedAmountUSD = { + ...mockContextValue, + from: { + ...mockContextValue.from, + amountUSD: undefined as unknown as string, + }, + }; + + useSwapContextMock.mockReturnValue(mockContextValueWithUndefinedAmountUSD); + + render(); + + expect(screen.getByText('~$0.00')).toBeInTheDocument(); + }); + + it('should return ~$0.00 when getRoundedAmount returns null', () => { + getRoundedAmount.mockReturnValue(null); + + const mockContextValueWithAmountUSD = { + ...mockContextValue, + from: { + ...mockContextValue.from, + amountUSD: '1234.567', + }, + }; + + useSwapContextMock.mockReturnValue(mockContextValueWithAmountUSD); + + render(); + + expect(screen.getByText('~$0.00')).toBeInTheDocument(); + }); + + it('should return ~$0.00 when getRoundedAmount returns undefined', () => { + getRoundedAmount.mockReturnValue(undefined); + + const mockContextValueWithAmountUSD = { + ...mockContextValue, + from: { + ...mockContextValue.from, + amountUSD: '1234.567', + }, + }; + + useSwapContextMock.mockReturnValue(mockContextValueWithAmountUSD); + + render(); + + expect(screen.getByText('~$0.00')).toBeInTheDocument(); + }); }); From 1324f96fa4c0ce38533b5317905d15cc4bf1c31e Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 23 Sep 2024 20:42:34 -0700 Subject: [PATCH 20/35] asdf --- src/swap/components/SwapAmountInput.test.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/swap/components/SwapAmountInput.test.tsx b/src/swap/components/SwapAmountInput.test.tsx index 08d6da3891..54b87b4528 100644 --- a/src/swap/components/SwapAmountInput.test.tsx +++ b/src/swap/components/SwapAmountInput.test.tsx @@ -84,6 +84,15 @@ describe('SwapAmountInput', () => { expect(screen.getByText('From')).toBeInTheDocument(); }); + it('should render from token input with max button and balance', () => { + useSwapContextMock.mockReturnValue(mockContextValue); + render(); + expect(screen.getByText('Balance: 0.00028518')).toBeInTheDocument(); + expect( + screen.getByTestId('ockSwapAmountInput_MaxButton'), + ).toBeInTheDocument(); + }); + it('should not render max button for to token input', () => { useSwapContextMock.mockReturnValue(mockContextValue); render(); From e896d3d0ec95ae44af851f39a22898dab949a539 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 23 Sep 2024 20:43:34 -0700 Subject: [PATCH 21/35] asdf --- src/swap/components/SwapAmountInput.test.tsx | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/src/swap/components/SwapAmountInput.test.tsx b/src/swap/components/SwapAmountInput.test.tsx index 54b87b4528..6f41e3783f 100644 --- a/src/swap/components/SwapAmountInput.test.tsx +++ b/src/swap/components/SwapAmountInput.test.tsx @@ -309,11 +309,8 @@ describe('SwapAmountInput', () => { amountUSD: '', }, }; - useSwapContextMock.mockReturnValue(mockContextValueWithEmptyAmountUSD); - render(); - expect(screen.getByText('~$0.00')).toBeInTheDocument(); }); @@ -325,11 +322,8 @@ describe('SwapAmountInput', () => { amountUSD: null as unknown as string, }, }; - useSwapContextMock.mockReturnValue(mockContextValueWithNullAmountUSD); - render(); - expect(screen.getByText('~$0.00')).toBeInTheDocument(); }); @@ -341,17 +335,13 @@ describe('SwapAmountInput', () => { amountUSD: undefined as unknown as string, }, }; - useSwapContextMock.mockReturnValue(mockContextValueWithUndefinedAmountUSD); - render(); - expect(screen.getByText('~$0.00')).toBeInTheDocument(); }); it('should return ~$0.00 when getRoundedAmount returns null', () => { getRoundedAmount.mockReturnValue(null); - const mockContextValueWithAmountUSD = { ...mockContextValue, from: { @@ -359,17 +349,13 @@ describe('SwapAmountInput', () => { amountUSD: '1234.567', }, }; - useSwapContextMock.mockReturnValue(mockContextValueWithAmountUSD); - render(); - expect(screen.getByText('~$0.00')).toBeInTheDocument(); }); it('should return ~$0.00 when getRoundedAmount returns undefined', () => { getRoundedAmount.mockReturnValue(undefined); - const mockContextValueWithAmountUSD = { ...mockContextValue, from: { @@ -377,11 +363,8 @@ describe('SwapAmountInput', () => { amountUSD: '1234.567', }, }; - useSwapContextMock.mockReturnValue(mockContextValueWithAmountUSD); - render(); - expect(screen.getByText('~$0.00')).toBeInTheDocument(); }); }); From d6394b279e68b54461cce777816ef820204a9703 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 23 Sep 2024 20:45:02 -0700 Subject: [PATCH 22/35] changeset --- .changeset/beige-hairs-explain.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/beige-hairs-explain.md diff --git a/.changeset/beige-hairs-explain.md b/.changeset/beige-hairs-explain.md new file mode 100644 index 0000000000..8941aaae48 --- /dev/null +++ b/.changeset/beige-hairs-explain.md @@ -0,0 +1,5 @@ +--- +'@coinbase/onchainkit': patch +--- + +feat: Add Swap USD values. By @cpcramer #1286 From 1832ea68acc25798c494a8b3759fa9bc71fc627a Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 23 Sep 2024 21:02:12 -0700 Subject: [PATCH 23/35] adding --- src/swap/components/SwapAmountInput.test.tsx | 41 +------------------- src/swap/components/SwapAmountInput.tsx | 25 ++++++------ 2 files changed, 13 insertions(+), 53 deletions(-) diff --git a/src/swap/components/SwapAmountInput.test.tsx b/src/swap/components/SwapAmountInput.test.tsx index 6f41e3783f..5c71c9bc43 100644 --- a/src/swap/components/SwapAmountInput.test.tsx +++ b/src/swap/components/SwapAmountInput.test.tsx @@ -301,45 +301,6 @@ describe('SwapAmountInput', () => { ); }); - it('should return ~$0.00 when amountUSD is an empty string', () => { - const mockContextValueWithEmptyAmountUSD = { - ...mockContextValue, - from: { - ...mockContextValue.from, - amountUSD: '', - }, - }; - useSwapContextMock.mockReturnValue(mockContextValueWithEmptyAmountUSD); - render(); - expect(screen.getByText('~$0.00')).toBeInTheDocument(); - }); - - it('should return ~$0.00 when amountUSD is null', () => { - const mockContextValueWithNullAmountUSD = { - ...mockContextValue, - from: { - ...mockContextValue.from, - amountUSD: null as unknown as string, - }, - }; - useSwapContextMock.mockReturnValue(mockContextValueWithNullAmountUSD); - render(); - expect(screen.getByText('~$0.00')).toBeInTheDocument(); - }); - - it('should return ~$0.00 when amountUSD is undefined', () => { - const mockContextValueWithUndefinedAmountUSD = { - ...mockContextValue, - from: { - ...mockContextValue.from, - amountUSD: undefined as unknown as string, - }, - }; - useSwapContextMock.mockReturnValue(mockContextValueWithUndefinedAmountUSD); - render(); - expect(screen.getByText('~$0.00')).toBeInTheDocument(); - }); - it('should return ~$0.00 when getRoundedAmount returns null', () => { getRoundedAmount.mockReturnValue(null); const mockContextValueWithAmountUSD = { @@ -366,5 +327,5 @@ describe('SwapAmountInput', () => { useSwapContextMock.mockReturnValue(mockContextValueWithAmountUSD); render(); expect(screen.getByText('~$0.00')).toBeInTheDocument(); - }); + }); }); diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index 302aa14192..c3e59c5d8d 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -39,7 +39,7 @@ export function SwapAmountInput({ (amount: string) => { handleAmountChange(type, amount); }, - [handleAmountChange, type], + [handleAmountChange, type] ); const handleSetToken = useCallback( @@ -47,7 +47,7 @@ export function SwapAmountInput({ source.setToken(token); handleAmountChange(type, source.amount, token); }, - [source.amount, source.setToken, handleAmountChange, type], + [source.amount, source.setToken, handleAmountChange, type] ); // We are mocking the token selectors so I'm not able @@ -55,7 +55,7 @@ export function SwapAmountInput({ const sourceTokenOptions = useMemo(() => { return ( swappableTokens?.filter( - ({ symbol }: Token) => symbol !== destination.token?.symbol, + ({ symbol }: Token) => symbol !== destination.token?.symbol ) ?? [] ); }, [swappableTokens, destination.token]); @@ -64,9 +64,6 @@ export function SwapAmountInput({ type === 'from' && Number(source.balance) < Number(source.amount); const formatUSD = (amount: string) => { - if (!amount) { - return '~$0.00'; - } const roundedAmount = Number(getRoundedAmount(amount, 2) || 0); return `~$${roundedAmount.toFixed(2)}`; }; @@ -77,7 +74,7 @@ export function SwapAmountInput({ background.alternate, 'box-border flex w-full flex-col items-start', 'h-[148px] rounded-md p-4', - className, + className )} data-testid="ockSwapAmountInput_Container" > @@ -89,7 +86,7 @@ export function SwapAmountInput({ className={cn( 'mr-2 w-full border-[none] bg-transparent font-display text-[2.5rem]', 'leading-none outline-none', - hasInsufficientBalance && address ? color.error : color.foreground, + hasInsufficientBalance && address ? color.error : color.foreground )} placeholder="0.0" delayMs={delayMs} @@ -112,11 +109,13 @@ export function SwapAmountInput({ )}
-
- - {formatUSD(source.amountUSD)} - -
+ {source.amountUSD && ( +
+ + {source.amountUSD ? formatUSD(source.amountUSD) : '~$0.00'} + +
+ )} {''}
{source.balance && ( From 108b752db171c127b7a4d1ad247477d7719f97ad Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 23 Sep 2024 21:05:06 -0700 Subject: [PATCH 24/35] asdf --- src/swap/components/SwapAmountInput.test.tsx | 39 ++++++++++++++++++++ src/swap/components/SwapAmountInput.tsx | 15 ++++---- 2 files changed, 47 insertions(+), 7 deletions(-) diff --git a/src/swap/components/SwapAmountInput.test.tsx b/src/swap/components/SwapAmountInput.test.tsx index 5c71c9bc43..14d10efd9a 100644 --- a/src/swap/components/SwapAmountInput.test.tsx +++ b/src/swap/components/SwapAmountInput.test.tsx @@ -328,4 +328,43 @@ describe('SwapAmountInput', () => { render(); expect(screen.getByText('~$0.00')).toBeInTheDocument(); }); + + it('should return ~$0.00 when amountUSD is an empty string', () => { + const mockContextValueWithEmptyAmountUSD = { + ...mockContextValue, + from: { + ...mockContextValue.from, + amountUSD: '', + }, + }; + useSwapContextMock.mockReturnValue(mockContextValueWithEmptyAmountUSD); + render(); + expect(screen.getByText('~$0.00')).toBeInTheDocument(); + }); + + it('should return ~$0.00 when amountUSD is null', () => { + const mockContextValueWithNullAmountUSD = { + ...mockContextValue, + from: { + ...mockContextValue.from, + amountUSD: null as unknown as string, + }, + }; + useSwapContextMock.mockReturnValue(mockContextValueWithNullAmountUSD); + render(); + expect(screen.getByText('~$0.00')).toBeInTheDocument(); + }); + + it('should return ~$0.00 when amountUSD is undefined', () => { + const mockContextValueWithUndefinedAmountUSD = { + ...mockContextValue, + from: { + ...mockContextValue.from, + amountUSD: undefined as unknown as string, + }, + }; + useSwapContextMock.mockReturnValue(mockContextValueWithUndefinedAmountUSD); + render(); + expect(screen.getByText('~$0.00')).toBeInTheDocument(); + }); }); diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index c3e59c5d8d..b78583b191 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -64,6 +64,9 @@ export function SwapAmountInput({ type === 'from' && Number(source.balance) < Number(source.amount); const formatUSD = (amount: string) => { + if (!amount) { + return '~$0.00'; + } const roundedAmount = Number(getRoundedAmount(amount, 2) || 0); return `~$${roundedAmount.toFixed(2)}`; }; @@ -109,13 +112,11 @@ export function SwapAmountInput({ )}
- {source.amountUSD && ( -
- - {source.amountUSD ? formatUSD(source.amountUSD) : '~$0.00'} - -
- )} +
+ + {formatUSD(source.amountUSD)} + +
{''}
{source.balance && ( From 66600c508c222de8a7d70b4933b7f4f849f1b3d2 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 23 Sep 2024 21:05:29 -0700 Subject: [PATCH 25/35] asdf --- src/swap/components/SwapAmountInput.test.tsx | 2 +- src/swap/components/SwapAmountInput.tsx | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/swap/components/SwapAmountInput.test.tsx b/src/swap/components/SwapAmountInput.test.tsx index 14d10efd9a..f899ac8a56 100644 --- a/src/swap/components/SwapAmountInput.test.tsx +++ b/src/swap/components/SwapAmountInput.test.tsx @@ -327,7 +327,7 @@ describe('SwapAmountInput', () => { useSwapContextMock.mockReturnValue(mockContextValueWithAmountUSD); render(); expect(screen.getByText('~$0.00')).toBeInTheDocument(); - }); + }); it('should return ~$0.00 when amountUSD is an empty string', () => { const mockContextValueWithEmptyAmountUSD = { diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index b78583b191..302aa14192 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -39,7 +39,7 @@ export function SwapAmountInput({ (amount: string) => { handleAmountChange(type, amount); }, - [handleAmountChange, type] + [handleAmountChange, type], ); const handleSetToken = useCallback( @@ -47,7 +47,7 @@ export function SwapAmountInput({ source.setToken(token); handleAmountChange(type, source.amount, token); }, - [source.amount, source.setToken, handleAmountChange, type] + [source.amount, source.setToken, handleAmountChange, type], ); // We are mocking the token selectors so I'm not able @@ -55,7 +55,7 @@ export function SwapAmountInput({ const sourceTokenOptions = useMemo(() => { return ( swappableTokens?.filter( - ({ symbol }: Token) => symbol !== destination.token?.symbol + ({ symbol }: Token) => symbol !== destination.token?.symbol, ) ?? [] ); }, [swappableTokens, destination.token]); @@ -77,7 +77,7 @@ export function SwapAmountInput({ background.alternate, 'box-border flex w-full flex-col items-start', 'h-[148px] rounded-md p-4', - className + className, )} data-testid="ockSwapAmountInput_Container" > @@ -89,7 +89,7 @@ export function SwapAmountInput({ className={cn( 'mr-2 w-full border-[none] bg-transparent font-display text-[2.5rem]', 'leading-none outline-none', - hasInsufficientBalance && address ? color.error : color.foreground + hasInsufficientBalance && address ? color.error : color.foreground, )} placeholder="0.0" delayMs={delayMs} From d4c2868c69f77acdb7e3600344e8c2ff1a415223 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Tue, 24 Sep 2024 09:03:48 -0700 Subject: [PATCH 26/35] asfd --- src/swap/components/SwapAmountInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index 302aa14192..a944a57388 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -67,7 +67,7 @@ export function SwapAmountInput({ if (!amount) { return '~$0.00'; } - const roundedAmount = Number(getRoundedAmount(amount, 2) || 0); + const roundedAmount = Number(getRoundedAmount(amount, 2)); return `~$${roundedAmount.toFixed(2)}`; }; From 82833d003c40ff2a02054cc057b0cd855b72eca8 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Tue, 24 Sep 2024 09:05:23 -0700 Subject: [PATCH 27/35] asdf --- src/swap/components/SwapAmountInput.test.tsx | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/src/swap/components/SwapAmountInput.test.tsx b/src/swap/components/SwapAmountInput.test.tsx index f899ac8a56..e742bd9e89 100644 --- a/src/swap/components/SwapAmountInput.test.tsx +++ b/src/swap/components/SwapAmountInput.test.tsx @@ -315,20 +315,6 @@ describe('SwapAmountInput', () => { expect(screen.getByText('~$0.00')).toBeInTheDocument(); }); - it('should return ~$0.00 when getRoundedAmount returns undefined', () => { - getRoundedAmount.mockReturnValue(undefined); - const mockContextValueWithAmountUSD = { - ...mockContextValue, - from: { - ...mockContextValue.from, - amountUSD: '1234.567', - }, - }; - useSwapContextMock.mockReturnValue(mockContextValueWithAmountUSD); - render(); - expect(screen.getByText('~$0.00')).toBeInTheDocument(); - }); - it('should return ~$0.00 when amountUSD is an empty string', () => { const mockContextValueWithEmptyAmountUSD = { ...mockContextValue, From e9806910c97cf5aead1aee75048413f0d7e56f51 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Tue, 24 Sep 2024 09:24:08 -0700 Subject: [PATCH 28/35] asdf --- src/swap/hooks/useFromTo.test.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/swap/hooks/useFromTo.test.ts b/src/swap/hooks/useFromTo.test.ts index 12932d5437..53732427c6 100644 --- a/src/swap/hooks/useFromTo.test.ts +++ b/src/swap/hooks/useFromTo.test.ts @@ -30,8 +30,10 @@ describe('useFromTo', () => { (useValue as Mock).mockImplementation((props) => ({ ...props, amount: '100', + amountUSD: '150', response: props.response, setAmount: vi.fn(), + setAmountUSD: vi.fn(), setLoading: vi.fn(), setToken: vi.fn(), token: USDC_TOKEN, @@ -39,22 +41,26 @@ describe('useFromTo', () => { const { result } = renderHook(() => useFromTo('0x123')); expect(result.current.from).toEqual({ amount: '100', + amountUSD: '150', balance: '100', balanceResponse: { refetch: expect.any(Function) }, error: null, loading: false, setAmount: expect.any(Function), + setAmountUSD: expect.any(Function), setLoading: expect.any(Function), setToken: expect.any(Function), token: USDC_TOKEN, }); expect(result.current.to).toEqual({ amount: '100', + amountUSD: '150', balance: '200', balanceResponse: { refetch: expect.any(Function) }, error: null, loading: false, setAmount: expect.any(Function), + setAmountUSD: expect.any(Function), setLoading: expect.any(Function), setToken: expect.any(Function), token: USDC_TOKEN, @@ -98,4 +104,4 @@ describe('useFromTo', () => { expect(mockToRefetch).toHaveBeenCalledTimes(1); expect(mockFromRefetch).not.toHaveBeenCalled(); }); -}); +}); \ No newline at end of file From 2c163fd67a661e64ff3d270b761ef63adfc49204 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Tue, 24 Sep 2024 09:37:28 -0700 Subject: [PATCH 29/35] asd --- src/swap/hooks/useFromTo.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/swap/hooks/useFromTo.test.ts b/src/swap/hooks/useFromTo.test.ts index 53732427c6..929a707d7b 100644 --- a/src/swap/hooks/useFromTo.test.ts +++ b/src/swap/hooks/useFromTo.test.ts @@ -104,4 +104,4 @@ describe('useFromTo', () => { expect(mockToRefetch).toHaveBeenCalledTimes(1); expect(mockFromRefetch).not.toHaveBeenCalled(); }); -}); \ No newline at end of file +}); From ec38a0ff479d704ad1d0ed2173732de1ab8cb31f Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Tue, 24 Sep 2024 09:56:14 -0700 Subject: [PATCH 30/35] Update frontend to NOT format USD values - only format to 2 decimal points --- src/swap/components/SwapAmountInput.tsx | 16 +++++++--------- src/swap/components/SwapProvider.tsx | 10 +++------- src/swap/constants.ts | 1 - 3 files changed, 10 insertions(+), 17 deletions(-) diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index a944a57388..d0491ecbb4 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -63,14 +63,6 @@ export function SwapAmountInput({ const hasInsufficientBalance = type === 'from' && Number(source.balance) < Number(source.amount); - const formatUSD = (amount: string) => { - if (!amount) { - return '~$0.00'; - } - const roundedAmount = Number(getRoundedAmount(amount, 2)); - return `~$${roundedAmount.toFixed(2)}`; - }; - return (
- {formatUSD(source.amountUSD)} + {source.amountUSD && source.amountUSD !== '' ? ( + + {`~$${getRoundedAmount(source.amountUSD, 2)}`} + + ) : ( + - + )}
{''} diff --git a/src/swap/components/SwapProvider.tsx b/src/swap/components/SwapProvider.tsx index c47f4cc9d2..547d2ba1af 100644 --- a/src/swap/components/SwapProvider.tsx +++ b/src/swap/components/SwapProvider.tsx @@ -17,7 +17,7 @@ import { formatTokenAmount } from '../../internal/utils/formatTokenAmount'; import type { Token } from '../../token'; import { GENERIC_ERROR_MESSAGE } from '../../transaction/constants'; import { isUserRejectedRequestError } from '../../transaction/utils/isUserRejectedRequestError'; -import { DEFAULT_MAX_SLIPPAGE, USDC_TOKEN_DECIMALS } from '../constants'; +import { DEFAULT_MAX_SLIPPAGE } from '../constants'; import { useAwaitCalls } from '../hooks/useAwaitCalls'; import { useFromTo } from '../hooks/useFromTo'; import { useResetInputs } from '../hooks/useResetInputs'; @@ -275,13 +275,9 @@ export function SwapProvider({ response.toAmount, response.to.decimals, ); - destination.setAmountUSD( - formatTokenAmount(response.toAmountUSD, USDC_TOKEN_DECIMALS), - ); + destination.setAmountUSD(response.toAmountUSD); destination.setAmount(formattedAmount); - source.setAmountUSD( - formatTokenAmount(response.fromAmountUSD, USDC_TOKEN_DECIMALS), - ); + source.setAmountUSD(response.fromAmountUSD); updateLifecycleStatus({ statusName: 'amountChange', statusData: { diff --git a/src/swap/constants.ts b/src/swap/constants.ts index cd22d49763..0a8c8ea33a 100644 --- a/src/swap/constants.ts +++ b/src/swap/constants.ts @@ -10,7 +10,6 @@ export const UNCAUGHT_SWAP_QUOTE_ERROR_CODE = 'UNCAUGHT_SWAP_QUOTE_ERROR'; export const UNCAUGHT_SWAP_ERROR_CODE = 'UNCAUGHT_SWAP_ERROR'; export const UNIVERSALROUTER_CONTRACT_ADDRESS = '0x3fC91A3afd70395Cd496C647d5a6CC9D4B2b7FAD'; -export const USDC_TOKEN_DECIMALS = 6; export const USER_REJECTED_ERROR_CODE = 'USER_REJECTED'; export enum SwapMessage { BALANCE_ERROR = 'Error fetching token balance', From e70a62e51302a5f65608b4642cb65702644f0a26 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Tue, 24 Sep 2024 10:36:43 -0700 Subject: [PATCH 31/35] asdf --- src/swap/components/SwapAmountInput.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index d0491ecbb4..d976388f0f 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -63,6 +63,14 @@ export function SwapAmountInput({ const hasInsufficientBalance = type === 'from' && Number(source.balance) < Number(source.amount); + const formatUSD = (amount: string) => { + if (!amount) { + return '-'; + } + const roundedAmount = Number(getRoundedAmount(amount, 2)); + return `~$${roundedAmount.toFixed(2)}`; + }; + return (
- {source.amountUSD && source.amountUSD !== '' ? ( - - {`~$${getRoundedAmount(source.amountUSD, 2)}`} - - ) : ( - - - )} + {formatUSD(source.amountUSD)}
{''} From 9eac738c5bf49c93d7a7a8efdc66e6923be864a0 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Tue, 24 Sep 2024 10:45:49 -0700 Subject: [PATCH 32/35] asdf --- src/swap/components/SwapAmountInput.test.tsx | 105 +++++-------------- 1 file changed, 25 insertions(+), 80 deletions(-) diff --git a/src/swap/components/SwapAmountInput.test.tsx b/src/swap/components/SwapAmountInput.test.tsx index e742bd9e89..130027dc18 100644 --- a/src/swap/components/SwapAmountInput.test.tsx +++ b/src/swap/components/SwapAmountInput.test.tsx @@ -1,15 +1,5 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'; -import '@testing-library/jest-dom'; -import { - type Mock, - type MockedFunction, - beforeEach, - describe, - expect, - it, - vi, -} from 'vitest'; -import { getRoundedAmount } from '../../internal/utils/getRoundedAmount'; +import { beforeEach, describe, expect, it, vi } from 'vitest'; import type { Token } from '../../token'; import { DAI_TOKEN, ETH_TOKEN, USDC_TOKEN } from '../mocks'; import type { SwapContextType } from '../types'; @@ -40,12 +30,15 @@ vi.mock('./SwapProvider', () => ({ useSwapContext: vi.fn(), })); -const useSwapContextMock = useSwapContext as Mock; +const useSwapContextMock = useSwapContext as unknown as ReturnType< + typeof vi.fn +>; const mockContextValue = { address: '0x123', from: { amount: '10', + amountUSD: '1000', balance: '0.0002851826238227', setAmount: vi.fn(), setLoading: vi.fn(), @@ -55,6 +48,7 @@ const mockContextValue = { }, to: { amount: '20', + amountUSD: '2000', setAmount: vi.fn(), setLoading: vi.fn(), setToken: vi.fn(), @@ -81,32 +75,26 @@ describe('SwapAmountInput', () => { it('should render the component with the correct label and token', () => { useSwapContextMock.mockReturnValue(mockContextValue); render(); - expect(screen.getByText('From')).toBeInTheDocument(); + expect(screen.getByText('From')).toBeDefined(); }); it('should render from token input with max button and balance', () => { useSwapContextMock.mockReturnValue(mockContextValue); render(); - expect(screen.getByText('Balance: 0.00028518')).toBeInTheDocument(); - expect( - screen.getByTestId('ockSwapAmountInput_MaxButton'), - ).toBeInTheDocument(); + expect(screen.getByText('Balance: 0.00028518')).toBeDefined(); + expect(screen.getByTestId('ockSwapAmountInput_MaxButton')).toBeDefined(); }); it('should not render max button for to token input', () => { useSwapContextMock.mockReturnValue(mockContextValue); render(); - expect( - screen.queryByTestId('ockSwapAmountInput_MaxButton'), - ).not.toBeInTheDocument(); + expect(screen.queryByTestId('ockSwapAmountInput_MaxButton')).toBeNull(); }); it('should not render max button if wallet not connected', () => { useSwapContextMock.mockReturnValue({ ...mockContextValue, address: '' }); render(); - expect( - screen.queryByTestId('ockSwapAmountInput_MaxButton'), - ).not.toBeInTheDocument(); + expect(screen.queryByTestId('ockSwapAmountInput_MaxButton')).toBeNull(); }); it('should update input value with balance amount on max button click', () => { @@ -134,7 +122,7 @@ describe('SwapAmountInput', () => { expect(mockContextValue.from.setAmount).not.toHaveBeenCalled(); }); - it('shoukd display the correct amount when this type is "from"', () => { + it('should display the correct amount when this type is "from"', () => { useSwapContextMock.mockReturnValue(mockContextValue); render(); const input = screen.getByTestId('ockTextInput_Input'); @@ -184,7 +172,7 @@ describe('SwapAmountInput', () => { expect(mockContextValue.to.setToken).toHaveBeenCalledWith(ETH_TOKEN); }); - it('should call handleAmountChange when type is "from" and delayMs is 0', () => { + it('should call handleAmountChange when type is "from" and delayMs is 0', async () => { useSwapContextMock.mockReturnValue(mockContextValue); render( { const input = screen.getByTestId('ockTextInput_Input'); fireEvent.change(input, { target: { value: '15' } }); expect(mockContextValue.from.setAmount).toHaveBeenCalledWith('15'); - waitFor(() => { + await waitFor(() => { expect(mockContextValue.handleAmountChange).toHaveBeenCalled(); }); }); @@ -220,13 +208,10 @@ describe('SwapAmountInput', () => { />, ); const dropdown = screen.getByText(/TokenSelectDropdown/i); - expect(dropdown).toBeInTheDocument(); + expect(dropdown).toBeDefined(); }); it('should correctly select a token from the dropdown using mouse and keyboard', () => { - const useSwapContextMock = useSwapContext as MockedFunction< - typeof useSwapContext - >; useSwapContextMock.mockReturnValue(mockContextValue); render( { useSwapContextMock.mockReturnValue(mockContextValueWithLowBalance); render(); const input = screen.getByTestId('ockTextInput_Input'); - expect(input).toHaveClass('text-ock-error'); + expect(input.className).toContain('text-ock-error'); }); it('should render a TokenChip component if swappableTokens are not passed as prop', () => { @@ -283,7 +268,7 @@ describe('SwapAmountInput', () => { render(); const chips = screen.getAllByText('TokenChip'); expect(chips.length).toBeGreaterThan(0); - expect(chips[0]).toBeInTheDocument(); + expect(chips[0]).toBeDefined(); }); it('should apply the given className to the button', async () => { @@ -296,61 +281,21 @@ describe('SwapAmountInput', () => { className="custom-class" />, ); - expect(screen.getByTestId('ockSwapAmountInput_Container')).toHaveClass( - 'custom-class', - ); - }); - - it('should return ~$0.00 when getRoundedAmount returns null', () => { - getRoundedAmount.mockReturnValue(null); - const mockContextValueWithAmountUSD = { - ...mockContextValue, - from: { - ...mockContextValue.from, - amountUSD: '1234.567', - }, - }; - useSwapContextMock.mockReturnValue(mockContextValueWithAmountUSD); - render(); - expect(screen.getByText('~$0.00')).toBeInTheDocument(); - }); - - it('should return ~$0.00 when amountUSD is an empty string', () => { - const mockContextValueWithEmptyAmountUSD = { - ...mockContextValue, - from: { - ...mockContextValue.from, - amountUSD: '', - }, - }; - useSwapContextMock.mockReturnValue(mockContextValueWithEmptyAmountUSD); - render(); - expect(screen.getByText('~$0.00')).toBeInTheDocument(); - }); - - it('should return ~$0.00 when amountUSD is null', () => { - const mockContextValueWithNullAmountUSD = { - ...mockContextValue, - from: { - ...mockContextValue.from, - amountUSD: null as unknown as string, - }, - }; - useSwapContextMock.mockReturnValue(mockContextValueWithNullAmountUSD); - render(); - expect(screen.getByText('~$0.00')).toBeInTheDocument(); + expect( + screen.getByTestId('ockSwapAmountInput_Container').className, + ).toContain('custom-class'); }); - it('should return ~$0.00 when amountUSD is undefined', () => { - const mockContextValueWithUndefinedAmountUSD = { + it('should display "-" when amountUSD is not provided', () => { + const mockContextValueWithoutUSD = { ...mockContextValue, from: { ...mockContextValue.from, - amountUSD: undefined as unknown as string, + amountUSD: undefined, }, }; - useSwapContextMock.mockReturnValue(mockContextValueWithUndefinedAmountUSD); + useSwapContextMock.mockReturnValue(mockContextValueWithoutUSD); render(); - expect(screen.getByText('~$0.00')).toBeInTheDocument(); + expect(screen.getByText('-')).toBeDefined(); }); }); From a5dccfe033c8ddd5bbc7d70a1600f5a9273cb380 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Tue, 24 Sep 2024 10:52:45 -0700 Subject: [PATCH 33/35] asdf --- src/swap/components/SwapAmountInput.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/swap/components/SwapAmountInput.test.tsx b/src/swap/components/SwapAmountInput.test.tsx index 130027dc18..e55b78a7dd 100644 --- a/src/swap/components/SwapAmountInput.test.tsx +++ b/src/swap/components/SwapAmountInput.test.tsx @@ -62,7 +62,7 @@ const mockContextValue = { } as SwapContextType; vi.mock('../../internal/utils/getRoundedAmount', () => ({ - getRoundedAmount: vi.fn(), + getRoundedAmount: vi.fn((value) => value.slice(0, 10)), })); const mockSwappableTokens: Token[] = [ETH_TOKEN, USDC_TOKEN, DAI_TOKEN]; From fa7032e3c0ec7447d986f52026e8b0b61d1857a5 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Tue, 24 Sep 2024 11:08:32 -0700 Subject: [PATCH 34/35] do not display anything when usd value in 0 --- src/swap/components/SwapAmountInput.test.tsx | 11 +++++------ src/swap/components/SwapAmountInput.tsx | 2 +- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/swap/components/SwapAmountInput.test.tsx b/src/swap/components/SwapAmountInput.test.tsx index e55b78a7dd..20768e565a 100644 --- a/src/swap/components/SwapAmountInput.test.tsx +++ b/src/swap/components/SwapAmountInput.test.tsx @@ -286,16 +286,15 @@ describe('SwapAmountInput', () => { ).toContain('custom-class'); }); - it('should display "-" when amountUSD is not provided', () => { - const mockContextValueWithoutUSD = { + it('should not display anything when amountUSD is null', () => { + const mockContextValueWithNullUSD = { ...mockContextValue, from: { ...mockContextValue.from, - amountUSD: undefined, + amountUSD: null, }, }; - useSwapContextMock.mockReturnValue(mockContextValueWithoutUSD); - render(); - expect(screen.getByText('-')).toBeDefined(); + useSwapContextMock.mockReturnValue(mockContextValueWithNullUSD); + expect(screen.queryByText(/\$/)).toBeNull(); }); }); diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index d976388f0f..afe322373c 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -65,7 +65,7 @@ export function SwapAmountInput({ const formatUSD = (amount: string) => { if (!amount) { - return '-'; + return null; } const roundedAmount = Number(getRoundedAmount(amount, 2)); return `~$${roundedAmount.toFixed(2)}`; From bf3364f25a710c363ce3975c17fd3d876c382825 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Tue, 24 Sep 2024 11:15:46 -0700 Subject: [PATCH 35/35] asdf --- src/swap/components/SwapAmountInput.test.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/swap/components/SwapAmountInput.test.tsx b/src/swap/components/SwapAmountInput.test.tsx index 20768e565a..2fe2d68d16 100644 --- a/src/swap/components/SwapAmountInput.test.tsx +++ b/src/swap/components/SwapAmountInput.test.tsx @@ -297,4 +297,16 @@ describe('SwapAmountInput', () => { useSwapContextMock.mockReturnValue(mockContextValueWithNullUSD); expect(screen.queryByText(/\$/)).toBeNull(); }); + + it('should return null when amount is falsy', () => { + useSwapContextMock.mockReturnValue({ + ...mockContextValue, + from: { + ...mockContextValue.from, + amountUSD: '', + }, + }); + render(); + expect(screen.queryByText(/\$/)).toBeNull(); + }); });