From 2d6f6614086d1e32dc88101a056a80a57d76f49e Mon Sep 17 00:00:00 2001 From: Sergej Date: Tue, 23 Apr 2024 09:56:31 +0200 Subject: [PATCH] fixes --- .../Selectors/AssetSelector/index.module.scss | 9 ++++ .../Selectors/AssetSelector/index.tsx | 46 +++++++--------- src/hooks/balance.tsx | 53 +++++++++++-------- src/pages/purchase.tsx | 10 ++-- src/pages/transfer.tsx | 3 +- 5 files changed, 65 insertions(+), 56 deletions(-) create mode 100644 src/components/Elements/Selectors/AssetSelector/index.module.scss diff --git a/src/components/Elements/Selectors/AssetSelector/index.module.scss b/src/components/Elements/Selectors/AssetSelector/index.module.scss new file mode 100644 index 00000000..91eb8bb9 --- /dev/null +++ b/src/components/Elements/Selectors/AssetSelector/index.module.scss @@ -0,0 +1,9 @@ +.options { + display: flex; + justify-content: center; +} + +.option { + min-width: 250px; + margin: 1em 5em; +} \ No newline at end of file diff --git a/src/components/Elements/Selectors/AssetSelector/index.tsx b/src/components/Elements/Selectors/AssetSelector/index.tsx index 009ad451..169ca783 100644 --- a/src/components/Elements/Selectors/AssetSelector/index.tsx +++ b/src/components/Elements/Selectors/AssetSelector/index.tsx @@ -1,48 +1,42 @@ -import { useTheme } from '@mui/material'; +import { ToggleButton, ToggleButtonGroup, useTheme } from '@mui/material'; import FormControl from '@mui/material/FormControl'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import FormLabel from '@mui/material/FormLabel'; -import Radio from '@mui/material/Radio'; -import RadioGroup from '@mui/material/RadioGroup'; - +import styles from './index.module.scss'; import { AssetType } from '@/models'; interface AssetSelectorProps { asset: AssetType; setAsset: (_: AssetType) => void; symbol: string; - showRegion?: boolean; } export default function AssetSelector({ asset, setAsset, symbol, - showRegion = true, }: AssetSelectorProps) { const theme = useTheme(); return ( - Asset - setAsset(parseInt(e.target.value) as AssetType)} - sx={{ color: theme.palette.text.primary }} + exclusive // This ensures only one can be selected at a time + onChange={(e: any) => { + console.log(e.target.value); + setAsset(parseInt(e.target.value) as AssetType) + }} + className={styles.options} > - } - label={`${symbol} token`} - /> - {showRegion && ( - } - label='Region' - /> - )} - + + {symbol} + + + Region + + ); } diff --git a/src/hooks/balance.tsx b/src/hooks/balance.tsx index 34cc3502..1905fd5f 100644 --- a/src/hooks/balance.tsx +++ b/src/hooks/balance.tsx @@ -1,42 +1,53 @@ import { useInkathon } from '@scio-labs/use-inkathon'; import { useCallback, useEffect, useState } from 'react'; -import { useCoretimeApi } from '@/contexts/apis'; +import { useCoretimeApi, useRelayApi } from '@/contexts/apis'; import { ApiState } from '@/contexts/apis/types'; import { useToast } from '@/contexts/toast'; +import { ApiPromise } from '@polkadot/api'; +import { parseHNString } from '@/utils/functions'; // React hook for fetching balance. const useBalance = () => { const { - state: { api, apiState, symbol }, + state: { api: coretimeApi, apiState: coretimeApiState, symbol }, } = useCoretimeApi(); + const { state: { api: relayApi, apiState: relayApiState } } = useRelayApi(); + const { activeAccount } = useInkathon(); - const [balance, setBalance] = useState(0); + const [coretimeBalance, setCoretimeBalance] = useState(0); + const [relayBalance, setRelayBalance] = useState(0); const { toastWarning } = useToast(); - const fetchBalance = useCallback(async () => { - if (api && apiState == ApiState.READY && activeAccount) { - const accountData: any = ( - await api.query.system.account(activeAccount.address) - ).toHuman(); - const balance = parseFloat(accountData.data.free.toString()); - setBalance(balance); - - if (balance === 0) { - toastWarning( - `The selected account does not have any ${symbol} tokens on the Coretime chain.` - ); - } - } - }, [api, apiState, activeAccount, toastWarning, symbol]); + const fetchBalance = useCallback(async (api: ApiPromise): Promise => { + if (!activeAccount) return; + + const accountData: any = ( + await api.query.system.account(activeAccount.address) + ).toHuman(); + const balance = parseHNString(accountData.data.free.toString()); + + return balance; + }, [activeAccount, toastWarning, symbol]); useEffect(() => { - fetchBalance(); - }, [fetchBalance]); + if (coretimeApi && coretimeApiState == ApiState.READY) { + fetchBalance(coretimeApi).then((balance) => { + balance !== undefined && setCoretimeBalance(balance); + balance === 0 && toastWarning(`The selected account does not have any ${symbol} tokens on the Coretime chain.`) + }); + } + if (relayApi && relayApiState == ApiState.READY) { + fetchBalance(relayApi).then((balance) => { + balance !== undefined && setRelayBalance(balance); + }) + } + + }, [fetchBalance, coretimeApi, coretimeApiState, relayApi, relayApiState]); - return balance; + return { coretimeBalance, relayBalance }; }; export default useBalance; diff --git a/src/pages/purchase.tsx b/src/pages/purchase.tsx index 58d98449..4717f7df 100644 --- a/src/pages/purchase.tsx +++ b/src/pages/purchase.tsx @@ -17,6 +17,7 @@ import { ApiState } from '@/contexts/apis/types'; import { useRegions } from '@/contexts/regions'; import { useSaleInfo } from '@/contexts/sales'; import { useToast } from '@/contexts/toast'; +import Balance from '@/components/Elements/Balance'; const Purchase = () => { const theme = useTheme(); @@ -35,7 +36,7 @@ const Purchase = () => { const { fetchRegions } = useRegions(); - const balance = useBalance(); + const { coretimeBalance, relayBalance } = useBalance(); const currentPrice = useSalePrice(); const { currentPhase, progress, saleStartTimestamp, saleEndTimestamp } = useSalePhase(); @@ -83,12 +84,7 @@ const Purchase = () => { Buy a core straight from the Coretime chain - - {`Your balance: ${formatBalance( - balance.toString(), - false - )} ${symbol}`} - + {loading || diff --git a/src/pages/transfer.tsx b/src/pages/transfer.tsx index ee99f0a1..eb45ded5 100644 --- a/src/pages/transfer.tsx +++ b/src/pages/transfer.tsx @@ -275,13 +275,12 @@ const TransferPage = () => { setChain={setDestinationChain} /> - {originChain !== ChainType.NONE && ( + {originChain !== ChainType.NONE && destinationChain !== ChainType.NONE && ( )}