Merge pull request #367 from pendulum-chain/polygon-prototype-staging

Create new production release

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 (
     <p className="flex items-end justify-end mt-1">
-      <p className="mr-0.5">Available:</p>
-      {inputTokenBalance === undefined ? (
-        'N/A'
-      ) : (
+      <>
+        <p className="mr-0.5">Available:</p>
         <div
           className="font-medium transition cursor-pointer hover:underline hover:text-black"
           onClick={() => onClick(inputTokenBalance)}
         >
-          <span className="bold">{inputTokenBalance}</span> {token.assetSymbol}
+          {inputTokenBalance} {token.assetSymbol}
         </div>
-      )}
+      </>
     </p>
   );
 };

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 = () => (
   <div className="flex justify-center w-full my-5">
@@ -70,7 +71,7 @@ export const SwapPage = () => {
   const formRef = useRef<HTMLDivElement | null>(null);
   const pendulumNode = usePendulumNode();
   const [api, setApi] = useState<ApiPromise | null>(null);
-  const { isDisconnected, address } = useVortexAccount();
+  const { address } = useVortexAccount();
   const [initializeFailedMessage, setInitializeFailedMessage] = useState<string | null>(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}.`;
       }