diff --git a/src/components/UserBalance/index.tsx b/src/components/UserBalance/index.tsx index c3fa21df..9b1f6a57 100644 --- a/src/components/UserBalance/index.tsx +++ b/src/components/UserBalance/index.tsx @@ -1,4 +1,5 @@ import { InputTokenDetails } from '../../constants/tokenConfig'; +import { usePolkadotWalletState } from '../../contexts/polkadotWallet'; import { useInputTokenBalance } from '../../hooks/useInputTokenBalance'; interface UserBalanceProps { @@ -7,21 +8,24 @@ interface UserBalanceProps { } export const UserBalance = ({ token, onClick }: UserBalanceProps) => { + const { walletAccount } = usePolkadotWalletState(); const inputTokenBalance = useInputTokenBalance({ fromToken: token }); + if (!walletAccount || inputTokenBalance === undefined) { + return <>; + } + return (

-

Available:

- {inputTokenBalance === undefined ? ( - 'N/A' - ) : ( + <> +

Available:

onClick(inputTokenBalance)} > - {inputTokenBalance} {token.assetSymbol} + {inputTokenBalance} {token.assetSymbol}
- )} +

); }; diff --git a/src/pages/swap/index.tsx b/src/pages/swap/index.tsx index afbd8c9d..0321c0d9 100644 --- a/src/pages/swap/index.tsx +++ b/src/pages/swap/index.tsx @@ -59,6 +59,7 @@ import { useTermsAndConditions } from '../../hooks/useTermsAndConditions'; import { swapConfirm } from './helpers/swapConfirm'; import { TrustedBy } from '../../components/TrustedBy'; import { WhyVortex } from '../../components/WhyVortex'; +import { usePolkadotWalletState } from '../../contexts/polkadotWallet'; const Arrow = () => (
@@ -70,7 +71,7 @@ export const SwapPage = () => { const formRef = useRef(null); const pendulumNode = usePendulumNode(); const [api, setApi] = useState(null); - const { isDisconnected, address } = useVortexAccount(); + const { address } = useVortexAccount(); const [initializeFailedMessage, setInitializeFailedMessage] = useState(null); const [apiInitializeFailed, setApiInitializeFailed] = useState(false); const [_, setIsReady] = useState(false); @@ -79,6 +80,7 @@ export const SwapPage = () => { const { trackEvent } = useEventsContext(); const { selectedNetwork, setNetworkSelectorDisabled } = useNetwork(); const { signingPending, handleSign, handleCancel } = useSiweContext(); + const { walletAccount } = usePolkadotWalletState(); const [termsAnimationKey, setTermsAnimationKey] = useState(0); @@ -95,7 +97,7 @@ export const SwapPage = () => { // Maybe go into a state of UI errors?? const setInitializeFailed = useCallback((message?: string | null) => { setInitializeFailedMessage( - message ?? 'Application initialization failed. Please reload, or try again later if the problem persists.', + message ?? "We're stuck in the digital equivalent of rush hour traffic. Hang tight, we'll get moving again!", ); }, []); @@ -257,11 +259,8 @@ export const SwapPage = () => { ); function getCurrentErrorMessage() { - // Do not show any error if the user is disconnected - if (isDisconnected) return; - if (typeof userInputTokenBalance === 'string') { - if (Big(userInputTokenBalance).lt(fromAmount ?? 0)) { + if (Big(userInputTokenBalance).lt(fromAmount ?? 0) && walletAccount) { trackEvent({ event: 'form_error', error_message: 'insufficient_balance' }); return `Insufficient balance. Your balance is ${userInputTokenBalance} ${fromToken?.assetSymbol}.`; }