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}.`;
}