From 3d035c7794576fd57cb2f4c6c6d56481e74bd4c2 Mon Sep 17 00:00:00 2001 From: Brix Avengoza Date: Fri, 24 Jan 2025 12:15:46 +0800 Subject: [PATCH 01/12] feat: implement swap screen feature --- apps/next/pages/swap/index.tsx | 25 ++ .../app/components/TokenDetailsMarketData.tsx | 61 ++++ packages/app/components/TopNav.tsx | 1 + packages/app/components/icons/IconSwap.tsx | 25 ++ packages/app/components/icons/index.tsx | 1 + packages/app/features/home/TokenDetails.tsx | 87 ++--- packages/app/features/swap/screen.tsx | 334 ++++++++++++++++++ packages/app/package.json | 3 + packages/app/utils/coin-gecko/index.tsx | 4 +- packages/app/utils/get-quote/index.ts | 0 10 files changed, 476 insertions(+), 65 deletions(-) create mode 100644 apps/next/pages/swap/index.tsx create mode 100644 packages/app/components/TokenDetailsMarketData.tsx create mode 100644 packages/app/components/icons/IconSwap.tsx create mode 100644 packages/app/features/swap/screen.tsx create mode 100644 packages/app/utils/get-quote/index.ts diff --git a/apps/next/pages/swap/index.tsx b/apps/next/pages/swap/index.tsx new file mode 100644 index 000000000..df42e35e2 --- /dev/null +++ b/apps/next/pages/swap/index.tsx @@ -0,0 +1,25 @@ +import { SwapScreen } from 'app/features/swap/screen' +import { HomeLayout } from 'app/features/home/layout.web' +import Head from 'next/head' +import { userProtectedGetSSP } from 'utils/userProtected' +import type { NextPageWithLayout } from '../_app' +import { TopNav } from 'app/components/TopNav' + +export const Page: NextPageWithLayout = () => { + return ( + <> + + Send | Swap + + + + ) +} + +export const getServerSideProps = userProtectedGetSSP() + +Page.getLayout = (children) => ( + }>{children} +) + +export default Page diff --git a/packages/app/components/TokenDetailsMarketData.tsx b/packages/app/components/TokenDetailsMarketData.tsx new file mode 100644 index 000000000..6878ae226 --- /dev/null +++ b/packages/app/components/TokenDetailsMarketData.tsx @@ -0,0 +1,61 @@ +import { Spinner, XStack, Paragraph, Theme } from '@my/ui' +import { ArrowUp, ArrowDown } from '@tamagui/lucide-icons' +import type { CoinWithBalance } from 'app/data/coins' +import { useTokenMarketData } from 'app/utils/coin-gecko' +import { IconError } from './icons' + +export const TokenDetailsMarketData = ({ coin }: { coin: CoinWithBalance }) => { + const { data: tokenMarketData, status } = useTokenMarketData(coin.coingeckoTokenId) + + const price = tokenMarketData?.at(0)?.current_price + + const changePercent24h = tokenMarketData?.at(0)?.price_change_percentage_24h + + if (status === 'pending') return + if (status === 'error' || price === undefined || changePercent24h === undefined) + return ( + + Failed to load market data + + + ) + + // Coingecko API returns a formatted price already. For now, we just want to make sure it doesn't have more than 8 digits + // so the text doesn't get cut off. + const formatPrice = (price: number) => price.toString().slice(0, 7) + + const formatPriceChange = (change: number) => { + const fixedChange = change.toFixed(2) + if (change > 0) + return ( + + {`${fixedChange}%`} + + + ) + if (change < 0) + return ( + + {`${fixedChange}%`} + + + ) + return {`${fixedChange}%`} + } + + return ( + + + {`1 ${coin.symbol} = ${formatPrice(price)} USD`} + + + {formatPriceChange(changePercent24h)} + + + ) +} diff --git a/packages/app/components/TopNav.tsx b/packages/app/components/TopNav.tsx index 29f71b673..55c20c12d 100644 --- a/packages/app/components/TopNav.tsx +++ b/packages/app/components/TopNav.tsx @@ -132,6 +132,7 @@ export function TopNav({ (!noSubroute && parts.length > 1) || path.includes('/secret-shop') || path.includes('/deposit') || + path.includes('/swap') || path.includes('/leaderboard') return ( diff --git a/packages/app/components/icons/IconSwap.tsx b/packages/app/components/icons/IconSwap.tsx new file mode 100644 index 000000000..5333df010 --- /dev/null +++ b/packages/app/components/icons/IconSwap.tsx @@ -0,0 +1,25 @@ +import type { ColorTokens } from '@my/ui/types' +import { type IconProps, themed } from '@tamagui/helpers-icon' +import { memo } from 'react' +import { Path, Svg } from 'react-native-svg' + +const Swap = (props) => { + const { size, color, ...rest } = props + return ( + + + + ) +} +const IconSwap = memo(themed(Swap)) +export { IconSwap } diff --git a/packages/app/components/icons/index.tsx b/packages/app/components/icons/index.tsx index e27985776..daadc76f0 100644 --- a/packages/app/components/icons/index.tsx +++ b/packages/app/components/icons/index.tsx @@ -58,3 +58,4 @@ export { IconLeaderboard } from './IconLeaderboard' export { IconStarOutline } from './IconStarOutline' export { IconQuestionCircle } from './IconQuestionCircle' export { IconSlash } from './IconSlash' +export { IconSwap } from './IconSwap' diff --git a/packages/app/features/home/TokenDetails.tsx b/packages/app/features/home/TokenDetails.tsx index 8f9f737f2..78ca72d61 100644 --- a/packages/app/features/home/TokenDetails.tsx +++ b/packages/app/features/home/TokenDetails.tsx @@ -1,25 +1,26 @@ import { AnimatePresence, + Button, Card, H4, + LinkableButton, Paragraph, Separator, - Spinner, Stack, Theme, XStack, YStack, } from '@my/ui' import type { CoinWithBalance } from 'app/data/coins' -import { ArrowDown, ArrowUp } from '@tamagui/lucide-icons' -import { IconError } from 'app/components/icons' -import { useTokenMarketData } from 'app/utils/coin-gecko' +import { IconPlus, IconSwap } from 'app/components/icons' import formatAmount from 'app/utils/formatAmount' import type { PropsWithChildren } from 'react' import { TokenDetailsHistory } from './TokenDetailsHistory' import { useTokenPrices } from 'app/utils/useTokenPrices' import { convertBalanceToFiat } from 'app/utils/convertBalanceToUSD' import { IconCoin } from 'app/components/icons/IconCoin' +import { TokenDetailsMarketData } from 'app/components/TokenDetailsMarketData' +import { useCoinFromTokenParam } from 'app/utils/useCoinFromTokenParam' export function AnimateEnter({ children }: { children: React.ReactNode }) { return ( @@ -37,7 +38,9 @@ export function AnimateEnter({ children }: { children: React.ReactNode }) { ) } + export const TokenDetails = ({ coin }: { coin: CoinWithBalance }) => { + const { coin: selectedCoin } = useCoinFromTokenParam() return ( @@ -68,8 +71,8 @@ export const TokenDetails = ({ coin }: { coin: CoinWithBalance }) => { - {/* - + + { - */} + + + + + + + Swap + + + + @@ -92,62 +109,6 @@ export const TokenDetails = ({ coin }: { coin: CoinWithBalance }) => { ) } -export const TokenDetailsMarketData = ({ coin }: { coin: CoinWithBalance }) => { - const { data: tokenMarketData, status } = useTokenMarketData(coin.coingeckoTokenId) - - const price = tokenMarketData?.at(0)?.current_price - - const changePercent24h = tokenMarketData?.at(0)?.price_change_percentage_24h - - if (status === 'pending') return - if (status === 'error' || price === undefined || changePercent24h === undefined) - return ( - - Failed to load market data - - - ) - - // Coingecko API returns a formatted price already. For now, we just want to make sure it doesn't have more than 8 digits - // so the text doesn't get cut off. - const formatPrice = (price: number) => price.toString().slice(0, 7) - - const formatPriceChange = (change: number) => { - const fixedChange = change.toFixed(2) - if (change > 0) - return ( - - {`${fixedChange}%`} - - - ) - if (change < 0) - return ( - - {`${fixedChange}%`} - - - ) - return {`${fixedChange}%`} - } - - return ( - - - {`1 ${coin.symbol} = ${formatPrice(price)} USD`} - - - {formatPriceChange(changePercent24h)} - - - ) -} - const TokenDetailsBalance = ({ coin }: { coin: CoinWithBalance }) => { const { data: tokenPrices, isLoading: isLoadingTokenPrices } = useTokenPrices() const { balance, decimals, coingeckoTokenId } = coin diff --git a/packages/app/features/swap/screen.tsx b/packages/app/features/swap/screen.tsx new file mode 100644 index 000000000..d4b885135 --- /dev/null +++ b/packages/app/features/swap/screen.tsx @@ -0,0 +1,334 @@ +import { useState } from 'react' +import { Card, H3, Paragraph, YStack, Button, XStack, Popover, Input } from 'tamagui' +import { ArrowDown, ArrowUp, ChevronDown } from '@tamagui/lucide-icons' +import { IconSwap } from 'app/components/icons' +import { useForm, FormProvider } from 'react-hook-form' +import { TokenDetailsMarketData } from 'app/components/TokenDetailsMarketData' +import { useCoinFromTokenParam } from 'app/utils/useCoinFromTokenParam' +import { useCoins } from 'app/provider/coins' +import { IconCoin } from 'app/components/icons/IconCoin' +import type { CoinWithBalance } from 'app/data/coins' +import formatAmount from 'app/utils/formatAmount' +import { useTokenPrice } from 'app/utils/coin-gecko' + +type FormField = { + sendAmount: string + receiveAmount: string + fromToken: CoinWithBalance + toToken: CoinWithBalance +} + +const TokenItem = ({ coin }: { coin: CoinWithBalance }) => { + return ( + + + + {coin.label} + + + ) +} + +export function SwapScreen() { + const { coin } = useCoinFromTokenParam() + const { coins } = useCoins() + const defaultToToken = coins.filter((item) => item.symbol === 'USDC')[0] + + const form = useForm({ + defaultValues: { + sendAmount: '', + receiveAmount: '', + fromToken: coin, + toToken: defaultToToken, + }, + }) + + const [fromDropdownOpen, setFromDropdownOpen] = useState(false) + const [toDropdownOpen, setToDropdownOpen] = useState(false) + + const fromToken = form.watch('fromToken') + const toToken = form.watch('toToken') + + const { data: fromTokenPrice } = useTokenPrice(fromToken.coingeckoTokenId) + const { data: toTokenPrice } = useTokenPrice(toToken.coingeckoTokenId) + + const handleSwap = () => { + const fromToken = form.getValues('fromToken') + const toToken = form.getValues('toToken') + form.setValue('fromToken', toToken) + form.setValue('toToken', fromToken) + } + + const handleMaxPress = () => { + if (!fromToken.balance || fromToken.balance === BigInt(0)) return + + form.setValue('sendAmount', fromToken.balance.toString()) + } + + const handleFromTokenChange = (token: CoinWithBalance) => { + form.setValue('fromToken', token) + + if (token.token === toToken.token) { + const newToToken = coins.find((item) => item.token !== token.token) + if (newToToken) form.setValue('toToken', newToToken) + } + + setFromDropdownOpen(false) + } + + return ( + + + +

Swap

+ {coin && } + + + + + + + + + + You pay + + + + + + form.setValue('sendAmount', text)} + fontSize={34} + fontWeight="600" + color="$color12" + borderWidth={0} + borderBottomWidth={1} + borderBottomColor="$gray10Dark" + borderRadius={0} + outlineStyle="none" + hoverStyle={{ + borderBottomWidth: 1, + borderBottomColor: '$gray10Dark', + }} + focusStyle={{ + outlineWidth: 0, + borderBottomWidth: 1, + borderBottomColor: '$green11Dark', + }} + paddingLeft={0} + backgroundColor="transparent" + flexGrow={1} + maxWidth="100%" + maxLength={16} + /> + + + + + + {coins?.map((token, id) => ( + handleFromTokenChange(token)} + hoverStyle={{ bg: '$color3' }} + > + + + ))} + + + + + + + ${fromTokenPrice?.[fromToken.coingeckoTokenId]?.usd ?? '0'} + + + + {formatAmount( + (Number(fromToken.balance) / 10 ** fromToken.decimals).toString(), + 10, + 5 + )}{' '} + {fromToken.label} + + + + + + + + + + + + + + + + + + You Receive + + + + + + + + + + + + {coins + ?.filter((item) => item.token !== fromToken.token) + .map((token, id) => ( + { + form.setValue('toToken', token) + setToDropdownOpen(false) + }} + hoverStyle={{ bg: '$color3' }} + > + + + ))} + + + + + + ${toTokenPrice?.[toToken.coingeckoTokenId]?.usd ?? '0'} + + + + + + + + + + ) +} diff --git a/packages/app/package.json b/packages/app/package.json index a8778e85d..2df2d02b0 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -36,6 +36,8 @@ "@tamagui/themes": "^1.101.7", "@tanstack/react-query": "^5.18.1", "@trpc/client": "11.0.0-next-beta.264", + "@uniswap/sdk-core": "^7.3.0", + "@uniswap/v3-sdk": "^3.23.0", "@vonovak/react-native-theme-control": "^5.0.1", "@wagmi/chains": "^1.8.0", "@wagmi/connectors": "^5.1.1", @@ -44,6 +46,7 @@ "burnt": "^0.12.1", "cbor": "^9.0.1", "dnum": "^2.9.0", + "ethers": "^6.13.5", "expo-clipboard": "^5.0.1", "expo-constants": "~15.4.5", "expo-device": "~5.9.3", diff --git a/packages/app/utils/coin-gecko/index.tsx b/packages/app/utils/coin-gecko/index.tsx index 080b6b387..833871679 100644 --- a/packages/app/utils/coin-gecko/index.tsx +++ b/packages/app/utils/coin-gecko/index.tsx @@ -1,5 +1,5 @@ import { useQuery } from '@tanstack/react-query' -import type { coins, CoinWithBalance } from 'app/data/coins' +import type { allCoins, coins, CoinWithBalance } from 'app/data/coins' import { z } from 'zod' export const MarketDataSchema = z @@ -41,7 +41,7 @@ export const MarketDataSchema = z /** * React query function to fetch current token price for a given token id */ -export const useTokenPrice = (tokenId: T) => { +export const useTokenPrice = (tokenId: T) => { return useQuery({ queryKey: ['tokenPrice', tokenId], queryFn: async () => { diff --git a/packages/app/utils/get-quote/index.ts b/packages/app/utils/get-quote/index.ts new file mode 100644 index 000000000..e69de29bb From ab898e0b136db983f256165aaa514b32dc7b1cbb Mon Sep 17 00:00:00 2001 From: Brix Avengoza Date: Tue, 28 Jan 2025 18:27:19 +0800 Subject: [PATCH 02/12] kyberswap integration / create unit tests --- .../swap/__snapshots__/screen.test.tsx.snap | 1536 +++++++++++++++++ .../features/swap/components/PopoverItem.tsx | 60 + .../app/features/swap/components/SwapForm.tsx | 327 ++++ .../features/swap/components/TokenItem.tsx | 14 + packages/app/features/swap/screen.test.tsx | 168 ++ packages/app/features/swap/screen.tsx | 332 +--- packages/app/package.json | 2 - packages/app/utils/get-quote/index.ts | 1 + packages/app/utils/get-quote/useGetQuote.ts | 102 ++ patch.diff | 14 + yarn.lock | 70 +- 11 files changed, 2293 insertions(+), 333 deletions(-) create mode 100644 packages/app/features/swap/__snapshots__/screen.test.tsx.snap create mode 100644 packages/app/features/swap/components/PopoverItem.tsx create mode 100644 packages/app/features/swap/components/SwapForm.tsx create mode 100644 packages/app/features/swap/components/TokenItem.tsx create mode 100644 packages/app/features/swap/screen.test.tsx create mode 100644 packages/app/utils/get-quote/useGetQuote.ts create mode 100644 patch.diff diff --git a/packages/app/features/swap/__snapshots__/screen.test.tsx.snap b/packages/app/features/swap/__snapshots__/screen.test.tsx.snap new file mode 100644 index 000000000..1d0ffb19e --- /dev/null +++ b/packages/app/features/swap/__snapshots__/screen.test.tsx.snap @@ -0,0 +1,1536 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`SwapScreen should match snapshot 1`] = ` + + + + Swap + + + + 1 USDC = 1.5 USD + + + + 2.50% + + + + + + + + + + + + + + + + + + + + + + + You pay + + + + + + + + + + + + + + + + + + + + + + + USDC + + + + + + + + + + + + + $ + 0 + + + + 1 + + + USDC + + + + MAX + + + + + + + + + + + + + + + + + + + + + + + + + + + You Receive + + + + + + + + + + + + + + + + + + + + + + + SEND + + + + + + + + + + + + + $ + 0 + + + + + + + + SEND + + + +`; diff --git a/packages/app/features/swap/components/PopoverItem.tsx b/packages/app/features/swap/components/PopoverItem.tsx new file mode 100644 index 000000000..be5885570 --- /dev/null +++ b/packages/app/features/swap/components/PopoverItem.tsx @@ -0,0 +1,60 @@ +import { Button, XStack, Popover } from '@my/ui' +import { ChevronDown } from '@tamagui/lucide-icons' +import type { CoinWithBalance } from 'app/data/coins' +import TokenItem from './TokenItem' + +interface PopoverItemProps { + isOpen: boolean + onOpenChange: (isOpen: boolean) => void + selectedToken: CoinWithBalance + coins: CoinWithBalance[] + onTokenChange: (token: CoinWithBalance) => void + testID: string +} + +export default function PopoverItem({ + isOpen, + onOpenChange, + selectedToken, + coins, + onTokenChange, + testID, +}: PopoverItemProps) { + return ( + + + + + + {coins.map((token) => ( + onTokenChange(token)} + hoverStyle={{ bg: '$color3' }} + > + + + ))} + + + ) +} diff --git a/packages/app/features/swap/components/SwapForm.tsx b/packages/app/features/swap/components/SwapForm.tsx new file mode 100644 index 000000000..e490977d0 --- /dev/null +++ b/packages/app/features/swap/components/SwapForm.tsx @@ -0,0 +1,327 @@ +import { useEffect, useState } from 'react' +import { YStack, Card, XStack, Paragraph, Input, Button } from '@my/ui' +import { ArrowUp, ArrowDown } from '@tamagui/lucide-icons' +import { IconSwap } from 'app/components/icons' +import type { CoinWithBalance } from 'app/data/coins' +import formatAmount from 'app/utils/formatAmount' +import PopoverItem from './PopoverItem' +import { useCoins } from 'app/provider/coins' +import { useTokenPrice } from 'app/utils/coin-gecko' +import { useSwapToken } from 'app/utils/get-quote' +import { useCoinFromTokenParam } from 'app/utils/useCoinFromTokenParam' +import { FormProvider, useForm } from 'react-hook-form' + +export type SwapFormFields = { + sendAmount: string + receiveAmount: string + fromToken: CoinWithBalance & { contractAddress: string } + toToken: CoinWithBalance & { contractAddress: string } +} + +export const tokenContractAddressMap: Record = { + usdCoin: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913', + ethereum: '0xC02aaA39b223FE8D0A0E5C4F27eAD9083C756Cc2', + sendToken: '0xEab49138BA2Ea6dd776220fE26b7b8E446638956', +} + +const calculateUsdValue = (basePrice: number, tokenAmount: string): string => { + const value = basePrice * Number(tokenAmount) + return value.toString() +} + +export default function SwapForm() { + const { coin } = useCoinFromTokenParam() + const { coins } = useCoins() + const defaultToToken = (() => { + if (!coin) return coins[1] // default to 2nd token + const coinIndex = coins.findIndex((item) => item.symbol === coin.symbol) + return coins[(coinIndex + 1) % coins.length] + })() + + const [fromDropdownOpen, setFromDropdownOpen] = useState(false) + const [toDropdownOpen, setToDropdownOpen] = useState(false) + const [inputUsdValue, setInputUsdValue] = useState(null) + const [outputUsdValue, setOutputUsdValue] = useState(null) + + const form = useForm({ + defaultValues: { + sendAmount: '', + receiveAmount: '', + fromToken: coin, + toToken: defaultToToken, + }, + }) + + const fromToken = form.watch('fromToken') + const toToken = form.watch('toToken') + const amount = form.watch('sendAmount') + const receiveAmount = form.watch('receiveAmount') + + const { data } = useSwapToken({ + tokenIn: fromToken.contractAddress, + tokenOut: toToken.contractAddress, + amountIn: amount, + }) + + const { data: fromTokenMarketPrice } = useTokenPrice(fromToken?.coingeckoTokenId ?? '') + const { data: toTokenMarketPrice } = useTokenPrice(toToken?.coingeckoTokenId ?? '') + + useEffect(() => { + if (fromToken && !fromToken.contractAddress) { + form.setValue('fromToken', { + ...fromToken, + contractAddress: tokenContractAddressMap[fromToken.coingeckoTokenId] || '', + }) + } + + if (toToken && !toToken.contractAddress) { + form.setValue('toToken', { + ...toToken, + contractAddress: tokenContractAddressMap[toToken.coingeckoTokenId] || '', + }) + } + }, [fromToken, toToken, form]) + + useEffect(() => { + if (!fromToken || !toToken) return + + const inputBaseMarketPrice = fromTokenMarketPrice?.[fromToken.coingeckoTokenId]?.usd || 0 + const outputBaseMarketPrice = toTokenMarketPrice?.[toToken.coingeckoTokenId]?.usd || 0 + + if (amount && Number(amount) > 0 && data?.outputAmount) { + const outputAmountInWei = BigInt(data.outputAmount) + const fromTokenDecimals = fromToken.decimals + const toTokenDecimals = toToken.decimals + + const receivedAmount = Number(outputAmountInWei) / 10 ** toTokenDecimals + const normalizedAmount = receivedAmount * 10 ** fromTokenDecimals + + if (receiveAmount !== normalizedAmount.toFixed(6)) { + form.setValue('receiveAmount', normalizedAmount.toFixed(6)) + } + + setInputUsdValue(calculateUsdValue(inputBaseMarketPrice, amount)) + setOutputUsdValue(calculateUsdValue(outputBaseMarketPrice, normalizedAmount.toString())) + } else { + if (form.getValues('receiveAmount') !== '') { + form.setValue('receiveAmount', '') + } + setInputUsdValue(null) + setOutputUsdValue(null) + } + }, [ + data, + fromToken, + toToken, + fromTokenMarketPrice, + toTokenMarketPrice, + amount, + receiveAmount, + form, + ]) + + const handleSwap = () => { + const fromToken = form.getValues('fromToken') + const toToken = form.getValues('toToken') + form.setValue('fromToken', toToken) + form.setValue('toToken', fromToken) + } + + const handleMaxPress = () => { + if (!fromToken.balance || fromToken.balance === BigInt(0)) return + + const formattedBalance = (Number(fromToken.balance) / 10 ** fromToken.decimals).toFixed(6) + form.setValue('sendAmount', formattedBalance) + } + + const handleTokenChange = (token: CoinWithBalance, isFrom: boolean) => { + const contractAddress = tokenContractAddressMap[token.coingeckoTokenId] || '' + + if (!contractAddress) { + console.error(`Contract address not found for token: ${token.coingeckoTokenId}`) + } + + const selectedToken = { ...token, contractAddress } + + if (isFrom) { + // prevent selecting the same token for both fields + if (selectedToken.token === toToken.token) { + const newToToken = coins.find((item) => item.token !== selectedToken.token) + if (newToToken) { + form.setValue('toToken', { + ...newToToken, + contractAddress: tokenContractAddressMap[newToToken.coingeckoTokenId] || '', + }) + } + } + form.setValue('fromToken', selectedToken) + setFromDropdownOpen(false) + } else { + if (selectedToken.token === fromToken.token) { + const newFromToken = coins.find((item) => item.token !== selectedToken.token) + if (newFromToken) { + form.setValue('fromToken', { + ...newFromToken, + contractAddress: tokenContractAddressMap[newFromToken.coingeckoTokenId] || '', + }) + } + } + form.setValue('toToken', selectedToken) + setToDropdownOpen(false) + } + } + + const onSubmit = (data: SwapFormFields) => { + console.log({ data }) + } + + return ( + + + + + + + + + You pay + + + + + + form.setValue('sendAmount', text)} + /> + handleTokenChange(token, true)} + /> + + + + ${inputUsdValue || fromTokenMarketPrice?.[fromToken.coingeckoTokenId]?.usd || '0'} + + + + {formatAmount((Number(fromToken.balance) / 10 ** fromToken.decimals).toString())}{' '} + {fromToken.label} + + + + + + + + + + + + + + + + + + You Receive + + + + + + item.token !== fromToken.token)} + onTokenChange={(token) => handleTokenChange(token, false)} + /> + + + + ${outputUsdValue || toTokenMarketPrice?.[toToken.coingeckoTokenId]?.usd || '0'} + + + + + + + + + ) +} + +const sharedInputStyles = { + placeholderTextColor: '$gray10Dark', + fontSize: 34, + fontWeight: '600' as '400' | '500' | '600', + color: '$color12', + borderWidth: 0, + borderBottomWidth: 1, + borderBottomColor: '$gray10Dark', + borderRadius: 0, + outlineStyle: 'none', + hoverStyle: { + borderBottomWidth: 1, + borderBottomColor: '$gray10Dark', + }, + focusStyle: { + outlineWidth: 0, + borderBottomWidth: 1, + borderBottomColor: '$green11Dark', + }, + paddingLeft: 0, + backgroundColor: 'transparent', + flexGrow: 1, + maxWidth: '100%', + maxLength: 16, +} diff --git a/packages/app/features/swap/components/TokenItem.tsx b/packages/app/features/swap/components/TokenItem.tsx new file mode 100644 index 000000000..1ec495a20 --- /dev/null +++ b/packages/app/features/swap/components/TokenItem.tsx @@ -0,0 +1,14 @@ +import { XStack, Paragraph } from '@my/ui' +import { IconCoin } from 'app/components/icons/IconCoin' +import type { CoinWithBalance } from 'app/data/coins' + +export default function TokenItem({ coin }: { coin: CoinWithBalance }) { + return ( + + + + {coin.label} + + + ) +} diff --git a/packages/app/features/swap/screen.test.tsx b/packages/app/features/swap/screen.test.tsx new file mode 100644 index 000000000..a18974177 --- /dev/null +++ b/packages/app/features/swap/screen.test.tsx @@ -0,0 +1,168 @@ +import { render, screen, userEvent, waitFor } from '@testing-library/react-native' +import { Provider } from 'app/__mocks__/app/provider' +import { TamaguiProvider, config } from '@my/ui' +import { SwapScreen } from './screen' +import { useRouter } from 'app/__mocks__/expo-router' +import { QueryClient, QueryClientProvider } from '@tanstack/react-query' + +jest.mock('app/utils/useCoinFromTokenParam', () => ({ + useCoinFromTokenParam: jest.fn().mockReturnValue({ + coin: { + label: 'USDC', + symbol: 'USDC', + token: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913', + balance: BigInt(1000000), + decimals: 6, + coingeckoTokenId: 'usd-coin', + }, + }), +})) + +jest.mock('app/provider/coins', () => ({ + useCoins: jest.fn().mockReturnValue({ + coins: [ + { + label: 'SEND', + symbol: 'SEND', + token: '0xEab49138BA2Ea6dd776220fE26b7b8E446638956', + balance: BigInt(500000), + decimals: 18, + coingeckoTokenId: 'send-token', + }, + ], + }), +})) + +jest.mock('app/utils/coin-gecko', () => ({ + useTokenMarketData: jest.fn().mockReturnValue({ + data: [ + { + current_price: 1.5, + price_change_percentage_24h: 2.5, + }, + ], + status: 'success', + }), + + useTokenPrice: jest.fn().mockImplementation((tokenId) => { + if (tokenId === 'usd-coin') { + return { data: { usd: 1 }, isLoading: false } + } + if (tokenId === 'send-token') { + return { data: { usd: 0.00012139 }, isLoading: false } + } + return { data: null, isLoading: true } + }), +})) + +jest.mock('app/utils/get-quote', () => ({ + useSwapToken: jest.fn().mockImplementation(() => ({ + data: { + outputAmount: '72232173016371', + }, + isLoading: false, + })), +})) + +describe('SwapScreen', () => { + let queryClient: QueryClient + + beforeEach(() => { + jest.useFakeTimers() + queryClient = new QueryClient() + + useRouter.mockImplementation(() => ({ + query: { token: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913' }, + push: jest.fn(), + })) + }) + + afterEach(() => { + jest.useRealTimers() + }) + + const renderWithProviders = () => { + return render( + + + + + + + + ) + } + + it('should render the swap screen with default values', async () => { + renderWithProviders() + + expect(screen.getByText('Swap')).toBeTruthy() + expect(screen.getByText('You pay')).toBeTruthy() + expect(screen.getByText('You Receive')).toBeTruthy() + + const fromDropdownButton = screen.getByTestId('fromdropdown-button') + const toDropdownButton = screen.getByTestId('todropdown-button') + + await waitFor(() => expect(fromDropdownButton).toHaveTextContent('USDC')) + await waitFor(() => expect(toDropdownButton).toHaveTextContent('SEND')) + }) + + // skipping for now: has timeout issue but passing on single test + it.skip('should allow input of send amount and display calculated receive amount', async () => { + jest.mock('app/utils/get-quote', () => ({ + useSwapToken: jest.fn().mockImplementation(() => ({ + data: { outputAmount: '72232173016371' }, + isLoading: false, + })), + })) + + renderWithProviders() + + const sendInput = screen.getByTestId('send-amount-input') + await userEvent.type(sendInput, '1') + + expect(sendInput).toHaveDisplayValue('1') + + await waitFor(() => { + const receiveInput = screen.getByTestId('receive-amount-output') + expect(receiveInput).toHaveDisplayValue('72.232173') + }) + }) + + it('should swap tokens when swap button is clicked', async () => { + renderWithProviders() + + expect(screen.getByTestId('fromdropdown-button')).toHaveTextContent('USDC') + + const swapButton = screen.getByTestId('swap-button') + await userEvent.press(swapButton) + + await waitFor(() => { + expect(screen.getByTestId('todropdown-button')).toHaveTextContent('SEND') + }) + }) + + // to be fix: balance wont show on sendInput + // passing on single test, + it.skip('should set max send amount when MAX button is clicked', async () => { + renderWithProviders() + + const maxButton = screen.getByTestId('max-button') + await userEvent.press(maxButton) + + const sendInput = await screen.findByTestId('send-amount-input') + expect(sendInput.props.value).toBe('1') + }) + + it('should match snapshot', async () => { + const tree = render( + + + + + + ).toJSON() + + expect(tree).toMatchSnapshot() + }) +}) diff --git a/packages/app/features/swap/screen.tsx b/packages/app/features/swap/screen.tsx index d4b885135..9cec9a4cf 100644 --- a/packages/app/features/swap/screen.tsx +++ b/packages/app/features/swap/screen.tsx @@ -1,334 +1,18 @@ -import { useState } from 'react' -import { Card, H3, Paragraph, YStack, Button, XStack, Popover, Input } from 'tamagui' -import { ArrowDown, ArrowUp, ChevronDown } from '@tamagui/lucide-icons' -import { IconSwap } from 'app/components/icons' -import { useForm, FormProvider } from 'react-hook-form' +import { H3, YStack } from 'tamagui' import { TokenDetailsMarketData } from 'app/components/TokenDetailsMarketData' import { useCoinFromTokenParam } from 'app/utils/useCoinFromTokenParam' -import { useCoins } from 'app/provider/coins' -import { IconCoin } from 'app/components/icons/IconCoin' -import type { CoinWithBalance } from 'app/data/coins' -import formatAmount from 'app/utils/formatAmount' -import { useTokenPrice } from 'app/utils/coin-gecko' - -type FormField = { - sendAmount: string - receiveAmount: string - fromToken: CoinWithBalance - toToken: CoinWithBalance -} - -const TokenItem = ({ coin }: { coin: CoinWithBalance }) => { - return ( - - - - {coin.label} - - - ) -} +import SwapForm from './components/SwapForm' export function SwapScreen() { const { coin } = useCoinFromTokenParam() - const { coins } = useCoins() - const defaultToToken = coins.filter((item) => item.symbol === 'USDC')[0] - - const form = useForm({ - defaultValues: { - sendAmount: '', - receiveAmount: '', - fromToken: coin, - toToken: defaultToToken, - }, - }) - - const [fromDropdownOpen, setFromDropdownOpen] = useState(false) - const [toDropdownOpen, setToDropdownOpen] = useState(false) - - const fromToken = form.watch('fromToken') - const toToken = form.watch('toToken') - - const { data: fromTokenPrice } = useTokenPrice(fromToken.coingeckoTokenId) - const { data: toTokenPrice } = useTokenPrice(toToken.coingeckoTokenId) - - const handleSwap = () => { - const fromToken = form.getValues('fromToken') - const toToken = form.getValues('toToken') - form.setValue('fromToken', toToken) - form.setValue('toToken', fromToken) - } - - const handleMaxPress = () => { - if (!fromToken.balance || fromToken.balance === BigInt(0)) return - - form.setValue('sendAmount', fromToken.balance.toString()) - } - - const handleFromTokenChange = (token: CoinWithBalance) => { - form.setValue('fromToken', token) - - if (token.token === toToken.token) { - const newToToken = coins.find((item) => item.token !== token.token) - if (newToToken) form.setValue('toToken', newToToken) - } - - setFromDropdownOpen(false) - } return ( - - - -

Swap

- {coin && } - - - - - - - - - - You pay - - - - - - form.setValue('sendAmount', text)} - fontSize={34} - fontWeight="600" - color="$color12" - borderWidth={0} - borderBottomWidth={1} - borderBottomColor="$gray10Dark" - borderRadius={0} - outlineStyle="none" - hoverStyle={{ - borderBottomWidth: 1, - borderBottomColor: '$gray10Dark', - }} - focusStyle={{ - outlineWidth: 0, - borderBottomWidth: 1, - borderBottomColor: '$green11Dark', - }} - paddingLeft={0} - backgroundColor="transparent" - flexGrow={1} - maxWidth="100%" - maxLength={16} - /> - - - - - - {coins?.map((token, id) => ( - handleFromTokenChange(token)} - hoverStyle={{ bg: '$color3' }} - > - - - ))} - - - - - - - ${fromTokenPrice?.[fromToken.coingeckoTokenId]?.usd ?? '0'} - - - - {formatAmount( - (Number(fromToken.balance) / 10 ** fromToken.decimals).toString(), - 10, - 5 - )}{' '} - {fromToken.label} - - - - - - - - - - - - - - - - - - You Receive - - - - - - - - - - - - {coins - ?.filter((item) => item.token !== fromToken.token) - .map((token, id) => ( - { - form.setValue('toToken', token) - setToDropdownOpen(false) - }} - hoverStyle={{ bg: '$color3' }} - > - - - ))} - - - - - - ${toTokenPrice?.[toToken.coingeckoTokenId]?.usd ?? '0'} - - - - - - - + + +

Swap

+ {coin && } - + + ) } diff --git a/packages/app/package.json b/packages/app/package.json index 9569edc95..a3ad2a31c 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -36,8 +36,6 @@ "@tamagui/themes": "^1.101.7", "@tanstack/react-query": "^5.18.1", "@trpc/client": "11.0.0-next-beta.264", - "@uniswap/sdk-core": "^7.3.0", - "@uniswap/v3-sdk": "^3.23.0", "@vonovak/react-native-theme-control": "^5.0.1", "@wagmi/chains": "^1.8.0", "@wagmi/connectors": "^5.1.1", diff --git a/packages/app/utils/get-quote/index.ts b/packages/app/utils/get-quote/index.ts index e69de29bb..f1574bab9 100644 --- a/packages/app/utils/get-quote/index.ts +++ b/packages/app/utils/get-quote/index.ts @@ -0,0 +1 @@ +export { useSwapToken } from './useGetQuote' diff --git a/packages/app/utils/get-quote/useGetQuote.ts b/packages/app/utils/get-quote/useGetQuote.ts new file mode 100644 index 000000000..45de6e69c --- /dev/null +++ b/packages/app/utils/get-quote/useGetQuote.ts @@ -0,0 +1,102 @@ +import { useQuery, queryOptions } from '@tanstack/react-query' + +const KYBER_SWAP_BASE_URL = 'https://aggregator-api.kyberswap.com' + +interface SwapRouteParams { + tokenIn: string + tokenOut: string + amountIn: string + chain?: string + to?: string + clientId?: string +} + +interface SwapRouteResponse { + inputAmount: string + outputAmount: string + totalGas: number + gasPriceGwei: string + gasUsd: number + amountInUsd: number + amountOutUsd: number + receivedUsd: number + swaps: Swap[][] + tokens: Record + encodedSwapData: string + routerAddress: string +} + +interface Swap { + pool: string + tokenIn: string + tokenOut: string + limitReturnAmount: string + swapAmount: string + amountOut: string + exchange: string + poolLength: number + poolType: string + poolExtra?: { + fee?: number + feePrecision?: number + blockNumber?: number + priceLimit?: number + } + extra?: Record | null + maxPrice?: string +} + +interface TokenDetails { + address: string + symbol: string + name: string + price: number + decimals: number +} + +const fetchSwapRoute = async ({ + chain = 'base', + tokenIn, + tokenOut, + amountIn, + to = '0x6cA571D9F6cF441Eb59810977CBfe95F1aA6a63B', + clientId = 'SendApp', +}: SwapRouteParams): Promise => { + const url = new URL(`${KYBER_SWAP_BASE_URL}/${chain}/route/encode`) + url.searchParams.append('tokenIn', tokenIn) + url.searchParams.append('tokenOut', tokenOut) + url.searchParams.append('amountIn', amountIn) + url.searchParams.append('to', to) + + const response = await fetch(url.toString(), { + method: 'GET', + headers: { + 'x-client-id': clientId, + }, + }) + + if (!response.ok) { + throw new Error(`Failed to fetch swap route: ${response.statusText}`) + } + + return response.json() +} + +const useSwapRouteQueryKey = 'swap_route' + +export function useSwapToken({ tokenIn, tokenOut, amountIn }: SwapRouteParams) { + return useQuery( + queryOptions({ + queryKey: [useSwapRouteQueryKey, tokenIn, tokenOut, amountIn], + enabled: !!tokenIn && !!tokenOut && !!amountIn, + queryFn: () => + fetchSwapRoute({ + tokenIn, + tokenOut, + amountIn, + }), + }) + ) +} + +useSwapToken.queryKey = useSwapRouteQueryKey diff --git a/patch.diff b/patch.diff new file mode 100644 index 000000000..ac7d8e27d --- /dev/null +++ b/patch.diff @@ -0,0 +1,14 @@ +diff --git a/tilt/infra.Tiltfile b/tilt/infra.Tiltfile +index 31c04d51..7ec46378 100644 +--- a/tilt/infra.Tiltfile ++++ b/tilt/infra.Tiltfile +@@ -242,7 +242,8 @@ local_resource( + -v ./apps/aabundler/etc:/app/etc/aabundler \ + -e "DEBUG={bundler_debug}" \ + -e "DEBUG_COLORS=true" \ +- 0xbigboss/bundler:0.7.1 \ ++ -m 200m \ ++ docker.io/0xbigboss/bundler:0.7.1-9ae4952 \ + --port 3030 \ + --config /app/etc/aabundler/aabundler.config.json \ + --mnemonic /app/keys/0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266 \ diff --git a/yarn.lock b/yarn.lock index 95012fb6f..6161e838f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -71,6 +71,13 @@ __metadata: languageName: node linkType: hard +"@adraffy/ens-normalize@npm:1.10.1": + version: 1.10.1 + resolution: "@adraffy/ens-normalize@npm:1.10.1" + checksum: 10/4cb938c4abb88a346d50cb0ea44243ab3574330c81d4f5aaaf9dfee584b96189d0faa404de0fcbef5a1b73909ea4ebc3e63d84bd23f9949e5c8d4085207a5091 + languageName: node + linkType: hard + "@ampproject/remapping@npm:^2.2.0, @ampproject/remapping@npm:^2.2.1": version: 2.2.1 resolution: "@ampproject/remapping@npm:2.2.1" @@ -11636,6 +11643,15 @@ __metadata: languageName: node linkType: hard +"@types/node@npm:22.7.5": + version: 22.7.5 + resolution: "@types/node@npm:22.7.5" + dependencies: + undici-types: "npm:~6.19.2" + checksum: 10/e8ba102f8c1aa7623787d625389be68d64e54fcbb76d41f6c2c64e8cf4c9f4a2370e7ef5e5f1732f3c57529d3d26afdcb2edc0101c5e413a79081449825c57ac + languageName: node + linkType: hard + "@types/node@npm:>=13.7.0": version: 20.14.9 resolution: "@types/node@npm:20.14.9" @@ -13685,6 +13701,13 @@ __metadata: languageName: node linkType: hard +"aes-js@npm:4.0.0-beta.5": + version: 4.0.0-beta.5 + resolution: "aes-js@npm:4.0.0-beta.5" + checksum: 10/8f745da2e8fb38e91297a8ec13c2febe3219f8383303cd4ed4660ca67190242ccfd5fdc2f0d1642fd1ea934818fb871cd4cc28d3f28e812e3dc6c3d0f1f97c24 + languageName: node + linkType: hard + "agent-base@npm:6, agent-base@npm:^6.0.2": version: 6.0.2 resolution: "agent-base@npm:6.0.2" @@ -14015,9 +14038,11 @@ __metadata: burnt: "npm:^0.12.1" cbor: "npm:^9.0.1" debug: "npm:^4.3.6" + dnum: "npm:^2.9.0" eslint: "npm:^8.46.0" eslint-config-custom: "workspace:*" eslint-plugin-testing-library: "npm:^6.2.2" + ethers: "npm:^6.13.5" expo-clipboard: "npm:^5.0.1" expo-constants: "npm:~15.4.5" expo-device: "npm:~5.9.3" @@ -17576,6 +17601,15 @@ __metadata: languageName: unknown linkType: soft +"dnum@npm:^2.9.0": + version: 2.14.0 + resolution: "dnum@npm:2.14.0" + dependencies: + from-exponential: "npm:^1.1.1" + checksum: 10/0d5a06874a00e6fb06a3d7ba14b0840a07a2728f83d7a2c7df5b184adc1d505bbcfe7d823a89313d32c16da08b01552faff0304b6283458bb22bbbdbef2e89c7 + languageName: node + linkType: hard + "doctrine@npm:^2.1.0": version: 2.1.0 resolution: "doctrine@npm:2.1.0" @@ -19593,6 +19627,21 @@ __metadata: languageName: node linkType: hard +"ethers@npm:^6.13.5": + version: 6.13.5 + resolution: "ethers@npm:6.13.5" + dependencies: + "@adraffy/ens-normalize": "npm:1.10.1" + "@noble/curves": "npm:1.2.0" + "@noble/hashes": "npm:1.3.2" + "@types/node": "npm:22.7.5" + aes-js: "npm:4.0.0-beta.5" + tslib: "npm:2.7.0" + ws: "npm:8.17.1" + checksum: 10/ccba21a83679fb6a7c3eb9d187593501565d140064f2db28057a64d6707678bacf2adf4555882c4814688246da73173560df81fd3361fd2f227b5d3c75cb8685 + languageName: node + linkType: hard + "ethjs-util@npm:^0.1.6": version: 0.1.6 resolution: "ethjs-util@npm:0.1.6" @@ -21085,6 +21134,13 @@ __metadata: languageName: node linkType: hard +"from-exponential@npm:^1.1.1": + version: 1.1.1 + resolution: "from-exponential@npm:1.1.1" + checksum: 10/af2765bd4f78836153c46cf4aff51ba9f2d1ac6b7d9568d69901d2045ba5b80a47de4f2a693bcc2006a7516cef71f636a4e42596cdd77a0addcc739539eb0f48 + languageName: node + linkType: hard + "fromentries@npm:^1.2.0": version: 1.3.2 resolution: "fromentries@npm:1.3.2" @@ -33525,6 +33581,13 @@ __metadata: languageName: node linkType: hard +"tslib@npm:2.7.0, tslib@npm:^2.6.3": + version: 2.7.0 + resolution: "tslib@npm:2.7.0" + checksum: 10/9a5b47ddac65874fa011c20ff76db69f97cf90c78cff5934799ab8894a5342db2d17b4e7613a087046bc1d133d21547ddff87ac558abeec31ffa929c88b7fce6 + languageName: node + linkType: hard + "tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.4.0": version: 2.5.0 resolution: "tslib@npm:2.5.0" @@ -33539,13 +33602,6 @@ __metadata: languageName: node linkType: hard -"tslib@npm:^2.6.3": - version: 2.7.0 - resolution: "tslib@npm:2.7.0" - checksum: 10/9a5b47ddac65874fa011c20ff76db69f97cf90c78cff5934799ab8894a5342db2d17b4e7613a087046bc1d133d21547ddff87ac558abeec31ffa929c88b7fce6 - languageName: node - linkType: hard - "tsutils@npm:^3.21.0": version: 3.21.0 resolution: "tsutils@npm:3.21.0" From 5f73503bcc498cba71dc2d81f6a8449c0568b6d5 Mon Sep 17 00:00:00 2001 From: Brix Avengoza Date: Thu, 30 Jan 2025 14:46:37 +0800 Subject: [PATCH 03/12] fix tests and feedbacks --- apps/next/pages/swap/index.tsx | 2 +- .../app/components/TokenDetailsMarketData.tsx | 60 +++++++++++-------- .../swap/__snapshots__/screen.test.tsx.snap | 1 - .../app/features/swap/components/SwapForm.tsx | 45 ++++++++------ packages/app/features/swap/screen.test.tsx | 52 ++++++++++------ packages/app/features/swap/screen.tsx | 2 +- packages/app/package.json | 1 - packages/app/utils/formatAmount.ts | 2 +- packages/app/utils/get-quote/index.ts | 1 - packages/app/utils/swap-token/index.ts | 1 + .../useSwapToken.ts} | 0 yarn.lock | 17 ------ 12 files changed, 102 insertions(+), 82 deletions(-) delete mode 100644 packages/app/utils/get-quote/index.ts create mode 100644 packages/app/utils/swap-token/index.ts rename packages/app/utils/{get-quote/useGetQuote.ts => swap-token/useSwapToken.ts} (100%) diff --git a/apps/next/pages/swap/index.tsx b/apps/next/pages/swap/index.tsx index df42e35e2..d3a648863 100644 --- a/apps/next/pages/swap/index.tsx +++ b/apps/next/pages/swap/index.tsx @@ -1,4 +1,4 @@ -import { SwapScreen } from 'app/features/swap/screen' +import SwapScreen from 'app/features/swap/screen' import { HomeLayout } from 'app/features/home/layout.web' import Head from 'next/head' import { userProtectedGetSSP } from 'utils/userProtected' diff --git a/packages/app/components/TokenDetailsMarketData.tsx b/packages/app/components/TokenDetailsMarketData.tsx index 6878ae226..aa93dacaf 100644 --- a/packages/app/components/TokenDetailsMarketData.tsx +++ b/packages/app/components/TokenDetailsMarketData.tsx @@ -3,26 +3,21 @@ import { ArrowUp, ArrowDown } from '@tamagui/lucide-icons' import type { CoinWithBalance } from 'app/data/coins' import { useTokenMarketData } from 'app/utils/coin-gecko' import { IconError } from './icons' +import { useTokenPrices } from 'app/utils/useTokenPrices' +import formatAmount from 'app/utils/formatAmount' export const TokenDetailsMarketData = ({ coin }: { coin: CoinWithBalance }) => { - const { data: tokenMarketData, status } = useTokenMarketData(coin.coingeckoTokenId) - - const price = tokenMarketData?.at(0)?.current_price + const { data: tokenMarketData, isLoading: isLoadingMarketData } = useTokenMarketData( + coin.coingeckoTokenId + ) - const changePercent24h = tokenMarketData?.at(0)?.price_change_percentage_24h + const { data: prices, isLoading: isLoadingPrices } = useTokenPrices() - if (status === 'pending') return - if (status === 'error' || price === undefined || changePercent24h === undefined) - return ( - - Failed to load market data - - - ) + const price = tokenMarketData?.at(0)?.current_price ?? prices?.[coin.token] + const changePercent24h = tokenMarketData?.at(0)?.price_change_percentage_24h ?? null // Coingecko API returns a formatted price already. For now, we just want to make sure it doesn't have more than 8 digits // so the text doesn't get cut off. - const formatPrice = (price: number) => price.toString().slice(0, 7) const formatPriceChange = (change: number) => { const fixedChange = change.toFixed(2) @@ -43,19 +38,36 @@ export const TokenDetailsMarketData = ({ coin }: { coin: CoinWithBalance }) => { return {`${fixedChange}%`} } + if (isLoadingMarketData && isLoadingPrices) return + return ( - - {`1 ${coin.symbol} = ${formatPrice(price)} USD`} - - - {formatPriceChange(changePercent24h)} - + {isLoadingPrices ? ( + + ) : ( + + {`1 ${coin.symbol} = ${formatAmount(price, 4, 2)} USD`.replace(/\s+/g, ' ')} + + )} + {isLoadingMarketData ? ( + + ) : ( + + {changePercent24h === null ? ( + + Failed to load market data + + + ) : ( + formatPriceChange(changePercent24h) + )} + + )} ) } diff --git a/packages/app/features/swap/__snapshots__/screen.test.tsx.snap b/packages/app/features/swap/__snapshots__/screen.test.tsx.snap index 1d0ffb19e..ed869a3c4 100644 --- a/packages/app/features/swap/__snapshots__/screen.test.tsx.snap +++ b/packages/app/features/swap/__snapshots__/screen.test.tsx.snap @@ -745,7 +745,6 @@ exports[`SwapScreen should match snapshot 1`] = ` > 1 - USDC = { - usdCoin: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913', - ethereum: '0xC02aaA39b223FE8D0A0E5C4F27eAD9083C756Cc2', - sendToken: '0xEab49138BA2Ea6dd776220fE26b7b8E446638956', -} - const calculateUsdValue = (basePrice: number, tokenAmount: string): string => { const value = basePrice * Number(tokenAmount) return value.toString() @@ -70,17 +64,27 @@ export default function SwapForm() { if (fromToken && !fromToken.contractAddress) { form.setValue('fromToken', { ...fromToken, - contractAddress: tokenContractAddressMap[fromToken.coingeckoTokenId] || '', + contractAddress: + tokens.find((t) => t.coingeckoTokenId === fromToken.coingeckoTokenId)?.token || '', }) } if (toToken && !toToken.contractAddress) { form.setValue('toToken', { ...toToken, - contractAddress: tokenContractAddressMap[toToken.coingeckoTokenId] || '', + contractAddress: + tokens.find((t) => t.coingeckoTokenId === toToken.coingeckoTokenId)?.token || '', }) } - }, [fromToken, toToken, form]) + }, [ + fromToken, + fromToken.coingeckoTokenId, + fromToken.contractAddress, + toToken, + toToken.coingeckoTokenId, + toToken.contractAddress, + form, + ]) useEffect(() => { if (!fromToken || !toToken) return @@ -117,7 +121,8 @@ export default function SwapForm() { toTokenMarketPrice, amount, receiveAmount, - form, + form.getValues, + form.setValue, ]) const handleSwap = () => { @@ -129,13 +134,13 @@ export default function SwapForm() { const handleMaxPress = () => { if (!fromToken.balance || fromToken.balance === BigInt(0)) return - - const formattedBalance = (Number(fromToken.balance) / 10 ** fromToken.decimals).toFixed(6) - form.setValue('sendAmount', formattedBalance) + const formattedBalance = formatAmount(Number(fromToken.balance) / 10 ** fromToken.decimals) + form.setValue('sendAmount', formattedBalance, { shouldValidate: true, shouldDirty: true }) } const handleTokenChange = (token: CoinWithBalance, isFrom: boolean) => { - const contractAddress = tokenContractAddressMap[token.coingeckoTokenId] || '' + const contractAddress = + tokens.find((t) => t.coingeckoTokenId === token.coingeckoTokenId)?.token || '' if (!contractAddress) { console.error(`Contract address not found for token: ${token.coingeckoTokenId}`) @@ -147,10 +152,12 @@ export default function SwapForm() { // prevent selecting the same token for both fields if (selectedToken.token === toToken.token) { const newToToken = coins.find((item) => item.token !== selectedToken.token) + const contractAddress = + tokens.find((t) => t.coingeckoTokenId === newToToken?.coingeckoTokenId)?.token || '' if (newToToken) { form.setValue('toToken', { ...newToToken, - contractAddress: tokenContractAddressMap[newToToken.coingeckoTokenId] || '', + contractAddress, }) } } @@ -159,10 +166,12 @@ export default function SwapForm() { } else { if (selectedToken.token === fromToken.token) { const newFromToken = coins.find((item) => item.token !== selectedToken.token) + const contractAddress = + tokens.find((t) => t.coingeckoTokenId === newFromToken?.coingeckoTokenId)?.token || '' if (newFromToken) { form.setValue('fromToken', { ...newFromToken, - contractAddress: tokenContractAddressMap[newFromToken.coingeckoTokenId] || '', + contractAddress, }) } } diff --git a/packages/app/features/swap/screen.test.tsx b/packages/app/features/swap/screen.test.tsx index a18974177..2a7a9f3b0 100644 --- a/packages/app/features/swap/screen.test.tsx +++ b/packages/app/features/swap/screen.test.tsx @@ -1,9 +1,9 @@ -import { render, screen, userEvent, waitFor } from '@testing-library/react-native' +import { act, render, screen, userEvent, waitFor } from '@testing-library/react-native' import { Provider } from 'app/__mocks__/app/provider' import { TamaguiProvider, config } from '@my/ui' -import { SwapScreen } from './screen' import { useRouter } from 'app/__mocks__/expo-router' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import SwapScreen from './screen' jest.mock('app/utils/useCoinFromTokenParam', () => ({ useCoinFromTokenParam: jest.fn().mockReturnValue({ @@ -11,10 +11,11 @@ jest.mock('app/utils/useCoinFromTokenParam', () => ({ label: 'USDC', symbol: 'USDC', token: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913', - balance: BigInt(1000000), + balance: 1_000_000n, decimals: 6, coingeckoTokenId: 'usd-coin', }, + isLoading: false, }), })) @@ -37,25 +38,36 @@ jest.mock('app/utils/coin-gecko', () => ({ useTokenMarketData: jest.fn().mockReturnValue({ data: [ { + id: 'usd-coin', + symbol: 'usdc', + name: 'USDC', + image: 'https://coin-images.coingecko.com/coins/images/6319/large/usdc.png?1696506694', current_price: 1.5, + market_cap: 52512229982, price_change_percentage_24h: 2.5, }, ], - status: 'success', + isLoading: false, }), useTokenPrice: jest.fn().mockImplementation((tokenId) => { - if (tokenId === 'usd-coin') { - return { data: { usd: 1 }, isLoading: false } + const prices = { + 'usd-coin': { usd: 1.5 }, } - if (tokenId === 'send-token') { - return { data: { usd: 0.00012139 }, isLoading: false } - } - return { data: null, isLoading: true } + return { data: prices[tokenId] || { usd: 0 }, isLoading: false } + }), +})) + +jest.mock('app/utils/useTokenPrices', () => ({ + useTokenPrices: jest.fn().mockReturnValue({ + data: { + '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913': 1.5, + }, + isLoading: false, }), })) -jest.mock('app/utils/get-quote', () => ({ +jest.mock('app/utils/swap-token', () => ({ useSwapToken: jest.fn().mockImplementation(() => ({ data: { outputAmount: '72232173016371', @@ -108,8 +120,8 @@ describe('SwapScreen', () => { }) // skipping for now: has timeout issue but passing on single test - it.skip('should allow input of send amount and display calculated receive amount', async () => { - jest.mock('app/utils/get-quote', () => ({ + it('should allow input of send amount and display calculated receive amount', async () => { + jest.mock('app/utils/swap-token', () => ({ useSwapToken: jest.fn().mockImplementation(() => ({ data: { outputAmount: '72232173016371' }, isLoading: false, @@ -123,11 +135,17 @@ describe('SwapScreen', () => { expect(sendInput).toHaveDisplayValue('1') + await act(async () => { + jest.runOnlyPendingTimers() + jest.advanceTimersByTime(500) + jest.runAllTimers() + }) + await waitFor(() => { const receiveInput = screen.getByTestId('receive-amount-output') expect(receiveInput).toHaveDisplayValue('72.232173') }) - }) + }, 10000) it('should swap tokens when swap button is clicked', async () => { renderWithProviders() @@ -143,17 +161,17 @@ describe('SwapScreen', () => { }) // to be fix: balance wont show on sendInput - // passing on single test, it.skip('should set max send amount when MAX button is clicked', async () => { renderWithProviders() const maxButton = screen.getByTestId('max-button') - await userEvent.press(maxButton) - const sendInput = await screen.findByTestId('send-amount-input') + + await userEvent.press(maxButton) expect(sendInput.props.value).toBe('1') }) + // bugged out due to an extra line on usdc - TokenDetailsMarketData it('should match snapshot', async () => { const tree = render( diff --git a/packages/app/features/swap/screen.tsx b/packages/app/features/swap/screen.tsx index 9cec9a4cf..0b68b8501 100644 --- a/packages/app/features/swap/screen.tsx +++ b/packages/app/features/swap/screen.tsx @@ -3,7 +3,7 @@ import { TokenDetailsMarketData } from 'app/components/TokenDetailsMarketData' import { useCoinFromTokenParam } from 'app/utils/useCoinFromTokenParam' import SwapForm from './components/SwapForm' -export function SwapScreen() { +export default function SwapScreen() { const { coin } = useCoinFromTokenParam() return ( diff --git a/packages/app/package.json b/packages/app/package.json index a3ad2a31c..e5da7aa68 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -43,7 +43,6 @@ "base64-arraybuffer": "^1.0.2", "burnt": "^0.12.1", "cbor": "^9.0.1", - "dnum": "^2.9.0", "ethers": "^6.13.5", "expo-clipboard": "^5.0.1", "expo-constants": "~15.4.5", diff --git a/packages/app/utils/formatAmount.ts b/packages/app/utils/formatAmount.ts index 2418c4343..9b3ed6d77 100644 --- a/packages/app/utils/formatAmount.ts +++ b/packages/app/utils/formatAmount.ts @@ -122,7 +122,7 @@ export default function formatAmount( (lessThanMin ? '>' : '') + Number(Number(amount).toFixed(maxDecimals)).toLocaleString('en-US', { useGrouping: true, - minimumFractionDigits: (decimals || 0) < maxDecimals ? decimals : maxDecimals, + minimumFractionDigits: decimals > 0 ? 1 : 0, maximumFractionDigits: maxDecimals, }) ) diff --git a/packages/app/utils/get-quote/index.ts b/packages/app/utils/get-quote/index.ts deleted file mode 100644 index f1574bab9..000000000 --- a/packages/app/utils/get-quote/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { useSwapToken } from './useGetQuote' diff --git a/packages/app/utils/swap-token/index.ts b/packages/app/utils/swap-token/index.ts new file mode 100644 index 000000000..2c12b57f3 --- /dev/null +++ b/packages/app/utils/swap-token/index.ts @@ -0,0 +1 @@ +export { useSwapToken } from './useSwapToken' diff --git a/packages/app/utils/get-quote/useGetQuote.ts b/packages/app/utils/swap-token/useSwapToken.ts similarity index 100% rename from packages/app/utils/get-quote/useGetQuote.ts rename to packages/app/utils/swap-token/useSwapToken.ts diff --git a/yarn.lock b/yarn.lock index 6161e838f..8badd016b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14038,7 +14038,6 @@ __metadata: burnt: "npm:^0.12.1" cbor: "npm:^9.0.1" debug: "npm:^4.3.6" - dnum: "npm:^2.9.0" eslint: "npm:^8.46.0" eslint-config-custom: "workspace:*" eslint-plugin-testing-library: "npm:^6.2.2" @@ -17601,15 +17600,6 @@ __metadata: languageName: unknown linkType: soft -"dnum@npm:^2.9.0": - version: 2.14.0 - resolution: "dnum@npm:2.14.0" - dependencies: - from-exponential: "npm:^1.1.1" - checksum: 10/0d5a06874a00e6fb06a3d7ba14b0840a07a2728f83d7a2c7df5b184adc1d505bbcfe7d823a89313d32c16da08b01552faff0304b6283458bb22bbbdbef2e89c7 - languageName: node - linkType: hard - "doctrine@npm:^2.1.0": version: 2.1.0 resolution: "doctrine@npm:2.1.0" @@ -21134,13 +21124,6 @@ __metadata: languageName: node linkType: hard -"from-exponential@npm:^1.1.1": - version: 1.1.1 - resolution: "from-exponential@npm:1.1.1" - checksum: 10/af2765bd4f78836153c46cf4aff51ba9f2d1ac6b7d9568d69901d2045ba5b80a47de4f2a693bcc2006a7516cef71f636a4e42596cdd77a0addcc739539eb0f48 - languageName: node - linkType: hard - "fromentries@npm:^1.2.0": version: 1.3.2 resolution: "fromentries@npm:1.3.2" From 423f5e363ab288626313ee1d703d968ab27df5ef Mon Sep 17 00:00:00 2001 From: Brix Avengoza Date: Mon, 3 Feb 2025 17:06:38 +0800 Subject: [PATCH 04/12] feedback fixes / test fixes --- .../swap/__snapshots__/screen.test.tsx.snap | 2538 ++++++++++------- .../features/swap/components/PopoverItem.tsx | 4 +- .../app/features/swap/components/SwapForm.tsx | 576 ++-- packages/app/features/swap/screen.test.tsx | 49 +- packages/app/package.json | 1 - packages/app/utils/formatAmount.ts | 2 +- packages/app/utils/swap-token/useSwapToken.ts | 14 +- yarn.lock | 53 +- 8 files changed, 1881 insertions(+), 1356 deletions(-) diff --git a/packages/app/features/swap/__snapshots__/screen.test.tsx.snap b/packages/app/features/swap/__snapshots__/screen.test.tsx.snap index ed869a3c4..3b4f7fc73 100644 --- a/packages/app/features/swap/__snapshots__/screen.test.tsx.snap +++ b/packages/app/features/swap/__snapshots__/screen.test.tsx.snap @@ -63,7 +63,7 @@ exports[`SwapScreen should match snapshot 1`] = ` } suppressHighlighting={true} > - 1 USDC = 1.5 USD + 1 USDC = 1.50 USD - - - - - - - - - You pay - - - - - - - - - - - - - - - - + - USDC - + suppressHighlighting={true} + > + You Pay + + + + - - - + + + + - - - - - - + + - $ - 0 - - - - 1 - - USDC - + /> + + + + + + + + + + + + + + + + + USDC + + + + + + + + + + + + + $ + 0 + + - MAX + 1 + + USDC + + + MAX + + - - - - - - - - - - - - - - - - - - - - - You Receive - - + /> + + + + - - - - - + - - - - - - + } + /> - SEND + You Receive + + - + + + + + + + + + - - + + + + + + + + + + + + + + + SEND + + + + + - - + strokeLinecap={1} + strokeLinejoin={1} + strokeWidth="2" + > + + + + - - - - - - SEND - + + + + + SWAP + + + + + `; diff --git a/packages/app/features/swap/components/PopoverItem.tsx b/packages/app/features/swap/components/PopoverItem.tsx index be5885570..b4aa0cca8 100644 --- a/packages/app/features/swap/components/PopoverItem.tsx +++ b/packages/app/features/swap/components/PopoverItem.tsx @@ -6,7 +6,7 @@ import TokenItem from './TokenItem' interface PopoverItemProps { isOpen: boolean onOpenChange: (isOpen: boolean) => void - selectedToken: CoinWithBalance + selectedToken?: CoinWithBalance coins: CoinWithBalance[] onTokenChange: (token: CoinWithBalance) => void testID: string @@ -34,7 +34,7 @@ export default function PopoverItem({ borderWidth={0} hoverStyle={{ backgroundColor: 'transparent' }} > - + {selectedToken && } diff --git a/packages/app/features/swap/components/SwapForm.tsx b/packages/app/features/swap/components/SwapForm.tsx index 957c76872..6e17fc25a 100644 --- a/packages/app/features/swap/components/SwapForm.tsx +++ b/packages/app/features/swap/components/SwapForm.tsx @@ -1,26 +1,27 @@ import { useEffect, useState } from 'react' -import { YStack, Card, XStack, Paragraph, Input, Button } from '@my/ui' +import { YStack, Card, XStack, Paragraph, Button, SubmitButton } from '@my/ui' import { ArrowUp, ArrowDown } from '@tamagui/lucide-icons' import { IconSwap } from 'app/components/icons' -import { coins as tokens, type CoinWithBalance } from 'app/data/coins' -import formatAmount from 'app/utils/formatAmount' +import type { CoinWithBalance } from 'app/data/coins' +import formatAmount, { localizeAmount } from 'app/utils/formatAmount' import PopoverItem from './PopoverItem' import { useCoins } from 'app/provider/coins' import { useTokenPrice } from 'app/utils/coin-gecko' import { useCoinFromTokenParam } from 'app/utils/useCoinFromTokenParam' import { FormProvider, useForm } from 'react-hook-form' import { useSwapToken } from 'app/utils/swap-token' +import { formatUnits } from 'viem' +import { formFields, SchemaForm } from 'app/utils/SchemaForm' +import { z } from 'zod' -export type SwapFormFields = { - sendAmount: string - receiveAmount: string - fromToken: CoinWithBalance & { contractAddress: string } - toToken: CoinWithBalance & { contractAddress: string } -} +const SwapFormSchema = z.object({ + sendAmount: formFields.text, + receiveAmount: formFields.text, +}) const calculateUsdValue = (basePrice: number, tokenAmount: string): string => { - const value = basePrice * Number(tokenAmount) - return value.toString() + const value = basePrice * Number.parseFloat(tokenAmount) + return value.toFixed(6) } export default function SwapForm() { @@ -36,301 +37,372 @@ export default function SwapForm() { const [toDropdownOpen, setToDropdownOpen] = useState(false) const [inputUsdValue, setInputUsdValue] = useState(null) const [outputUsdValue, setOutputUsdValue] = useState(null) + const [fromToken, setFromToken] = useState(coin) + const [toToken, setToToken] = useState(defaultToToken) + + const [isInputFocus, setInputFocus] = useState(false) - const form = useForm({ + const form = useForm>({ defaultValues: { sendAmount: '', receiveAmount: '', - fromToken: coin, - toToken: defaultToToken, }, }) - const fromToken = form.watch('fromToken') - const toToken = form.watch('toToken') const amount = form.watch('sendAmount') const receiveAmount = form.watch('receiveAmount') + const sanitizedAmount = amount.replace(/,/g, '').trim() + const parsedAmount = sanitizedAmount === '' ? BigInt(0) : BigInt(sanitizedAmount) + const insufficientAmount = coin?.balance !== undefined && parsedAmount > coin?.balance const { data } = useSwapToken({ - tokenIn: fromToken.contractAddress, - tokenOut: toToken.contractAddress, - amountIn: amount, + tokenIn: fromToken?.token, + tokenOut: toToken?.token, + amountIn: sanitizedAmount, }) const { data: fromTokenMarketPrice } = useTokenPrice(fromToken?.coingeckoTokenId ?? '') const { data: toTokenMarketPrice } = useTokenPrice(toToken?.coingeckoTokenId ?? '') + // Calculates and updates the received amount and USD values based on the latest swap data useEffect(() => { - if (fromToken && !fromToken.contractAddress) { - form.setValue('fromToken', { - ...fromToken, - contractAddress: - tokens.find((t) => t.coingeckoTokenId === fromToken.coingeckoTokenId)?.token || '', - }) - } - - if (toToken && !toToken.contractAddress) { - form.setValue('toToken', { - ...toToken, - contractAddress: - tokens.find((t) => t.coingeckoTokenId === toToken.coingeckoTokenId)?.token || '', - }) + if (!fromToken || !toToken) { + setInputUsdValue(null) + setOutputUsdValue(null) + form.setValue('receiveAmount', '', { shouldValidate: true }) + return } - }, [ - fromToken, - fromToken.coingeckoTokenId, - fromToken.contractAddress, - toToken, - toToken.coingeckoTokenId, - toToken.contractAddress, - form, - ]) - useEffect(() => { - if (!fromToken || !toToken) return - - const inputBaseMarketPrice = fromTokenMarketPrice?.[fromToken.coingeckoTokenId]?.usd || 0 - const outputBaseMarketPrice = toTokenMarketPrice?.[toToken.coingeckoTokenId]?.usd || 0 - - if (amount && Number(amount) > 0 && data?.outputAmount) { - const outputAmountInWei = BigInt(data.outputAmount) - const fromTokenDecimals = fromToken.decimals - const toTokenDecimals = toToken.decimals - - const receivedAmount = Number(outputAmountInWei) / 10 ** toTokenDecimals - const normalizedAmount = receivedAmount * 10 ** fromTokenDecimals - - if (receiveAmount !== normalizedAmount.toFixed(6)) { - form.setValue('receiveAmount', normalizedAmount.toFixed(6)) - } + const inputBaseMarketPrice = fromTokenMarketPrice?.[fromToken?.coingeckoTokenId ?? '']?.usd || 0 + const outputBaseMarketPrice = toTokenMarketPrice?.[toToken?.coingeckoTokenId ?? '']?.usd || 0 - setInputUsdValue(calculateUsdValue(inputBaseMarketPrice, amount)) - setOutputUsdValue(calculateUsdValue(outputBaseMarketPrice, normalizedAmount.toString())) - } else { - if (form.getValues('receiveAmount') !== '') { - form.setValue('receiveAmount', '') - } + if (!data?.outputAmount || !sanitizedAmount || Number(sanitizedAmount) === 0) { setInputUsdValue(null) setOutputUsdValue(null) + form.setValue('receiveAmount', '', { shouldValidate: true }) + return } + + const outputAmountInWei = BigInt(data.outputAmount) + const toTokenDecimals = toToken.decimals + const receivedAmount = Number.parseFloat(formatUnits(outputAmountInWei, toTokenDecimals)) + const normalizedAmount = receivedAmount.toFixed(6) + + if (form.getValues('receiveAmount') !== normalizedAmount) { + form.setValue('receiveAmount', normalizedAmount, { shouldValidate: true }) + } + + setInputUsdValue(calculateUsdValue(inputBaseMarketPrice, sanitizedAmount)) + setOutputUsdValue(calculateUsdValue(outputBaseMarketPrice, normalizedAmount)) }, [ - data, + data?.outputAmount, fromToken, - toToken, + fromToken?.coingeckoTokenId, fromTokenMarketPrice, + toToken, + toToken?.coingeckoTokenId, toTokenMarketPrice, - amount, - receiveAmount, - form.getValues, + toToken?.decimals, + sanitizedAmount, form.setValue, + form.getValues, ]) - const handleSwap = () => { - const fromToken = form.getValues('fromToken') - const toToken = form.getValues('toToken') - form.setValue('fromToken', toToken) - form.setValue('toToken', fromToken) + const switchFromTo = () => { + setFromToken(toToken) + setToToken(fromToken) } - const handleMaxPress = () => { - if (!fromToken.balance || fromToken.balance === BigInt(0)) return - const formattedBalance = formatAmount(Number(fromToken.balance) / 10 ** fromToken.decimals) + const maxoutBalance = () => { + if (!fromToken || !fromToken.balance || fromToken.balance === BigInt(0)) return + const formattedBalance = formatAmount(formatUnits(fromToken.balance, fromToken.decimals)) form.setValue('sendAmount', formattedBalance, { shouldValidate: true, shouldDirty: true }) } const handleTokenChange = (token: CoinWithBalance, isFrom: boolean) => { - const contractAddress = - tokens.find((t) => t.coingeckoTokenId === token.coingeckoTokenId)?.token || '' - - if (!contractAddress) { - console.error(`Contract address not found for token: ${token.coingeckoTokenId}`) - } - - const selectedToken = { ...token, contractAddress } - if (isFrom) { - // prevent selecting the same token for both fields - if (selectedToken.token === toToken.token) { - const newToToken = coins.find((item) => item.token !== selectedToken.token) - const contractAddress = - tokens.find((t) => t.coingeckoTokenId === newToToken?.coingeckoTokenId)?.token || '' - if (newToToken) { - form.setValue('toToken', { - ...newToToken, - contractAddress, - }) - } + // Prevent selecting the same token in both fields + if (token.token === toToken?.token) { + const newToToken = coins.find((item) => item.token !== token.token) + setToToken(newToToken) } - form.setValue('fromToken', selectedToken) + setFromToken(token) setFromDropdownOpen(false) } else { - if (selectedToken.token === fromToken.token) { - const newFromToken = coins.find((item) => item.token !== selectedToken.token) - const contractAddress = - tokens.find((t) => t.coingeckoTokenId === newFromToken?.coingeckoTokenId)?.token || '' - if (newFromToken) { - form.setValue('fromToken', { - ...newFromToken, - contractAddress, - }) - } + if (token.token === fromToken?.token) { + const newFromToken = coins.find((item) => item.token !== token.token) + setFromToken(newFromToken) } - form.setValue('toToken', selectedToken) + setToToken(token) setToDropdownOpen(false) } } - const onSubmit = (data: SwapFormFields) => { - console.log({ data }) + const onSubmit = async () => { + console.log('submit') } return ( - - - - - - - - You pay - - - - - - form.setValue('sendAmount', text)} - /> - handleTokenChange(token, true)} - /> - - - - ${inputUsdValue || fromTokenMarketPrice?.[fromToken.coingeckoTokenId]?.usd || '0'} - - - - {formatAmount((Number(fromToken.balance) / 10 ** fromToken.decimals).toString())}{' '} - {fromToken.label} - - - - - - + + + {fromToken + ? formatAmount( + formatUnits(fromToken.balance ?? BigInt(0), fromToken.decimals) + ) + : '0'}{' '} + {fromToken?.label ?? ''} + + + + + + - - - + + + - - - - - - - You Receive + + + + + + + You Receive + + + + + {receiveAmount} + + c.token !== fromToken?.token)} + onTokenChange={(token) => handleTokenChange(token, false)} + /> + + + $ + {outputUsdValue || + toTokenMarketPrice?.[toToken?.coingeckoTokenId ?? '']?.usd || + '0'} - - - - - item.token !== fromToken.token)} - onTokenChange={(token) => handleTokenChange(token, false)} - /> - - - - ${outputUsdValue || toTokenMarketPrice?.[toToken.coingeckoTokenId]?.usd || '0'} - - + + - - - - + )} + ) } - -const sharedInputStyles = { - placeholderTextColor: '$gray10Dark', - fontSize: 34, - fontWeight: '600' as '400' | '500' | '600', - color: '$color12', - borderWidth: 0, - borderBottomWidth: 1, - borderBottomColor: '$gray10Dark', - borderRadius: 0, - outlineStyle: 'none', - hoverStyle: { - borderBottomWidth: 1, - borderBottomColor: '$gray10Dark', - }, - focusStyle: { - outlineWidth: 0, - borderBottomWidth: 1, - borderBottomColor: '$green11Dark', - }, - paddingLeft: 0, - backgroundColor: 'transparent', - flexGrow: 1, - maxWidth: '100%', - maxLength: 16, -} diff --git a/packages/app/features/swap/screen.test.tsx b/packages/app/features/swap/screen.test.tsx index 2a7a9f3b0..52caa7db9 100644 --- a/packages/app/features/swap/screen.test.tsx +++ b/packages/app/features/swap/screen.test.tsx @@ -105,11 +105,23 @@ describe('SwapScreen', () => { ) } + it('should match snapshot', async () => { + const tree = render( + + + + + + ).toJSON() + + expect(tree).toMatchSnapshot() + }) + it('should render the swap screen with default values', async () => { renderWithProviders() expect(screen.getByText('Swap')).toBeTruthy() - expect(screen.getByText('You pay')).toBeTruthy() + expect(screen.getByText('You Pay')).toBeTruthy() expect(screen.getByText('You Receive')).toBeTruthy() const fromDropdownButton = screen.getByTestId('fromdropdown-button') @@ -119,11 +131,11 @@ describe('SwapScreen', () => { await waitFor(() => expect(toDropdownButton).toHaveTextContent('SEND')) }) - // skipping for now: has timeout issue but passing on single test it('should allow input of send amount and display calculated receive amount', async () => { + const outputAmount = '72232173016371' jest.mock('app/utils/swap-token', () => ({ useSwapToken: jest.fn().mockImplementation(() => ({ - data: { outputAmount: '72232173016371' }, + data: { outputAmount }, isLoading: false, })), })) @@ -143,7 +155,12 @@ describe('SwapScreen', () => { await waitFor(() => { const receiveInput = screen.getByTestId('receive-amount-output') - expect(receiveInput).toHaveDisplayValue('72.232173') + + const outputAmountInWei = BigInt(outputAmount) + const toTokenDecimals = 18 + + const expectedReceiveAmount = (Number(outputAmountInWei) / 10 ** toTokenDecimals).toFixed(6) + expect(receiveInput).toHaveDisplayValue(expectedReceiveAmount) }) }, 10000) @@ -159,28 +176,4 @@ describe('SwapScreen', () => { expect(screen.getByTestId('todropdown-button')).toHaveTextContent('SEND') }) }) - - // to be fix: balance wont show on sendInput - it.skip('should set max send amount when MAX button is clicked', async () => { - renderWithProviders() - - const maxButton = screen.getByTestId('max-button') - const sendInput = await screen.findByTestId('send-amount-input') - - await userEvent.press(maxButton) - expect(sendInput.props.value).toBe('1') - }) - - // bugged out due to an extra line on usdc - TokenDetailsMarketData - it('should match snapshot', async () => { - const tree = render( - - - - - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) }) diff --git a/packages/app/package.json b/packages/app/package.json index e5da7aa68..0444c9c30 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -43,7 +43,6 @@ "base64-arraybuffer": "^1.0.2", "burnt": "^0.12.1", "cbor": "^9.0.1", - "ethers": "^6.13.5", "expo-clipboard": "^5.0.1", "expo-constants": "~15.4.5", "expo-device": "~5.9.3", diff --git a/packages/app/utils/formatAmount.ts b/packages/app/utils/formatAmount.ts index 9b3ed6d77..2418c4343 100644 --- a/packages/app/utils/formatAmount.ts +++ b/packages/app/utils/formatAmount.ts @@ -122,7 +122,7 @@ export default function formatAmount( (lessThanMin ? '>' : '') + Number(Number(amount).toFixed(maxDecimals)).toLocaleString('en-US', { useGrouping: true, - minimumFractionDigits: decimals > 0 ? 1 : 0, + minimumFractionDigits: (decimals || 0) < maxDecimals ? decimals : maxDecimals, maximumFractionDigits: maxDecimals, }) ) diff --git a/packages/app/utils/swap-token/useSwapToken.ts b/packages/app/utils/swap-token/useSwapToken.ts index 45de6e69c..9117e0ea7 100644 --- a/packages/app/utils/swap-token/useSwapToken.ts +++ b/packages/app/utils/swap-token/useSwapToken.ts @@ -3,8 +3,8 @@ import { useQuery, queryOptions } from '@tanstack/react-query' const KYBER_SWAP_BASE_URL = 'https://aggregator-api.kyberswap.com' interface SwapRouteParams { - tokenIn: string - tokenOut: string + tokenIn?: string + tokenOut?: string amountIn: string chain?: string to?: string @@ -62,6 +62,10 @@ const fetchSwapRoute = async ({ to = '0x6cA571D9F6cF441Eb59810977CBfe95F1aA6a63B', clientId = 'SendApp', }: SwapRouteParams): Promise => { + if (!tokenIn || !tokenOut) { + throw new Error('tokenIn and tokenOut are required') + } + const url = new URL(`${KYBER_SWAP_BASE_URL}/${chain}/route/encode`) url.searchParams.append('tokenIn', tokenIn) url.searchParams.append('tokenOut', tokenOut) @@ -88,11 +92,11 @@ export function useSwapToken({ tokenIn, tokenOut, amountIn }: SwapRouteParams) { return useQuery( queryOptions({ queryKey: [useSwapRouteQueryKey, tokenIn, tokenOut, amountIn], - enabled: !!tokenIn && !!tokenOut && !!amountIn, + enabled: Boolean(tokenIn && tokenOut && amountIn), queryFn: () => fetchSwapRoute({ - tokenIn, - tokenOut, + tokenIn: tokenIn, + tokenOut: tokenOut, amountIn, }), }) diff --git a/yarn.lock b/yarn.lock index 8badd016b..95012fb6f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -71,13 +71,6 @@ __metadata: languageName: node linkType: hard -"@adraffy/ens-normalize@npm:1.10.1": - version: 1.10.1 - resolution: "@adraffy/ens-normalize@npm:1.10.1" - checksum: 10/4cb938c4abb88a346d50cb0ea44243ab3574330c81d4f5aaaf9dfee584b96189d0faa404de0fcbef5a1b73909ea4ebc3e63d84bd23f9949e5c8d4085207a5091 - languageName: node - linkType: hard - "@ampproject/remapping@npm:^2.2.0, @ampproject/remapping@npm:^2.2.1": version: 2.2.1 resolution: "@ampproject/remapping@npm:2.2.1" @@ -11643,15 +11636,6 @@ __metadata: languageName: node linkType: hard -"@types/node@npm:22.7.5": - version: 22.7.5 - resolution: "@types/node@npm:22.7.5" - dependencies: - undici-types: "npm:~6.19.2" - checksum: 10/e8ba102f8c1aa7623787d625389be68d64e54fcbb76d41f6c2c64e8cf4c9f4a2370e7ef5e5f1732f3c57529d3d26afdcb2edc0101c5e413a79081449825c57ac - languageName: node - linkType: hard - "@types/node@npm:>=13.7.0": version: 20.14.9 resolution: "@types/node@npm:20.14.9" @@ -13701,13 +13685,6 @@ __metadata: languageName: node linkType: hard -"aes-js@npm:4.0.0-beta.5": - version: 4.0.0-beta.5 - resolution: "aes-js@npm:4.0.0-beta.5" - checksum: 10/8f745da2e8fb38e91297a8ec13c2febe3219f8383303cd4ed4660ca67190242ccfd5fdc2f0d1642fd1ea934818fb871cd4cc28d3f28e812e3dc6c3d0f1f97c24 - languageName: node - linkType: hard - "agent-base@npm:6, agent-base@npm:^6.0.2": version: 6.0.2 resolution: "agent-base@npm:6.0.2" @@ -14041,7 +14018,6 @@ __metadata: eslint: "npm:^8.46.0" eslint-config-custom: "workspace:*" eslint-plugin-testing-library: "npm:^6.2.2" - ethers: "npm:^6.13.5" expo-clipboard: "npm:^5.0.1" expo-constants: "npm:~15.4.5" expo-device: "npm:~5.9.3" @@ -19617,21 +19593,6 @@ __metadata: languageName: node linkType: hard -"ethers@npm:^6.13.5": - version: 6.13.5 - resolution: "ethers@npm:6.13.5" - dependencies: - "@adraffy/ens-normalize": "npm:1.10.1" - "@noble/curves": "npm:1.2.0" - "@noble/hashes": "npm:1.3.2" - "@types/node": "npm:22.7.5" - aes-js: "npm:4.0.0-beta.5" - tslib: "npm:2.7.0" - ws: "npm:8.17.1" - checksum: 10/ccba21a83679fb6a7c3eb9d187593501565d140064f2db28057a64d6707678bacf2adf4555882c4814688246da73173560df81fd3361fd2f227b5d3c75cb8685 - languageName: node - linkType: hard - "ethjs-util@npm:^0.1.6": version: 0.1.6 resolution: "ethjs-util@npm:0.1.6" @@ -33564,13 +33525,6 @@ __metadata: languageName: node linkType: hard -"tslib@npm:2.7.0, tslib@npm:^2.6.3": - version: 2.7.0 - resolution: "tslib@npm:2.7.0" - checksum: 10/9a5b47ddac65874fa011c20ff76db69f97cf90c78cff5934799ab8894a5342db2d17b4e7613a087046bc1d133d21547ddff87ac558abeec31ffa929c88b7fce6 - languageName: node - linkType: hard - "tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.4.0": version: 2.5.0 resolution: "tslib@npm:2.5.0" @@ -33585,6 +33539,13 @@ __metadata: languageName: node linkType: hard +"tslib@npm:^2.6.3": + version: 2.7.0 + resolution: "tslib@npm:2.7.0" + checksum: 10/9a5b47ddac65874fa011c20ff76db69f97cf90c78cff5934799ab8894a5342db2d17b4e7613a087046bc1d133d21547ddff87ac558abeec31ffa929c88b7fce6 + languageName: node + linkType: hard + "tsutils@npm:^3.21.0": version: 3.21.0 resolution: "tsutils@npm:3.21.0" From 5082083a98c2358262aef92a6a429fea4941b072 Mon Sep 17 00:00:00 2001 From: Brix Avengoza Date: Mon, 10 Feb 2025 17:33:27 +0800 Subject: [PATCH 05/12] feedback fix / slippage selector --- .../swap/components/SlippageSelector.tsx | 102 +++++++ .../app/features/swap/components/SwapForm.tsx | 279 +++++++++--------- packages/app/utils/swap-token/useSwapToken.ts | 107 ++++--- 3 files changed, 307 insertions(+), 181 deletions(-) create mode 100644 packages/app/features/swap/components/SlippageSelector.tsx diff --git a/packages/app/features/swap/components/SlippageSelector.tsx b/packages/app/features/swap/components/SlippageSelector.tsx new file mode 100644 index 000000000..17ffe15b9 --- /dev/null +++ b/packages/app/features/swap/components/SlippageSelector.tsx @@ -0,0 +1,102 @@ +import { Button, Card, XStack, Paragraph, YStack, Input } from '@my/ui' +import { ChevronUp, ChevronDown } from '@tamagui/lucide-icons' +import { useState } from 'react' +import type { NativeSyntheticEvent, TextInputChangeEventData } from 'react-native' + +type SlippageSelectorProps = { + value: number + onSlippageChange: (value: number) => void +} + +export default function SlippageSelector({ value, onSlippageChange }: SlippageSelectorProps) { + const [isOpen, setIsOpen] = useState(false) + const [isCustom, setIsCustom] = useState(false) + + const handleToggle = () => setIsOpen(!isOpen) + + const handleSlippageChange = (newValue: number) => { + setIsCustom(false) + onSlippageChange(newValue) + } + + const handleCustomInputToggle = () => { + setIsCustom(true) + } + + const handleCustomInputChange = (e: NativeSyntheticEvent) => { + const customValue = e.nativeEvent.text + const parsedValue = Number.parseFloat(customValue) + + if (!Number.isNaN(parsedValue)) { + onSlippageChange(parsedValue) + } + } + + return ( + + + + Max Slippage: + + + + {value}% + + {isOpen ? ( + + ) : ( + + )} + + + + {isOpen && ( + + + {[0.1, 0.5, 1].map((option) => ( + + ))} + + + + {isCustom && ( + + )} + + )} + + ) +} diff --git a/packages/app/features/swap/components/SwapForm.tsx b/packages/app/features/swap/components/SwapForm.tsx index 6e17fc25a..afa6917c5 100644 --- a/packages/app/features/swap/components/SwapForm.tsx +++ b/packages/app/features/swap/components/SwapForm.tsx @@ -10,9 +10,10 @@ import { useTokenPrice } from 'app/utils/coin-gecko' import { useCoinFromTokenParam } from 'app/utils/useCoinFromTokenParam' import { FormProvider, useForm } from 'react-hook-form' import { useSwapToken } from 'app/utils/swap-token' -import { formatUnits } from 'viem' +import { formatUnits, parseUnits } from 'viem' import { formFields, SchemaForm } from 'app/utils/SchemaForm' import { z } from 'zod' +import SlippageSelector from './SlippageSelector' const SwapFormSchema = z.object({ sendAmount: formFields.text, @@ -39,6 +40,7 @@ export default function SwapForm() { const [outputUsdValue, setOutputUsdValue] = useState(null) const [fromToken, setFromToken] = useState(coin) const [toToken, setToToken] = useState(defaultToToken) + const [slippage, setSlippage] = useState(0.5) const [isInputFocus, setInputFocus] = useState(false) @@ -83,10 +85,18 @@ export default function SwapForm() { return } - const outputAmountInWei = BigInt(data.outputAmount) - const toTokenDecimals = toToken.decimals - const receivedAmount = Number.parseFloat(formatUnits(outputAmountInWei, toTokenDecimals)) - const normalizedAmount = receivedAmount.toFixed(6) + const outputAmountRaw = BigInt(data.outputAmount) + const inputAmountRaw = Number(sanitizedAmount) + + const outputTokenDecimals = toToken.decimals + const inputTokenDecimals = fromToken.decimals + + const outputAmountNormalized = Number(formatUnits(outputAmountRaw, outputTokenDecimals)) // outputAmount / 10^outputTokenDecimals + const inputAmountNormalized = Number(parseUnits(inputAmountRaw.toString(), inputTokenDecimals)) // inputAmount / 10^inputTokenDecimals + const exchangeRate = outputAmountNormalized / inputAmountNormalized + + const totalOutputTokens = exchangeRate * inputAmountRaw + const normalizedAmount = totalOutputTokens.toFixed(6) if (form.getValues('receiveAmount') !== normalizedAmount) { form.setValue('receiveAmount', normalizedAmount, { shouldValidate: true }) @@ -262,144 +272,147 @@ export default function SwapForm() { )} > {({ sendAmount, receiveAmount }) => ( - - - - - - - - - You Pay - + + + + + + + + + + You Pay + + + {insufficientAmount && ( + + Insufficient funds + + )} - {insufficientAmount && ( - - Insufficient funds - - )} - - - {sendAmount} - - handleTokenChange(token, true)} - /> - - - - $ - {inputUsdValue || - fromTokenMarketPrice?.[fromToken?.coingeckoTokenId ?? '']?.usd || - '0'} - - + + {sendAmount} + + handleTokenChange(token, true)} + /> + + - {fromToken - ? formatAmount( - formatUnits(fromToken.balance ?? BigInt(0), fromToken.decimals) - ) - : '0'}{' '} - {fromToken?.label ?? ''} + $ + {inputUsdValue || + fromTokenMarketPrice?.[fromToken?.coingeckoTokenId ?? '']?.usd || + '0'} - + + - - - + + - - - + + - - - - - - - You Receive - + + + + + + + You Receive + + - - - {receiveAmount} - - c.token !== fromToken?.token)} - onTokenChange={(token) => handleTokenChange(token, false)} - /> - - - $ - {outputUsdValue || - toTokenMarketPrice?.[toToken?.coingeckoTokenId ?? '']?.usd || - '0'} - - - + + {receiveAmount} + + c.token !== fromToken?.token)} + onTokenChange={(token) => handleTokenChange(token, false)} + /> + + + $ + {outputUsdValue || + toTokenMarketPrice?.[toToken?.coingeckoTokenId ?? '']?.usd || + '0'} + + + + + )} diff --git a/packages/app/utils/swap-token/useSwapToken.ts b/packages/app/utils/swap-token/useSwapToken.ts index 9117e0ea7..f26e7947b 100644 --- a/packages/app/utils/swap-token/useSwapToken.ts +++ b/packages/app/utils/swap-token/useSwapToken.ts @@ -1,4 +1,6 @@ import { useQuery, queryOptions } from '@tanstack/react-query' +import { z } from 'zod' +import { useSendAccount } from '../send-accounts' const KYBER_SWAP_BASE_URL = 'https://aggregator-api.kyberswap.com' @@ -11,59 +13,63 @@ interface SwapRouteParams { clientId?: string } -interface SwapRouteResponse { - inputAmount: string - outputAmount: string - totalGas: number - gasPriceGwei: string - gasUsd: number - amountInUsd: number - amountOutUsd: number - receivedUsd: number - swaps: Swap[][] - tokens: Record - encodedSwapData: string - routerAddress: string -} +const TokenDetailsSchema = z.object({ + address: z.string(), + symbol: z.string(), + name: z.string(), + price: z.number(), + decimals: z.number(), +}) -interface Swap { - pool: string - tokenIn: string - tokenOut: string - limitReturnAmount: string - swapAmount: string - amountOut: string - exchange: string - poolLength: number - poolType: string - poolExtra?: { - fee?: number - feePrecision?: number - blockNumber?: number - priceLimit?: number - } - extra?: Record | null - maxPrice?: string -} +const SwapSchema = z.object({ + pool: z.string(), + tokenIn: z.string(), + tokenOut: z.string(), + limitReturnAmount: z.string(), + swapAmount: z.string(), + amountOut: z.string(), + exchange: z.string(), + poolLength: z.number(), + poolType: z.string(), + poolExtra: z + .object({ + fee: z.number().optional(), + feePrecision: z.number().optional(), + blockNumber: z.number().optional(), + priceLimit: z.number().optional(), + }) + .optional(), + extra: z.record(z.unknown()).nullable().optional(), + maxPrice: z.string().optional(), +}) -interface TokenDetails { - address: string - symbol: string - name: string - price: number - decimals: number -} +const SwapRouteResponseSchema = z.object({ + inputAmount: z.string(), + outputAmount: z.string(), + totalGas: z.number(), + gasPriceGwei: z.string(), + gasUsd: z.number(), + amountInUsd: z.number(), + amountOutUsd: z.number(), + receivedUsd: z.number(), + swaps: z.array(z.array(SwapSchema)), + tokens: z.record(TokenDetailsSchema), + encodedSwapData: z.string(), + routerAddress: z.string(), +}) + +export type SwapRouteResponse = z.infer const fetchSwapRoute = async ({ chain = 'base', tokenIn, tokenOut, amountIn, - to = '0x6cA571D9F6cF441Eb59810977CBfe95F1aA6a63B', + to, clientId = 'SendApp', }: SwapRouteParams): Promise => { - if (!tokenIn || !tokenOut) { - throw new Error('tokenIn and tokenOut are required') + if (!tokenIn || !tokenOut || !to) { + throw new Error('tokenIn, tokenOut, and to are required') } const url = new URL(`${KYBER_SWAP_BASE_URL}/${chain}/route/encode`) @@ -83,21 +89,26 @@ const fetchSwapRoute = async ({ throw new Error(`Failed to fetch swap route: ${response.statusText}`) } - return response.json() + const jsonResponse = await response.json() + const parsedResponse = SwapRouteResponseSchema.parse(jsonResponse) + return parsedResponse } const useSwapRouteQueryKey = 'swap_route' export function useSwapToken({ tokenIn, tokenOut, amountIn }: SwapRouteParams) { + const { data: sendAccount } = useSendAccount() + return useQuery( queryOptions({ - queryKey: [useSwapRouteQueryKey, tokenIn, tokenOut, amountIn], - enabled: Boolean(tokenIn && tokenOut && amountIn), + queryKey: [useSwapRouteQueryKey, tokenIn, tokenOut, amountIn, sendAccount?.address], + enabled: Boolean(tokenIn && tokenOut && amountIn && sendAccount?.address), queryFn: () => fetchSwapRoute({ - tokenIn: tokenIn, - tokenOut: tokenOut, + tokenIn, + tokenOut, amountIn, + to: sendAccount?.address, }), }) ) From 778fe845fe455f4b4d56663190d4e434ade592f7 Mon Sep 17 00:00:00 2001 From: Brix Avengoza Date: Tue, 11 Feb 2025 19:48:15 +0800 Subject: [PATCH 06/12] update normalize input amount --- packages/app/features/swap/components/SwapForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/features/swap/components/SwapForm.tsx b/packages/app/features/swap/components/SwapForm.tsx index afa6917c5..bcd96c75a 100644 --- a/packages/app/features/swap/components/SwapForm.tsx +++ b/packages/app/features/swap/components/SwapForm.tsx @@ -92,7 +92,7 @@ export default function SwapForm() { const inputTokenDecimals = fromToken.decimals const outputAmountNormalized = Number(formatUnits(outputAmountRaw, outputTokenDecimals)) // outputAmount / 10^outputTokenDecimals - const inputAmountNormalized = Number(parseUnits(inputAmountRaw.toString(), inputTokenDecimals)) // inputAmount / 10^inputTokenDecimals + const inputAmountNormalized = Number(formatUnits(BigInt(inputAmountRaw), inputTokenDecimals)) // const exchangeRate = outputAmountNormalized / inputAmountNormalized const totalOutputTokens = exchangeRate * inputAmountRaw From 1c56a5ccdca85bef1f2e14fd85255c39a33db284 Mon Sep 17 00:00:00 2001 From: musidlo Date: Mon, 10 Mar 2025 22:08:21 +0100 Subject: [PATCH 07/12] Working swaps, almost ready UI --- .env.development | 2 + .env.local.template | 2 + apps/next/pages/swap/index.tsx | 6 +- apps/next/pages/swap/summary.tsx | 27 + packages/api/src/routers/_app.ts | 2 + packages/api/src/routers/swap/router.ts | 118 +++ packages/api/src/routers/swap/types.ts | 101 +++ packages/app/components/icons/IconSwap.tsx | 4 +- packages/app/components/icons/index.tsx | 3 +- packages/app/features/home/TokenDetails.tsx | 50 +- packages/app/features/swap/SwapForm.tsx | 697 ++++++++++++++++++ packages/app/features/swap/SwapSummary.tsx | 272 +++++++ .../app/features/swap/components/SwapForm.tsx | 421 ----------- packages/app/features/swap/constants.ts | 2 + packages/app/features/swap/hooks/useSwap.ts | 80 ++ packages/app/features/swap/screen.test.tsx | 179 ----- packages/app/features/swap/screen.tsx | 18 - packages/app/routers/params.tsx | 83 ++- packages/app/utils/sendUserOp.ts | 35 +- packages/app/utils/swap-token/index.ts | 1 - packages/app/utils/swap-token/useSwapToken.ts | 117 --- packages/app/utils/userop.ts | 10 +- packages/wagmi/src/generated.ts | 25 + packages/wagmi/wagmi.config.ts | 11 + 24 files changed, 1489 insertions(+), 777 deletions(-) create mode 100644 apps/next/pages/swap/summary.tsx create mode 100644 packages/api/src/routers/swap/router.ts create mode 100644 packages/api/src/routers/swap/types.ts create mode 100644 packages/app/features/swap/SwapForm.tsx create mode 100644 packages/app/features/swap/SwapSummary.tsx delete mode 100644 packages/app/features/swap/components/SwapForm.tsx create mode 100644 packages/app/features/swap/constants.ts create mode 100644 packages/app/features/swap/hooks/useSwap.ts delete mode 100644 packages/app/features/swap/screen.test.tsx delete mode 100644 packages/app/features/swap/screen.tsx delete mode 100644 packages/app/utils/swap-token/index.ts delete mode 100644 packages/app/utils/swap-token/useSwapToken.ts diff --git a/.env.development b/.env.development index 11f163283..62d2c2215 100644 --- a/.env.development +++ b/.env.development @@ -3,3 +3,5 @@ NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321 NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0 NEXT_PUBLIC_MAINNET_CHAIN_ID=1337 NEXT_PUBLIC_BASE_CHAIN_ID=845337 +NEXT_PUBLIC_KYBER_SWAP_BASE_URL=https://aggregator-api.kyberswap.com +NEXT_PUBLIC_KYBER_CLIENT_ID=SendApp diff --git a/.env.local.template b/.env.local.template index 8f243a32f..20e9de928 100644 --- a/.env.local.template +++ b/.env.local.template @@ -13,6 +13,8 @@ NEXT_PUBLIC_URL=http://localhost:3000 NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=33fe0df7cd4f445f4e2ba7e0fd6ed314 NEXT_PUBLIC_CDP_APP_ID="0000000-0000-0000-0000-000000000000" NEXT_PUBLIC_ONCHAINKIT_API_KEY="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" +NEXT_PUBLIC_KYBER_SWAP_BASE_URL=https://aggregator-api.kyberswap.com +NEXT_PUBLIC_KYBER_CLIENT_ID=SendApp SECRET_SHOP_PRIVATE_KEY=0x5de4111afa1a4b94908f83103eb1f1706367c2e68ca870fc3fb9a804cdab365a SEND_ACCOUNT_FACTORY_PRIVATE_KEY=0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d SNAPLET_HASH_KEY=sendapp diff --git a/apps/next/pages/swap/index.tsx b/apps/next/pages/swap/index.tsx index d3a648863..2159c69d2 100644 --- a/apps/next/pages/swap/index.tsx +++ b/apps/next/pages/swap/index.tsx @@ -1,4 +1,4 @@ -import SwapScreen from 'app/features/swap/screen' +import { SwapForm } from 'app/features/swap/SwapForm' import { HomeLayout } from 'app/features/home/layout.web' import Head from 'next/head' import { userProtectedGetSSP } from 'utils/userProtected' @@ -9,9 +9,9 @@ export const Page: NextPageWithLayout = () => { return ( <> - Send | Swap + Send | Swap Form - + ) } diff --git a/apps/next/pages/swap/summary.tsx b/apps/next/pages/swap/summary.tsx new file mode 100644 index 000000000..23093d108 --- /dev/null +++ b/apps/next/pages/swap/summary.tsx @@ -0,0 +1,27 @@ +import { SwapSummary } from 'app/features/swap/SwapSummary' +import { HomeLayout } from 'app/features/home/layout.web' +import Head from 'next/head' +import { userProtectedGetSSP } from 'utils/userProtected' +import type { NextPageWithLayout } from '../_app' +import { TopNav } from 'app/components/TopNav' + +export const Page: NextPageWithLayout = () => { + return ( + <> + + Send | Swap Summary + + + + ) +} + +export const getServerSideProps = userProtectedGetSSP() + +Page.getLayout = (children) => ( + }> + {children} + +) + +export default Page diff --git a/packages/api/src/routers/_app.ts b/packages/api/src/routers/_app.ts index b7f8b326f..53e22a02b 100644 --- a/packages/api/src/routers/_app.ts +++ b/packages/api/src/routers/_app.ts @@ -8,6 +8,7 @@ import { secretShopRouter } from './secretShop' import { sendAccountRouter } from './sendAccount' import { accountRecoveryRouter } from './account-recovery/router' import { referralsRouter } from './referrals' +import { swapRouter } from './swap/router' export const appRouter = createTRPCRouter({ chainAddress: chainAddressRouter, @@ -18,6 +19,7 @@ export const appRouter = createTRPCRouter({ secretShop: secretShopRouter, sendAccount: sendAccountRouter, referrals: referralsRouter, + swap: swapRouter, }) export type AppRouter = typeof appRouter diff --git a/packages/api/src/routers/swap/router.ts b/packages/api/src/routers/swap/router.ts new file mode 100644 index 000000000..f104158c9 --- /dev/null +++ b/packages/api/src/routers/swap/router.ts @@ -0,0 +1,118 @@ +import { createTRPCRouter, protectedProcedure } from '../../trpc' +import { + type KyberEncodeRouteRequest, + KyberEncodeRouteRequestSchema, + type KyberEncodeRouteResponse, + type KyberGetSwapRouteRequest, + KyberGetSwapRouteRequestSchema, + type KyberGetSwapRouteResponse, +} from './types' +import debug from 'debug' +import { baseMainnetClient, sendSwapsRevenueSafeAddress } from '@my/wagmi' +import { TRPCError } from '@trpc/server' + +const log = debug('api:routers:swap') + +const CHAIN = 'base' +const SWAP_FEE = '75' // 0.75% feeAmount is the percentage of fees that we will take with base unit = 10000 +const KYBER_NATIVE_TOKEN_ADDRESS = '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE' + +const getHeaders = () => { + if (!process.env.NEXT_PUBLIC_KYBER_CLIENT_ID) { + return undefined + } + + return { 'x-client-id': process.env.NEXT_PUBLIC_KYBER_CLIENT_ID } +} + +const adjustTokenIfNeed = (token: string) => { + return token === 'eth' ? KYBER_NATIVE_TOKEN_ADDRESS : token +} + +const fetchKyberSwapRoute = async ({ tokenIn, tokenOut, amountIn }: KyberGetSwapRouteRequest) => { + try { + const url = new URL(`${process.env.NEXT_PUBLIC_KYBER_SWAP_BASE_URL}/${CHAIN}/api/v1/routes`) + url.searchParams.append('tokenIn', adjustTokenIfNeed(tokenIn)) + url.searchParams.append('tokenOut', adjustTokenIfNeed(tokenOut)) + url.searchParams.append('amountIn', amountIn) + url.searchParams.append('feeAmount', SWAP_FEE) + url.searchParams.append('chargeFeeBy', 'currency_out') + url.searchParams.append('isInBps', 'true') + url.searchParams.append('feeReceiver', sendSwapsRevenueSafeAddress[baseMainnetClient.chain.id]) + + const response = (await fetch(url.toString(), { + method: 'GET', + headers: getHeaders(), + }).then((res) => res.json())) as KyberGetSwapRouteResponse + + if (response.code !== 0) { + throw new Error(response.message) + } + + const { + data: { routeSummary, routerAddress }, + } = response + + return { routeSummary, routerAddress } + } catch (error) { + log('Error calling fetchKyberSwapRoute', error) + throw new TRPCError({ + code: 'INTERNAL_SERVER_ERROR', + message: 'Failed to find swap route.', + }) + } +} + +const encodeKyberSwapRoute = async ({ + routeSummary, + recipient, + sender, + slippageTolerance, +}: KyberEncodeRouteRequest) => { + try { + const url = `${process.env.NEXT_PUBLIC_KYBER_SWAP_BASE_URL}/${CHAIN}/api/v1/route/build` + + const response = (await fetch(url, { + method: 'POST', + headers: getHeaders(), + body: JSON.stringify({ + sender, + recipient, + slippageTolerance, + routeSummary, + }), + }).then((res) => res.json())) as KyberEncodeRouteResponse + + if (response.code !== 0) { + throw new Error(response.message) + } + + return response.data + } catch (error) { + log('Error calling encodeKyberSwapRoute', error) + throw new TRPCError({ + code: 'INTERNAL_SERVER_ERROR', + message: 'Failed to encode swap route', + }) + } +} + +export const swapRouter = createTRPCRouter({ + fetchSwapRoute: protectedProcedure + .input(KyberGetSwapRouteRequestSchema) + .query(async ({ input: { tokenIn, tokenOut, amountIn } }) => { + log('calling fetchSwapRoute with input: ', { tokenIn, tokenOut, amountIn }) + return await fetchKyberSwapRoute({ tokenIn, tokenOut, amountIn }) + }), + encodeSwapRoute: protectedProcedure + .input(KyberEncodeRouteRequestSchema) + .mutation(async ({ input: { routeSummary, slippageTolerance, sender, recipient } }) => { + log('calling encodeSwapRoute with input: ', { + routeSummary, + slippageTolerance, + sender, + recipient, + }) + return await encodeKyberSwapRoute({ routeSummary, slippageTolerance, sender, recipient }) + }), +}) diff --git a/packages/api/src/routers/swap/types.ts b/packages/api/src/routers/swap/types.ts new file mode 100644 index 000000000..dc165daf2 --- /dev/null +++ b/packages/api/src/routers/swap/types.ts @@ -0,0 +1,101 @@ +import { z } from 'zod' +import type { Hex } from 'viem' + +export const KyberRouteSummarySchema = z.object({ + tokenIn: z.string(), + amountIn: z.string(), + amountInUsd: z.string(), + tokenInMarketPriceAvailable: z.boolean(), + tokenOut: z.string(), + amountOut: z.string(), + amountOutUsd: z.string(), + tokenOutMarketPriceAvailable: z.boolean(), + gas: z.string(), + gasPrice: z.string(), + gasUsd: z.string(), + extraFee: z + .object({ + feeAmount: z.string(), + chargeFeeBy: z.string(), + isInBps: z.boolean(), + feeReceiver: z.string(), + }) + .optional(), + route: z.array( + z.array( + z.object({ + pool: z.string().optional(), + tokenIn: z.string().optional(), + tokenOut: z.string().optional(), + limitReturnAmount: z.string().optional(), + swapAmount: z.string().optional(), + amountOut: z.string().optional(), + exchange: z.string().optional(), + poolLength: z.number().optional(), + poolType: z.string().optional(), + poolExtra: z.nullable( + z.object({ + fee: z.number().optional(), + feePrecision: z.number().optional(), + blockNumber: z.number().optional(), + }) + ), + extra: z.nullable(z.unknown()), + }) + ) + ), + checksum: z.string(), + timestamp: z.number(), +}) +export type KyberRouteSummary = z.infer + +export const KyberGetSwapRouteRequestSchema = z.object({ + tokenIn: z.string(), + tokenOut: z.string(), + amountIn: z.string(), +}) + +export type KyberGetSwapRouteRequest = z.infer + +export type KyberGetSwapRouteResponse = { + code: number + message: string + data: { + routerAddress: string + routeSummary: KyberRouteSummary + } +} + +export const KyberEncodeRouteRequestSchema = z.object({ + sender: z.string(), + recipient: z.string(), + slippageTolerance: z.number().min(0).max(2000), + routeSummary: KyberRouteSummarySchema, +}) + +export type KyberEncodeRouteRequest = { + sender: string + recipient: string + slippageTolerance: number + routeSummary: KyberRouteSummary +} + +export type KyberEncodeRouteResponse = { + code: number + message: string + data: { + amountIn: string + amountInUsd: string + amountOut: string + amountOutUsd: string + gas: string + gasUsd: string + data: Hex + routerAddress: Hex + outputChange: { + amount: string + percent: number + level: number + } + } +} diff --git a/packages/app/components/icons/IconSwap.tsx b/packages/app/components/icons/IconSwap.tsx index 5333df010..9bcbdfec9 100644 --- a/packages/app/components/icons/IconSwap.tsx +++ b/packages/app/components/icons/IconSwap.tsx @@ -8,14 +8,14 @@ const Swap = (props) => { return ( diff --git a/packages/app/components/icons/index.tsx b/packages/app/components/icons/index.tsx index e08080ba7..3b5366116 100644 --- a/packages/app/components/icons/index.tsx +++ b/packages/app/components/icons/index.tsx @@ -60,6 +60,5 @@ export { IconQuestionCircle } from './IconQuestionCircle' export { IconSlash } from './IconSlash' export { IconSwap } from './IconSwap' export { IconUpgrade } from './IconUpgrade' -export { IconUpgrade } from './IconUpgrade' export { IconKey } from './IconKey' -export { IconIdCard } from './IconIdCard' \ No newline at end of file +export { IconIdCard } from './IconIdCard' diff --git a/packages/app/features/home/TokenDetails.tsx b/packages/app/features/home/TokenDetails.tsx index 9d21bbbdd..0af3334a9 100644 --- a/packages/app/features/home/TokenDetails.tsx +++ b/packages/app/features/home/TokenDetails.tsx @@ -2,7 +2,6 @@ import { AnimatePresence, Button, Card, - H4, LinkableButton, Paragraph, Separator, @@ -11,7 +10,7 @@ import { XStack, YStack, } from '@my/ui' -import type { CoinWithBalance } from 'app/data/coins' +import { type CoinWithBalance, sendCoin, usdcCoin } from 'app/data/coins' import { IconPlus, IconSwap } from 'app/components/icons' import formatAmount from 'app/utils/formatAmount' import { TokenActivity } from './TokenActivity' @@ -20,6 +19,7 @@ import { convertBalanceToFiat } from 'app/utils/convertBalanceToUSD' import { IconCoin } from 'app/components/icons/IconCoin' import { TokenDetailsMarketData } from 'app/components/TokenDetailsMarketData' import { useCoinFromTokenParam } from 'app/utils/useCoinFromTokenParam' +import { useHoverStyles } from 'app/utils/useHoverStyles' export function AnimateEnter({ children }: { children: React.ReactNode }) { return ( @@ -40,6 +40,16 @@ export function AnimateEnter({ children }: { children: React.ReactNode }) { export const TokenDetails = ({ coin }: { coin: CoinWithBalance }) => { const { coin: selectedCoin } = useCoinFromTokenParam() + const hoverStyles = useHoverStyles() + + const getSwapUrl = () => { + if (selectedCoin?.symbol === sendCoin.symbol) { + return `/swap?inToken=${selectedCoin?.token}&outToken=${usdcCoin.token}` + } + + return `/swap?inToken=${selectedCoin?.token}` + } + return ( @@ -70,27 +80,37 @@ export const TokenDetails = ({ coin }: { coin: CoinWithBalance }) => { - - - - - - + + + + Deposit - - + + diff --git a/packages/app/features/swap/SwapForm.tsx b/packages/app/features/swap/SwapForm.tsx new file mode 100644 index 000000000..a6c843e8c --- /dev/null +++ b/packages/app/features/swap/SwapForm.tsx @@ -0,0 +1,697 @@ +import { useCallback, useEffect, useState } from 'react' +import { + Button, + FadeCard, + Input, + Paragraph, + Spinner, + Stack, + SubmitButton, + useDebounce, + XStack, + YStack, +} from '@my/ui' +import { ArrowDown, ArrowUp, ChevronDown, ChevronUp } from '@tamagui/lucide-icons' +import { IconSwap } from 'app/components/icons' +import { allCoinsDict, usdcCoin } from 'app/data/coins' +import formatAmount, { localizeAmount, sanitizeAmount } from 'app/utils/formatAmount' +import { useCoin, useCoins } from 'app/provider/coins' +import { FormProvider, useForm } from 'react-hook-form' +import { formatUnits } from 'viem' +import { formFields, SchemaForm } from 'app/utils/SchemaForm' +import { z } from 'zod' +import { api } from 'app/utils/api' +import { useSwapScreenParams } from 'app/routers/params' +import { useRouter } from 'solito/router' +import { useHoverStyles } from 'app/utils/useHoverStyles' +import { useThemeSetting } from '@tamagui/next-theme' +import { useQueryClient } from '@tanstack/react-query' +import { DEFAULT_SLIPPAGE, SWAP_ROUTE_SUMMARY_QUERY_KEY } from 'app/features/swap/constants' + +// todo mobile +// todo white + +// TODO bug z pojawiającym sie tekstem po usunieciu + +// TODO komponent wyboru tokena potrzebuje zmian, +// 1. nie widac na nim nie posiadanych tokenów co jest złe dla docelowego, +// 2. nie powinno być można tych samych ustawić, +// 3. jego wyglad sie zmienił, +// 4. czasem moneta sie zle pokazuje + +const SwapFormSchema = z.object({ + outToken: formFields.coin, + inToken: formFields.coin, + outAmount: formFields.text, + inAmount: formFields.text, + slippage: formFields.number + .min(0, 'Min slippage value is 0%') + .max(2000, 'Max slippage value is 20%'), +}) + +export const SwapForm = () => { + const form = useForm>() + const router = useRouter() + const [swapParams, setSwapParams] = useSwapScreenParams() + const { isLoading: isLoadingCoins } = useCoins() + const { outToken, inToken, inAmount, slippage } = swapParams + const { coin: inCoin } = useCoin(inToken) + const { coin: outCoin } = useCoin(outToken) + const [isInputFocused, setIsInputFocused] = useState(false) + const hoverStyles = useHoverStyles() + const { resolvedTheme } = useThemeSetting() + const queryClient = useQueryClient() + + const { + data: swapRoute, + error: swapRouteError, + isFetching: isFetchingRoute, + } = api.swap.fetchSwapRoute.useQuery( + { + tokenIn: inCoin?.token || '', + tokenOut: outCoin?.token || '', + amountIn: inAmount || '', + }, + { + enabled: Boolean(inCoin && outCoin && inAmount), + refetchInterval: 20_000, + } + ) + + const formOutAmount = form.watch('outAmount') + const formInAmount = form.watch('inAmount') + const formSlippage = form.watch('slippage') + + const parsedInAmount = BigInt(swapParams.inAmount ?? '0') + const parsedSlippage = Number(slippage || 0) + const inAmountUsd = formatAmount(swapRoute?.routeSummary.amountInUsd) + const outAmountUsd = formatAmount(swapRoute?.routeSummary.amountOutUsd) + const isDarkTheme = resolvedTheme?.startsWith('dark') + + const canSubmit = + !isLoadingCoins && + !isFetchingRoute && + inCoin?.balance !== undefined && + inAmount !== undefined && + inCoin.balance >= parsedInAmount && + parsedInAmount > BigInt(0) && + swapRoute + + const insufficientAmount = + inCoin?.balance !== undefined && inAmount !== undefined && parsedInAmount > inCoin?.balance + + const handleSubmit = () => { + if (!canSubmit || !swapRoute) return + + queryClient.setQueryData([SWAP_ROUTE_SUMMARY_QUERY_KEY], swapRoute.routeSummary) + router.push({ pathname: '/swap/summary', query: swapParams }) + } + + const handleFlipTokens = () => { + const { inToken: _inToken, outToken: _outToken } = form.getValues() + form.setValue('inToken', _outToken) + form.setValue('outToken', _inToken) + } + + const onFormChange = useDebounce( + useCallback( + (values) => { + const { inAmount, outToken, inToken, slippage } = values + + const sanitizedInAmount = sanitizeAmount(inAmount, allCoinsDict[inToken]?.decimals) + + setSwapParams( + { + ...swapParams, + inAmount: sanitizedInAmount.toString(), + inToken, + outToken, + slippage, + }, + { webBehavior: 'replace' } + ) + }, + [swapParams, setSwapParams] + ), + 300, + { leading: false }, + [] + ) + + const handleSlippageChange = useCallback( + (value: number) => { + form.clearErrors('slippage') + form.setValue('slippage', value) + }, + [form.clearErrors, form.setValue] + ) + + useEffect(() => { + const subscription = form.watch((values) => { + onFormChange(values) + }) + + return () => { + subscription.unsubscribe() + onFormChange.cancel() + } + }, [form.watch, onFormChange]) + + // TODO + useEffect(() => { + if (!swapRoute) { + return + } + + form.setValue( + 'outAmount', + localizeAmount(formatUnits(BigInt(swapRoute.routeSummary.amountOut), outCoin?.decimals || 0)) + ) + }, [swapRoute, outCoin?.decimals, form.setValue]) + + useEffect(() => { + queryClient.removeQueries({ queryKey: [SWAP_ROUTE_SUMMARY_QUERY_KEY] }) + }, [queryClient.removeQueries]) + + return ( + + + { + switch (true) { + case formInAmount?.length <= 8: + return '$11' + case formInAmount?.length > 16: + return '$7' + default: + return '$8' + } + })(), + $gtSm: { + fontSize: (() => { + switch (true) { + case formInAmount?.length <= 9: + return '$10' + case formInAmount?.length > 16: + return '$8' + default: + return '$10' + } + })(), + }, + color: '$color12', + fontWeight: '500', + bw: 0, + br: 0, + p: 1, + focusStyle: { + outlineWidth: 0, + }, + placeholder: '0', + fontFamily: '$mono', + '$theme-dark': { + placeholderTextColor: '$darkGrayTextField', + }, + '$theme-light': { + placeholderTextColor: '$darkGrayTextField', + }, + inputMode: inCoin?.decimals ? 'decimal' : 'numeric', + onChangeText: (amount) => { + const localizedInAmount = localizeAmount(amount) + form.setValue('inAmount', localizedInAmount) + + if (!amount) { + form.setValue('outAmount', '') + } + }, + onFocus: () => setIsInputFocused(true), + onBlur: () => setIsInputFocused(false), + fieldsetProps: { + width: '65%', + }, + }, + outAmount: { + fontSize: (() => { + switch (true) { + case formOutAmount?.length <= 8: + return '$11' + case formOutAmount?.length > 16: + return '$7' + default: + return '$8' + } + })(), + $gtSm: { + fontSize: (() => { + switch (true) { + case formOutAmount?.length <= 9: + return '$10' + case formOutAmount?.length > 16: + return '$8' + default: + return '$10' + } + })(), + }, + color: '$color12', + fontWeight: '500', + bw: 0, + br: 0, + p: 1, + focusStyle: { + outlineWidth: 0, + }, + placeholder: '0', + fontFamily: '$mono', + '$theme-dark': { + placeholderTextColor: '$darkGrayTextField', + }, + '$theme-light': { + placeholderTextColor: '$darkGrayTextField', + }, + fieldsetProps: { + width: '65%', + }, + pointerEvents: 'none', + }, + }} + formProps={{ + footerProps: { pb: 0 }, + justifyContent: 'space-between', + $gtSm: { + maxWidth: '100%', + justifyContent: 'space-between', + }, + }} + defaultValues={{ + inToken: inCoin?.token, + outToken: outCoin?.token, + inAmount: + inAmount && inCoin !== undefined + ? localizeAmount(formatUnits(BigInt(inAmount), inCoin.decimals)) + : undefined, + slippage: parsedSlippage || DEFAULT_SLIPPAGE, + }} + renderAfter={({ submit }) => ( + + + review + + + )} + > + {({ outToken, inToken, outAmount, inAmount }) => ( + + + + + + + + + You Pay + + + + {inAmount} + {inToken} + + + + + {inAmountUsd ? `$${inAmountUsd}` : '$0.00'} + + + {(() => { + switch (true) { + case isLoadingCoins: + return + case !isLoadingCoins && !inCoin: + return ( + Error fetching balance info + ) + case !inCoin?.balance: + return ( + + - + + ) + default: + return ( + + {formatAmount( + formatUnits(inCoin?.balance, inCoin?.decimals), + 12, + inCoin?.formatDecimals + )}{' '} + {inCoin?.symbol} + + ) + } + })()} + {inCoin !== undefined && inCoin.symbol !== usdcCoin.symbol && ( + + )} + + + + + + + + You Receive + + + + {outAmount} + {outToken} + + + + {(() => { + switch (true) { + case isFetchingRoute: + return + case !outAmountUsd: + return ( + + $0.00 + + ) + default: + return ( + + ${outAmountUsd} + + ) + } + })()} + + + + + + + + + + + + + {(() => { + switch (true) { + case !!form.formState.errors?.slippage: + return form.formState.errors.slippage.message + case !!swapRouteError: + return swapRouteError.message + default: + return '' + } + })()} + + + )} + + + + ) +} + +const SLIPPAGE_OPTIONS = [5, 10, 50, 100, 200] + +export const Slippage = ({ + slippage, + onChange, +}: { + slippage: number + onChange: (value: number) => void +}) => { + const [isOpen, setIsOpen] = useState(false) + const [isFocused, setIsFocused] = useState(false) + const [customSlippage, setCustomSlippage] = useState(null) + const hoverStyles = useHoverStyles() + + const handleInputChange = (value: string) => { + if (/^\d{0,2}(\.\d{0,2})?$/.test(value) || value === '') { + setCustomSlippage(value) + return + } + } + + const handleOnPress = (value: number) => { + onChange(value) + setCustomSlippage(null) + } + + useEffect(() => { + if (customSlippage === null) { + return + } + + if (customSlippage === '') { + onChange(DEFAULT_SLIPPAGE) + return + } + + onChange(Number(customSlippage) * 100) + }, [customSlippage, onChange]) + + useEffect(() => { + if (customSlippage === null && slippage !== undefined && !SLIPPAGE_OPTIONS.includes(slippage)) { + setCustomSlippage((slippage / 100).toString()) + } + }, [slippage, customSlippage]) + + return ( + + + + Max Slippage + + + {slippage / 100}% + + + + {isOpen && ( + + + {SLIPPAGE_OPTIONS.map((slippageOption) => ( + + ))} + + + setIsFocused(true)} + onBlur={() => setIsFocused(false)} + value={customSlippage || ''} + onChangeText={handleInputChange} + p={'$2'} + pr={'$4'} + /> + + % + + + + )} + + ) +} diff --git a/packages/app/features/swap/SwapSummary.tsx b/packages/app/features/swap/SwapSummary.tsx new file mode 100644 index 000000000..dd6565505 --- /dev/null +++ b/packages/app/features/swap/SwapSummary.tsx @@ -0,0 +1,272 @@ +import { Button, FadeCard, Paragraph, Spinner, XStack, YStack } from '@my/ui' +import { ArrowDown, ArrowUp } from '@tamagui/lucide-icons' +import type { KyberRouteSummary } from '@my/api/routers/swap/types' +import formatAmount, { localizeAmount } from 'app/utils/formatAmount' +import { formatUnits } from 'viem' +import { useCoin, useCoins } from 'app/provider/coins' +import { useSwapScreenParams } from 'app/routers/params' +import { IconCoin } from 'app/components/icons/IconCoin' +import { useSendAccount } from 'app/utils/send-accounts' +import { api } from 'app/utils/api' +import { useSwap } from 'app/features/swap/hooks/useSwap' +import { useSendUserOpMutation } from 'app/utils/sendUserOp' +import { useCallback, useEffect } from 'react' +import { useCoinFromSendTokenParam } from 'app/utils/useCoinFromTokenParam' +import { useRouter } from 'solito/router' +import { useQueryClient } from '@tanstack/react-query' +import { DEFAULT_SLIPPAGE, SWAP_ROUTE_SUMMARY_QUERY_KEY } from 'app/features/swap/constants' + +// TODO edit +// todo jakis kurwa problem z senderem +// todo mobile +// todo white + +export const SwapSummary = () => { + const router = useRouter() + const [swapParams] = useSwapScreenParams() + const { isLoading: isLoadingCoins } = useCoins() + const { outToken, inToken, inAmount, slippage } = swapParams + const { coin: inCoin } = useCoin(inToken) + const { coin: outCoin } = useCoin(outToken) + const { coin: usdc } = useCoin('USDC') + const { data: sendAccount, isLoading: isSendAccountLoading } = useSendAccount() + const { tokensQuery, ethQuery } = useCoinFromSendTokenParam() + const queryClient = useQueryClient() + + const { + mutateAsync: encodeRouteMutateAsync, + data: encodedRoute, + error: encodeRouteError, + isPending: isEncodeRouteLoading, + } = api.swap.encodeSwapRoute.useMutation() + + const { userOp, userOpError, isLoadingUserOp, usdcFees, usdcFeesError, isLoadingUSDCFees } = + useSwap({ + amount: BigInt(inAmount || '0'), + token: inToken, + routerAddress: encodedRoute?.routerAddress, + swapCallData: encodedRoute?.data, + }) + + const { mutateAsync: sendUserOpMutateAsync, isPending: isSendUserOpPending } = + useSendUserOpMutation() + + const webauthnCreds = + sendAccount?.send_account_credentials + .filter((c) => !!c.webauthn_credentials) + .map((c) => c.webauthn_credentials as NonNullable) ?? [] + + const isUSDCSelected = inCoin?.label === 'USDC' + const gas = usdcFees ? usdcFees.baseFee + usdcFees.gasFees : BigInt(Number.MAX_SAFE_INTEGER) + const hasEnoughBalance = inCoin?.balance && inCoin.balance >= BigInt(inAmount ?? '0') + const hasEnoughGas = + (usdc?.balance ?? BigInt(0)) > (isUSDCSelected ? BigInt(inAmount || '0') + gas : gas) + + const routeSummary = queryClient.getQueryData([SWAP_ROUTE_SUMMARY_QUERY_KEY]) + const amountIn = localizeAmount( + formatUnits(BigInt(routeSummary?.amountIn || 0), inCoin?.decimals || 0) + ) + const amountOut = localizeAmount( + formatUnits(BigInt(routeSummary?.amountOut || 0), outCoin?.decimals || 0) + ) + const exchangeRate = Number(amountOut.replace(/,/g, '')) / Number(amountIn.replace(/,/g, '')) + + const initLoading = + isLoadingCoins || + isSendAccountLoading || + isEncodeRouteLoading || + isLoadingUserOp || + isLoadingUSDCFees + + const canSubmit = + !initLoading && + !isSendUserOpPending && + hasEnoughGas && + hasEnoughBalance && + encodedRoute && + userOp && + usdcFees + + const encodeRoute = useCallback(async () => { + if (!sendAccount?.address || !routeSummary) { + return + } + + try { + await encodeRouteMutateAsync({ + routeSummary, + slippageTolerance: Number(slippage || DEFAULT_SLIPPAGE), + sender: sendAccount.address, + recipient: sendAccount.address, + }) + } catch (e) { + console.error(e) + } + }, [sendAccount, routeSummary, encodeRouteMutateAsync, slippage, sendAccount?.address]) + + const submit = async () => { + await sendUserOpMutateAsync({ + userOp: { + ...userOp, + callGasLimit: 3000000n, // TODO + preVerificationGas: 100000n, // TODO + }, + webauthnCreds, + }) + + await tokensQuery.refetch() + await ethQuery.refetch() + router.push(`/?token=${outCoin?.token}`) + } + + useEffect(() => { + if (!routeSummary) { + router.push({ pathname: '/swap', query: swapParams }) + } + + if (!isEncodeRouteLoading && !encodedRoute) { + void encodeRoute() + } + }, [routeSummary, swapParams, router.push, encodeRoute, isEncodeRouteLoading, encodedRoute]) + + if (initLoading) { + return + } + + return ( + + + + Swap Summary + + + + + + You Pay + + + + {amountIn} + + + {inCoin?.symbol} + + + + + + + + You Receive + + + + {amountOut} + + + {outCoin?.symbol} + + + + + + + + + + + + + + + + + + {(() => { + switch (true) { + case !!encodeRouteError: + return encodeRouteError?.message + case !!userOpError: + return userOpError?.message?.split('.').at(0) + case !!usdcFeesError: + return usdcFeesError?.message?.split('.').at(0) + default: + return '' + } + })()} + + + + + ) +} + +export const Row = ({ label, value }: { label: string; value: string }) => { + return ( + + + {label} + + + {value} + + + ) +} diff --git a/packages/app/features/swap/components/SwapForm.tsx b/packages/app/features/swap/components/SwapForm.tsx deleted file mode 100644 index bcd96c75a..000000000 --- a/packages/app/features/swap/components/SwapForm.tsx +++ /dev/null @@ -1,421 +0,0 @@ -import { useEffect, useState } from 'react' -import { YStack, Card, XStack, Paragraph, Button, SubmitButton } from '@my/ui' -import { ArrowUp, ArrowDown } from '@tamagui/lucide-icons' -import { IconSwap } from 'app/components/icons' -import type { CoinWithBalance } from 'app/data/coins' -import formatAmount, { localizeAmount } from 'app/utils/formatAmount' -import PopoverItem from './PopoverItem' -import { useCoins } from 'app/provider/coins' -import { useTokenPrice } from 'app/utils/coin-gecko' -import { useCoinFromTokenParam } from 'app/utils/useCoinFromTokenParam' -import { FormProvider, useForm } from 'react-hook-form' -import { useSwapToken } from 'app/utils/swap-token' -import { formatUnits, parseUnits } from 'viem' -import { formFields, SchemaForm } from 'app/utils/SchemaForm' -import { z } from 'zod' -import SlippageSelector from './SlippageSelector' - -const SwapFormSchema = z.object({ - sendAmount: formFields.text, - receiveAmount: formFields.text, -}) - -const calculateUsdValue = (basePrice: number, tokenAmount: string): string => { - const value = basePrice * Number.parseFloat(tokenAmount) - return value.toFixed(6) -} - -export default function SwapForm() { - const { coin } = useCoinFromTokenParam() - const { coins } = useCoins() - const defaultToToken = (() => { - if (!coin) return coins[1] // default to 2nd token - const coinIndex = coins.findIndex((item) => item.symbol === coin.symbol) - return coins[(coinIndex + 1) % coins.length] - })() - - const [fromDropdownOpen, setFromDropdownOpen] = useState(false) - const [toDropdownOpen, setToDropdownOpen] = useState(false) - const [inputUsdValue, setInputUsdValue] = useState(null) - const [outputUsdValue, setOutputUsdValue] = useState(null) - const [fromToken, setFromToken] = useState(coin) - const [toToken, setToToken] = useState(defaultToToken) - const [slippage, setSlippage] = useState(0.5) - - const [isInputFocus, setInputFocus] = useState(false) - - const form = useForm>({ - defaultValues: { - sendAmount: '', - receiveAmount: '', - }, - }) - - const amount = form.watch('sendAmount') - const receiveAmount = form.watch('receiveAmount') - const sanitizedAmount = amount.replace(/,/g, '').trim() - const parsedAmount = sanitizedAmount === '' ? BigInt(0) : BigInt(sanitizedAmount) - const insufficientAmount = coin?.balance !== undefined && parsedAmount > coin?.balance - - const { data } = useSwapToken({ - tokenIn: fromToken?.token, - tokenOut: toToken?.token, - amountIn: sanitizedAmount, - }) - - const { data: fromTokenMarketPrice } = useTokenPrice(fromToken?.coingeckoTokenId ?? '') - const { data: toTokenMarketPrice } = useTokenPrice(toToken?.coingeckoTokenId ?? '') - - // Calculates and updates the received amount and USD values based on the latest swap data - useEffect(() => { - if (!fromToken || !toToken) { - setInputUsdValue(null) - setOutputUsdValue(null) - form.setValue('receiveAmount', '', { shouldValidate: true }) - return - } - - const inputBaseMarketPrice = fromTokenMarketPrice?.[fromToken?.coingeckoTokenId ?? '']?.usd || 0 - const outputBaseMarketPrice = toTokenMarketPrice?.[toToken?.coingeckoTokenId ?? '']?.usd || 0 - - if (!data?.outputAmount || !sanitizedAmount || Number(sanitizedAmount) === 0) { - setInputUsdValue(null) - setOutputUsdValue(null) - form.setValue('receiveAmount', '', { shouldValidate: true }) - return - } - - const outputAmountRaw = BigInt(data.outputAmount) - const inputAmountRaw = Number(sanitizedAmount) - - const outputTokenDecimals = toToken.decimals - const inputTokenDecimals = fromToken.decimals - - const outputAmountNormalized = Number(formatUnits(outputAmountRaw, outputTokenDecimals)) // outputAmount / 10^outputTokenDecimals - const inputAmountNormalized = Number(formatUnits(BigInt(inputAmountRaw), inputTokenDecimals)) // - const exchangeRate = outputAmountNormalized / inputAmountNormalized - - const totalOutputTokens = exchangeRate * inputAmountRaw - const normalizedAmount = totalOutputTokens.toFixed(6) - - if (form.getValues('receiveAmount') !== normalizedAmount) { - form.setValue('receiveAmount', normalizedAmount, { shouldValidate: true }) - } - - setInputUsdValue(calculateUsdValue(inputBaseMarketPrice, sanitizedAmount)) - setOutputUsdValue(calculateUsdValue(outputBaseMarketPrice, normalizedAmount)) - }, [ - data?.outputAmount, - fromToken, - fromToken?.coingeckoTokenId, - fromTokenMarketPrice, - toToken, - toToken?.coingeckoTokenId, - toTokenMarketPrice, - toToken?.decimals, - sanitizedAmount, - form.setValue, - form.getValues, - ]) - - const switchFromTo = () => { - setFromToken(toToken) - setToToken(fromToken) - } - - const maxoutBalance = () => { - if (!fromToken || !fromToken.balance || fromToken.balance === BigInt(0)) return - const formattedBalance = formatAmount(formatUnits(fromToken.balance, fromToken.decimals)) - form.setValue('sendAmount', formattedBalance, { shouldValidate: true, shouldDirty: true }) - } - - const handleTokenChange = (token: CoinWithBalance, isFrom: boolean) => { - if (isFrom) { - // Prevent selecting the same token in both fields - if (token.token === toToken?.token) { - const newToToken = coins.find((item) => item.token !== token.token) - setToToken(newToToken) - } - setFromToken(token) - setFromDropdownOpen(false) - } else { - if (token.token === fromToken?.token) { - const newFromToken = coins.find((item) => item.token !== token.token) - setFromToken(newFromToken) - } - setToToken(token) - setToDropdownOpen(false) - } - } - - const onSubmit = async () => { - console.log('submit') - } - - return ( - - { - switch (true) { - case amount?.length <= 8: - return '$11' - case amount?.length > 16: - return '$7' - default: - return '$8' - } - })(), - $gtSm: { - fontSize: (() => { - switch (true) { - case amount?.length <= 9: - return '$10' - case amount?.length > 16: - return '$8' - default: - return '$10' - } - })(), - }, - color: '$color12', - fontWeight: '500', - bw: 0, - br: 0, - p: 1, - focusStyle: { - outlineWidth: 0, - }, - placeholder: '0', - fontFamily: '$mono', - '$theme-dark': { - placeholderTextColor: '$darkGrayTextField', - }, - '$theme-light': { - placeholderTextColor: '$darkGrayTextField', - }, - inputMode: coin?.decimals ? 'decimal' : 'numeric', - onChangeText: (amount) => { - const localizedAmount = localizeAmount(amount) - form.setValue('sendAmount', localizedAmount) - }, - onFocus: () => setInputFocus(true), - onBlur: () => setInputFocus(false), - fieldsetProps: { - width: '60%', - }, - }, - receiveAmount: { - testID: 'receive-amount-output', - disabled: true, - fontSize: (() => { - switch (true) { - case amount?.length <= 8: - return '$11' - case amount?.length > 16: - return '$7' - default: - return '$8' - } - })(), - $gtSm: { - fontSize: (() => { - switch (true) { - case amount?.length <= 9: - return '$10' - case amount?.length > 16: - return '$8' - default: - return '$10' - } - })(), - }, - color: '$color12', - fontWeight: '500', - bw: 0, - br: 0, - p: 1, - focusStyle: { - outlineWidth: 0, - }, - placeholder: '0', - fontFamily: '$mono', - '$theme-dark': { - placeholderTextColor: '$darkGrayTextField', - }, - '$theme-light': { - placeholderTextColor: '$darkGrayTextField', - }, - fieldsetProps: { - width: '60%', - }, - defaultValue: receiveAmount, - }, - }} - formProps={{ - testID: 'SendForm', - justifyContent: 'space-between', - $gtSm: { - maxWidth: '100%', - justifyContent: 'space-between', - }, - }} - renderAfter={({ submit }) => ( - - SWAP - - )} - > - {({ sendAmount, receiveAmount }) => ( - - - - - - - - - - You Pay - - - {insufficientAmount && ( - - Insufficient funds - - )} - - - - {sendAmount} - - handleTokenChange(token, true)} - /> - - - - $ - {inputUsdValue || - fromTokenMarketPrice?.[fromToken?.coingeckoTokenId ?? '']?.usd || - '0'} - - - - {fromToken - ? formatAmount( - formatUnits(fromToken.balance ?? BigInt(0), fromToken.decimals) - ) - : '0'}{' '} - {fromToken?.label ?? ''} - - - - - - - - - - - - - - - - - - You Receive - - - - - {receiveAmount} - - c.token !== fromToken?.token)} - onTokenChange={(token) => handleTokenChange(token, false)} - /> - - - $ - {outputUsdValue || - toTokenMarketPrice?.[toToken?.coingeckoTokenId ?? '']?.usd || - '0'} - - - - - - - )} - - - ) -} diff --git a/packages/app/features/swap/constants.ts b/packages/app/features/swap/constants.ts new file mode 100644 index 000000000..b91c0f6d2 --- /dev/null +++ b/packages/app/features/swap/constants.ts @@ -0,0 +1,2 @@ +export const SWAP_ROUTE_SUMMARY_QUERY_KEY = 'swapRouteSummary' +export const DEFAULT_SLIPPAGE = 50 diff --git a/packages/app/features/swap/hooks/useSwap.ts b/packages/app/features/swap/hooks/useSwap.ts new file mode 100644 index 000000000..8a6a68ad2 --- /dev/null +++ b/packages/app/features/swap/hooks/useSwap.ts @@ -0,0 +1,80 @@ +import { encodeFunctionData, erc20Abi, type Hex } from 'viem' +import { useSendAccount } from 'app/utils/send-accounts' +import { useMemo } from 'react' +import { useUserOp } from 'app/utils/userop' +import { useUSDCFees } from 'app/utils/useUSDCFees' + +export const useSwap = ({ + swapCallData, + routerAddress, + token, + amount, +}: { + token?: Hex | 'eth' + amount?: bigint + swapCallData?: Hex + routerAddress?: Hex +}) => { + const { data: sendAccount } = useSendAccount() + const sender = useMemo(() => sendAccount?.address, [sendAccount?.address]) + + const calls = useMemo(() => { + if (!token || !amount || !swapCallData || !routerAddress) { + return undefined + } + + if (token === 'eth') { + return [ + { + dest: routerAddress, + value: amount, + data: swapCallData, + }, + ] + } + + return [ + { + dest: token, + value: 0n, + data: encodeFunctionData({ + abi: erc20Abi, + functionName: 'approve', + args: [routerAddress, amount], + }), + }, + { + dest: routerAddress, + value: 0n, + data: swapCallData, + }, + ] + }, [token, routerAddress, amount, swapCallData]) + + const { + data: userOp, + error: userOpError, + isLoading: isLoadingUserOp, + } = useUserOp({ + sender, + calls, + callGasLimit: 2000000n, + }) + + const { + data: usdcFees, + isLoading: isLoadingUSDCFees, + error: usdcFeesError, + } = useUSDCFees({ + userOp, + }) + + return { + userOp, + userOpError, + isLoadingUserOp, + usdcFees, + usdcFeesError, + isLoadingUSDCFees, + } +} diff --git a/packages/app/features/swap/screen.test.tsx b/packages/app/features/swap/screen.test.tsx deleted file mode 100644 index 52caa7db9..000000000 --- a/packages/app/features/swap/screen.test.tsx +++ /dev/null @@ -1,179 +0,0 @@ -import { act, render, screen, userEvent, waitFor } from '@testing-library/react-native' -import { Provider } from 'app/__mocks__/app/provider' -import { TamaguiProvider, config } from '@my/ui' -import { useRouter } from 'app/__mocks__/expo-router' -import { QueryClient, QueryClientProvider } from '@tanstack/react-query' -import SwapScreen from './screen' - -jest.mock('app/utils/useCoinFromTokenParam', () => ({ - useCoinFromTokenParam: jest.fn().mockReturnValue({ - coin: { - label: 'USDC', - symbol: 'USDC', - token: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913', - balance: 1_000_000n, - decimals: 6, - coingeckoTokenId: 'usd-coin', - }, - isLoading: false, - }), -})) - -jest.mock('app/provider/coins', () => ({ - useCoins: jest.fn().mockReturnValue({ - coins: [ - { - label: 'SEND', - symbol: 'SEND', - token: '0xEab49138BA2Ea6dd776220fE26b7b8E446638956', - balance: BigInt(500000), - decimals: 18, - coingeckoTokenId: 'send-token', - }, - ], - }), -})) - -jest.mock('app/utils/coin-gecko', () => ({ - useTokenMarketData: jest.fn().mockReturnValue({ - data: [ - { - id: 'usd-coin', - symbol: 'usdc', - name: 'USDC', - image: 'https://coin-images.coingecko.com/coins/images/6319/large/usdc.png?1696506694', - current_price: 1.5, - market_cap: 52512229982, - price_change_percentage_24h: 2.5, - }, - ], - isLoading: false, - }), - - useTokenPrice: jest.fn().mockImplementation((tokenId) => { - const prices = { - 'usd-coin': { usd: 1.5 }, - } - return { data: prices[tokenId] || { usd: 0 }, isLoading: false } - }), -})) - -jest.mock('app/utils/useTokenPrices', () => ({ - useTokenPrices: jest.fn().mockReturnValue({ - data: { - '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913': 1.5, - }, - isLoading: false, - }), -})) - -jest.mock('app/utils/swap-token', () => ({ - useSwapToken: jest.fn().mockImplementation(() => ({ - data: { - outputAmount: '72232173016371', - }, - isLoading: false, - })), -})) - -describe('SwapScreen', () => { - let queryClient: QueryClient - - beforeEach(() => { - jest.useFakeTimers() - queryClient = new QueryClient() - - useRouter.mockImplementation(() => ({ - query: { token: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913' }, - push: jest.fn(), - })) - }) - - afterEach(() => { - jest.useRealTimers() - }) - - const renderWithProviders = () => { - return render( - - - - - - - - ) - } - - it('should match snapshot', async () => { - const tree = render( - - - - - - ).toJSON() - - expect(tree).toMatchSnapshot() - }) - - it('should render the swap screen with default values', async () => { - renderWithProviders() - - expect(screen.getByText('Swap')).toBeTruthy() - expect(screen.getByText('You Pay')).toBeTruthy() - expect(screen.getByText('You Receive')).toBeTruthy() - - const fromDropdownButton = screen.getByTestId('fromdropdown-button') - const toDropdownButton = screen.getByTestId('todropdown-button') - - await waitFor(() => expect(fromDropdownButton).toHaveTextContent('USDC')) - await waitFor(() => expect(toDropdownButton).toHaveTextContent('SEND')) - }) - - it('should allow input of send amount and display calculated receive amount', async () => { - const outputAmount = '72232173016371' - jest.mock('app/utils/swap-token', () => ({ - useSwapToken: jest.fn().mockImplementation(() => ({ - data: { outputAmount }, - isLoading: false, - })), - })) - - renderWithProviders() - - const sendInput = screen.getByTestId('send-amount-input') - await userEvent.type(sendInput, '1') - - expect(sendInput).toHaveDisplayValue('1') - - await act(async () => { - jest.runOnlyPendingTimers() - jest.advanceTimersByTime(500) - jest.runAllTimers() - }) - - await waitFor(() => { - const receiveInput = screen.getByTestId('receive-amount-output') - - const outputAmountInWei = BigInt(outputAmount) - const toTokenDecimals = 18 - - const expectedReceiveAmount = (Number(outputAmountInWei) / 10 ** toTokenDecimals).toFixed(6) - expect(receiveInput).toHaveDisplayValue(expectedReceiveAmount) - }) - }, 10000) - - it('should swap tokens when swap button is clicked', async () => { - renderWithProviders() - - expect(screen.getByTestId('fromdropdown-button')).toHaveTextContent('USDC') - - const swapButton = screen.getByTestId('swap-button') - await userEvent.press(swapButton) - - await waitFor(() => { - expect(screen.getByTestId('todropdown-button')).toHaveTextContent('SEND') - }) - }) -}) diff --git a/packages/app/features/swap/screen.tsx b/packages/app/features/swap/screen.tsx deleted file mode 100644 index 0b68b8501..000000000 --- a/packages/app/features/swap/screen.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { H3, YStack } from 'tamagui' -import { TokenDetailsMarketData } from 'app/components/TokenDetailsMarketData' -import { useCoinFromTokenParam } from 'app/utils/useCoinFromTokenParam' -import SwapForm from './components/SwapForm' - -export default function SwapScreen() { - const { coin } = useCoinFromTokenParam() - - return ( - - -

Swap

- {coin && } - - - - ) -} diff --git a/packages/app/routers/params.tsx b/packages/app/routers/params.tsx index 18b1d9a74..b46414485 100644 --- a/packages/app/routers/params.tsx +++ b/packages/app/routers/params.tsx @@ -1,5 +1,5 @@ import type { Enums } from '@my/supabase/database.types' -import { baseMainnet, usdcAddress } from '@my/wagmi' +import { baseMainnet, sendTokenAddress, usdcAddress } from '@my/wagmi' import { allCoinsDict, type allCoins } from 'app/data/coins' import { createParam } from 'solito' import { isAddress, type Address } from 'viem' @@ -111,20 +111,22 @@ const useAmount = () => { return [amount, setAmountParam] as const } +const parseTokenParam = (value) => { + if (Array.isArray(value)) { + return isAddress(value[0] ?? '') || Object.keys(allCoinsDict).includes(value[0] ?? '') + ? (value[0] as allCoins[number]['token']) + : usdcAddress[baseMainnet.id] + } + + return isAddress(value ?? '') || Object.keys(allCoinsDict).includes(value ?? '') + ? (value as allCoins[number]['token']) + : usdcAddress[baseMainnet.id] +} + export const useSendToken = () => { const [sendToken, setSendTokenParam] = useSendParam('sendToken', { initial: usdcAddress[baseMainnet.id], - parse: (value) => { - if (Array.isArray(value)) { - return isAddress(value[0] ?? '') || Object.keys(allCoinsDict).includes(value[0] ?? '') - ? (value[0] as allCoins[number]['token']) - : usdcAddress[baseMainnet.id] - } - - return isAddress(value ?? '') || Object.keys(allCoinsDict).includes(value ?? '') - ? (value as allCoins[number]['token']) - : usdcAddress[baseMainnet.id] - }, + parse: parseTokenParam, }) return [sendToken, setSendTokenParam] as const @@ -212,3 +214,60 @@ export const useAuthScreenParams = () => { setParams, ] as const } + +export type SwapScreenParams = { + outToken: allCoins[number]['token'] + inToken: allCoins[number]['token'] + inAmount?: string + slippage?: string +} + +const { useParam: useSwapParam, useParams: useSwapParams } = createParam() + +const useInToken = () => { + const [inToken, setInToken] = useSwapParam('inToken', { + initial: usdcAddress[baseMainnet.id], + parse: parseTokenParam, + }) + + return [inToken, setInToken] as const +} + +const useOutToken = () => { + const [outToken, setOutToken] = useSwapParam('outToken', { + initial: sendTokenAddress[baseMainnet.id], + parse: parseTokenParam, + }) + + return [outToken, setOutToken] as const +} + +const useInAmount = () => { + const [inAmount, setInAmount] = useSwapParam('inAmount') + + return [inAmount, setInAmount] as const +} + +const useSlippage = () => { + const [slippage, setSlippage] = useSwapParam('slippage') + + return [slippage, setSlippage] as const +} + +export const useSwapScreenParams = () => { + const { setParams } = useSwapParams() + const [outToken] = useOutToken() + const [inToken] = useInToken() + const [inAmount] = useInAmount() + const [slippage] = useSlippage() + + return [ + { + outToken, + inToken, + inAmount, + slippage, + }, + setParams, + ] as const +} diff --git a/packages/app/utils/sendUserOp.ts b/packages/app/utils/sendUserOp.ts index ceeffb9d4..5ea864ad2 100644 --- a/packages/app/utils/sendUserOp.ts +++ b/packages/app/utils/sendUserOp.ts @@ -1,8 +1,10 @@ -import type { UserOperation } from 'permissionless' +import type { UserOperation, GetUserOperationReceiptReturnType } from 'permissionless' import { baseMainnetClient, entryPointAddress, baseMainnetBundlerClient } from '@my/wagmi' import type { CallExecutionError } from 'viem' import { signUserOp } from './signUserOp' -import { throwNiceError } from './userop' +import { throwNiceError, useAccountNonce } from './userop' +import { assert } from 'app/utils/assert' +import { useMutation, useQueryClient } from '@tanstack/react-query' export interface SendUserOpArgs { /** @@ -23,12 +25,29 @@ export interface SendUserOpArgs { webauthnCreds: { raw_credential_id: `\\x${string}`; name: string }[] } +export function useSendUserOpMutation() { + const queryClient = useQueryClient() + + return useMutation({ + mutationFn: sendUserOp, + onSettled: () => { + void queryClient.invalidateQueries({ queryKey: [useAccountNonce.queryKey] }) + }, + }) +} + /** - * Sign and sends a user op. Returns the hash of the user op. + * Sign and sends a user op. Returns the receipt of the user op. */ -export async function sendUserOp({ userOp, version, validUntil, webauthnCreds }: SendUserOpArgs) { +export async function sendUserOp({ + userOp, + version, + validUntil, + webauthnCreds, +}: SendUserOpArgs): Promise { const chainId = baseMainnetClient.chain.id const entryPoint = entryPointAddress[chainId] + // simulate await baseMainnetClient .call({ @@ -52,9 +71,15 @@ export async function sendUserOp({ userOp, version, validUntil, webauthnCreds }: entryPoint, }) - return await baseMainnetBundlerClient + const hash = await baseMainnetBundlerClient .sendUserOperation({ userOperation: userOp, }) .catch((e) => throwNiceError(e)) + + const receipt = await baseMainnetBundlerClient.waitForUserOperationReceipt({ hash }) + + assert(receipt.success, 'Failed to send userOp') + + return receipt } diff --git a/packages/app/utils/swap-token/index.ts b/packages/app/utils/swap-token/index.ts deleted file mode 100644 index 2c12b57f3..000000000 --- a/packages/app/utils/swap-token/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { useSwapToken } from './useSwapToken' diff --git a/packages/app/utils/swap-token/useSwapToken.ts b/packages/app/utils/swap-token/useSwapToken.ts deleted file mode 100644 index f26e7947b..000000000 --- a/packages/app/utils/swap-token/useSwapToken.ts +++ /dev/null @@ -1,117 +0,0 @@ -import { useQuery, queryOptions } from '@tanstack/react-query' -import { z } from 'zod' -import { useSendAccount } from '../send-accounts' - -const KYBER_SWAP_BASE_URL = 'https://aggregator-api.kyberswap.com' - -interface SwapRouteParams { - tokenIn?: string - tokenOut?: string - amountIn: string - chain?: string - to?: string - clientId?: string -} - -const TokenDetailsSchema = z.object({ - address: z.string(), - symbol: z.string(), - name: z.string(), - price: z.number(), - decimals: z.number(), -}) - -const SwapSchema = z.object({ - pool: z.string(), - tokenIn: z.string(), - tokenOut: z.string(), - limitReturnAmount: z.string(), - swapAmount: z.string(), - amountOut: z.string(), - exchange: z.string(), - poolLength: z.number(), - poolType: z.string(), - poolExtra: z - .object({ - fee: z.number().optional(), - feePrecision: z.number().optional(), - blockNumber: z.number().optional(), - priceLimit: z.number().optional(), - }) - .optional(), - extra: z.record(z.unknown()).nullable().optional(), - maxPrice: z.string().optional(), -}) - -const SwapRouteResponseSchema = z.object({ - inputAmount: z.string(), - outputAmount: z.string(), - totalGas: z.number(), - gasPriceGwei: z.string(), - gasUsd: z.number(), - amountInUsd: z.number(), - amountOutUsd: z.number(), - receivedUsd: z.number(), - swaps: z.array(z.array(SwapSchema)), - tokens: z.record(TokenDetailsSchema), - encodedSwapData: z.string(), - routerAddress: z.string(), -}) - -export type SwapRouteResponse = z.infer - -const fetchSwapRoute = async ({ - chain = 'base', - tokenIn, - tokenOut, - amountIn, - to, - clientId = 'SendApp', -}: SwapRouteParams): Promise => { - if (!tokenIn || !tokenOut || !to) { - throw new Error('tokenIn, tokenOut, and to are required') - } - - const url = new URL(`${KYBER_SWAP_BASE_URL}/${chain}/route/encode`) - url.searchParams.append('tokenIn', tokenIn) - url.searchParams.append('tokenOut', tokenOut) - url.searchParams.append('amountIn', amountIn) - url.searchParams.append('to', to) - - const response = await fetch(url.toString(), { - method: 'GET', - headers: { - 'x-client-id': clientId, - }, - }) - - if (!response.ok) { - throw new Error(`Failed to fetch swap route: ${response.statusText}`) - } - - const jsonResponse = await response.json() - const parsedResponse = SwapRouteResponseSchema.parse(jsonResponse) - return parsedResponse -} - -const useSwapRouteQueryKey = 'swap_route' - -export function useSwapToken({ tokenIn, tokenOut, amountIn }: SwapRouteParams) { - const { data: sendAccount } = useSendAccount() - - return useQuery( - queryOptions({ - queryKey: [useSwapRouteQueryKey, tokenIn, tokenOut, amountIn, sendAccount?.address], - enabled: Boolean(tokenIn && tokenOut && amountIn && sendAccount?.address), - queryFn: () => - fetchSwapRoute({ - tokenIn, - tokenOut, - amountIn, - to: sendAccount?.address, - }), - }) - ) -} - -useSwapToken.queryKey = useSwapRouteQueryKey diff --git a/packages/app/utils/userop.ts b/packages/app/utils/userop.ts index 0deb208af..f0097d1df 100644 --- a/packages/app/utils/userop.ts +++ b/packages/app/utils/userop.ts @@ -109,7 +109,11 @@ export function generateChallenge({ userOpHash, version = USEROP_VERSION, validUntil, -}: { userOpHash: Hex; version?: number; validUntil: number }): { +}: { + userOpHash: Hex + version?: number + validUntil: number +}): { challenge: Hex versionBytes: Uint8Array validUntilBytes: Uint8Array @@ -131,7 +135,9 @@ const useAccountNonceQueryKey = 'accountNonce' export function useAccountNonce({ sender, -}: { sender: Address | undefined }): UseQueryReturnType { +}: { + sender: Address | undefined +}): UseQueryReturnType { return useWagmiQuery({ queryKey: [useAccountNonceQueryKey, sender], queryFn: async () => { diff --git a/packages/wagmi/src/generated.ts b/packages/wagmi/src/generated.ts index 6f6263843..ba188f3c8 100644 --- a/packages/wagmi/src/generated.ts +++ b/packages/wagmi/src/generated.ts @@ -2959,6 +2959,31 @@ export const sendRevenueSafeConfig = { abi: sendRevenueSafeAbi, } as const +////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// +// SendSwapsRevenueSafe +////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// + +/** + * [__View Contract on Base Basescan__](https://basescan.org/address/0x17D46f667B0e4156238645536c344d010FC099d7) + */ +export const sendSwapsRevenueSafeAbi = [] as const + +/** + * [__View Contract on Base Basescan__](https://basescan.org/address/0x17D46f667B0e4156238645536c344d010FC099d7) + */ +export const sendSwapsRevenueSafeAddress = { + 8453: '0x17D46f667B0e4156238645536c344d010FC099d7', + 845337: '0x17D46f667B0e4156238645536c344d010FC099d7', +} as const + +/** + * [__View Contract on Base Basescan__](https://basescan.org/address/0x17D46f667B0e4156238645536c344d010FC099d7) + */ +export const sendSwapsRevenueSafeConfig = { + address: sendSwapsRevenueSafeAddress, + abi: sendSwapsRevenueSafeAbi, +} as const + ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // SendToken ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// diff --git a/packages/wagmi/wagmi.config.ts b/packages/wagmi/wagmi.config.ts index 15fe48dc9..fb6250300 100644 --- a/packages/wagmi/wagmi.config.ts +++ b/packages/wagmi/wagmi.config.ts @@ -95,6 +95,17 @@ export default defineConfig({ }, abi: [], }, + /** + * [Send: Swaps Revenue](https://basescan.org/address/0x17D46f667B0e4156238645536c344d010FC099d7) + **/ + { + name: 'SendSwapsRevenueSafe', + address: { + [baseLocal.id]: '0x17D46f667B0e4156238645536c344d010FC099d7', + [base.id]: '0x17D46f667B0e4156238645536c344d010FC099d7', + }, + abi: [], + }, { /** * [Send: Treasury](https://basescan.org/address/0x05CEa6C36f3a44944A4F4bA39B1820677AcB97EE) From 8da82e1c3a0764277bb820ea2043269407882ffb Mon Sep 17 00:00:00 2001 From: musidlo Date: Tue, 11 Mar 2025 23:13:26 +0100 Subject: [PATCH 08/12] Finished swaps UI --- apps/next/pages/swap/index.tsx | 2 +- .../app/components/FormFields/CoinField.tsx | 47 ++++-- packages/app/features/swap/SwapForm.tsx | 111 ++++++------- packages/app/features/swap/SwapSummary.tsx | 146 ++++++++++++------ packages/app/provider/coins/CoinsProvider.tsx | 24 ++- 5 files changed, 208 insertions(+), 122 deletions(-) diff --git a/apps/next/pages/swap/index.tsx b/apps/next/pages/swap/index.tsx index 2159c69d2..76bf11fdc 100644 --- a/apps/next/pages/swap/index.tsx +++ b/apps/next/pages/swap/index.tsx @@ -19,7 +19,7 @@ export const Page: NextPageWithLayout = () => { export const getServerSideProps = userProtectedGetSSP() Page.getLayout = (children) => ( - }>{children} + }>{children} ) export default Page diff --git a/packages/app/components/FormFields/CoinField.tsx b/packages/app/components/FormFields/CoinField.tsx index 66cbe4ced..2931eb465 100644 --- a/packages/app/components/FormFields/CoinField.tsx +++ b/packages/app/components/FormFields/CoinField.tsx @@ -4,8 +4,8 @@ import { FieldError, Fieldset, getFontSize, - isWeb, isTouchable, + isWeb, Paragraph, Select, type SelectProps, @@ -26,13 +26,21 @@ import { useId, useState } from 'react' import { IconCoin } from '../icons/IconCoin' import type { CoinWithBalance } from 'app/data/coins' import { useCoins } from 'app/provider/coins' +import { useHoverStyles } from 'app/utils/useHoverStyles' export const CoinField = ({ native = false, + showAllCoins = false, ...props -}: Pick) => { +}: { showAllCoins?: boolean } & Pick< + SelectProps, + 'size' | 'native' | 'defaultValue' | 'onValueChange' +>) => { const [isOpen, setIsOpen] = useState(false) - const { coins } = useCoins() + const { coins: _coins, allCoins } = useCoins() + const hoverStyles = useHoverStyles() + + const coins = showAllCoins ? allCoins : _coins const { field, @@ -62,16 +70,18 @@ export const CoinField = ({ > @@ -88,7 +98,7 @@ export const CoinField = ({ color={'$color12'} placeholder={'Token'} $gtSm={{ - size: '$8', + size: '$5', }} /> @@ -136,14 +146,14 @@ export const CoinField = ({ - + {/* {label} */} {coins - .filter((coin) => coin.balance && coin.balance >= 0n) + .filter((coin) => showAllCoins || (coin.balance && coin.balance >= 0n)) .map((coin, i) => { return ( { return ( - + } return ( - + {formatAmount((Number(balance) / 10 ** decimals).toString())} ) diff --git a/packages/app/features/swap/SwapForm.tsx b/packages/app/features/swap/SwapForm.tsx index a6c843e8c..09caf96b9 100644 --- a/packages/app/features/swap/SwapForm.tsx +++ b/packages/app/features/swap/SwapForm.tsx @@ -28,17 +28,6 @@ import { useThemeSetting } from '@tamagui/next-theme' import { useQueryClient } from '@tanstack/react-query' import { DEFAULT_SLIPPAGE, SWAP_ROUTE_SUMMARY_QUERY_KEY } from 'app/features/swap/constants' -// todo mobile -// todo white - -// TODO bug z pojawiającym sie tekstem po usunieciu - -// TODO komponent wyboru tokena potrzebuje zmian, -// 1. nie widac na nim nie posiadanych tokenów co jest złe dla docelowego, -// 2. nie powinno być można tych samych ustawić, -// 3. jego wyglad sie zmienił, -// 4. czasem moneta sie zle pokazuje - const SwapFormSchema = z.object({ outToken: formFields.coin, inToken: formFields.coin, @@ -157,9 +146,8 @@ export const SwapForm = () => { } }, [form.watch, onFormChange]) - // TODO useEffect(() => { - if (!swapRoute) { + if (!swapRoute || !formInAmount) { return } @@ -167,7 +155,7 @@ export const SwapForm = () => { 'outAmount', localizeAmount(formatUnits(BigInt(swapRoute.routeSummary.amountOut), outCoin?.decimals || 0)) ) - }, [swapRoute, outCoin?.decimals, form.setValue]) + }, [swapRoute, outCoin?.decimals, form.setValue, formInAmount]) useEffect(() => { queryClient.removeQueries({ queryKey: [SWAP_ROUTE_SUMMARY_QUERY_KEY] }) @@ -192,12 +180,12 @@ export const SwapForm = () => { inAmount: { fontSize: (() => { switch (true) { - case formInAmount?.length <= 8: - return '$11' case formInAmount?.length > 16: return '$7' - default: + case formInAmount?.length > 8: return '$8' + default: + return '$9' } })(), $gtSm: { @@ -240,18 +228,18 @@ export const SwapForm = () => { onFocus: () => setIsInputFocused(true), onBlur: () => setIsInputFocused(false), fieldsetProps: { - width: '65%', + width: '60%', }, }, outAmount: { fontSize: (() => { switch (true) { - case formOutAmount?.length <= 8: - return '$11' case formOutAmount?.length > 16: return '$7' - default: + case formOutAmount?.length > 8: return '$8' + default: + return '$9' } })(), $gtSm: { @@ -283,18 +271,42 @@ export const SwapForm = () => { placeholderTextColor: '$darkGrayTextField', }, fieldsetProps: { - width: '65%', + width: '60%', }, pointerEvents: 'none', + textOverflow: 'ellipsis', + }, + inToken: { + defaultValue: inToken, + showAllCoins: true, + onValueChange: (value) => { + if (value === outToken) { + handleFlipTokens() + return + } + + form.setValue('inToken', value) + }, + }, + outToken: { + defaultValue: outToken, + showAllCoins: true, + onValueChange: (value) => { + if (value === inToken) { + handleFlipTokens() + return + } + + form.setValue('outToken', value) + }, }, }} formProps={{ footerProps: { pb: 0 }, - justifyContent: 'space-between', $gtSm: { maxWidth: '100%', - justifyContent: 'space-between', }, + style: { justifyContent: 'space-between' }, }} defaultValues={{ inToken: inCoin?.token, @@ -346,7 +358,7 @@ export const SwapForm = () => { You Pay - + {inAmount} {inToken} { - ))} - - + + {SLIPPAGE_OPTIONS.map((slippageOption) => ( + + ))} + { const router = useRouter() const [swapParams] = useSwapScreenParams() @@ -48,8 +43,11 @@ export const SwapSummary = () => { swapCallData: encodedRoute?.data, }) - const { mutateAsync: sendUserOpMutateAsync, isPending: isSendUserOpPending } = - useSendUserOpMutation() + const { + mutateAsync: sendUserOpMutateAsync, + isPending: isSendUserOpPending, + error: sendUserOpError, + } = useSendUserOpMutation() const webauthnCreds = sendAccount?.send_account_credentials @@ -105,18 +103,26 @@ export const SwapSummary = () => { }, [sendAccount, routeSummary, encodeRouteMutateAsync, slippage, sendAccount?.address]) const submit = async () => { - await sendUserOpMutateAsync({ - userOp: { - ...userOp, - callGasLimit: 3000000n, // TODO - preVerificationGas: 100000n, // TODO - }, - webauthnCreds, - }) + if (!userOp) { + return + } - await tokensQuery.refetch() - await ethQuery.refetch() - router.push(`/?token=${outCoin?.token}`) + try { + await sendUserOpMutateAsync({ + userOp: { + ...userOp, + callGasLimit: 3000000n, // TODO + preVerificationGas: 100000n, // TODO + }, + webauthnCreds, + }) + + await tokensQuery.refetch() + await ethQuery.refetch() + router.push(`/?token=${outCoin?.token}`) + } catch (e) { + console.error(e) + } } useEffect(() => { @@ -145,53 +151,64 @@ export const SwapSummary = () => { > - Swap Summary - - - - You Pay - - - {amountIn} {inCoin?.symbol} + + { + switch (true) { + case amountIn?.length > 16: + return '$7' + case amountIn?.length > 8: + return '$8' + default: + return '$9' + } + })()} + $gtSm={{ size: '$9' }} + > + {amountIn} + - - - - You Receive - - - {amountOut} {outCoin?.symbol} + + { + switch (true) { + case amountOut?.length > 16: + return '$7' + case amountOut?.length > 8: + return '$8' + default: + return '$9' + } + })()} + $gtSm={{ size: '$9' }} + > + {amountOut} + { return userOpError?.message?.split('.').at(0) case !!usdcFeesError: return usdcFeesError?.message?.split('.').at(0) + case !!sendUserOpError: + return sendUserOpError?.message?.split('.').at(0) default: return '' } @@ -270,3 +289,30 @@ export const Row = ({ label, value }: { label: string; value: string }) => { ) } + +export const EditButton = () => { + const router = useRouter() + + const handlePress = () => { + router.back() + } + + return ( + + ) +} diff --git a/packages/app/provider/coins/CoinsProvider.tsx b/packages/app/provider/coins/CoinsProvider.tsx index 11b9c8ca4..3007fa35f 100644 --- a/packages/app/provider/coins/CoinsProvider.tsx +++ b/packages/app/provider/coins/CoinsProvider.tsx @@ -1,13 +1,14 @@ import { createContext, useContext, useMemo } from 'react' import { useSendAccountBalances } from 'app/utils/useSendAccountBalances' import type { allCoins, CoinWithBalance } from 'app/data/coins' -import { coins as coinsOg, partnerCoins } from 'app/data/coins' +import { coins as coinsOg, partnerCoins, allCoins as allCoinsList } from 'app/data/coins' import { isAddress } from 'viem' import type { UseQueryResult } from '@tanstack/react-query' import type { UseBalanceReturnType, UseReadContractsReturnType } from 'wagmi' type CoinsContextType = { coins: CoinWithBalance[] + allCoins: CoinWithBalance[] isLoading: boolean totalPrice: number | undefined ethQuery: UseBalanceReturnType @@ -47,7 +48,20 @@ export function CoinsProvider({ children }: { children: React.ReactNode }) { return [...coinsWithBalances, ...activePartnerCoins] }, [balanceData]) - return {children} + const allCoins = useMemo(() => { + const { balances } = balanceData + + return allCoinsList.map((coin) => ({ + ...coin, + balance: balances?.[coin.token === 'eth' ? coin.symbol : coin.token], + })) + }, [balanceData]) + + return ( + + {children} + + ) } export const useCoins = () => { @@ -60,12 +74,12 @@ export const useCoin = ( addressOrSymbol: allCoins[number]['symbol'] | allCoins[number]['token'] | undefined ) => { const meta = useCoins() - const { coins, ...rest } = meta + const { allCoins, ...rest } = meta if (!addressOrSymbol) return { coin: undefined, ...rest } const coin = isAddress(addressOrSymbol) || addressOrSymbol === 'eth' - ? coins.find((coin) => coin.token === addressOrSymbol) - : coins.find((coin) => coin.symbol === addressOrSymbol) + ? allCoins.find((coin) => coin.token === addressOrSymbol) + : allCoins.find((coin) => coin.symbol === addressOrSymbol) if (!coin) throw new Error(`Coin not found for ${addressOrSymbol}`) return { coin, ...rest } } From faa97f53b716e3717c8f25a132e2d1a85ef38c88 Mon Sep 17 00:00:00 2001 From: musidlo Date: Wed, 12 Mar 2025 14:43:17 +0100 Subject: [PATCH 09/12] Added better error handling and timeouts --- packages/app/features/swap/SwapForm.tsx | 4 ++ packages/app/features/swap/SwapSummary.tsx | 55 +++++++++++++++++++--- 2 files changed, 53 insertions(+), 6 deletions(-) diff --git a/packages/app/features/swap/SwapForm.tsx b/packages/app/features/swap/SwapForm.tsx index 09caf96b9..6f63ef64e 100644 --- a/packages/app/features/swap/SwapForm.tsx +++ b/packages/app/features/swap/SwapForm.tsx @@ -92,7 +92,11 @@ export const SwapForm = () => { const handleSubmit = () => { if (!canSubmit || !swapRoute) return + queryClient.setQueryDefaults([SWAP_ROUTE_SUMMARY_QUERY_KEY], { + gcTime: 20 * 60_000, // 20 minutes + }) queryClient.setQueryData([SWAP_ROUTE_SUMMARY_QUERY_KEY], swapRoute.routeSummary) + router.push({ pathname: '/swap/summary', query: swapParams }) } diff --git a/packages/app/features/swap/SwapSummary.tsx b/packages/app/features/swap/SwapSummary.tsx index 259efd25b..6a189a8da 100644 --- a/packages/app/features/swap/SwapSummary.tsx +++ b/packages/app/features/swap/SwapSummary.tsx @@ -33,6 +33,7 @@ export const SwapSummary = () => { data: encodedRoute, error: encodeRouteError, isPending: isEncodeRouteLoading, + status: encodeRouteStatus, } = api.swap.encodeSwapRoute.useMutation() const { userOp, userOpError, isLoadingUserOp, usdcFees, usdcFeesError, isLoadingUSDCFees } = @@ -130,10 +131,10 @@ export const SwapSummary = () => { router.push({ pathname: '/swap', query: swapParams }) } - if (!isEncodeRouteLoading && !encodedRoute) { + if (encodeRouteStatus === 'idle') { void encodeRoute() } - }, [routeSummary, swapParams, router.push, encodeRoute, isEncodeRouteLoading, encodedRoute]) + }, [routeSummary, swapParams, router.push, encodeRoute, encodeRouteStatus]) if (initLoading) { return @@ -258,16 +259,58 @@ export const SwapSummary = () => { ) From abab25ca1098e2bd96d11e9bc530c07745be0666 Mon Sep 17 00:00:00 2001 From: musidlo Date: Fri, 14 Mar 2025 10:49:35 +0100 Subject: [PATCH 10/12] Added menu entry for swaps --- .../app/components/sidebar/HomeSideBar.tsx | 6 + .../swap/__snapshots__/screen.test.tsx.snap | 2031 ----------------- .../features/swap/components/PopoverItem.tsx | 60 - .../swap/components/SlippageSelector.tsx | 102 - .../features/swap/components/TokenItem.tsx | 14 - 5 files changed, 6 insertions(+), 2207 deletions(-) delete mode 100644 packages/app/features/swap/__snapshots__/screen.test.tsx.snap delete mode 100644 packages/app/features/swap/components/PopoverItem.tsx delete mode 100644 packages/app/features/swap/components/SlippageSelector.tsx delete mode 100644 packages/app/features/swap/components/TokenItem.tsx diff --git a/packages/app/components/sidebar/HomeSideBar.tsx b/packages/app/components/sidebar/HomeSideBar.tsx index 11b93bb09..f7818dfca 100644 --- a/packages/app/components/sidebar/HomeSideBar.tsx +++ b/packages/app/components/sidebar/HomeSideBar.tsx @@ -19,6 +19,7 @@ import { IconDeviceReset, IconHome, IconSendLogo, + IconSwap, } from 'app/components/icons' import { SideBarNavLink } from 'app/components/sidebar/SideBarNavLink' @@ -40,6 +41,11 @@ const links = [ text: 'Send', href: '/send', }, + { + icon: , + text: 'Swap', + href: '/swap', + }, { icon: , text: 'Activity', diff --git a/packages/app/features/swap/__snapshots__/screen.test.tsx.snap b/packages/app/features/swap/__snapshots__/screen.test.tsx.snap deleted file mode 100644 index 3b4f7fc73..000000000 --- a/packages/app/features/swap/__snapshots__/screen.test.tsx.snap +++ /dev/null @@ -1,2031 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`SwapScreen should match snapshot 1`] = ` - - - - Swap - - - - 1 USDC = 1.50 USD - - - - 2.50% - - - - - - - - - - - - - - - - - - - - - - - - - You Pay - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - USDC - - - - - - - - - - - - - $ - 0 - - - - 1 - - USDC - - - - MAX - - - - - - - - - - - - - - - - - - - - - - - - - - - You Receive - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - SEND - - - - - - - - - - - - $ - 0 - - - - - - - - - - SWAP - - - - - - - -`; diff --git a/packages/app/features/swap/components/PopoverItem.tsx b/packages/app/features/swap/components/PopoverItem.tsx deleted file mode 100644 index b4aa0cca8..000000000 --- a/packages/app/features/swap/components/PopoverItem.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { Button, XStack, Popover } from '@my/ui' -import { ChevronDown } from '@tamagui/lucide-icons' -import type { CoinWithBalance } from 'app/data/coins' -import TokenItem from './TokenItem' - -interface PopoverItemProps { - isOpen: boolean - onOpenChange: (isOpen: boolean) => void - selectedToken?: CoinWithBalance - coins: CoinWithBalance[] - onTokenChange: (token: CoinWithBalance) => void - testID: string -} - -export default function PopoverItem({ - isOpen, - onOpenChange, - selectedToken, - coins, - onTokenChange, - testID, -}: PopoverItemProps) { - return ( - - - - - - {coins.map((token) => ( - onTokenChange(token)} - hoverStyle={{ bg: '$color3' }} - > - - - ))} - - - ) -} diff --git a/packages/app/features/swap/components/SlippageSelector.tsx b/packages/app/features/swap/components/SlippageSelector.tsx deleted file mode 100644 index 17ffe15b9..000000000 --- a/packages/app/features/swap/components/SlippageSelector.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import { Button, Card, XStack, Paragraph, YStack, Input } from '@my/ui' -import { ChevronUp, ChevronDown } from '@tamagui/lucide-icons' -import { useState } from 'react' -import type { NativeSyntheticEvent, TextInputChangeEventData } from 'react-native' - -type SlippageSelectorProps = { - value: number - onSlippageChange: (value: number) => void -} - -export default function SlippageSelector({ value, onSlippageChange }: SlippageSelectorProps) { - const [isOpen, setIsOpen] = useState(false) - const [isCustom, setIsCustom] = useState(false) - - const handleToggle = () => setIsOpen(!isOpen) - - const handleSlippageChange = (newValue: number) => { - setIsCustom(false) - onSlippageChange(newValue) - } - - const handleCustomInputToggle = () => { - setIsCustom(true) - } - - const handleCustomInputChange = (e: NativeSyntheticEvent) => { - const customValue = e.nativeEvent.text - const parsedValue = Number.parseFloat(customValue) - - if (!Number.isNaN(parsedValue)) { - onSlippageChange(parsedValue) - } - } - - return ( - - - - Max Slippage: - - - - {value}% - - {isOpen ? ( - - ) : ( - - )} - - - - {isOpen && ( - - - {[0.1, 0.5, 1].map((option) => ( - - ))} - - - - {isCustom && ( - - )} - - )} - - ) -} diff --git a/packages/app/features/swap/components/TokenItem.tsx b/packages/app/features/swap/components/TokenItem.tsx deleted file mode 100644 index 1ec495a20..000000000 --- a/packages/app/features/swap/components/TokenItem.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { XStack, Paragraph } from '@my/ui' -import { IconCoin } from 'app/components/icons/IconCoin' -import type { CoinWithBalance } from 'app/data/coins' - -export default function TokenItem({ coin }: { coin: CoinWithBalance }) { - return ( - - - - {coin.label} - - - ) -} From 74ce93667e0bfc8511efa77c19bcb30a7ea82705 Mon Sep 17 00:00:00 2001 From: musidlo Date: Fri, 14 Mar 2025 12:12:40 +0100 Subject: [PATCH 11/12] Added menu entry for swaps --- .env.development | 2 - .env.local.template | 1 + environment.d.ts | 15 ++++ .../app/components/sidebar/HomeSideBar.tsx | 8 +- packages/app/features/home/TokenDetails.tsx | 80 ++++++++++--------- packages/app/features/swap/constants.ts | 1 + patch.diff | 14 ---- 7 files changed, 67 insertions(+), 54 deletions(-) delete mode 100644 patch.diff diff --git a/.env.development b/.env.development index 62d2c2215..11f163283 100644 --- a/.env.development +++ b/.env.development @@ -3,5 +3,3 @@ NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321 NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0 NEXT_PUBLIC_MAINNET_CHAIN_ID=1337 NEXT_PUBLIC_BASE_CHAIN_ID=845337 -NEXT_PUBLIC_KYBER_SWAP_BASE_URL=https://aggregator-api.kyberswap.com -NEXT_PUBLIC_KYBER_CLIENT_ID=SendApp diff --git a/.env.local.template b/.env.local.template index 20e9de928..3c3f38c0d 100644 --- a/.env.local.template +++ b/.env.local.template @@ -15,6 +15,7 @@ NEXT_PUBLIC_CDP_APP_ID="0000000-0000-0000-0000-000000000000" NEXT_PUBLIC_ONCHAINKIT_API_KEY="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" NEXT_PUBLIC_KYBER_SWAP_BASE_URL=https://aggregator-api.kyberswap.com NEXT_PUBLIC_KYBER_CLIENT_ID=SendApp +NEXT_PUBLIC_SWAP_ALLOWLIST=0000000-0000-0000-0000-000000000000,1111111-1111-1111-1111-111111111111 SECRET_SHOP_PRIVATE_KEY=0x5de4111afa1a4b94908f83103eb1f1706367c2e68ca870fc3fb9a804cdab365a SEND_ACCOUNT_FACTORY_PRIVATE_KEY=0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d SNAPLET_HASH_KEY=sendapp diff --git a/environment.d.ts b/environment.d.ts index 198b896e9..52f58c31b 100644 --- a/environment.d.ts +++ b/environment.d.ts @@ -54,6 +54,21 @@ declare global { * Onramp Allowlist (comma separated list of user ids that can see the debit card option) */ NEXT_PUBLIC_ONRAMP_ALLOWLIST: string + + /** + * Kyberswap aggregator API URL for base mainnet + */ + NEXT_PUBLIC_KYBER_SWAP_BASE_URL: string + + /** + * Kyberswap clientId, a stricter rate limit will be applied if a clientId is not provided + */ + NEXT_PUBLIC_KYBER_CLIENT_ID: string + + /** + * Swap Allowlist (comma separated list of user ids that can see the debit card option) + */ + NEXT_PUBLIC_SWAP_ALLOWLIST: string } } /** diff --git a/packages/app/components/sidebar/HomeSideBar.tsx b/packages/app/components/sidebar/HomeSideBar.tsx index f7818dfca..7eafec7b3 100644 --- a/packages/app/components/sidebar/HomeSideBar.tsx +++ b/packages/app/components/sidebar/HomeSideBar.tsx @@ -29,6 +29,8 @@ import { NavSheet } from '../NavSheet' import { useUser } from 'app/utils/useUser' import { ReferralLink } from '../ReferralLink' import { useHoverStyles } from 'app/utils/useHoverStyles' +import { useSendAccount } from 'app/utils/send-accounts' +import { SWAP_ENABLED_USERS } from 'app/features/swap/constants' const links = [ { @@ -66,6 +68,10 @@ const links = [ ].filter(Boolean) as { icon: ReactElement; text: string; href: string }[] const HomeSideBar = ({ ...props }: YStackProps) => { + const { data: sendAccount } = useSendAccount() + const isSwapEnabled = sendAccount?.id && SWAP_ENABLED_USERS.includes(sendAccount.id) + const _links = isSwapEnabled ? links : links.filter((link) => link.href !== '/swap') + return ( @@ -73,7 +79,7 @@ const HomeSideBar = ({ ...props }: YStackProps) => { - {links.map((link) => ( + {_links.map((link) => ( ))} diff --git a/packages/app/features/home/TokenDetails.tsx b/packages/app/features/home/TokenDetails.tsx index 0af3334a9..d17d03cef 100644 --- a/packages/app/features/home/TokenDetails.tsx +++ b/packages/app/features/home/TokenDetails.tsx @@ -20,6 +20,8 @@ import { IconCoin } from 'app/components/icons/IconCoin' import { TokenDetailsMarketData } from 'app/components/TokenDetailsMarketData' import { useCoinFromTokenParam } from 'app/utils/useCoinFromTokenParam' import { useHoverStyles } from 'app/utils/useHoverStyles' +import { useSendAccount } from 'app/utils/send-accounts' +import { SWAP_ENABLED_USERS } from 'app/features/swap/constants' export function AnimateEnter({ children }: { children: React.ReactNode }) { return ( @@ -41,6 +43,8 @@ export function AnimateEnter({ children }: { children: React.ReactNode }) { export const TokenDetails = ({ coin }: { coin: CoinWithBalance }) => { const { coin: selectedCoin } = useCoinFromTokenParam() const hoverStyles = useHoverStyles() + const { data: sendAccount } = useSendAccount() + const isSwapEnabled = sendAccount?.id && SWAP_ENABLED_USERS.includes(sendAccount.id) const getSwapUrl = () => { if (selectedCoin?.symbol === sendCoin.symbol) { @@ -80,46 +84,48 @@ export const TokenDetails = ({ coin }: { coin: CoinWithBalance }) => { - - - - - - Deposit - - - - - - - + + + - - - Swap - - - - + + Deposit + + + + + + + + + + Swap + + + + + )} diff --git a/packages/app/features/swap/constants.ts b/packages/app/features/swap/constants.ts index b91c0f6d2..1fe1e8eee 100644 --- a/packages/app/features/swap/constants.ts +++ b/packages/app/features/swap/constants.ts @@ -1,2 +1,3 @@ export const SWAP_ROUTE_SUMMARY_QUERY_KEY = 'swapRouteSummary' export const DEFAULT_SLIPPAGE = 50 +export const SWAP_ENABLED_USERS = (process.env.NEXT_PUBLIC_SWAP_ALLOWLIST ?? '').split(',') diff --git a/patch.diff b/patch.diff deleted file mode 100644 index ac7d8e27d..000000000 --- a/patch.diff +++ /dev/null @@ -1,14 +0,0 @@ -diff --git a/tilt/infra.Tiltfile b/tilt/infra.Tiltfile -index 31c04d51..7ec46378 100644 ---- a/tilt/infra.Tiltfile -+++ b/tilt/infra.Tiltfile -@@ -242,7 +242,8 @@ local_resource( - -v ./apps/aabundler/etc:/app/etc/aabundler \ - -e "DEBUG={bundler_debug}" \ - -e "DEBUG_COLORS=true" \ -- 0xbigboss/bundler:0.7.1 \ -+ -m 200m \ -+ docker.io/0xbigboss/bundler:0.7.1-9ae4952 \ - --port 3030 \ - --config /app/etc/aabundler/aabundler.config.json \ - --mnemonic /app/keys/0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266 \ From edc2bddce901f4203cc40e6689288d0d8257383e Mon Sep 17 00:00:00 2001 From: musidlo Date: Fri, 14 Mar 2025 17:51:01 +0100 Subject: [PATCH 12/12] Added activity entries --- .../app/features/activity/ActivityAvatar.tsx | 15 +++- .../app/features/activity/ActivityDetails.tsx | 12 +++ .../app/features/home/TokenActivityRow.tsx | 3 +- .../home/utils/useTokenActivityFeed.ts | 13 +++- packages/app/utils/activity.ts | 17 +++++ .../utils/zod/activity/SendSwapEventSchema.ts | 45 +++++++++++ packages/app/utils/zod/activity/events.ts | 4 + packages/app/utils/zod/activity/index.ts | 2 + supabase/migrations/20250312010758_swaps.sql | 74 +++++++++++++++++++ 9 files changed, 179 insertions(+), 6 deletions(-) create mode 100644 packages/app/utils/zod/activity/SendSwapEventSchema.ts create mode 100644 supabase/migrations/20250312010758_swaps.sql diff --git a/packages/app/features/activity/ActivityAvatar.tsx b/packages/app/features/activity/ActivityAvatar.tsx index f1d16ed8d..b9311cdc4 100644 --- a/packages/app/features/activity/ActivityAvatar.tsx +++ b/packages/app/features/activity/ActivityAvatar.tsx @@ -1,14 +1,15 @@ -import { Avatar, LinkableAvatar, XStack, type LinkableAvatarProps } from '@my/ui' -import { IconUpgrade } from 'app/components/icons' +import { Avatar, LinkableAvatar, type LinkableAvatarProps, XStack } from '@my/ui' +import { IconSwap, IconUpgrade } from 'app/components/icons' import { IconCoin } from 'app/components/icons/IconCoin' import { allCoinsDict } from 'app/data/coins' import { counterpart } from 'app/utils/activity' import { + type Activity, isSendAccountReceiveEvent, isSendAccountTransfersEvent, - type Activity, } from 'app/utils/zod/activity' import { isSendTokenUpgradeEvent } from 'app/utils/zod/activity/SendAccountTransfersEventSchema' +import { isSendSwapEvent } from 'app/utils/zod/activity/SendSwapEventSchema' export function ActivityAvatar({ activity, @@ -20,6 +21,14 @@ export function ActivityAvatar({ const isETHReceive = isSendAccountReceiveEvent(activity) + if (isSendSwapEvent(activity)) { + return ( + + + + ) + } + if (user) { return ( + from swap + + ) case subText === null: return {activityText} default: diff --git a/packages/app/features/home/TokenActivityRow.tsx b/packages/app/features/home/TokenActivityRow.tsx index 2be625064..753bebd5b 100644 --- a/packages/app/features/home/TokenActivityRow.tsx +++ b/packages/app/features/home/TokenActivityRow.tsx @@ -11,6 +11,7 @@ import { Link } from 'solito/link' import { useUser } from 'app/utils/useUser' import { useHoverStyles } from 'app/utils/useHoverStyles' +import { isSendSwapEvent } from 'app/utils/zod/activity/SendSwapEventSchema' export function TokenActivityRow({ activity, @@ -25,7 +26,7 @@ export function TokenActivityRow({ const date = CommentsTime(new Date(created_at)) const eventName = eventNameFromActivity(activity) const subtext = subtextFromActivity(activity) - const isERC20Transfer = isSendAccountTransfersEvent(activity) + const isERC20Transfer = isSendAccountTransfersEvent(activity) || isSendSwapEvent(activity) const isETHReceive = isSendAccountReceiveEvent(activity) const hoverStyles = useHoverStyles() diff --git a/packages/app/features/home/utils/useTokenActivityFeed.ts b/packages/app/features/home/utils/useTokenActivityFeed.ts index 87eeb10a7..608d5115b 100644 --- a/packages/app/features/home/utils/useTokenActivityFeed.ts +++ b/packages/app/features/home/utils/useTokenActivityFeed.ts @@ -35,9 +35,18 @@ export function useTokenActivityFeed(params: { let query = supabase.from('activity_feed').select('*') if (address) { - query = query.eq('event_name', Events.SendAccountTransfers).eq('data->>log_addr', address) + query = query + .in('event_name', [Events.SendAccountTransfers, Events.SendSwap]) + .eq('data->>log_addr', address) } else { - query = query.eq('event_name', Events.SendAccountReceive) + query = query.or( + squish(` + event_name.eq.${Events.SendAccountReceive}, + and( + event_name.eq.${Events.SendSwap}, + data->>log_addr.eq.eth) + `) + ) } const paymasterAddresses = Object.values(tokenPaymasterAddress) diff --git a/packages/app/utils/activity.ts b/packages/app/utils/activity.ts index e5cda26ff..888a3176e 100644 --- a/packages/app/utils/activity.ts +++ b/packages/app/utils/activity.ts @@ -17,6 +17,7 @@ import { import { isSendAccountReceiveEvent } from './zod/activity/SendAccountReceiveEventSchema' import { isSendTokenUpgradeEvent } from './zod/activity/SendAccountTransfersEventSchema' import { sendCoin, sendV0Coin } from 'app/data/coins' +import { isSendSwapEvent } from 'app/utils/zod/activity/SendSwapEventSchema' const wagmiAddresWithLabel = (addresses: `0x${string}`[], label: string) => Object.values(addresses).map((a) => [a, label]) @@ -68,6 +69,15 @@ export function counterpart(activity: Activity): Activity['from_user'] | Activit */ export function amountFromActivity(activity: Activity): string { switch (true) { + case isSendSwapEvent(activity): { + const { coin, v } = activity.data + if (coin) { + const amount = formatAmount(formatUnits(v, coin.decimals), 5, coin.formatDecimals) + + return `${amount} ${coin.symbol}` + } + return formatAmount(`${v}`, 5, 0) + } case isSendAccountTransfersEvent(activity): { const { v, coin } = activity.data if (coin) { @@ -152,6 +162,8 @@ export function eventNameFromActivity(activity: Activity) { return 'Referral Reward' case isSendTokenUpgradeEvent(activity): return 'Send Token Upgrade' + case isSendSwapEvent(activity): + return 'Swap' case isERC20Transfer && to_user?.send_id === undefined: return 'Withdraw' case isTransferOrReceive && from_user === null: @@ -190,6 +202,8 @@ export function phraseFromActivity(activity: Activity) { return 'Earned referral reward' case isSendTokenUpgradeEvent(activity): return 'Upgraded' + case isSendSwapEvent(activity): + return 'Swapped' case isERC20Transfer && to_user?.send_id === undefined: return 'Withdrew' case isTransferOrReceive && from_user === null: @@ -249,6 +263,9 @@ export function subtextFromActivity(activity: Activity): string | null { sendCoin.formatDecimals )}` } + if (isSendSwapEvent(activity)) { + return `Received ${activity.data.coin?.symbol}` + } if (isERC20Transfer && from_user?.id) { return labelAddress(data.t) } diff --git a/packages/app/utils/zod/activity/SendSwapEventSchema.ts b/packages/app/utils/zod/activity/SendSwapEventSchema.ts new file mode 100644 index 000000000..4b670796e --- /dev/null +++ b/packages/app/utils/zod/activity/SendSwapEventSchema.ts @@ -0,0 +1,45 @@ +import { z } from 'zod' +import { decimalStrToBigInt } from '../bigint' +import { byteaToHexEthAddress } from '../bytea' +import { BaseEventSchema } from './BaseEventSchema' +import { CoinSchema, type CoinWithBalance, ethCoin, knownCoins } from 'app/data/coins' +import { isAddressEqual } from 'viem' +import { Events } from './events' +import { OnchainEventDataSchema } from './OnchainDataSchema' + +export const SwapDataSchema = OnchainEventDataSchema.extend({ + /** + * The address of the router + */ + f: byteaToHexEthAddress, + /** + * The value of the transaction + */ + v: decimalStrToBigInt, + log_addr: byteaToHexEthAddress.or(z.literal('eth')), +}) + .extend({ + coin: CoinSchema.optional(), + }) + .transform((t) => { + if (t.log_addr === 'eth') { + return { ...t, coin: ethCoin as CoinWithBalance } + } + + return { + ...t, + coin: knownCoins.find( + (c) => c.token !== 'eth' && isAddressEqual(c.token, t.log_addr as `0x${string}`) + ), + } + }) + +export const SendSwapEventSchema = BaseEventSchema.extend({ + event_name: z.literal(Events.SendSwap), + data: SwapDataSchema, +}) + +export type SendSwapEvent = z.infer + +export const isSendSwapEvent = (event: { event_name: string }): event is SendSwapEvent => + event.event_name === Events.SendSwap diff --git a/packages/app/utils/zod/activity/events.ts b/packages/app/utils/zod/activity/events.ts index 3024f4797..34d501afc 100644 --- a/packages/app/utils/zod/activity/events.ts +++ b/packages/app/utils/zod/activity/events.ts @@ -23,4 +23,8 @@ export enum Events { * Send account receives ETH */ SendAccountReceive = 'send_account_receives', + /** + * Send swap ERC-20 token transfer from router + */ + SendSwap = 'send_swap', } diff --git a/packages/app/utils/zod/activity/index.ts b/packages/app/utils/zod/activity/index.ts index 5d7e2f661..76491dc05 100644 --- a/packages/app/utils/zod/activity/index.ts +++ b/packages/app/utils/zod/activity/index.ts @@ -5,6 +5,7 @@ import { SendAccountTransfersEventSchema } from './SendAccountTransfersEventSche import { TagReceiptsEventSchema } from './TagReceiptsEventSchema' import { TagReceiptUSDCEventSchema } from './TagReceiptUSDCEventSchema' import { SendAccountReceiveEventSchema } from './SendAccountReceiveEventSchema' +import { SendSwapEventSchema } from './SendSwapEventSchema' export type { BaseEvent } from './BaseEventSchema' export { ReferralsEventSchema, isReferralsEvent } from './ReferralsEventSchema' @@ -28,6 +29,7 @@ export const EventSchema = z TagReceiptUSDCEventSchema, ReferralsEventSchema, SendAccountReceiveEventSchema, + SendSwapEventSchema, ]) .or(BaseEventSchema) .catch((ctx) => { diff --git a/supabase/migrations/20250312010758_swaps.sql b/supabase/migrations/20250312010758_swaps.sql new file mode 100644 index 000000000..8844f53c3 --- /dev/null +++ b/supabase/migrations/20250312010758_swaps.sql @@ -0,0 +1,74 @@ +CREATE OR REPLACE FUNCTION before_activity_insert() +RETURNS TRIGGER +LANGUAGE plpgsql +SECURITY DEFINER AS +$$ +DECLARE + _paymaster CITEXT := '\x592e1224d203be4214b15e205f6081fbbacfcd2d'; + _router CITEXT := '\x6131b5fae19ea4f9d964eac0408e4408b66337b5'; +BEGIN + -- if new row is not send_account_transfers, insert it normally + IF NOT (NEW.event_name = 'send_account_transfers' OR NEW.event_name = 'send_account_receives') THEN + RAISE WARNING 'MY LOG: new row is not send_account_transfers nor send_account_receives, inserting normally'; + RETURN NEW; + END IF; + + -- if new row is paymaster transfer, insert it normally + IF NEW.data->>'f' = _paymaster OR NEW.data->>'t' = _paymaster THEN + RAISE WARNING 'MY LOG: new row is paymaster transfer, inserting normally'; + RETURN NEW; + END IF; + + -- if new row is router deposit delete all rows with same tx_hash that are not paymaster rows, these are liquidity pools withdrawals + IF NEW.data->>'f' = _router OR NEW.data->>'sender' = _router THEN + RAISE WARNING 'MY LOG: new row is router deposit, inserting normally and deleting all rows with same tx_hash that are not paymaster rows'; + + DELETE FROM activity + WHERE data->>'tx_hash' = NEW.data->>'tx_hash' + AND data->>'f' <> _paymaster + AND data->>'t' <> _paymaster; + + RAISE WARNING 'MY LOG: deleted all not paymaster rows'; + RAISE WARNING 'MY LOG: inserting router deposit row'; + + -- if new row was eth receive from router, adjust fields + IF NEW.event_name = 'send_account_receives' THEN + NEW.data := jsonb_set(NEW.data, ARRAY['f'], NEW.data->'sender', true); + NEW.data := jsonb_set(NEW.data, ARRAY['v'], NEW.data->'value', true); + NEW.data := jsonb_set(NEW.data, ARRAY['log_addr'], jsonb('"eth"'), true); + NEW.data := NEW.data - 'sender' - 'value'; + END IF; + + -- if new rows was erc20 token transfer remove not needed fields + IF NEW.event_name = 'send_account_transfers' THEN + NEW.data := NEW.data - 't'; + END IF; + + -- change event name to send_swap to handle it properly in ui + NEW.event_name := 'send_swap'; + + RETURN NEW; + END IF; + + -- if new row has the same tx_hash as already existing router deposit row, it's liquidity pool withdrawal, don't insert it + IF EXISTS ( + SELECT 1 FROM activity + WHERE data->>'tx_hash' = NEW.data->>'tx_hash' + AND data->>'f' = _router + ) THEN + RAISE WARNING 'MY LOG: new row is LP withdrawal, skipping'; + + RETURN NULL; + END IF; + + RAISE WARNING 'MY LOG: new row is not paymaster row or cannot tell if is swap related at this moment, insert normally'; + -- new row is not paymaster row or cannot tell if is swap related at this moment, insert normally + RETURN NEW; +END; +$$; + +CREATE TRIGGER before_activity_insert +BEFORE INSERT +ON activity +FOR EACH ROW +EXECUTE FUNCTION before_activity_insert(); \ No newline at end of file