Enable Forex AMM on Pendulum

src/components/nabla/Pools/Swap/columns.tsx

@@ -1,12 +1,13 @@
 import { CellContext, ColumnDef } from '@tanstack/react-table';
-import { Badge, Button } from 'react-daisyui';
+import { Avatar, Badge, Button } from 'react-daisyui';
+import Big from 'big.js';
 import { useModalToggle } from '../../../../services/modal';
 import { rawToDecimal } from '../../../../shared/parseNumbers/metric';
 import { NablaInstanceBackstopPool, NablaInstanceSwapPool } from '../../../../hooks/nabla/useNablaInstance';
 import { swapPoolAbi } from '../../../../contracts/nabla/SwapPool';
+import { getIcon } from '../../../../shared/AssetIcons';
 import { Erc20Balance } from '../../common/Erc20Balance';
 import { LiquidityModalProps } from './SwapPoolModals';
-import Big from 'big.js';
 
 export type SwapPoolColumn = NablaInstanceSwapPool & {
   backstopPool: NablaInstanceBackstopPool;
@@ -17,7 +18,14 @@ const BIG_100 = new Big(100);
 export const nameColumn: ColumnDef<SwapPoolColumn> = {
   header: 'Name',
   accessorKey: 'name',
-  accessorFn: (row) => row.token?.name || '',
+  accessorFn: (row) => row.token.name,
+  cell: ({ row: { original } }) =>
+    (
+      <div className="flex items-center">
+        <Avatar src={getIcon(original.token.symbol)} shape="circle" size={32} />
+        <p className="ml-2.5">{original.token.name}</p>
+      </div>
+    ) || '',
   enableSorting: true,
 } as const;
 
@@ -46,7 +54,7 @@ export const aprColumn: ColumnDef<SwapPoolColumn> = {
   accessorKey: 'apr',
   accessorFn: (row) => rawToDecimal(row.apr, row.token.decimals).mul(BIG_100).toFixed(2, 0),
   cell: (props): JSX.Element | null => (
-    <Badge className="h-auto rounded-lg bg-success/35 px-2 py-1 text-blackAlpha-700 dark:text-white">
+    <Badge className="h-auto px-2 py-1 rounded-lg bg-success/35 text-blackAlpha-700 dark:text-white">
       {props.renderValue()}%
     </Badge>
   ),

src/components/nabla/Swap/From.tsx

@@ -38,7 +38,7 @@ export function From<FormFieldValues extends FieldValues, TFieldName extends Fie
     <div
       className={`rounded-lg border bg-base-300 px-4 py-3 ${inputHasError ? 'border-red-600' : 'border-transparent'}`}
     >
-      <div className="flex w-full justify-between">
+      <div className="flex justify-between w-full">
         <div className="font-outfit flex-grow text-4xl text-[inherit]">
           <AmountSelector
             maxBalance={fromTokenBalance.data}
@@ -54,15 +54,24 @@ export function From<FormFieldValues extends FieldValues, TFieldName extends Fie
           type="button"
         >
           <span className="mr-1 h-full rounded-full bg-[rgba(0,0,0,0.15)] p-px">
-            <img src={getIcon(fromToken?.symbol)} alt={fromToken?.name} className="h-full w-auto" />
+            <img src={getIcon(fromToken?.symbol)} alt={fromToken?.name} className="w-auto h-full" />
           </span>
           <strong className="font-bold">{fromToken?.symbol || 'Select'}</strong>
-          <ChevronDownIcon className="ml-px inline h-4 w-4" />
+          <ChevronDownIcon className="inline w-4 h-4 ml-px" />
         </Button>
       </div>
-      <div className="mt-1 flex items-center justify-between text-neutral-500 dark:text-neutral-400">
+      <div className="flex items-center justify-between mt-1 text-neutral-500 dark:text-neutral-400">
         <div className="mt-px text-sm">
-          {fromToken ? <NablaTokenPrice address={fromToken.id} fallback="$ -" /> : '$ -'}
+          {fromToken ? (
+            <NablaTokenPrice
+              formatByAmount={true}
+              currentTokenAmount={form.watch(fromFormFieldName)}
+              address={fromToken.id}
+              fallback="$ -"
+            />
+          ) : (
+            '$ -'
+          )}
         </div>
         <div className="flex gap-1 text-sm">
           {fromTokenBalance !== undefined && walletAccount && (

src/components/nabla/Swap/To.tsx

@@ -47,8 +47,8 @@ export function To({
   }, [toAmountQuote.data?.amountOut.preciseString, setValue]);
 
   return (
-    <div className="rounded-lg border border-transparent bg-base-300 px-4 py-3">
-      <div className="flex w-full justify-between">
+    <div className="px-4 py-3 border border-transparent rounded-lg bg-base-300">
+      <div className="flex justify-between w-full">
         <div className="font-outfit mr-2 flex-grow overflow-x-auto overflow-y-hidden text-4xl text-[inherit]">
           {toAmountQuote.isLoading ? (
             <NumberLoader />
@@ -74,14 +74,25 @@ export function To({
           type="button"
         >
           <span className="mr-1 h-full rounded-full bg-[rgba(0,0,0,0.15)] p-px">
-            <img src={getIcon(toToken?.symbol)} alt={toToken?.name} className="h-full w-auto" />
+            <img src={getIcon(toToken?.symbol)} alt={toToken?.name} className="w-auto h-full" />
           </span>
           <strong className="font-bold">{toToken?.symbol || 'Select'}</strong>
-          <ChevronDownIcon className="ml-px inline h-4 w-4" />
+          <ChevronDownIcon className="inline w-4 h-4 ml-px" />
         </Button>
       </div>
-      <div className="mt-1 flex items-center justify-between text-neutral-500 dark:text-neutral-300">
-        <div className="mt-px text-sm">{toToken ? <NablaTokenPrice address={toToken.id} fallback="$ -" /> : '$ -'}</div>
+      <div className="flex items-center justify-between mt-1 text-neutral-500 dark:text-neutral-300">
+        <div className="mt-px text-sm">
+          {toToken ? (
+            <NablaTokenPrice
+              formatByAmount={true}
+              currentTokenAmount={Number(toAmountQuote.data?.amountOut.approximateStrings.atLeast4Decimals) || 0}
+              address={toToken.id}
+              fallback="$ -"
+            />
+          ) : (
+            '$ -'
+          )}
+        </div>
         {walletAccount && (
           <div className="flex gap-1 text-sm">
             Balance:{' '}
@@ -96,11 +107,11 @@ export function To({
       </div>
       <div className="-mx-4 mt-4 h-px bg-[rgba(0,0,0,0.15)]" />
       <div
-        className={`collapse -mx-4 overflow-visible text-neutral-500 dark:text-neutral-300 text-sm${
+        className={`collapse -mx-4 overflow-visible text-sm text-neutral-500 dark:text-neutral-300 ${
           isOpen ? 'collapse-open' : ''
         }`}
       >
-        <div className="collapse-title flex cursor-pointer justify-between px-4 pb-0 pt-3" onClick={toggle}>
+        <div className="flex justify-between px-4 pt-3 pb-0 cursor-pointer collapse-title" onClick={toggle}>
           <div className="flex items-center">
             {fromToken !== undefined &&
             toToken !== undefined &&
@@ -114,13 +125,13 @@ export function To({
           <div>
             <div
               title="More info"
-              className="ml-1 flex h-6 w-6 items-center justify-center rounded-full bg-blackAlpha-200 hover:opacity-80 dark:bg-whiteAlpha-200"
+              className="flex items-center justify-center w-6 h-6 ml-1 rounded-full bg-blackAlpha-200 hover:opacity-80 dark:bg-whiteAlpha-200"
             >
-              <ChevronDownIcon className="inline h-5 w-5" />
+              <ChevronDownIcon className="inline w-5 h-5" />
             </div>
           </div>
         </div>
-        <div className="collapse-content flex flex-col gap-5">
+        <div className="flex flex-col gap-5 collapse-content">
           <div className="flex justify-between pt-6">
             <div>Expected Output:</div>
             {toAmountQuote.data !== undefined ? (

src/components/nabla/Swap/index.tsx

@@ -44,10 +44,10 @@ const Swap = (props: UseSwapComponentProps): JSX.Element | null => {
 
   return (
     <>
-      <Card bordered className="shadow-0 w-full max-w-xl bg-base-200">
+      <Card bordered className="w-full max-w-xl shadow-0 bg-base-200">
         <FormProvider {...form}>
           <form className="card-body text-neutral-800 dark:text-neutral-200" onSubmit={onSubmit}>
-            <div className="mb-2 flex justify-between">
+            <div className="flex justify-between mb-2">
               <Card.Title tag="h2" className="text-3xl font-normal">
                 Swap
               </Card.Title>
@@ -71,7 +71,7 @@ const Swap = (props: UseSwapComponentProps): JSX.Element | null => {
                 })}
                 button={
                   <Button color="ghost" shape="circle" className="text-neutral-600" type="button">
-                    <Cog8ToothIcon className="h-8 w-8" />
+                    <Cog8ToothIcon className="w-8 h-8" />
                   </Button>
                 }
               />

src/components/nabla/common/NablaFootnote.tsx

@@ -1,10 +1,15 @@
-const nablaHomepageUrl = 'https://nabla.fi';
+const nablaHomepageUrl = 'https://vortexfinance.co';
 
 export function NablaFootnote() {
   return (
-    <div className="mt-3 text-center text-sm font-bold">
+    <div className="mt-3 text-sm font-bold text-center">
       Powered by{' '}
-      <a href={nablaHomepageUrl} target="_blank" rel="noreferrer">
+      <a
+        href={nablaHomepageUrl}
+        target="_blank"
+        rel="noreferrer"
+        className="transition hover:text-primary hover:underline"
+      >
         Vortex Finance
       </a>
     </div>

src/components/nabla/common/NablaTokenPrice.tsx

@@ -5,14 +5,33 @@ export type TokenPriceProps = {
   address: string;
   prefix?: ReactNode;
   fallback?: ReactNode;
+  currentTokenAmount?: number;
+  formatByAmount?: boolean;
 };
 
-export function NablaTokenPrice({ address, prefix = null, fallback = null }: TokenPriceProps): JSX.Element | null {
+export function NablaTokenPrice({
+  currentTokenAmount,
+  address,
+  prefix = null,
+  fallback = null,
+  formatByAmount = false,
+}: TokenPriceProps): JSX.Element | null {
   const { data, isLoading } = useNablaTokenPrice(address);
   if (isLoading) return <NumberLoader />;
 
   if (data === undefined) return fallback;
 
+  if (formatByAmount) {
+    const currentAmountPrice = (Number(data.approximateStrings.atLeast2Decimals) * (currentTokenAmount || 0)).toFixed(
+      2,
+    );
+    return (
+      <span>
+        {prefix}${currentAmountPrice}
+      </span>
+    );
+  }
+
   return (
     <span>
       {prefix}${data.approximateStrings.atLeast2Decimals}

src/config/apps/nabla.ts

@@ -14,11 +14,16 @@ export type NablaConfig = AppConfigBase &
   >;
 
 export const nablaConfig: NablaConfig = {
-  tenants: [TenantName.Foucoco],
-  environment: ['staging', 'development'],
+  tenants: [TenantName.Foucoco, TenantName.Pendulum],
+  environment: ['staging', 'development', 'production'],
   foucoco: {
     indexerUrl: 'https://pendulum.squids.live/foucoco-squid/graphql',
     router: '6mYwT4yRrrMK978NszqBvxkvXjYnsmKfs2BkYGJGiR4XY9Sc',
     oracle: '6kqj1tnYUGY3L93YFArXKF2E4tpQ2tUJ4DARwkAjZEyDoof6',
   },
+  pendulum: {
+    indexerUrl: 'https://pendulum.squids.live/pendulum-squid/graphql',
+    router: '6fEJAs1ycfTNDZY7ZoAtkBhuhHnRVNscdALMBLdjDV12K4uE',
+    oracle: '6fxpVAp3W5mJsXqnBiQresTd8HZDkNMRFCafbXC9X2AAjFHY',
+  },
 };