feat: token approval

src/app.tsx

@@ -2,6 +2,7 @@ import { Navigate, Route, Routes } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import TermsAndConditions from './TermsAndConditions';
+import AppsProvider from './components/Apps/provider';
 import Layout from './components/Layout';
 import { defaultPageLoader } from './components/Loader/Page';
 import { NotFound } from './components/NotFound';
@@ -21,6 +22,7 @@ const TransfersPage = <SuspenseLoad importFn={() => import('./pages/bridge/Trans
 const BackstopPoolsPage = (
   <SuspenseLoad importFn={() => import('./pages/nabla/backstop-pools')} fallback={defaultPageLoader} />
 );
+const DevPage = <SuspenseLoad importFn={() => import('./pages/nabla/dev')} fallback={defaultPageLoader} />;
 const Bridge = <SuspenseLoad importFn={() => import('./pages/bridge')} fallback={defaultPageLoader} />;
 const Staking = <SuspenseLoad importFn={() => import('./pages/collators/Collators')} fallback={defaultPageLoader} />;
 
@@ -38,11 +40,12 @@ export function App() {
             <Route path="bridge" element={Bridge} />
             <Route path="transfers" element={TransfersPage} />
           </Route>
-          <Route path="nabla">
+          <Route path="nabla" Component={() => <AppsProvider app="nabla" />}>
             <Route path="" element={NablaPage} />
             <Route path="swap" element={SwapPage} />
             <Route path="swap-pools" element={SwapPoolsPage} />
             <Route path="backstop-pools" element={BackstopPoolsPage} />
+            {config.isDev && <Route path="dev" element={DevPage} />}
             <Route path="*" element={<NotFound />} />
           </Route>
           <Route path="staking" element={Staking} />

src/components/Apps/Unsupported/index.tsx

@@ -0,0 +1,41 @@
+import { Button } from 'react-daisyui';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { Apps } from '../../../config/apps';
+import { builtTenantPath } from '../../../helpers/url';
+import { TenantName } from '../../../models/Tenant';
+
+export interface UnsupportedProps {
+  app: Apps;
+  tenant: TenantName;
+  supportedTenants: TenantName[];
+}
+
+const Unsupported = ({ app, tenant, supportedTenants }: UnsupportedProps): JSX.Element | null => {
+  const navigateTo = useNavigate();
+  const location = useLocation().pathname;
+  return (
+    <div className="text-center py-8">
+      <h2 className="text-xl mb-6">
+        <span className="capitalize">{app}</span> is not supported on <span className="capitalize">{tenant}</span>.
+        Switch to:
+      </h2>
+      <div className="flex justify-center items-center flex-wrap gap-3">
+        {supportedTenants.map((st) => (
+          <Button
+            key={st}
+            className="capitalize text-lg"
+            variant="secondary"
+            type="button"
+            onClick={() => {
+              navigateTo(builtTenantPath(tenant, st, location));
+            }}
+          >
+            {st}
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Unsupported;

src/components/Apps/provider.tsx

@@ -0,0 +1,22 @@
+import { Outlet } from 'react-router-dom';
+import { useGlobalState } from '../../GlobalStateProvider';
+import { Apps, appsConfigs } from '../../config/apps';
+import { TenantName } from '../../models/Tenant';
+import Unsupported from './Unsupported';
+
+export type AppsProviderProps = {
+  app: Apps;
+};
+
+const AppsProvider = ({ app }: AppsProviderProps): JSX.Element | null => {
+  const tenant = useGlobalState().tenantName;
+  const supportedTenants = appsConfigs[app].tenants;
+  if (!(supportedTenants as TenantName[]).includes(tenant)) {
+    return <Unsupported app={app} tenant={tenant} supportedTenants={supportedTenants} />;
+  }
+  return <Outlet />;
+};
+
+AppsProvider.displayName = 'AppsProvider';
+
+export default AppsProvider;

src/components/Asset/Approval/index.tsx

@@ -0,0 +1,50 @@
+import { Button, ButtonProps } from 'react-daisyui';
+import { toast } from 'react-toastify';
+import { ApprovalState, useTokenApproval } from '../../../hooks/useTokenApproval';
+
+export type TokenApprovalProps = ButtonProps & {
+  token: string | undefined;
+  amount: number;
+  /** contract address (eg. router address) */
+  spender?: string;
+  enabled?: boolean;
+  children: ReactNode;
+};
+
+const TokenApproval = ({
+  amount,
+  token,
+  spender,
+  enabled = true,
+  children,
+  className = '',
+  ...rest
+}: TokenApprovalProps): JSX.Element | null => {
+  const approval = useTokenApproval({
+    amount,
+    token,
+    spender,
+    approveMax: true,
+    enabled,
+    onError: (_err) => {
+      toast('Please approve transaction.', { type: toast.TYPE.ERROR });
+    },
+  });
+
+  if (approval[0] === ApprovalState.APPROVED || !enabled) return <>{children}</>;
+  const isPending = approval[0] === ApprovalState.PENDING;
+  const isLoading = approval[0] === ApprovalState.LOADING;
+  return (
+    <Button
+      className={`w-full${isPending || isLoading ? ' loading' : ''} ${className}`}
+      color="primary"
+      {...rest}
+      type="button"
+      disabled={isPending}
+      onClick={isPending ? undefined : () => approval[1].mutate()}
+    >
+      {isPending ? 'Approving' : isLoading ? 'Loading' : 'Approve'}
+    </Button>
+  );
+};
+export default TokenApproval;

src/components/Asset/Selector/Modal/index.tsx

@@ -1,8 +1,10 @@
+import { CheckIcon } from '@heroicons/react/20/solid';
 import { matchSorter } from 'match-sorter';
 import { ChangeEvent, useMemo, useState } from 'preact/compat';
 import { Avatar, Button, Input, Modal, ModalProps } from 'react-daisyui';
 import { repeat } from '../../../../helpers/general';
 import { Asset } from '../../../../models/Asset';
+import ModalCloseButton from '../../../Button/ModalClose';
 import { Skeleton } from '../../../Skeleton';
 
 export interface AssetListProps {
@@ -31,21 +33,24 @@ const AssetList = ({ assets, onSelect, selected }: AssetListProps): JSX.Element
         {filteredTokens?.map((token) => (
           <Button
             type="button"
-            size="md"
-            variant="ghost"
+            size="lg"
+            variant="secondary"
             key={token.address}
             onClick={() => onSelect(token)}
-            className={`items-center w-full gap-4 text-base${selected === token.address ? ' bg-neutral-100' : ''}`}
+            className="w-full items-center justify-start gap-4 px-3 py-1 border-0 bg-[rgba(0,0,0,.2)] text-left hover:opacity-80 dark:bg-[rgba(255,255,255,.12)]"
           >
-            <div>
-              <Avatar size="xs" letters={token.symbol} shape="circle" className="text-xs" />
-            </div>
-            <div>
-              <p>
-                <strong>{token.name}</strong>
-              </p>
-            </div>
-            <div className="ml-auto text-sm font-normal">{'Amount'}</div>
+            <span className="relative">
+              <Avatar size="xs" letters={token.symbol} src={token.logoURI} shape="circle" className="text-xs" />
+              {selected == token.address && (
+                <CheckIcon className="absolute -right-1 -top-1 w-5 h-5 p-[3px] text-white bg-green-600 rounded-full" />
+              )}
+            </span>
+            <span className="flex flex-col">
+              <span className="text-lg leading-5">
+                <strong>{token.symbol}</strong>
+              </span>
+              <span className="text-sm leading-5">{token.name}</span>
+            </span>
           </Button>
         ))}
       </div>
@@ -70,9 +75,7 @@ export const AssetSelectorModal = ({
   return (
     <Modal {...rest}>
       <Modal.Header className="mb-0">
-        <Button size="sm" shape="circle" className="absolute right-2 top-2" onClick={onClose} type="button">
-          ✕
-        </Button>
+        <ModalCloseButton onClick={onClose} />
         <h3 className="text-2xl font-normal">Select a token</h3>
       </Modal.Header>
       <Modal.Body>

src/components/Balance/index.tsx

@@ -1,19 +1,25 @@
+import { ComponentChildren } from 'preact';
 import { QueryOptions } from '../../constants/cache';
 import { useBalance } from '../../hooks/useBalance';
-import { Skeleton } from '../Skeleton';
+import { numberLoader } from '../Loader';
 
 export type BalanceProps = {
-  address: string;
+  address?: string;
   fallback?: string | number;
   loader?: boolean;
   options?: QueryOptions;
+  children?: ComponentChildren;
 };
 
-const Balance = ({ address, fallback = 0, loader = true, options }: BalanceProps): JSX.Element | null => {
-  const { isLoading, formatted } = useBalance(address, options);
-  if (isLoading) {
-    return loader ? <Skeleton className="inline-flex">10000</Skeleton> : null;
-  }
-  return <span title={formatted}>{formatted ?? fallback ?? null}</span>;
+const Balance = ({ address, fallback = 0, loader = true, options, children }: BalanceProps): JSX.Element | null => {
+  const { isLoading, formatted, enabled } = useBalance(address, options);
+  if (!address || !enabled) return <>{fallback ?? null}</>;
+  if (isLoading) return loader ? numberLoader : null;
+  return (
+    <span title={formatted}>
+      {children}
+      {formatted ?? fallback ?? null}
+    </span>
+  );
 };
 export default Balance;

src/components/Button/ModalClose/index.tsx

@@ -0,0 +1,8 @@
+import { Button, ButtonProps } from 'react-daisyui';
+
+const ModalCloseButton = (props: ButtonProps): JSX.Element | null => (
+  <Button size="sm" color="secondary" shape="circle" className="absolute right-2 top-2" type="button" {...props}>
+    ✕
+  </Button>
+);
+export default ModalCloseButton;

src/components/ChainSelector.tsx

@@ -4,6 +4,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import AmplitudeLogo from '../assets/AmplitudeLogo';
 import PendulumLogo from '../assets/PendulumLogo';
 import { toTitle } from '../helpers/string';
+import { builtTenantPath } from '../helpers/url';
 import { TenantName } from '../models/Tenant';
 
 const options = [TenantName.Pendulum, TenantName.Amplitude, TenantName.Foucoco];
@@ -33,7 +34,7 @@ const ChainSelector = ({ tenantName }: { tenantName: TenantName | undefined }):
             <Dropdown.Item
               key={i}
               onClick={() => {
-                navigateTo(buildPath(tenantName, option, location));
+                navigateTo(builtTenantPath(tenantName, option, location));
                 window.location.reload();
               }}
             >
@@ -51,8 +52,4 @@ const ChainSelector = ({ tenantName }: { tenantName: TenantName | undefined }):
   );
 };
 
-function buildPath(current: TenantName | undefined, next: TenantName, location: string) {
-  return current ? location.replace(current, next) : location;
-}
-
 export default ChainSelector;

src/components/Loader/index.tsx

@@ -0,0 +1,3 @@
+import { Skeleton } from '../Skeleton';
+
+export const numberLoader = <Skeleton className="inline-block">10000</Skeleton>;