From d41610638395c8a02e6c56310c4bd7ff32f8ed81 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Mon, 30 Sep 2024 16:59:13 +0200
Subject: [PATCH 1/9] enable forexamm for pendulum

---
 src/config/apps/nabla.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/config/apps/nabla.ts b/src/config/apps/nabla.ts
index cf0da3de..14ba5360 100644
--- a/src/config/apps/nabla.ts
+++ b/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',
+  },
 };

From 869c5e25bde3ce0fa70ee68ae4b54f05929e3b0a Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Mon, 7 Oct 2024 16:24:26 +0200
Subject: [PATCH 2/9] fix expanding Swap details Nabla

---
 src/components/nabla/Swap/To.tsx    | 20 ++++++++++----------
 src/components/nabla/Swap/index.tsx |  6 +++---
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/nabla/Swap/To.tsx b/src/components/nabla/Swap/To.tsx
index b88c78da..ed0f737f 100644
--- a/src/components/nabla/Swap/To.tsx
+++ b/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,13 +74,13 @@ 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="flex items-center justify-between mt-1 text-neutral-500 dark:text-neutral-300">
         <div className="mt-px text-sm">{toToken ? <NablaTokenPrice address={toToken.id} fallback="$ -" /> : '$ -'}</div>
         {walletAccount && (
           <div className="flex gap-1 text-sm">
@@ -96,11 +96,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 +114,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 ? (
diff --git a/src/components/nabla/Swap/index.tsx b/src/components/nabla/Swap/index.tsx
index f8f0c4c5..0c465870 100644
--- a/src/components/nabla/Swap/index.tsx
+++ b/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>
                 }
               />

From bc2be4f60680340f182f61fbbed441d3d910afcb Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Mon, 7 Oct 2024 16:30:21 +0200
Subject: [PATCH 3/9] change footer Nabla Swap

---
 src/components/nabla/common/NablaFootnote.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/nabla/common/NablaFootnote.tsx b/src/components/nabla/common/NablaFootnote.tsx
index 46dbce5e..37b50f2f 100644
--- a/src/components/nabla/common/NablaFootnote.tsx
+++ b/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>

From a91945f5e1611b38768a67b6e56864de661e39e4 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Mon, 7 Oct 2024 16:40:36 +0200
Subject: [PATCH 4/9] add assets icons to nabla swap pools

---
 src/components/nabla/Pools/Swap/columns.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/nabla/Pools/Swap/columns.tsx b/src/components/nabla/Pools/Swap/columns.tsx
index ca0fef2f..359fbc81 100644
--- a/src/components/nabla/Pools/Swap/columns.tsx
+++ b/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>
   ),

From 4f4ee7012ba73a9f7a15ae4e91482673b41ecaf0 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Mon, 7 Oct 2024 17:00:52 +0200
Subject: [PATCH 5/9] show nabla swap price by input amount

---
 src/components/nabla/Swap/From.tsx            | 19 ++++++++++++-----
 src/components/nabla/Swap/To.tsx              | 13 +++++++++++-
 .../nabla/common/NablaTokenPrice.tsx          | 21 ++++++++++++++++++-
 3 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/src/components/nabla/Swap/From.tsx b/src/components/nabla/Swap/From.tsx
index c4a69313..4eeaf90b 100644
--- a/src/components/nabla/Swap/From.tsx
+++ b/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 && (
diff --git a/src/components/nabla/Swap/To.tsx b/src/components/nabla/Swap/To.tsx
index ed0f737f..e9314671 100644
--- a/src/components/nabla/Swap/To.tsx
+++ b/src/components/nabla/Swap/To.tsx
@@ -81,7 +81,18 @@ export function To({
         </Button>
       </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 address={toToken.id} fallback="$ -" /> : '$ -'}</div>
+        <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:{' '}
diff --git a/src/components/nabla/common/NablaTokenPrice.tsx b/src/components/nabla/common/NablaTokenPrice.tsx
index 45944ae8..50831468 100644
--- a/src/components/nabla/common/NablaTokenPrice.tsx
+++ b/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}

From e1e31dac78fc11853d9d20c28dee087c0638942e Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Tue, 8 Oct 2024 12:43:17 +0200
Subject: [PATCH 6/9] use Big for calculating the input price

---
 src/components/nabla/Swap/From.tsx            | 21 ++++++-----
 src/components/nabla/Swap/To.tsx              | 36 +++++++++----------
 src/components/nabla/Swap/index.tsx           | 17 ++++-----
 .../nabla/common/NablaTokenPrice.tsx          | 12 +++----
 4 files changed, 45 insertions(+), 41 deletions(-)

diff --git a/src/components/nabla/Swap/From.tsx b/src/components/nabla/Swap/From.tsx
index 4eeaf90b..37d886b2 100644
--- a/src/components/nabla/Swap/From.tsx
+++ b/src/components/nabla/Swap/From.tsx
@@ -1,6 +1,7 @@
+import { FieldPath, FieldValues, UseFormReturn, useFormContext } from 'react-hook-form';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import { Button } from 'react-daisyui';
-import { FieldPath, FieldValues, UseFormReturn, useFormContext } from 'react-hook-form';
+import Big from 'big.js';
 
 import { NablaTokenPrice } from '../common/NablaTokenPrice';
 import { fractionOfValue } from '../../../shared/parseNumbers/metric';
@@ -14,21 +15,23 @@ import { useGlobalState } from '../../../GlobalStateProvider';
 import { SwapFormValues } from './schema';
 
 interface FromProps<FormFieldValues extends FieldValues, TFieldName extends FieldPath<FormFieldValues>> {
-  fromToken: NablaInstanceToken | undefined;
-  onOpenSelector: () => void;
-  inputHasError: boolean;
-  fromFormFieldName: TFieldName;
   form: UseFormReturn<FormFieldValues>;
   fromTokenBalance: UseContractReadResult<ContractBalance | undefined>;
+  fromToken?: NablaInstanceToken;
+  fromAmount?: Big;
+  fromFormFieldName: TFieldName;
+  onOpenSelector: () => void;
+  inputHasError: boolean;
 }
 
 export function From<FormFieldValues extends FieldValues, TFieldName extends FieldPath<FormFieldValues>>({
+  form,
   fromToken,
+  fromAmount,
+  fromTokenBalance,
+  fromFormFieldName,
   onOpenSelector,
   inputHasError,
-  fromFormFieldName,
-  form,
-  fromTokenBalance,
 }: FromProps<FormFieldValues, TFieldName>) {
   const { setValue } = useFormContext<SwapFormValues>();
 
@@ -65,7 +68,7 @@ export function From<FormFieldValues extends FieldValues, TFieldName extends Fie
           {fromToken ? (
             <NablaTokenPrice
               formatByAmount={true}
-              currentTokenAmount={form.watch(fromFormFieldName)}
+              currentTokenAmount={fromAmount}
               address={fromToken.id}
               fallback="$ -"
             />
diff --git a/src/components/nabla/Swap/To.tsx b/src/components/nabla/Swap/To.tsx
index e9314671..b4d5caa2 100644
--- a/src/components/nabla/Swap/To.tsx
+++ b/src/components/nabla/Swap/To.tsx
@@ -5,24 +5,24 @@ import { useFormContext } from 'react-hook-form';
 import Big from 'big.js';
 
 import { UseTokenOutAmountResult } from '../../../hooks/nabla/useTokenOutAmount';
-import useBoolean from '../../../hooks/useBoolean';
-import { NumberLoader } from '../../Loader';
-import { Skeleton } from '../../Skeleton';
-import { SwapFormValues } from './schema';
 import { NablaInstanceToken } from '../../../hooks/nabla/useNablaInstance';
+import useBoolean from '../../../hooks/useBoolean';
 import { erc20WrapperAbi } from '../../../contracts/nabla/ERC20Wrapper';
 import { NablaTokenPrice } from '../common/NablaTokenPrice';
 import { Erc20Balance } from '../common/Erc20Balance';
 import { getIcon } from '../../../shared/AssetIcons';
 import { useGlobalState } from '../../../GlobalStateProvider';
+import { NumberLoader } from '../../Loader';
+import { Skeleton } from '../../Skeleton';
+import { SwapFormValues } from './schema';
 
 export interface ToProps {
-  onOpenSelector: () => void;
-  fromToken: NablaInstanceToken | undefined;
-  toToken: NablaInstanceToken | undefined;
+  fromToken?: NablaInstanceToken;
+  fromAmount?: Big;
+  toToken?: NablaInstanceToken;
   toAmountQuote: UseTokenOutAmountResult;
-  fromAmount: Big | undefined;
   slippage: number;
+  onOpenSelector: () => void;
 }
 
 export function To({
@@ -47,8 +47,8 @@ export function To({
   }, [toAmountQuote.data?.amountOut.preciseString, setValue]);
 
   return (
-    <div className="px-4 py-3 border border-transparent rounded-lg bg-base-300">
-      <div className="flex justify-between w-full">
+    <div className="rounded-lg border border-transparent bg-base-300 px-4 py-3">
+      <div className="flex w-full justify-between">
         <div className="font-outfit mr-2 flex-grow overflow-x-auto overflow-y-hidden text-4xl text-[inherit]">
           {toAmountQuote.isLoading ? (
             <NumberLoader />
@@ -74,18 +74,18 @@ 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="w-auto h-full" />
+            <img src={getIcon(toToken?.symbol)} alt={toToken?.name} className="h-full w-auto" />
           </span>
           <strong className="font-bold">{toToken?.symbol || 'Select'}</strong>
-          <ChevronDownIcon className="inline w-4 h-4 ml-px" />
+          <ChevronDownIcon className="ml-px inline h-4 w-4" />
         </Button>
       </div>
-      <div className="flex items-center justify-between mt-1 text-neutral-500 dark:text-neutral-300">
+      <div className="mt-1 flex items-center justify-between 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}
+              currentTokenAmount={Big(toAmountQuote.data?.amountOut.approximateStrings.atLeast4Decimals ?? 0)}
               address={toToken.id}
               fallback="$ -"
             />
@@ -111,7 +111,7 @@ export function To({
           isOpen ? 'collapse-open' : ''
         }`}
       >
-        <div className="flex justify-between px-4 pt-3 pb-0 cursor-pointer collapse-title" onClick={toggle}>
+        <div className="collapse-title flex cursor-pointer justify-between px-4 pb-0 pt-3" onClick={toggle}>
           <div className="flex items-center">
             {fromToken !== undefined &&
             toToken !== undefined &&
@@ -125,13 +125,13 @@ export function To({
           <div>
             <div
               title="More info"
-              className="flex items-center justify-center w-6 h-6 ml-1 rounded-full bg-blackAlpha-200 hover:opacity-80 dark:bg-whiteAlpha-200"
+              className="ml-1 flex h-6 w-6 items-center justify-center rounded-full bg-blackAlpha-200 hover:opacity-80 dark:bg-whiteAlpha-200"
             >
-              <ChevronDownIcon className="inline w-5 h-5" />
+              <ChevronDownIcon className="inline h-5 w-5" />
             </div>
           </div>
         </div>
-        <div className="flex flex-col gap-5 collapse-content">
+        <div className="collapse-content flex flex-col gap-5">
           <div className="flex justify-between pt-6">
             <div>Expected Output:</div>
             {toAmountQuote.data !== undefined ? (
diff --git a/src/components/nabla/Swap/index.tsx b/src/components/nabla/Swap/index.tsx
index 0c465870..a15fb935 100644
--- a/src/components/nabla/Swap/index.tsx
+++ b/src/components/nabla/Swap/index.tsx
@@ -44,10 +44,10 @@ const Swap = (props: UseSwapComponentProps): JSX.Element | null => {
 
   return (
     <>
-      <Card bordered className="w-full max-w-xl shadow-0 bg-base-200">
+      <Card bordered className="shadow-0 w-full max-w-xl bg-base-200">
         <FormProvider {...form}>
           <form className="card-body text-neutral-800 dark:text-neutral-200" onSubmit={onSubmit}>
-            <div className="flex justify-between mb-2">
+            <div className="mb-2 flex justify-between">
               <Card.Title tag="h2" className="text-3xl font-normal">
                 Swap
               </Card.Title>
@@ -71,18 +71,19 @@ const Swap = (props: UseSwapComponentProps): JSX.Element | null => {
                 })}
                 button={
                   <Button color="ghost" shape="circle" className="text-neutral-600" type="button">
-                    <Cog8ToothIcon className="w-8 h-8" />
+                    <Cog8ToothIcon className="h-8 w-8" />
                   </Button>
                 }
               />
             </div>
             <From
-              fromToken={fromToken}
-              onOpenSelector={() => setModalType('from')}
-              inputHasError={inputHasErrors}
               form={form}
+              fromToken={fromToken}
+              fromAmount={fromAmount}
               fromFormFieldName="fromAmount"
               fromTokenBalance={fromTokenBalance}
+              onOpenSelector={() => setModalType('from')}
+              inputHasError={inputHasErrors}
             />
             <SwapAssetsButton
               onClick={() => {
@@ -90,13 +91,13 @@ const Swap = (props: UseSwapComponentProps): JSX.Element | null => {
               }}
             />
             <To
-              toToken={toToken}
               fromToken={fromToken}
+              fromAmount={fromAmount}
+              toToken={toToken}
               toAmountQuote={
                 inputHasErrors ? { enabled: false, data: undefined, error: null, isLoading: false } : toAmountQuote
               }
               onOpenSelector={() => setModalType('to')}
-              fromAmount={fromAmount}
               slippage={slippage}
             />
             <Validation className="mb-2 text-center" errors={errors} />
diff --git a/src/components/nabla/common/NablaTokenPrice.tsx b/src/components/nabla/common/NablaTokenPrice.tsx
index 50831468..7590bec2 100644
--- a/src/components/nabla/common/NablaTokenPrice.tsx
+++ b/src/components/nabla/common/NablaTokenPrice.tsx
@@ -1,20 +1,21 @@
-import { NumberLoader } from '../../Loader';
+import Big from 'big.js';
 import { useNablaTokenPrice } from '../../../hooks/nabla/useNablaTokenPrice';
+import { NumberLoader } from '../../Loader';
 
 export type TokenPriceProps = {
   address: string;
   prefix?: ReactNode;
   fallback?: ReactNode;
-  currentTokenAmount?: number;
+  currentTokenAmount?: Big;
   formatByAmount?: boolean;
 };
 
 export function NablaTokenPrice({
-  currentTokenAmount,
   address,
   prefix = null,
   fallback = null,
   formatByAmount = false,
+  currentTokenAmount = Big(0),
 }: TokenPriceProps): JSX.Element | null {
   const { data, isLoading } = useNablaTokenPrice(address);
   if (isLoading) return <NumberLoader />;
@@ -22,9 +23,8 @@ export function NablaTokenPrice({
   if (data === undefined) return fallback;
 
   if (formatByAmount) {
-    const currentAmountPrice = (Number(data.approximateStrings.atLeast2Decimals) * (currentTokenAmount || 0)).toFixed(
-      2,
-    );
+    const currentAmountPrice = Big(data.approximateStrings.atLeast2Decimals).mul(currentTokenAmount).toFixed(2);
+
     return (
       <span>
         {prefix}${currentAmountPrice}

From c2ef20e6b33b44c4fe91460f46556276bb6b4bb6 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Tue, 8 Oct 2024 12:44:42 +0200
Subject: [PATCH 7/9] remove deprecated husky code

---
 .husky/pre-commit | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index 36af2198..2312dc58 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npx lint-staged

From 368ba85da18a0ce818a64c5a9bf1a42494d186f0 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Tue, 8 Oct 2024 12:48:15 +0200
Subject: [PATCH 8/9] remove deprecated husky code

---
 .husky/pre-commit | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index 2312dc58..aae14ee5 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1 +1,2 @@
-npx lint-staged
+# .husky/pre-commit
+yarn lint-staged

From 88a4e64b5e8201919fdf21602f27c8118c22ed7e Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Wed, 9 Oct 2024 13:19:46 +0200
Subject: [PATCH 9/9] round down NablaTokenPrice

---
 src/components/nabla/common/NablaTokenPrice.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/nabla/common/NablaTokenPrice.tsx b/src/components/nabla/common/NablaTokenPrice.tsx
index 7590bec2..e6b1c252 100644
--- a/src/components/nabla/common/NablaTokenPrice.tsx
+++ b/src/components/nabla/common/NablaTokenPrice.tsx
@@ -23,7 +23,7 @@ export function NablaTokenPrice({
   if (data === undefined) return fallback;
 
   if (formatByAmount) {
-    const currentAmountPrice = Big(data.approximateStrings.atLeast2Decimals).mul(currentTokenAmount).toFixed(2);
+    const currentAmountPrice = Big(data.approximateStrings.atLeast2Decimals).mul(currentTokenAmount).toFixed(2, 0);
 
     return (
       <span>