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

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

@ -1,97 +1,115 @@
import { Result } from '@/components/ResultRow'
import {
ratioOceanToAsi,
ratioAgixToAsi,
ratioFetToAsi,
tokens
} from '@/constants'
import { ratioOceanToAsi, ratioAgixToAsi, ratioFetToAsi } from '@/constants'
import { usePrices } from '@/hooks'
import { fetcher, getTokenBySymbol } from '@/utils'
import { fetcher, getTokenAddressBySymbol, getTokenBySymbol } from '@/utils'
import useSWR from 'swr'
import { TokenSymbol } from '@/types'
export function SwapResults({
token,
tokenSymbol,
amount
}: {
token: TokenSymbol
tokenSymbol: TokenSymbol
amount: number
}) {
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 } =
useSWR(
`/api/quote/?tokenIn=${tokens[0].address}&tokenOut=${tokens[1].address}&amountIn=${amount}`,
fetcher
)
// -> AGIX
const { data: dataSwapToAgix, isValidating: isValidatingToAgix } = useSWR(
`/api/quote/?tokenIn=${getTokenAddressBySymbol(
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 (
<>
<Result
token={getTokenBySymbol('OCEAN')}
amount={amount}
amountAsi={amount * ratioOceanToAsi}
amountFiat={amount * ratioOceanToAsi * prices.asi}
amount={
dataSwapToOcean?.amountOut / Number(`1e${dataSwapToOcean?.decimals}`)
}
amountAsi={
(dataSwapToOcean?.amountOut /
Number(`1e${dataSwapToOcean?.decimals}`)) *
ratioOceanToAsi
}
amountFiat={
(dataSwapToOcean?.amountOut /
Number(`1e${dataSwapToOcean?.decimals}`)) *
ratioOceanToAsi *
prices.asi
}
amountOriginalFiat={
token
? amount *
prices[token.toLowerCase() as 'ocean' | 'agix' | 'fet' | 'asi']
tokenSymbol
? (dataSwapToOcean?.amountOut /
Number(`1e${dataSwapToOcean?.decimals}`)) *
prices[
tokenSymbol.toLowerCase() as 'ocean' | 'agix' | 'fet' | 'asi'
]
: undefined
}
isValidating={
isValidatingOceanToAgix ||
isValidatingOceanToFet ||
isValidatingPrices
}
isValidating={isValidatingToOcean || isValidatingPrices}
/>
<Result
token={getTokenBySymbol('AGIX')}
amount={
dataSwapOceanToAgix?.amountOut /
Number(`1e${dataSwapOceanToAgix?.decimals}`) || 0
dataSwapToAgix?.amountOut / Number(`1e${dataSwapToAgix?.decimals}`)
}
amountAsi={
(dataSwapOceanToAgix?.amountOut /
Number(`1e${dataSwapOceanToAgix?.decimals}`) || 0) * ratioAgixToAsi
(dataSwapToAgix?.amountOut /
Number(`1e${dataSwapToAgix?.decimals}`)) *
ratioAgixToAsi
}
amountFiat={
(dataSwapOceanToAgix?.amountOut /
Number(`1e${dataSwapOceanToAgix?.decimals}`) || 0) *
(dataSwapToAgix?.amountOut /
Number(`1e${dataSwapToAgix?.decimals}`)) *
ratioAgixToAsi *
prices.asi
}
amountOriginalFiat={
(dataSwapOceanToAgix?.amountOut /
Number(`1e${dataSwapOceanToAgix?.decimals}`) || 0) * prices.agix
(dataSwapToAgix?.amountOut /
Number(`1e${dataSwapToAgix?.decimals}`)) *
prices.agix
}
isValidating={isValidatingOceanToAgix || isValidatingPrices}
isValidating={isValidatingToAgix || isValidatingPrices}
/>
<Result
token={getTokenBySymbol('FET')}
amount={
dataSwapOceanToFet?.amountOut /
Number(`1e${dataSwapOceanToFet?.decimals}`) || 0
dataSwapToFet?.amountOut / Number(`1e${dataSwapToFet?.decimals}`)
}
amountAsi={
(dataSwapOceanToFet?.amountOut /
Number(`1e${dataSwapOceanToFet?.decimals}`) || 0) * ratioFetToAsi
(dataSwapToFet?.amountOut / Number(`1e${dataSwapToFet?.decimals}`)) *
ratioFetToAsi
}
amountFiat={
(dataSwapOceanToFet?.amountOut /
Number(`1e${dataSwapOceanToFet?.decimals}`) || 0) * prices.asi
(dataSwapToFet?.amountOut / Number(`1e${dataSwapToFet?.decimals}`)) *
prices.asi
}
amountOriginalFiat={
(dataSwapOceanToFet?.amountOut /
Number(`1e${dataSwapOceanToFet?.decimals}`) || 0) * prices.asi
(dataSwapToFet?.amountOut / Number(`1e${dataSwapToFet?.decimals}`)) *
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() {
const [amount, setAmount] = useState(100)
const [debouncedAmount] = useDebounce(amount, 500)
const [token, setToken] = useState<TokenSymbol>('OCEAN')
const [tokenSymbol, setTokenSymbol] = useState<TokenSymbol>('OCEAN')
return (
<div className={stylesShared.results}>
@ -18,14 +18,14 @@ export function Swap() {
Holding or swapping{' '}
<FormAmount
amount={amount}
token={token}
token={tokenSymbol}
setAmount={setAmount}
setToken={setToken}
setToken={setTokenSymbol}
/>{' '}
right now gets you:
</h3>
<SwapResults token={token} amount={debouncedAmount} />
<SwapResults tokenSymbol={tokenSymbol} amount={debouncedAmount} />
</div>
)
}