m/asi-calculator
1
0
Fork 0
mirror of https://github.com/kremalicious/asi-calculator.git synced 2024-12-22 09:23:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

make token switching work

Browse Source
This commit is contained in:
Matthias Kretschmann 2024-03-31 22:50:43 +01:00
parent 538f78f0d7
commit e2c21cf497
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 81 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/FormAmount/Inputs/InputToken.tsx
View File

@ -1,7 +1,10 @@
'use client'
import { Dispatch, SetStateAction } from 'react' import { Dispatch, SetStateAction } from 'react'
import styles from './InputToken.module.css' import styles from './InputToken.module.css'
import { CaretDownIcon } from '@radix-ui/react-icons' import { CaretDownIcon } from '@radix-ui/react-icons'
import { TokenSymbol } from '@/types' import { TokenSymbol } from '@/types'
import { useSWRConfig } from 'swr'
export function InputToken({ export function InputToken({
token, token,
@ -12,13 +15,18 @@ export function InputToken({
isFiat?: boolean isFiat?: boolean
setToken?: Dispatch<SetStateAction<TokenSymbol>> setToken?: Dispatch<SetStateAction<TokenSymbol>>
}) { }) {
const { mutate } = useSWRConfig()
return ( return (
<span className={styles.selectWrapper}> <span className={styles.selectWrapper}>
<select <select
className={styles.select} className={styles.select}
onChange={(e) => onChange={(e) => {
setToken ? setToken(e.target.value as TokenSymbol) : null if (!setToken) return
}
setToken(e.target.value as TokenSymbol)
mutate('/api/quote')
}}
value={token} value={token}
disabled={!setToken} disabled={!setToken}
style={setToken ? { paddingRight: '1.25rem' } : {}} style={setToken ? { paddingRight: '1.25rem' } : {}}

114
components/Strategies/Swap/Results.tsx
View File

@ -1,97 +1,115 @@
import { Result } from '@/components/ResultRow' import { Result } from '@/components/ResultRow'
import { import { ratioOceanToAsi, ratioAgixToAsi, ratioFetToAsi } from '@/constants'
ratioOceanToAsi,
ratioAgixToAsi,
ratioFetToAsi,
tokens
} from '@/constants'
import { usePrices } from '@/hooks' import { usePrices } from '@/hooks'
import { fetcher, getTokenBySymbol } from '@/utils' import { fetcher, getTokenAddressBySymbol, getTokenBySymbol } from '@/utils'
import useSWR from 'swr' import useSWR from 'swr'
import { TokenSymbol } from '@/types' import { TokenSymbol } from '@/types'
export function SwapResults({ export function SwapResults({
token, tokenSymbol,
amount amount
}: { }: {
token: TokenSymbol tokenSymbol: TokenSymbol
amount: number amount: number
}) { }) {
const { prices, isValidating: isValidatingPrices } = usePrices() const { prices, isValidating: isValidatingPrices } = usePrices()
const { data: dataSwapOceanToAgix, isValidating: isValidatingOceanToAgix } =
useSWR(
`/api/quote/?tokenIn=${tokens[0].address}&tokenOut=${tokens[2].address}&amountIn=${amount}`,
fetcher
)
const { data: dataSwapOceanToFet, isValidating: isValidatingOceanToFet } = // -> AGIX
useSWR( const { data: dataSwapToAgix, isValidating: isValidatingToAgix } = useSWR(
`/api/quote/?tokenIn=${tokens[0].address}&tokenOut=${tokens[1].address}&amountIn=${amount}`, `/api/quote/?tokenIn=${getTokenAddressBySymbol(
fetcher tokenSymbol
) )}&tokenOut=${getTokenAddressBySymbol('AGIX')}&amountIn=${amount}`,
fetcher
)
// -> FET
const { data: dataSwapToFet, isValidating: isValidatingToFet } = useSWR(
`/api/quote/?tokenIn=${getTokenAddressBySymbol(
tokenSymbol
)}&tokenOut=${getTokenAddressBySymbol('FET')}&amountIn=${amount}`,
fetcher
)
// -> OCEAN
const { data: dataSwapToOcean, isValidating: isValidatingToOcean } = useSWR(
`/api/quote/?tokenIn=${getTokenAddressBySymbol(
tokenSymbol
)}&tokenOut=${getTokenAddressBySymbol('OCEAN')}&amountIn=${amount}`,
fetcher
)
return ( return (
<> <>
<Result <Result
token={getTokenBySymbol('OCEAN')} token={getTokenBySymbol('OCEAN')}
amount={amount} amount={
amountAsi={amount * ratioOceanToAsi} dataSwapToOcean?.amountOut / Number(`1e${dataSwapToOcean?.decimals}`)
amountFiat={amount * ratioOceanToAsi * prices.asi} }
amountAsi={
(dataSwapToOcean?.amountOut /
Number(`1e${dataSwapToOcean?.decimals}`)) *
ratioOceanToAsi
}
amountFiat={
(dataSwapToOcean?.amountOut /
Number(`1e${dataSwapToOcean?.decimals}`)) *
ratioOceanToAsi *
prices.asi
}
amountOriginalFiat={ amountOriginalFiat={
token tokenSymbol
? amount * ? (dataSwapToOcean?.amountOut /
prices[token.toLowerCase() as 'ocean' | 'agix' | 'fet' | 'asi'] Number(`1e${dataSwapToOcean?.decimals}`)) *
prices[
tokenSymbol.toLowerCase() as 'ocean' | 'agix' | 'fet' | 'asi'
]
: undefined : undefined
} }
isValidating={ isValidating={isValidatingToOcean || isValidatingPrices}
isValidatingOceanToAgix ||
isValidatingOceanToFet ||
isValidatingPrices
}
/> />
<Result <Result
token={getTokenBySymbol('AGIX')} token={getTokenBySymbol('AGIX')}
amount={ amount={
dataSwapOceanToAgix?.amountOut / dataSwapToAgix?.amountOut / Number(`1e${dataSwapToAgix?.decimals}`)
Number(`1e${dataSwapOceanToAgix?.decimals}`) || 0
} }
amountAsi={ amountAsi={
(dataSwapOceanToAgix?.amountOut / (dataSwapToAgix?.amountOut /
Number(`1e${dataSwapOceanToAgix?.decimals}`) || 0) * ratioAgixToAsi Number(`1e${dataSwapToAgix?.decimals}`)) *
ratioAgixToAsi
} }
amountFiat={ amountFiat={
(dataSwapOceanToAgix?.amountOut / (dataSwapToAgix?.amountOut /
Number(`1e${dataSwapOceanToAgix?.decimals}`) || 0) * Number(`1e${dataSwapToAgix?.decimals}`)) *
ratioAgixToAsi * ratioAgixToAsi *
prices.asi prices.asi
} }
amountOriginalFiat={ amountOriginalFiat={
(dataSwapOceanToAgix?.amountOut / (dataSwapToAgix?.amountOut /
Number(`1e${dataSwapOceanToAgix?.decimals}`) || 0) * prices.agix Number(`1e${dataSwapToAgix?.decimals}`)) *
prices.agix
} }
isValidating={isValidatingOceanToAgix || isValidatingPrices} isValidating={isValidatingToAgix || isValidatingPrices}
/> />
<Result <Result
token={getTokenBySymbol('FET')} token={getTokenBySymbol('FET')}
amount={ amount={
dataSwapOceanToFet?.amountOut / dataSwapToFet?.amountOut / Number(`1e${dataSwapToFet?.decimals}`)
Number(`1e${dataSwapOceanToFet?.decimals}`) || 0
} }
amountAsi={ amountAsi={
(dataSwapOceanToFet?.amountOut / (dataSwapToFet?.amountOut / Number(`1e${dataSwapToFet?.decimals}`)) *
Number(`1e${dataSwapOceanToFet?.decimals}`) || 0) * ratioFetToAsi ratioFetToAsi
} }
amountFiat={ amountFiat={
(dataSwapOceanToFet?.amountOut / (dataSwapToFet?.amountOut / Number(`1e${dataSwapToFet?.decimals}`)) *
Number(`1e${dataSwapOceanToFet?.decimals}`) || 0) * prices.asi prices.asi
} }
amountOriginalFiat={ amountOriginalFiat={
(dataSwapOceanToFet?.amountOut / (dataSwapToFet?.amountOut / Number(`1e${dataSwapToFet?.decimals}`)) *
Number(`1e${dataSwapOceanToFet?.decimals}`) || 0) * prices.asi prices.asi
} }
isValidating={isValidatingOceanToFet || isValidatingPrices} isValidating={isValidatingToFet || isValidatingPrices}
/> />
</> </>
) )

8
components/Strategies/Swap/Swap.tsx
View File

@ -10,7 +10,7 @@ import { TokenSymbol } from '@/types'
export function Swap() { export function Swap() {
const [amount, setAmount] = useState(100) const [amount, setAmount] = useState(100)
const [debouncedAmount] = useDebounce(amount, 500) const [debouncedAmount] = useDebounce(amount, 500)
const [token, setToken] = useState<TokenSymbol>('OCEAN') const [tokenSymbol, setTokenSymbol] = useState<TokenSymbol>('OCEAN')
return ( return (
<div className={stylesShared.results}> <div className={stylesShared.results}>
@ -18,14 +18,14 @@ export function Swap() {
Holding or swapping{' '} Holding or swapping{' '}
<FormAmount <FormAmount
amount={amount} amount={amount}
token={token} token={tokenSymbol}
setAmount={setAmount} setAmount={setAmount}
setToken={setToken} setToken={setTokenSymbol}
/>{' '} />{' '}
right now gets you: right now gets you:
</h3> </h3>
<SwapResults token={token} amount={debouncedAmount} /> <SwapResults tokenSymbol={tokenSymbol} amount={debouncedAmount} />
</div> </div>
) )
} }