UI fixes for the vortex app (#96)

* update benefits list * update navbar urls * implement validation of user's USDC polygon balance * Hide 'Select Chain' button * show available usdc/usdc.e balance * update yarnlock file * Make naming more generic --------- Co-authored-by: Torsten Stüber <15174476+TorstenStueber@users.noreply.github.com>
pendulum-chain · Aug 21, 2024 · b54fbfe · b54fbfe
1 parent 6fff196
commit b54fbfe
Show file tree

Hide file tree

Showing 9 changed files with 209 additions and 116 deletions.
diff --git a/src/components/AssetNumericInput/index.tsx b/src/components/AssetNumericInput/index.tsx
@@ -15,7 +15,7 @@ export const ChainName = () => (
 
       return (
         <button type="button" className="text-sm text-blue-700" onClick={connected ? openChainModal : openConnectModal}>
-          {chain?.name || 'Select chain'}
+          {chain?.name || ''}
         </button>
       );
     }}

diff --git a/src/components/BenefitsList/index.tsx b/src/components/BenefitsList/index.tsx
@@ -2,24 +2,16 @@ import { CheckIcon } from '@heroicons/react/20/solid';
 import { FC } from 'preact/compat';
 import Big from 'big.js';
 
-/// The factor we use to derive the amount we estimate the user to save using our transfer method.
-const AMOUNT_SAVED_FACTOR = 0.03;
-
 interface BenefitsListProps {
   amount: Big | undefined;
   currency: string;
 }
 
