Merge branch 'polygon-prototype-staging' into improve-feedback-on-login

pendulum-chain · Jan 16, 2025 · 9c8f363 · 9c8f363
2 parents f41851f + ab1cfb0
commit 9c8f363
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 59 deletions.
diff --git a/index.html b/index.html
@@ -1,13 +1,12 @@
 <!DOCTYPE html>
-<html lang="en" class="notranslate" translate="no">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vortex</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <meta name="google" content="notranslate" />
 
     <!-- Google Tag Manager -->
     <script>
@@ -36,14 +35,14 @@
 
   <body style="background-color: #fff">
     <!-- Google Tag Manager (noscript) -->
-    <noscript>
-      <iframe
+    <noscript
+      ><iframe
         src="https://www.googletagmanager.com/ns.html?id=GTM-T8JZSLD8"
         height="0"
         width="0"
         style="display: none; visibility: hidden"
-      ></iframe>
-    </noscript>
+      ></iframe
+    ></noscript>
     <!-- End Google Tag Manager (noscript) -->
 
     <div id="app"></div>

diff --git a/src/assets/wallet.svg b/src/assets/wallet.svg
diff --git a/src/components/FeeComparison/index.tsx b/src/components/FeeComparison/index.tsx
@@ -1,5 +1,6 @@
 import Big from 'big.js';
-import { useEffect, useRef, useMemo } from 'preact/hooks';
+import { useEffect, useRef, useMemo, useImperativeHandle } from 'preact/hooks';
+import { forwardRef } from 'preact/compat';
 import { useQuery } from '@tanstack/react-query';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 
@@ -17,10 +18,6 @@ interface BaseComparisonProps {
   network: Networks;
 }
 
-interface FeeComparisonProps extends BaseComparisonProps {
-  enabled: boolean;
-}
-
 type VortexRowProps = Pick<BaseComparisonProps, 'targetAssetSymbol' | 'vortexPrice'>;
 
 function VortexRow({ targetAssetSymbol, vortexPrice }: VortexRowProps) {
@@ -161,24 +158,18 @@ function FeeComparisonTable(props: BaseComparisonProps) {
   );
 }
 
-export function FeeComparison({ enabled, ...props }: FeeComparisonProps) {
-  const feeComparisonRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!enabled) return;
-    if (!feeComparisonRef.current) return;
-
-    const timer = setTimeout(() => {
-      window.scrollTo({
-        top: feeComparisonRef.current!.offsetTop,
-        behavior: 'smooth',
-      });
-    }, 300);
+export interface FeeComparisonRef {
+  scrollIntoView: (options?: ScrollIntoViewOptions) => void;
+}
 
-    return () => clearTimeout(timer);
-  }, [enabled]);
+export const FeeComparison = forwardRef<FeeComparisonRef, BaseComparisonProps>(function FeeComparison(props, ref) {
+  const feeComparisonRef = useRef<HTMLDivElement>(null);
 
-  if (!enabled) return null;
+  useImperativeHandle(ref, () => ({
+    scrollIntoView: (options?: ScrollIntoViewOptions) => {
+      feeComparisonRef.current?.scrollIntoView(options || { block: 'start', behavior: 'smooth' });
+    },
+  }));
 
   return (
     <div
@@ -196,4 +187,4 @@ export function FeeComparison({ enabled, ...props }: FeeComparisonProps) {
       <FeeComparisonTable {...props} />
     </div>
   );
-}
+});
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -9,7 +9,7 @@ import { NetworkSelector } from '../NetworkSelector';
 import { useNetwork } from '../../contexts/network';
 
 const links = [
-  { title: 'Offramp', href: '/' },
+  { title: 'Sell Crypto', href: '/' },
   { title: 'How it works', href: 'https://www.vortexfinance.co/#lowest-code' },
   { title: 'Community', href: 'https://www.vortexfinance.co/#call-to-action' },
 ];

diff --git a/src/components/UserBalance/index.tsx b/src/components/UserBalance/index.tsx
@@ -1,29 +1,40 @@
 import { InputTokenDetails } from '../../constants/tokenConfig';
-import { usePolkadotWalletState } from '../../contexts/polkadotWallet';
 import { useInputTokenBalance } from '../../hooks/useInputTokenBalance';
