chore(trading): add swap and cross chain deposit standalone pages (#6573

)
vegaprotocol · Jun 20, 2024 · d3e4fb6 · d3e4fb6
1 parent 1f8b38f
commit d3e4fb6
Show file tree

Hide file tree

Showing 16 changed files with 225 additions and 51 deletions.
diff --git a/apps/trading/client-pages/assets/assets.tsx b/apps/trading/client-pages/assets/assets.tsx
@@ -1,32 +1,106 @@
 import { useT } from '../../lib/use-t';
-import { Links } from '../../lib/links';
+import { Links, Routes } from '../../lib/links';
 import classNames from 'classnames';
-import { NavLink, Outlet } from 'react-router-dom';
+import { NavLink, Outlet, useLocation, useNavigate } from 'react-router-dom';
+import {
+  TradingDropdown,
+  TradingDropdownContent,
+  TradingDropdownItem,
+  TradingDropdownTrigger,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
 
 export const Assets = () => {
+  const navigate = useNavigate();
   const t = useT();
+
+  const title = useTitle();
+
   const linkClasses = ({ isActive }: { isActive: boolean }) => {
     return classNames('border-b-2 border-transparent', {
       'border-vega-yellow': isActive,
     });
   };
 
   return (
-    <div className="max-w-[500px] px-4 mx-auto my-8">
-      <nav className="flex mb-6 text-lg gap-4">
+    <div className="max-w-[600px] p-4 mx-auto">
+      <div className="lg:hidden py-2">
+        <TradingDropdown
+          trigger={
+            <TradingDropdownTrigger>
+              <button className="flex items-center gap-2">
+                {title} <VegaIcon name={VegaIconNames.CHEVRON_DOWN} />
+              </button>
+            </TradingDropdownTrigger>
+          }
+        >
+          <TradingDropdownContent>
+            <TradingDropdownItem onClick={() => navigate(Links.DEPOSIT())}>
+              {t('Deposit')}
+            </TradingDropdownItem>
+            <TradingDropdownItem
+              onClick={() => navigate(Links.DEPOSIT_CROSS_CHAIN())}
+            >
+              {t('Deposit (cross chain)')}
+            </TradingDropdownItem>
+            <TradingDropdownItem onClick={() => navigate(Links.WITHDRAW())}>
+              {t('Withdraw')}
+            </TradingDropdownItem>
+            <TradingDropdownItem onClick={() => navigate(Links.TRANSFER())}>
+              {t('Transfer')}
+            </TradingDropdownItem>
+            <TradingDropdownItem onClick={() => navigate(Links.SWAP())}>
+              {t('Swap')}
+            </TradingDropdownItem>
+          </TradingDropdownContent>
+        </TradingDropdown>
+      </div>
+      <nav className="hidden lg:flex mb-6 text-lg gap-4">
         <NavLink to={Links.DEPOSIT()} className={linkClasses}>
           {t('Deposit')}
         </NavLink>
+        <NavLink to={Links.DEPOSIT_CROSS_CHAIN()} className={linkClasses}>
+          {t('Deposit (cross chain)')}
+        </NavLink>
         <NavLink to={Links.WITHDRAW()} className={linkClasses}>
           {t('Withdraw')}
         </NavLink>
         <NavLink to={Links.TRANSFER()} className={linkClasses}>
           {t('Transfer')}
         </NavLink>
+        <NavLink to={Links.SWAP()} className={linkClasses}>
+          {t('Swap')}
+        </NavLink>
       </nav>
       <div className="pt-4 border-t md:p-6 md:border md:rounded-xl border-default">
         <Outlet />
       </div>
     </div>
   );
 };
+
+const useTitle = () => {
+  const t = useT();
+  const { pathname } = useLocation();
+
+  if (pathname === Routes.DEPOSIT) {
+    return t('Deposit');
+  }
+
+  if (pathname === Routes.DEPOSIT_CROSS_CHAIN) {
+    return t('Deposit (cross chain)');
+  }
+
+  if (pathname === Routes.WITHDRAW) {
+    return t('Withdraw');
+  }
+
+  if (pathname === Routes.TRANSFER) {
+    return t('Transfer');
+  }
+
+  if (pathname === Routes.SWAP) {
+    return t('Swap');
+  }
+};
diff --git a/apps/trading/client-pages/deposit-cross-chain/deposit-cross-chain.tsx b/apps/trading/client-pages/deposit-cross-chain/deposit-cross-chain.tsx
@@ -0,0 +1,11 @@
+import { SquidContainer } from '../../components/squid-container';
+
+export const DepositCrossChain = () => {
+  return (
+    <div className="flex flex-col gap-6 items-center">
+      <div>
+        <SquidContainer />
+      </div>
+    </div>
+  );
+};
diff --git a/apps/trading/client-pages/deposit-cross-chain/index.ts b/apps/trading/client-pages/deposit-cross-chain/index.ts
@@ -0,0 +1 @@
+export { DepositCrossChain } from './deposit-cross-chain';
diff --git a/apps/trading/client-pages/swap/index.ts b/apps/trading/client-pages/swap/index.ts
@@ -0,0 +1 @@
+export { Swap } from './swap';
diff --git a/apps/trading/client-pages/swap/swap.tsx b/apps/trading/client-pages/swap/swap.tsx
@@ -0,0 +1,9 @@
+import { SwapContainer } from '../../components/swap';
+
+export const Swap = () => {
+  return (
+    <div className="flex flex-col gap-6">
+      <SwapContainer />
+    </div>
+  );
+};
diff --git a/apps/trading/client-pages/transfer/transfer.spec.tsx b/apps/trading/client-pages/transfer/transfer.spec.tsx
@@ -1,5 +1,8 @@
-import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
+
+import { MockedWalletProvider } from '@vegaprotocol/wallet-react/testing';
+
 import { Transfer } from './transfer';
 
 jest.mock('@vegaprotocol/accounts', () => ({
@@ -15,7 +18,9 @@ jest.mock('../../components/welcome-dialog/get-started', () => ({
 const renderJsx = (route = '/transfer') => {
   render(
     <MemoryRouter initialEntries={[route]}>
-      <Transfer />
+      <MockedWalletProvider>
+        <Transfer />
+      </MockedWalletProvider>
     </MemoryRouter>
   );
 };

diff --git a/apps/trading/client-pages/transfer/transfer.tsx b/apps/trading/client-pages/transfer/transfer.tsx
@@ -1,15 +1,40 @@
 import { useSearchParams } from 'react-router-dom';
 import { TransferContainer } from '@vegaprotocol/accounts';
-import { GetStarted } from '../../components/welcome-dialog/get-started';
+import { useDialogStore, useVegaWallet } from '@vegaprotocol/wallet-react';
+import { ExternalLink, Intent, Notification } from '@vegaprotocol/ui-toolkit';
+import { useT } from '../../lib/use-t';
+import { Trans } from 'react-i18next';
 
 export const Transfer = () => {
+  const t = useT();
   const [searchParams] = useSearchParams();
   const assetId = searchParams.get('assetId') || undefined;
 
+  const open = useDialogStore((store) => store.open);
+  const { pubKey } = useVegaWallet();
+
   return (
-    <>
+    <div className="flex flex-col gap-4">
       <TransferContainer assetId={assetId} />
-      <GetStarted />
-    </>
+      {!pubKey && (
+        <Notification
+          intent={Intent.Info}
+          message={
+            <Trans
+              defaults="Connect a <0>Vega wallet</0> to transfer."
+              components={[
+                <ExternalLink href="https://vega.xyz/wallet" key="link">
+                  Vega wallet
+                </ExternalLink>,
+              ]}
+            />
+          }
+          buttonProps={{
+            text: t('Connect wallet'),
+            action: open,
+          }}
+        />
+      )}
+    </div>
   );
 };
diff --git a/apps/trading/client-pages/withdraw/withdraw.spec.tsx b/apps/trading/client-pages/withdraw/withdraw.spec.tsx
@@ -1,5 +1,8 @@
-import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
+
+import { MockedWalletProvider } from '@vegaprotocol/wallet-react/testing';
+
 import { Withdraw } from './withdraw';
 
 jest.mock('../../components/withdraw-container', () => ({
@@ -8,14 +11,12 @@ jest.mock('../../components/withdraw-container', () => ({
   ),
 }));
 
-jest.mock('../../components/welcome-dialog/get-started', () => ({
-  GetStarted: () => <div>GetStarted</div>,
-}));
-
 const renderJsx = (route = '/withdraw') => {
   render(
     <MemoryRouter initialEntries={[route]}>
-      <Withdraw />
+      <MockedWalletProvider>
+        <Withdraw />
+      </MockedWalletProvider>
     </MemoryRouter>
   );
 };

diff --git a/apps/trading/client-pages/withdraw/withdraw.tsx b/apps/trading/client-pages/withdraw/withdraw.tsx
@@ -1,14 +1,41 @@
 import { useSearchParams } from 'react-router-dom';
-import { GetStarted } from '../../components/welcome-dialog/get-started';
 import { WithdrawContainer } from '../../components/withdraw-container';
 
+import { useDialogStore, useVegaWallet } from '@vegaprotocol/wallet-react';
+import { ExternalLink, Intent, Notification } from '@vegaprotocol/ui-toolkit';
+import { useT } from '../../lib/use-t';
+import { Trans } from 'react-i18next';
+
 export const Withdraw = () => {
+  const t = useT();
   const [searchParams] = useSearchParams();
   const assetId = searchParams.get('assetId') || undefined;
+
+  const open = useDialogStore((store) => store.open);
+  const { pubKey } = useVegaWallet();
+
   return (
-    <>
+    <div className="flex flex-col gap-4">
       <WithdrawContainer assetId={assetId} />
-      <GetStarted />
-    </>
+      {!pubKey && (
+        <Notification
+          intent={Intent.Info}
+          message={
+            <Trans
+              defaults="Connect a <0>Vega wallet</0> to withdraw."
+              components={[
+                <ExternalLink href="https://vega.xyz/wallet" key="link">
+                  Vega wallet
+                </ExternalLink>,
+              ]}
+            />
+          }
+          buttonProps={{
+            text: t('Connect wallet'),
+            action: open,
+          }}
+        />
+      )}
+    </div>
   );
 };
diff --git a/apps/trading/components/squid-container/squid-container.tsx b/apps/trading/components/squid-container/squid-container.tsx
@@ -1,16 +1,17 @@
 import { SquidStakingWidget } from '@0xsquid/staking-widget';
 import type { AppConfig } from '@0xsquid/staking-widget/widget/core/types/config';
-import { VegaWalletConnectButton } from '../vega-wallet-connect-button';
 import { useT } from '../../lib/use-t';
-import { Loader } from '@vegaprotocol/ui-toolkit';
+import { Intent, Loader, Notification } from '@vegaprotocol/ui-toolkit';
 import {
   SquidRouterConfigError,
   useSquidRouterConfig,
 } from '../../lib/hooks/use-squid-router-config';
+import { useDialogStore } from '@vegaprotocol/wallet-react';
 
 export const SquidContainer = () => {
   const t = useT();
   const { config, loading, error } = useSquidRouterConfig();
+  const open = useDialogStore((store) => store.open);
 
   const errorReason: Record<SquidRouterConfigError, string> = {
     [SquidRouterConfigError.NO_SQUID_API_CONFIGURATION]: t(
@@ -28,15 +29,22 @@ export const SquidContainer = () => {
   }
 
   if (error != null || !config) {
+    let intent = Intent.Info;
+    if (
+      error === SquidRouterConfigError.INTERNAL ||
+      error === SquidRouterConfigError.NO_SQUID_API_CONFIGURATION
+    ) {
+      intent = Intent.Danger;
+    }
     return (
-      <>
-        <p className="text-sm mb-1">
-          {error ? errorReason[error] : t('Unable to load widget')}
-        </p>
-        {error === SquidRouterConfigError.NO_VEGA_PUBKEY && (
-          <VegaWalletConnectButton />
-        )}
-      </>
+      <Notification
+        message={error ? errorReason[error] : t('Unable to load widget')}
+        intent={intent}
+        buttonProps={{
+          text: t('Connect wallet'),
+          action: open,
+        }}
+      />
     );
   }
 

diff --git a/apps/trading/components/welcome-dialog/welcome-dialog-content.tsx b/apps/trading/components/welcome-dialog/welcome-dialog-content.tsx
@@ -1,9 +1,7 @@
 import { GetStarted } from './get-started';
-import { TradingAnchorButton } from '@vegaprotocol/ui-toolkit';
-import { Links } from '../../lib/links';
+import { TradingButton } from '@vegaprotocol/ui-toolkit';
 import { Networks, useEnvironment } from '@vegaprotocol/environment';
 import type { ReactNode } from 'react';
-import { useTopTradedMarkets } from '../../lib/hooks/use-top-traded-markets';
 import { useOnboardingStore } from '../../stores/onboarding';
 import { useT } from '../../lib/use-t';
 
@@ -13,10 +11,6 @@ export const WelcomeDialogContent = () => {
   const setDialog = useOnboardingStore((store) => store.setDialog);
   const dismiss = useOnboardingStore((store) => store.dismiss);
 
-  const { data } = useTopTradedMarkets();
-  const marketId = data && data[0]?.id;
-  const link = marketId ? Links.MARKET(marketId) : Links.MARKETS();
-
   const lead =
     VEGA_ENV === Networks.MAINNET
       ? t('Start trading on the worlds most advanced decentralised exchange.')
@@ -49,8 +43,7 @@ export const WelcomeDialogContent = () => {
               )}
             />
           </ul>
-          <TradingAnchorButton
-            href={link}
+          <TradingButton
             onClick={() => {
               setDialog('inactive');
               dismiss();
@@ -59,7 +52,7 @@ export const WelcomeDialogContent = () => {
             data-testid="browse-markets-button"
           >
             {t('Explore')}
-          </TradingAnchorButton>
+          </TradingButton>
         </div>
         <div className="flex sm:w-1/2 grow">
           <GetStarted lead={lead} />

diff --git a/apps/trading/lib/links.ts b/apps/trading/lib/links.ts
@@ -11,8 +11,10 @@ export const Routes = {
   DISCLAIMER: '/disclaimer',
   ASSETS: '/portfolio/assets',
   DEPOSIT: '/portfolio/assets/deposit',
+  DEPOSIT_CROSS_CHAIN: '/portfolio/assets/deposit-cross-chain',
   WITHDRAW: '/portfolio/assets/withdraw',
   TRANSFER: '/portfolio/assets/transfer',
+  SWAP: '/portfolio/assets/swap',
   REFERRALS: '/referrals',
   REFERRALS_APPLY_CODE: '/referrals/apply-code',
   REFERRALS_CREATE_CODE: '/referrals/create-code',
@@ -42,8 +44,10 @@ export const Links: ConsoleLinks = {
   DISCLAIMER: () => Routes.DISCLAIMER,
   ASSETS: () => Routes.ASSETS,
   DEPOSIT: () => Routes.DEPOSIT,
+  DEPOSIT_CROSS_CHAIN: () => Routes.DEPOSIT_CROSS_CHAIN,
   WITHDRAW: () => Routes.WITHDRAW,
   TRANSFER: () => Routes.TRANSFER,
+  SWAP: () => Routes.SWAP,
   REFERRALS: () => Routes.REFERRALS,
   REFERRALS_APPLY_CODE: () => Routes.REFERRALS_APPLY_CODE,
   REFERRALS_CREATE_CODE: () => Routes.REFERRALS_CREATE_CODE,