-export const BenefitsList: FC<BenefitsListProps> = ({ amount, currency }) => (
+export const BenefitsList: FC<BenefitsListProps> = () => (
   <ul>
     <li className="flex">
       <CheckIcon className="w-4 mr-2 text-pink-500" />
-      <p>
-        You could save{' '}
-        <span className="font-bold text-blue-700">
-          up to {amount ? amount.mul(AMOUNT_SAVED_FACTOR).toFixed(2) : '0.0'} {currency.toUpperCase()}
-        </span>
-      </p>
+      <p>No hidden fees</p>
     </li>
     <li className="flex">
       <CheckIcon className="w-4 mr-2 text-pink-500" />

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -7,9 +7,9 @@ import { useState } from 'preact/hooks';
 import { FC } from 'preact/compat';
 
 const links = [
-  { title: 'About', href: '/about' },
-  { title: 'Ecosystem', href: '/ecosystem' },
-  { title: 'Help', href: '/help' },
+  { title: 'Offramp', href: '/' },
+  { title: 'How it works', href: 'https://www.vortexfinance.co/#lowest-code' },
+  { title: 'Community', href: 'https://www.vortexfinance.co/#call-to-action' },
 ];
 
 interface MobileMenuProps {
@@ -79,6 +79,8 @@ const Links = () => (
       <li key={link.title} className="mb-9 md:mb-0">
         <a
           href={link.href}
+          target={link.href.startsWith('https') ? '_blank' : ''}
+          rel={link.href.startsWith('https') ? 'noreferrer' : ''}
           className="px-4 text-xl font-thin text-white md:text-md lg:px-7 hover:text-amber-500 hover:underline"
         >
           {link.title}
@@ -94,7 +96,9 @@ export const Navbar = () => {
   return (
     <header className="flex items-center justify-between px-4 py-4 bg-blue-950 md:py-7 md:px-10">
       <div className="flex">
-        <img src={whiteLogo} alt="Vortex Logo" className="mr-6 max-w-26 max-h-6 md:max-w-52 md:max-h-12" />
+        <a href="https://www.vortexfinance.co/" target="_blank" rel="noreferrer">
+          <img src={whiteLogo} alt="Vortex Logo" className="mr-6 max-w-26 max-h-6 md:max-w-52 md:max-h-12" />
+        </a>
         <nav className="hidden m-auto md:block">
           <Links />
         </nav>

diff --git a/src/components/UserBalance/index.tsx b/src/components/UserBalance/index.tsx
@@ -0,0 +1,23 @@
+import { InputTokenDetails } from '../../constants/tokenConfig';
+import { useInputTokenBalance } from '../../hooks/useInputTokenBalance';
+
+interface UserBalanceProps {
+  token: InputTokenDetails;
+}
+
+export const UserBalance = ({ token }: UserBalanceProps) => {
+  const inputTokenBalance = useInputTokenBalance({ fromToken: token });
+
+  return (
+    <p className="mt-1 text-right">
+      Available:{' '}
+      {inputTokenBalance === undefined ? (
+        'N/A'
+      ) : (
+        <>
+          <span className="bold">{inputTokenBalance}</span> {token.assetSymbol}
+        </>
+      )}
+    </p>
+  );
+};
diff --git a/src/constants/abi/simplifiedERC20ABI.json b/src/constants/abi/simplifiedERC20ABI.json
@@ -0,0 +1,34 @@
+[
+  {
+    "inputs": [{ "internalType": "address", "name": "account", "type": "address" }],
+    "name": "balanceOf",
+    "outputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
+    "stateMutability": "view",
+    "type": "function",
+    "constant": true
+  },
+  {
+    "inputs": [],
+    "name": "decimals",
+    "outputs": [{ "internalType": "uint8", "name": "", "type": "uint8" }],
+    "stateMutability": "view",
+    "type": "function",
+    "constant": true
+  },
+  {
+    "inputs": [],
+    "name": "symbol",
+    "outputs": [{ "internalType": "string", "name": "", "type": "string" }],
+    "stateMutability": "view",
+    "type": "function",
+    "constant": true
+  },
+  {
+    "inputs": [],
+    "name": "totalSupply",
+    "outputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
+    "stateMutability": "view",
+    "type": "function",
+    "constant": true
+  }
+]
diff --git a/src/hooks/nabla/useTokenAmountOut.ts b/src/hooks/nabla/useTokenAmountOut.ts
@@ -1,5 +1,7 @@
 import BigNumber from 'big.js';
+import Big from 'big.js';
 import { UseQueryResult } from '@tanstack/react-query';
+import { UseFormReturn } from 'react-hook-form';
 import { activeOptions, cacheKeys } from '../../constants/cache';
 import { routerAbi } from '../../contracts/Router';
 import {
@@ -13,9 +15,7 @@ import { NABLA_ROUTER } from '../../constants/constants';
 import { useContractRead } from './useContractRead';
 import { useDebouncedValue } from '../useDebouncedValue';
 import { ApiPromise } from '../../services/polkadot/polkadotApi';
-import { UseFormReturn } from 'react-hook-form';
 import { useEffect } from 'preact/hooks';
-import Big from 'big.js';
 import { INPUT_TOKEN_CONFIG, InputTokenType, OUTPUT_TOKEN_CONFIG, OutputTokenType } from '../../constants/tokenConfig';
 import { SwapFormValues } from '../../components/Nabla/schema';
 

diff --git a/src/hooks/useInputTokenBalance.ts b/src/hooks/useInputTokenBalance.ts
@@ -0,0 +1,22 @@
+import { formatUnits } from 'viem';
+import { useAccount, useReadContract } from 'wagmi';
+
+import erc20ABI from '../contracts/ERC20';
+import { InputTokenDetails } from '../constants/tokenConfig';
+import { multiplyByPowerOfTen } from '../helpers/contracts';
+import Big from 'big.js';
+
+export const useInputTokenBalance = ({ fromToken }: { fromToken: InputTokenDetails }): string | undefined => {
+  const { address } = useAccount();
+
+  const { data: balance }: { data: bigint | undefined } = useReadContract({
+    address: fromToken.erc20AddressSourceChain,
+    abi: erc20ABI,
+    functionName: 'balanceOf',
+    args: [address],
+  });
+
+  return address === undefined || balance === undefined
+    ? undefined
+    : multiplyByPowerOfTen(Big(balance.toString()), -fromToken.decimals).toFixed(2, 0);
+};
diff --git a/src/pages/swap/index.tsx b/src/pages/swap/index.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
-import Big from 'big.js';
 import { ArrowDownIcon } from '@heroicons/react/20/solid';
+import { useAccount } from 'wagmi';
+import Big from 'big.js';
 
 import { LabeledInput } from '../../components/LabeledInput';
 import { BenefitsList } from '../../components/BenefitsList';
@@ -17,11 +18,13 @@ import { config } from '../../config';
 import { INPUT_TOKEN_CONFIG, InputTokenType, OUTPUT_TOKEN_CONFIG, OutputTokenType } from '../../constants/tokenConfig';
 import { BaseLayout } from '../../layouts';
 
-import { useMainProcess } from '../../hooks/useMainProcess';
 import { multiplyByPowerOfTen, stringifyBigWithSignificantDecimals } from '../../helpers/contracts';
+import { useMainProcess } from '../../hooks/useMainProcess';
 import { ProgressPage } from '../progress';
 import { SuccessPage } from '../success';
 import { FailurePage } from '../failure';
+import { useInputTokenBalance } from '../../hooks/useInputTokenBalance';
+import { UserBalance } from '../../components/UserBalance';
 
 const Arrow = () => (
   <div className="flex justify-center w-full my-5">
@@ -32,9 +35,10 @@ const Arrow = () => (
 export const SwapPage = () => {
   const [isQuoteSubmitted, setIsQuoteSubmitted] = useState(false);
   const formRef = useRef<HTMLDivElement | null>(null);
-
   const [api, setApi] = useState<ApiPromise | null>(null);
 
+  const { isDisconnected } = useAccount();
+
   useEffect(() => {
     const initializeApiManager = async () => {
       const manager = await getApiManagerInstance();
@@ -68,8 +72,10 @@ export const SwapPage = () => {
     to,
   } = useSwapForm();
 
-  const fromToken = from ? INPUT_TOKEN_CONFIG[from] : undefined;
-  const toToken = to ? OUTPUT_TOKEN_CONFIG[to] : undefined;
+  const fromToken = INPUT_TOKEN_CONFIG[from];
+  const toToken = OUTPUT_TOKEN_CONFIG[to];
+
+  const userInputTokenBalance = useInputTokenBalance({ fromToken });
 
   const tokenOutData = useTokenOutAmount({
     wantsSwap: true,
@@ -142,17 +148,29 @@ export const SwapPage = () => {
 
   const WidthrawNumericInput = useMemo(
     () => (
-      <AssetNumericInput
-        registerInput={form.register('fromAmount', { onChange: () => setIsQuoteSubmitted(true) })}
-        tokenType={from}
-        tokenSymbol={fromToken?.assetSymbol}
-        onClick={() => setModalType('from')}
-      />
+      <>
+        <AssetNumericInput
+          registerInput={form.register('fromAmount', { onChange: () => setIsQuoteSubmitted(true) })}
+          tokenType={from}
+          tokenSymbol={fromToken?.assetSymbol}
+          onClick={() => setModalType('from')}
+        />
+        <UserBalance token={fromToken} />
+      </>
     ),
-    [form, from, fromToken?.assetSymbol, setModalType],
+    [form, from, fromToken, setModalType],
   );
 
   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)) {
+        return `Insufficient balance. Your balance is ${userInputTokenBalance} ${fromToken?.assetSymbol}.`;
+      }
+    }
+
     const amountOut = tokenOutData.data?.amountOut;
 
     if (amountOut !== undefined && toToken !== undefined) {