+import { useVortexAccount } from '../../hooks/useVortexAccount';
+import wallet from '../../assets/wallet.svg';
 
 interface UserBalanceProps {
   token: InputTokenDetails;
   onClick: (amount: string) => void;
 }
 
 export const UserBalance = ({ token, onClick }: UserBalanceProps) => {
-  const { walletAccount } = usePolkadotWalletState();
+  const { isDisconnected } = useVortexAccount();
   const inputTokenBalance = useInputTokenBalance({ fromToken: token });
 
-  if (!walletAccount || inputTokenBalance === undefined) {
+  if (isDisconnected || inputTokenBalance === undefined) {
     return <></>;
   }
 
+  const showMaxButton = Number(inputTokenBalance) !== 0;
+
   return (
     <p className="flex items-end justify-end mt-1">
       <>
-        <p className="mr-0.5">Available:</p>
-        <div
-          className="font-medium transition cursor-pointer hover:underline hover:text-black"
-          onClick={() => onClick(inputTokenBalance)}
-        >
-          {inputTokenBalance} {token.assetSymbol}
+        <div className="flex align-center font-medium transition">
+          <img src={wallet} alt="Available" className="w-5 h-5 mr-1" />
+          <span>
+            {inputTokenBalance} {token.assetSymbol}
+          </span>
+          {showMaxButton && (
+            <button
+              className="text-primary hover:underline rounded-md ml-1 bg-base-100 px-1"
+              type="button"
+              onClick={() => onClick(inputTokenBalance)}
+            >
+              Max
+            </button>
+          )}
         </div>
       </>
     </p>

diff --git a/src/hooks/useVortexAccount.ts b/src/hooks/useVortexAccount.ts
@@ -12,7 +12,7 @@ export const useVortexAccount = () => {
   const { selectedNetwork } = useNetwork();
 
   const { walletAccount: polkadotWalletAccount } = usePolkadotWalletState();
-  const { isDisconnected: isEvmAccountDisconnected, chainId: evmChainId, address: evmAccountAddress } = useAccount();
+  const { chainId: evmChainId, address: evmAccountAddress } = useAccount();
   const { signMessageAsync } = useSignMessage();
 
   const address = useMemo(() => {
@@ -27,9 +27,9 @@ export const useVortexAccount = () => {
     if (!isNetworkEVM(selectedNetwork)) {
       return !polkadotWalletAccount;
     } else {
-      return isEvmAccountDisconnected;
+      return !evmAccountAddress;
     }
-  }, [selectedNetwork, polkadotWalletAccount, isEvmAccountDisconnected]);
+  }, [evmAccountAddress, selectedNetwork, polkadotWalletAccount]);
 
   const chainId = useMemo(() => {
     if (!isNetworkEVM(selectedNetwork)) {

diff --git a/src/pages/swap/index.tsx b/src/pages/swap/index.tsx
@@ -1,4 +1,3 @@
-import { ArrowDownIcon } from '@heroicons/react/20/solid';
 import Big from 'big.js';
 import { useEffect, useMemo, useRef, useState, useCallback } from 'preact/hooks';
 import { ApiPromise } from '@polkadot/api';
@@ -9,7 +8,7 @@ import { SwapSubmitButton } from '../../components/buttons/SwapSubmitButton';
 import { TermsAndConditions } from '../../components/TermsAndConditions';
 import { AssetNumericInput } from '../../components/AssetNumericInput';
 import { useSwapForm } from '../../components/Nabla/useSwapForm';
-import { FeeComparison } from '../../components/FeeComparison';
+import { FeeComparison, FeeComparisonRef } from '../../components/FeeComparison';
 import { BenefitsList } from '../../components/BenefitsList';
 import { ExchangeRate } from '../../components/ExchangeRate';
 import { LabeledInput } from '../../components/LabeledInput';
@@ -59,14 +58,9 @@ 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">
-    <ArrowDownIcon className="text-blue-700 w-7" />
-  </div>
-);
-
 export const SwapPage = () => {
   const formRef = useRef<HTMLDivElement | null>(null);
+  const feeComparisonRef = useRef<FeeComparisonRef>(null);
   const pendulumNode = usePendulumNode();
   const [api, setApi] = useState<ApiPromise | null>(null);
   const { address } = useVortexAccount();
@@ -94,7 +88,8 @@ export const SwapPage = () => {
   // Maybe go into a state of UI errors??
   const setInitializeFailed = useCallback((message?: string | null) => {
     setInitializeFailedMessage(
-      message ?? "We're stuck in the digital equivalent of rush hour traffic. Hang tight, we'll get moving again!",
+      message ??
+        "We're experiencing a digital traffic jam. Please hold tight while we clear the road and get things moving again!",
     );
   }, []);
 
@@ -385,13 +380,10 @@ export const SwapPage = () => {
   const main = (
     <main ref={formRef}>
       <SigningBox step={offrampSigningPhase} />
-      <form
-        className="max-w-2xl px-4 py-4 mx-4 my-8 rounded-lg shadow-custom md:mx-auto md:w-2/3 lg:w-3/5 xl:w-1/2"
-        onSubmit={onSwapConfirm}
-      >
-        <h1 className="mt-2 mb-5 text-3xl font-bold text-center text-blue-700">Withdraw</h1>
-        <LabeledInput label="You withdraw" htmlFor="fromAmount" Input={WithdrawNumericInput} />
-        <Arrow />
+      <form className="px-4 py-4 mx-4 my-8 rounded-lg shadow-custom md:mx-auto md:w-96" onSubmit={onSwapConfirm}>
+        <h1 className="mt-2 mb-5 text-3xl font-bold text-center text-blue-700">Sell Crypto</h1>
+        <LabeledInput label="You sell" htmlFor="fromAmount" Input={WithdrawNumericInput} />
+        <div className="my-10" />
         <LabeledInput label="You receive" htmlFor="toAmount" Input={ReceiveNumericInput} />
         <p className="mb-6 text-red-600">{getCurrentErrorMessage()}</p>
         <FeeCollapse
@@ -434,7 +426,12 @@ export const SwapPage = () => {
             disabled={!inputAmountIsStable}
             onClick={(e) => {
               e.preventDefault();
-              setShowCompareFees(!showCompareFees);
+              // We always show the fees comparison when the user clicks on the button. It will not be hidden again.
+              if (!showCompareFees) setShowCompareFees(true);
+              // Scroll to the comparison fees section (with a small delay to allow the component to render first)
+              setTimeout(() => {
+                feeComparisonRef.current?.scrollIntoView();
+              }, 200);
             }}
           >
             Compare fees
@@ -471,7 +468,7 @@ export const SwapPage = () => {
           targetAssetSymbol={toToken.fiat.symbol}
           vortexPrice={vortexPrice}
           network={selectedNetwork}
-          enabled={showCompareFees}
+          ref={feeComparisonRef}
         />
       )}
       <TrustedBy />