From ba4c788ecad171dfbe2ae1df30182b1b7686eef3 Mon Sep 17 00:00:00 2001
From: venuswhispers <venuswhisperer412@gmail.com>
Date: Tue, 12 Nov 2024 02:05:45 -0500
Subject: [PATCH] update: serveral UI issues

---
 apps/bridge/src/app/layout.tsx                |  18 +-
 .../src/app/swap/teleporter/[swapId]/page.tsx |  39 +-
 .../bridge/src/components/Swap/Form/index.tsx | 321 +++++----
 .../components/SwapHistory/StatusIcons.tsx    |  62 +-
 .../SwapHistory/SwapDetailsComponent.tsx      |  72 +-
 .../SwapHistory/TransfersWrapper.tsx          |  24 +-
 .../src/components/SwapHistory/index.tsx      | 250 ++++---
 apps/bridge/src/components/SwapWithdrawal.tsx |  16 +-
 apps/bridge/src/components/Swapper.tsx        |  24 +-
 .../src/components/lux/fireblocks/process.tsx | 140 ++--
 .../components/lux/fireblocks/swap/Form.tsx   | 211 +++---
 .../teleport/constants/networks.mainnets.ts   | 654 +++++++++---------
 .../teleport/constants/networks.sandbox.ts    | 384 +++++-----
 .../lux/teleport/constants/settings.ts        | 156 ++---
 .../src/components/lux/teleport/process.tsx   | 139 ++--
 .../components/lux/teleport/share/Address.tsx | 400 ++++++-----
 .../lux/teleport/swap/AmountField.tsx         |  44 +-
 .../src/components/lux/teleport/swap/Form.tsx | 201 +++---
 .../lux/teleport/swap/NumericInput.tsx        | 205 +++---
 .../lux/teleport/swap/SuccessIcon.tsx         |  29 +-
 .../lux/teleport/swap/SwapDetails.tsx         |  56 +-
 .../teleport/swap/from/NetworkFormField.tsx   |  38 +-
 .../lux/teleport/swap/from/NetworkSelect.tsx  |  88 ++-
 .../swap/from/NetworkSelectWrapper.tsx        | 150 ++--
 .../lux/teleport/swap/from/SelectItem.tsx     |  42 +-
 .../lux/teleport/swap/from/TokenSelect.tsx    |  78 +--
 .../teleport/swap/from/TokenSelectWrapper.tsx |  63 +-
 .../lux/teleport/swap/progress/MoveIcon.tsx   |   8 +-
 .../swap/progress/PayoutProcessor.tsx         | 251 +++----
 .../lux/teleport/swap/progress/SwapItems.tsx  | 130 ++--
 .../teleport/swap/progress/SwapSuccess.tsx    |  47 +-
 .../swap/progress/TeleportProcessor.tsx       | 158 ++---
 .../teleport/swap/progress/TokenDepositor.tsx | 233 +++----
 .../lux/teleport/swap/to/NetworkFormField.tsx |  46 +-
 .../lux/teleport/swap/to/NetworkSelect.tsx    |  20 +-
 .../teleport/swap/to/NetworkSelectWrapper.tsx | 136 ++--
 .../lux/teleport/swap/to/SelectItem.tsx       |  12 +-
 .../lux/teleport/swap/to/TokenSelect.tsx      |  40 +-
 .../teleport/swap/to/TokenSelectWrapper.tsx   | 117 ++--
 .../src/components/shadcn/command-wrapper.tsx |   9 +-
 apps/bridge/src/util/getBridgeSettings.ts     |  23 +-
 server/prisma/schema.prisma                   |   4 +-
 42 files changed, 2594 insertions(+), 2544 deletions(-)

diff --git a/apps/bridge/src/app/layout.tsx b/apps/bridge/src/app/layout.tsx
index d73b5950..ae02e2ee 100644
--- a/apps/bridge/src/app/layout.tsx
+++ b/apps/bridge/src/app/layout.tsx
@@ -1,8 +1,8 @@
 import React, { type PropsWithChildren } from 'react'
 
-import { 
-  RootLayout as RootLayoutCore, 
-  viewport as ViewportCode, 
+import {
+  RootLayout as RootLayoutCore,
+  viewport as ViewportCode,
 } from '@luxfi/ui/root-layout'
 
 import { Footer } from '@luxfi/ui'
@@ -19,16 +19,12 @@ import Contexts from '@/components/Contexts'
 import Main from '@/components/main'
 
 export const metadata = { ..._metadata }
-export const viewport = { ...ViewportCode}
+export const viewport = { ...ViewportCode }
 
-const RootLayout: React.FC<PropsWithChildren> = async ({
-  children
-}) => (
+const RootLayout: React.FC<PropsWithChildren> = async ({ children }) => (
   <RootLayoutCore siteDef={siteDef} showHeader>
-    <Contexts >
-      <Main>
-        {children}
-      </Main>
+    <Contexts>
+      <Main>{children}</Main>
     </Contexts>
     <Footer siteDef={siteDef} />
   </RootLayoutCore>
diff --git a/apps/bridge/src/app/swap/teleporter/[swapId]/page.tsx b/apps/bridge/src/app/swap/teleporter/[swapId]/page.tsx
index 18f847e1..c4332958 100644
--- a/apps/bridge/src/app/swap/teleporter/[swapId]/page.tsx
+++ b/apps/bridge/src/app/swap/teleporter/[swapId]/page.tsx
@@ -1,30 +1,31 @@
-import React from "react"
+import React from 'react'
 import { redirect } from 'next/navigation'
 
 import { useSettingsContainer } from '@/context/settings'
 
 import { BridgeAppSettings } from '@/Models/BridgeAppSettings'
-import SwapProcess from "@/components/lux/teleport/process"
+import SwapProcess from '@/components/lux/teleport/process'
 import getBridgeSettings from '@/util/getBridgeSettings'
 
-const SwapDetails: React.FC<{ 
-  params: { swapId: string } 
-}> = async ({ 
-  params 
-}) => {
+const SwapDetails: React.FC<{
+  params: { swapId: string }
+}> = ({ params }) => {
+  // const settings = await getBridgeSettings(params.swapId)
+  // const settingsContainer = useSettingsContainer()
+  // if (
+  //   settings &&
+  //   'error' in settings &&
+  //   settings.error.startsWith('invalid guid')
+  // ) {
+  //   redirect('/')
+  // }
 
-  const settings = await getBridgeSettings(params.swapId)
-  const settingsContainer = useSettingsContainer()
-  if (settings && 'error' in settings && settings.error.startsWith('invalid guid')) {
-    redirect('/')
-  }
-
-  if (settingsContainer) {
-    settingsContainer.settings = new BridgeAppSettings((settings && 'networks' in settings) ? settings : {}) 
-  }
-  return (
-    <SwapProcess swapId={params.swapId} />
-  )
+  // if (settingsContainer) {
+  //   settingsContainer.settings = new BridgeAppSettings(
+  //     settings && 'networks' in settings ? settings : {}
+  //   )
+  // }
+  return <SwapProcess swapId={params.swapId} className="my-20" />
 }
 
 export default SwapDetails
diff --git a/apps/bridge/src/components/Swap/Form/index.tsx b/apps/bridge/src/components/Swap/Form/index.tsx
index 21795c2b..486ac110 100644
--- a/apps/bridge/src/components/Swap/Form/index.tsx
+++ b/apps/bridge/src/components/Swap/Form/index.tsx
@@ -8,7 +8,10 @@ import React from 'react'
 import ConnectNetwork from '@/components/ConnectNetwork'
 import toast from 'react-hot-toast'
 import MainStepValidation from '@/lib/mainStepValidator'
-import { generateSwapInitialValues, generateSwapInitialValuesFromSwap } from '@/lib/generateSwapInitialValues'
+import {
+  generateSwapInitialValues,
+  generateSwapInitialValuesFromSwap,
+} from '@/lib/generateSwapInitialValues'
 import BridgeApiClient, { SwapStatusInNumbers } from '@/lib/BridgeApiClient'
 import Modal from '../../modal/modal'
 import SwapForm from './Form'
@@ -31,145 +34,182 @@ import { useFee } from '@/context/feeContext'
 import ResizablePanel from '../../ResizablePanel'
 
 type NetworkToConnect = {
-    DisplayName: string
-    AppURL: string
+  DisplayName: string
+  AppURL: string
 }
 const SwapDetails = dynamic(() => import('..'), {
-    loading: () => <div className='w-full h-[450px]'>
-        <div className='animate-pulse flex space-x-4'>
-            <div className='flex-1 space-y-6 py-1'>
-                <div className='h-32 bg-level-1 rounded-lg'></div>
-                <div className='h-40 bg-level-1 rounded-lg'></div>
-                <div className='h-12 bg-level-1 rounded-lg'></div>
-            </div>
+  loading: () => (
+    <div className="w-full h-[450px]">
+      <div className="animate-pulse flex space-x-4">
+        <div className="flex-1 space-y-6 py-1">
+          <div className="h-32 bg-level-1 rounded-lg"></div>
+          <div className="h-40 bg-level-1 rounded-lg"></div>
+          <div className="h-12 bg-level-1 rounded-lg"></div>
         </div>
+      </div>
     </div>
+  ),
 })
 
 export default function Form() {
-    const formikRef = useRef<FormikProps<SwapFormValues>>(null)
-    const [showConnectNetworkModal, setShowConnectNetworkModal] = useState(false)
-    const [showSwapModal, setShowSwapModal] = useState(false)
-    const [networkToConnect, setNetworkToConnect] = useState<NetworkToConnect>()
-    const router = useRouter()
-    const { updateAuthData, setUserType } = useAuthDataUpdate()
-
-    const settings = useSettings()
-    const query = useQueryState()
-
-    const { createSwap, setSwapId } = useSwapDataUpdate()
-    const searchParams = useSearchParams()
-
-    const client = new BridgeApiClient()
-    const { data: partnerData } = useSWR<ApiResponse<Partner>>(query?.appName && `/apps?name=${query?.appName}`, client.fetcher)
-    const partner = query?.appName && partnerData?.data?.name?.toLowerCase() === (query?.appName as string)?.toLowerCase() ? partnerData?.data : undefined
-
-    const { swap } = useSwapDataState()
-    const { minAllowedAmount, maxAllowedAmount } = useFee()
-
-    useEffect(() => {
-        if (swap) {
-            const initialValues = generateSwapInitialValuesFromSwap(swap, settings)
-            formikRef?.current?.resetForm({ values: initialValues })
-            formikRef?.current?.validateForm(initialValues)
-        }
-    }, [swap])
-
-    const handleSubmit = useCallback(async (values: SwapFormValues) => {
-        try {
-            const accessToken = TokenService.getAuthData()?.access_token
-            console.log(accessToken)
-            // if (!accessToken) {
-            //     try {
-            //         var apiClient = new BridgeAuthApiClient()
-            //         const res = await apiClient.guestConnectAsync()
-            //         updateAuthData(res)
-            //         setUserType(UserType.GuestUser)
-            //     }
-            //     catch ( error: any ) {
-            //         toast.error(error.response?.data?.error || error.message)
-            //         return
-            //     }
-            // }
-            console.log({ values, query, partner })
-            const swapId = await createSwap(values, query, partner)
-            console.log({ swapId })
-
-            if (swapId) {
-                setSwapId(swapId)
-                let swapURL = window.location.protocol + '//' + window.location.host + `/swap/${swapId}`
-                const params = resolvePersistentQueryParams(searchParams)
-                if (params.size) {
-                  swapURL += `?${params.toString()}`
-                }
-                window.history.pushState({ ...window.history.state, as: swapURL, url: swapURL }, '', swapURL)
-                setShowSwapModal(true)
-            }
-            mutate(`/swaps?status=${SwapStatusInNumbers.Pending}&version=${BridgeApiClient.apiVersion}`)
+  const formikRef = useRef<FormikProps<SwapFormValues>>(null)
+  const [showConnectNetworkModal, setShowConnectNetworkModal] = useState(false)
+  const [showSwapModal, setShowSwapModal] = useState(false)
+  const [networkToConnect, setNetworkToConnect] = useState<NetworkToConnect>()
+  const router = useRouter()
+  const { updateAuthData, setUserType } = useAuthDataUpdate()
+
+  const settings = useSettings()
+  const query = useQueryState()
+
+  const { createSwap, setSwapId } = useSwapDataUpdate()
+  const searchParams = useSearchParams()
+
+  const client = new BridgeApiClient()
+  const { data: partnerData } = useSWR<ApiResponse<Partner>>(
+    query?.appName && `/apps?name=${query?.appName}`,
+    client.fetcher
+  )
+  const partner =
+    query?.appName &&
+    partnerData?.data?.name?.toLowerCase() ===
+      (query?.appName as string)?.toLowerCase()
+      ? partnerData?.data
+      : undefined
+
+  const { swap } = useSwapDataState()
+  const { minAllowedAmount, maxAllowedAmount } = useFee()
+
+  useEffect(() => {
+    if (swap) {
+      const initialValues = generateSwapInitialValuesFromSwap(swap, settings)
+      formikRef?.current?.resetForm({ values: initialValues })
+      formikRef?.current?.validateForm(initialValues)
+    }
+  }, [swap])
+
+  const handleSubmit = useCallback(
+    async (values: SwapFormValues) => {
+      try {
+        const accessToken = TokenService.getAuthData()?.access_token
+        console.log(accessToken)
+        // if (!accessToken) {
+        //     try {
+        //         var apiClient = new BridgeAuthApiClient()
+        //         const res = await apiClient.guestConnectAsync()
+        //         updateAuthData(res)
+        //         setUserType(UserType.GuestUser)
+        //     }
+        //     catch ( error: any ) {
+        //         toast.error(error.response?.data?.error || error.message)
+        //         return
+        //     }
+        // }
+        console.log({ values, query, partner })
+        const swapId = await createSwap(values, query, partner)
+        console.log({ swapId })
+
+        if (swapId) {
+          setSwapId(swapId)
+          let swapURL =
+            window.location.protocol +
+            '//' +
+            window.location.host +
+            `/swap/${swapId}`
+          const params = resolvePersistentQueryParams(searchParams)
+          if (params.size) {
+            swapURL += `?${params.toString()}`
+          }
+          window.history.pushState(
+            { ...window.history.state, as: swapURL, url: swapURL },
+            '',
+            swapURL
+          )
+          setShowSwapModal(true)
         }
-        catch (error: any) {
-            const data: ApiError = error?.response?.data?.error
-            if (data?.code === LSAPIKnownErrorCode.BLACKLISTED_ADDRESS) {
-                toast.error("You can't transfer to that address. Please double check.")
-            }
-            else if (data?.code === LSAPIKnownErrorCode.INVALID_ADDRESS_ERROR) {
-                toast.error(`Enter a valid ${values.to?.display_name} address`)
-            }
-            else if (data?.code === LSAPIKnownErrorCode.UNACTIVATED_ADDRESS_ERROR && values.to) {
-                setNetworkToConnect({
-                    DisplayName: values.to?.display_name,
-                    AppURL: data.message
-                })
-                setShowConnectNetworkModal(true)
-            }
-            else {
-                toast.error(error.message)
-            }
+        mutate(
+          `/swaps?status=${SwapStatusInNumbers.Pending}&version=${BridgeApiClient.apiVersion}`
+        )
+      } catch (error: any) {
+        const data: ApiError = error?.response?.data?.error
+        if (data?.code === LSAPIKnownErrorCode.BLACKLISTED_ADDRESS) {
+          toast.error(
+            "You can't transfer to that address. Please double check."
+          )
+        } else if (data?.code === LSAPIKnownErrorCode.INVALID_ADDRESS_ERROR) {
+          toast.error(`Enter a valid ${values.to?.display_name} address`)
+        } else if (
+          data?.code === LSAPIKnownErrorCode.UNACTIVATED_ADDRESS_ERROR &&
+          values.to
+        ) {
+          setNetworkToConnect({
+            DisplayName: values.to?.display_name,
+            AppURL: data.message,
+          })
+          setShowConnectNetworkModal(true)
+        } else {
+          toast.error(error.message)
         }
-    }, [createSwap, query, partner, router, updateAuthData, setUserType, swap])
-
-    const destAddress: string = query?.destAddress as string
-
-    const isPartnerAddress = partner && destAddress
-
-    const isPartnerWallet = isPartnerAddress && partner?.is_wallet
-
-    const initialValues: SwapFormValues = swap ? generateSwapInitialValuesFromSwap(swap, settings)
-        : generateSwapInitialValues(settings, query)
-    const initiallyValidation = MainStepValidation({ minAllowedAmount, maxAllowedAmount })(initialValues)
-    const initiallyIsValid = Object.values(initiallyValidation)?.filter(v => v).length > 0
-
-
-    const handleClosesSwapModal = () => {
-      let homeURL = window.location.protocol + '//' + window.location.host
-      const params = resolvePersistentQueryParams(searchParams)
-      if (params.size) {
-        homeURL += `?${params.toString()}`
       }
-        window.history.replaceState({ ...window.history.state, as: homeURL, url: homeURL }, '', homeURL)
+    },
+    [createSwap, query, partner, router, updateAuthData, setUserType, swap]
+  )
+
+  const destAddress: string = query?.destAddress as string
+
+  const isPartnerAddress = partner && destAddress
+
+  const isPartnerWallet = isPartnerAddress && partner?.is_wallet
+
+  const initialValues: SwapFormValues = swap
+    ? generateSwapInitialValuesFromSwap(swap, settings)
+    : generateSwapInitialValues(settings, query)
+  const initiallyValidation = MainStepValidation({
+    minAllowedAmount,
+    maxAllowedAmount,
+  })(initialValues)
+  const initiallyIsValid =
+    Object.values(initiallyValidation)?.filter((v) => v).length > 0
+
+  const handleClosesSwapModal = () => {
+    let homeURL = window.location.protocol + '//' + window.location.host
+    const params = resolvePersistentQueryParams(searchParams)
+    if (params.size) {
+      homeURL += `?${params.toString()}`
     }
-
-    return <>
-        <Modal
-            height='fit'
-            show={showConnectNetworkModal}
-            setShow={setShowConnectNetworkModal}
-            header={`${networkToConnect?.DisplayName} connect`}
-        >
-            {networkToConnect && (
-                <ConnectNetwork NetworkDisplayName={networkToConnect?.DisplayName} AppURL={networkToConnect?.AppURL} />
-            )}
-        </Modal>
-        <Modal height='fit'
-            show={showSwapModal}
-            setShow={setShowSwapModal}
-            header={`Complete the swap`}
-            onClose={handleClosesSwapModal}
-        >
-            <ResizablePanel>
-                <SwapDetails type='contained' />
-            </ResizablePanel>
-            {/* <div className='w-full py-2'>
+    window.history.replaceState(
+      { ...window.history.state, as: homeURL, url: homeURL },
+      '',
+      homeURL
+    )
+  }
+
+  return (
+    <>
+      <Modal
+        height="fit"
+        show={showConnectNetworkModal}
+        setShow={setShowConnectNetworkModal}
+        header={`${networkToConnect?.DisplayName} connect`}
+      >
+        {networkToConnect && (
+          <ConnectNetwork
+            NetworkDisplayName={networkToConnect?.DisplayName}
+            AppURL={networkToConnect?.AppURL}
+          />
+        )}
+      </Modal>
+      <Modal
+        height="fit"
+        show={showSwapModal}
+        setShow={setShowSwapModal}
+        header={`Complete the swap`}
+        onClose={handleClosesSwapModal}
+      >
+        <ResizablePanel>
+          <SwapDetails type="contained" />
+        </ResizablePanel>
+        {/* <div className='w-full py-2'>
             <div className='my-5 px-2 py-3 rounded-lg border-[#9e88882c] bg-[black]/20'>
                 <div className=''>Deposit Address</div>
                 <div className='flex gap-1 items-center'>
@@ -178,16 +218,17 @@ export default function Form() {
                 </div>
             </div>
         </div> */}
-        </Modal>
-        <Formik
-            innerRef={formikRef}
-            initialValues={initialValues}
-            validateOnMount={true}
-            validate={MainStepValidation({ minAllowedAmount, maxAllowedAmount })}
-            onSubmit={handleSubmit}
-            isInitialValid={!initiallyIsValid}
-        >
-            <SwapForm isPartnerWallet={!!isPartnerWallet} partner={partner} />
-        </Formik>
+      </Modal>
+      <Formik
+        innerRef={formikRef}
+        initialValues={initialValues}
+        validateOnMount={true}
+        validate={MainStepValidation({ minAllowedAmount, maxAllowedAmount })}
+        onSubmit={handleSubmit}
+        isInitialValid={!initiallyIsValid}
+      >
+        <SwapForm isPartnerWallet={!!isPartnerWallet} partner={partner} />
+      </Formik>
     </>
+  )
 }
diff --git a/apps/bridge/src/components/SwapHistory/StatusIcons.tsx b/apps/bridge/src/components/SwapHistory/StatusIcons.tsx
index f1ae7a53..8d22dadf 100644
--- a/apps/bridge/src/components/SwapHistory/StatusIcons.tsx
+++ b/apps/bridge/src/components/SwapHistory/StatusIcons.tsx
@@ -1,18 +1,18 @@
-import { SwapStatus } from "../../Models/SwapStatus";
+import { SwapStatus } from '../../Models/SwapStatus'
 import {
   type PublishedSwapTransactions,
   type SwapItem,
   TransactionType,
-} from "../../lib/BridgeApiClient";
+} from '../../lib/BridgeApiClient'
 
 export default function StatusIcon({
   swap,
   short,
 }: {
-  swap: SwapItem;
-  short?: boolean;
+  swap: SwapItem
+  short?: boolean
 }) {
-  const status = swap.status;
+  const status = swap.status
   switch (status) {
     case SwapStatus.Failed:
       return (
@@ -22,7 +22,7 @@ export default function StatusIcon({
             {!short && <p>Failed</p>}
           </div>
         </>
-      );
+      )
     case SwapStatus.Completed:
       return (
         <>
@@ -31,7 +31,7 @@ export default function StatusIcon({
             {!short && <p>Completed</p>}
           </div>
         </>
-      );
+      )
     case SwapStatus.PayoutSuccess:
       return (
         <>
@@ -40,7 +40,7 @@ export default function StatusIcon({
             {!short && <p>Completed</p>}
           </div>
         </>
-      );
+      )
     case SwapStatus.Cancelled:
       return (
         <>
@@ -49,7 +49,7 @@ export default function StatusIcon({
             {!short && <p>Cancelled</p>}
           </div>
         </>
-      );
+      )
     case SwapStatus.Expired:
       return (
         <>
@@ -58,12 +58,12 @@ export default function StatusIcon({
             {!short && <p>Expired</p>}
           </div>
         </>
-      );
+      )
     case SwapStatus.UserTransferPending:
       const data: PublishedSwapTransactions = JSON.parse(
-        localStorage.getItem("swapTransactions") || "{}"
-      );
-      const txForSwap = data.state?.swapTransactions?.[swap.id];
+        localStorage.getItem('swapTransactions') || '{}'
+      )
+      const txForSwap = data.state?.swapTransactions?.[swap.id]
       if (
         txForSwap ||
         swap.transactions.find((t) => t.type === TransactionType.Input)
@@ -75,7 +75,7 @@ export default function StatusIcon({
               {!short && <p>Processing</p>}
             </div>
           </>
-        );
+        )
       } else {
         return (
           <>
@@ -84,7 +84,7 @@ export default function StatusIcon({
               {!short && <p>Pending</p>}
             </div>
           </>
-        );
+        )
       }
     case SwapStatus.BridgeTransferPending:
       return (
@@ -94,7 +94,7 @@ export default function StatusIcon({
             {!short && <p>Processing</p>}
           </div>
         </>
-      );
+      )
     case SwapStatus.TeleportProcessPending:
       return (
         <>
@@ -103,7 +103,7 @@ export default function StatusIcon({
             {!short && <p>Processing</p>}
           </div>
         </>
-      );
+      )
     case SwapStatus.UserPayoutPending:
       return (
         <>
@@ -112,7 +112,7 @@ export default function StatusIcon({
             {!short && <p>Processing</p>}
           </div>
         </>
-      );
+      )
     case SwapStatus.UserTransferDelayed:
       return (
         <>
@@ -121,7 +121,7 @@ export default function StatusIcon({
             {!short && <p>Delayed</p>}
           </div>
         </>
-      );
+      )
     case SwapStatus.Created:
       return (
         <>
@@ -130,9 +130,9 @@ export default function StatusIcon({
             {!short && <p>Created</p>}
           </div>
         </>
-      );
+      )
     default:
-      return <></>;
+      return <></>
   }
 }
 
@@ -148,8 +148,8 @@ export const RedIcon = () => {
         <circle cx="30" cy="30" r="30" fill="#E43636" />
       </svg>
     </div>
-  );
-};
+  )
+}
 
 export const GreenIcon = () => {
   return (
@@ -163,8 +163,8 @@ export const GreenIcon = () => {
         <circle cx="30" cy="30" r="30" fill="#55B585" />
       </svg>
     </div>
-  );
-};
+  )
+}
 
 export const YellowIcon = () => {
   return (
@@ -178,8 +178,8 @@ export const YellowIcon = () => {
         <circle cx="30" cy="30" r="30" fill="#facc15" />
       </svg>
     </div>
-  );
-};
+  )
+}
 
 export const GreyIcon = () => {
   return (
@@ -193,8 +193,8 @@ export const GreyIcon = () => {
         <circle cx="30" cy="30" r="30" fill="#808080" />
       </svg>
     </div>
-  );
-};
+  )
+}
 
 export const PurpleIcon = () => {
   return (
@@ -208,5 +208,5 @@ export const PurpleIcon = () => {
         <circle cx="30" cy="30" r="30" fill="#A020F0" />
       </svg>
     </div>
-  );
-};
+  )
+}
diff --git a/apps/bridge/src/components/SwapHistory/SwapDetailsComponent.tsx b/apps/bridge/src/components/SwapHistory/SwapDetailsComponent.tsx
index 855572d0..440585e9 100644
--- a/apps/bridge/src/components/SwapHistory/SwapDetailsComponent.tsx
+++ b/apps/bridge/src/components/SwapHistory/SwapDetailsComponent.tsx
@@ -1,27 +1,27 @@
-"use client";
-import Image from "next/image";
-import shortenAddress from "../utils/ShortenAddress";
-import CopyButton from "../buttons/copyButton";
-import StatusIcon from "./StatusIcons";
-import isGuid from "../utils/isGuid";
-import KnownInternalNames from "../../lib/knownIds";
-import { SwapDetailsComponentSkeleton } from "../Skeletons";
-import { ExternalLink } from "lucide-react";
-import { type FC } from "react";
-import { type SwapItem, TransactionType } from "../../lib/BridgeApiClient";
+'use client'
+import Image from 'next/image'
+import shortenAddress from '../utils/ShortenAddress'
+import CopyButton from '../buttons/copyButton'
+import StatusIcon from './StatusIcons'
+import isGuid from '../utils/isGuid'
+import KnownInternalNames from '../../lib/knownIds'
+import { SwapDetailsComponentSkeleton } from '../Skeletons'
+import { ExternalLink } from 'lucide-react'
+import { type FC } from 'react'
+import { type SwapItem, TransactionType } from '../../lib/BridgeApiClient'
 //networks
-import fireblockNetworksMainnet from "@/components/lux/fireblocks/constants/networks.mainnets";
-import fireblockNetworksTestnet from "@/components/lux/fireblocks/constants/networks.sandbox";
-import { networks as teleportNetworksMainnet } from "@/components/lux/teleport/constants/networks.mainnets";
-import { networks as teleportNetworksTestnet } from "@/components/lux/teleport/constants/networks.sandbox";
+import fireblockNetworksMainnet from '@/components/lux/fireblocks/constants/networks.mainnets'
+import fireblockNetworksTestnet from '@/components/lux/fireblocks/constants/networks.sandbox'
+import { networks as teleportNetworksMainnet } from '@/components/lux/teleport/constants/networks.mainnets'
+import { networks as teleportNetworksTestnet } from '@/components/lux/teleport/constants/networks.sandbox'
 
 type Props = {
-  swap: SwapItem;
-};
+  swap: SwapItem
+}
 
 const SwapDetails: FC<Props> = ({ swap }) => {
   // make networks
-  const isMainnet = process.env.NEXT_PUBLIC_API_VERSION === "mainnet";
+  const isMainnet = process.env.NEXT_PUBLIC_API_VERSION === 'mainnet'
   const networksFireblock = isMainnet
     ? [
         ...fireblockNetworksMainnet.sourceNetworks,
@@ -30,34 +30,34 @@ const SwapDetails: FC<Props> = ({ swap }) => {
     : [
         ...fireblockNetworksTestnet.sourceNetworks,
         ...fireblockNetworksTestnet.destinationNetworks,
-      ];
+      ]
   const networksTeleport = isMainnet
     ? teleportNetworksMainnet
-    : teleportNetworksTestnet;
-  const networks = swap.use_teleporter ? networksTeleport : networksFireblock;
+    : teleportNetworksTestnet
+  const networks = swap.use_teleporter ? networksTeleport : networksFireblock
 
   const sourceNetwork = networks.find(
     (n) => n.internal_name === swap.source_network
-  );
+  )
   const destinationNetwork = networks.find(
     (n) => n.internal_name === swap.destination_network
-  );
+  )
 
   const sourceAsset = sourceNetwork?.currencies.find(
     (c) => c.asset === swap.source_asset
-  );
+  )
   const destinationAsset = destinationNetwork?.currencies.find(
     (c) => c.asset === swap.destination_asset
-  );
+  )
 
   const swapInputTransaction = swap?.transactions?.find(
     (t) => t.type === TransactionType.Input
-  );
+  )
   const swapOutputTransaction = swap?.transactions?.find(
     (t) => t.type === TransactionType.Output
-  );
+  )
 
-  if (!swap) return <SwapDetailsComponentSkeleton />;
+  if (!swap) return <SwapDetailsComponentSkeleton />
 
   return (
     <>
@@ -150,7 +150,7 @@ const SwapDetails: FC<Props> = ({ swap }) => {
                       iconClassName="text-gray-500"
                     >
                       {swap?.destination_address.slice(0, 8) +
-                        "..." +
+                        '...' +
                         swap?.destination_address.slice(
                           swap?.destination_address.length - 5,
                           swap?.destination_address.length
@@ -169,9 +169,9 @@ const SwapDetails: FC<Props> = ({ swap }) => {
                     <div className="inline-flex items-center">
                       <div className="underline hover:no-underline flex items-center space-x-1">
                         <a
-                          target={"_blank"}
+                          target={'_blank'}
                           href={sourceNetwork?.transaction_explorer_template?.replace(
-                            "{0}",
+                            '{0}',
                             swapInputTransaction.transaction_id
                           )}
                         >
@@ -209,9 +209,9 @@ const SwapDetails: FC<Props> = ({ swap }) => {
                         ) : (
                           <div className="underline hover:no-underline flex items-center space-x-1">
                             <a
-                              target={"_blank"}
+                              target={'_blank'}
                               href={destinationNetwork?.transaction_explorer_template?.replace(
-                                "{0}",
+                                '{0}',
                                 swapOutputTransaction.transaction_id
                               )}
                             >
@@ -272,7 +272,7 @@ const SwapDetails: FC<Props> = ({ swap }) => {
         </div>
       </div>
     </>
-  );
-};
+  )
+}
 
-export default SwapDetails;
+export default SwapDetails
diff --git a/apps/bridge/src/components/SwapHistory/TransfersWrapper.tsx b/apps/bridge/src/components/SwapHistory/TransfersWrapper.tsx
index 6bd8029f..1c2645dd 100644
--- a/apps/bridge/src/components/SwapHistory/TransfersWrapper.tsx
+++ b/apps/bridge/src/components/SwapHistory/TransfersWrapper.tsx
@@ -1,16 +1,16 @@
-"use client";
-import TransactionsHistory from "./index";
-import { useAuthState, UserType } from "@/context/authContext";
-import { FormWizardProvider } from "@/context/formWizardProvider";
-import { TimerProvider } from "@/context/timerContext";
-import { AuthStep } from "@/Models/Wizard";
-import GuestCard from "../guestCard";
+'use client'
+import TransactionsHistory from './index'
+import { useAuthState, UserType } from '@/context/authContext'
+import { FormWizardProvider } from '@/context/formWizardProvider'
+import { TimerProvider } from '@/context/timerContext'
+import { AuthStep } from '@/Models/Wizard'
+import GuestCard from '../guestCard'
 
 const TransfersWrapper: React.FC = () => {
-  const { userType } = useAuthState();
+  const { userType } = useAuthState()
 
   return (
-    <div className="">
+    <div className="py-20">
       <TransactionsHistory />
       {userType && userType != UserType.AuthenticatedUser && (
         <FormWizardProvider
@@ -24,7 +24,7 @@ const TransfersWrapper: React.FC = () => {
         </FormWizardProvider>
       )}
     </div>
-  );
-};
+  )
+}
 
-export default TransfersWrapper;
+export default TransfersWrapper
diff --git a/apps/bridge/src/components/SwapHistory/index.tsx b/apps/bridge/src/components/SwapHistory/index.tsx
index 320af784..e86272e0 100644
--- a/apps/bridge/src/components/SwapHistory/index.tsx
+++ b/apps/bridge/src/components/SwapHistory/index.tsx
@@ -1,46 +1,40 @@
-"use client";
-import { useCallback, useRef, useState } from "react";
+'use client'
+import { useCallback, useRef, useState } from 'react'
 
-import Link from "next/link";
-import Image from "next/image";
-import { useSearchParams, useRouter } from "next/navigation";
-import useAsyncEffect from "use-async-effect";
-import axios from "axios";
+import Link from 'next/link'
+import Image from 'next/image'
+import { useSearchParams, useRouter } from 'next/navigation'
+import useAsyncEffect from 'use-async-effect'
+import axios from 'axios'
 
-import {
-  ArrowRight,
-  ChevronRight,
-  Eye,
-  RefreshCcw,
-  Scroll,
-} from "lucide-react";
+import { ArrowRight, ChevronRight, Eye, RefreshCcw, Scroll } from 'lucide-react'
 
 import BridgeApiClient, {
   type SwapItem,
   SwapStatusInNumbers,
   TransactionType,
-} from "@/lib/BridgeApiClient";
-import SpinIcon from "../icons/spinIcon";
-import SwapDetails from "./SwapDetailsComponent";
-import SubmitButton from "../buttons/submitButton";
-import StatusIcon from "./StatusIcons";
-import toast from "react-hot-toast";
-import ToggleButton from "../buttons/toggleButton";
-import Modal from "../modal/modal";
-import AppSettings from "@/lib/AppSettings";
-import HeaderWithMenu from "../HeaderWithMenu";
-import { classNames } from "../utils/classNames";
-import { SwapHistoryComponentSkeleton } from "../Skeletons";
-import resolvePersistentQueryParams from "@/util/resolvePersistentQueryParams";
-import { truncateDecimals } from "../utils/RoundDecimals";
+} from '@/lib/BridgeApiClient'
+import SpinIcon from '../icons/spinIcon'
+import SwapDetails from './SwapDetailsComponent'
+import SubmitButton from '../buttons/submitButton'
+import StatusIcon from './StatusIcons'
+import toast from 'react-hot-toast'
+import ToggleButton from '../buttons/toggleButton'
+import Modal from '../modal/modal'
+import AppSettings from '@/lib/AppSettings'
+import HeaderWithMenu from '../HeaderWithMenu'
+import { classNames } from '../utils/classNames'
+import { SwapHistoryComponentSkeleton } from '../Skeletons'
+import resolvePersistentQueryParams from '@/util/resolvePersistentQueryParams'
+import { truncateDecimals } from '../utils/RoundDecimals'
 //networks
-import fireblockNetworksMainnet from "@/components/lux/fireblocks/constants/networks.mainnets";
-import fireblockNetworksTestnet from "@/components/lux/fireblocks/constants/networks.sandbox";
-import { networks as teleportNetworksMainnet } from "@/components/lux/teleport/constants/networks.mainnets";
-import { networks as teleportNetworksTestnet } from "@/components/lux/teleport/constants/networks.sandbox";
+import fireblockNetworksMainnet from '@/components/lux/fireblocks/constants/networks.mainnets'
+import fireblockNetworksTestnet from '@/components/lux/fireblocks/constants/networks.sandbox'
+import { networks as teleportNetworksMainnet } from '@/components/lux/teleport/constants/networks.mainnets'
+import { networks as teleportNetworksTestnet } from '@/components/lux/teleport/constants/networks.sandbox'
 
 function TransactionsHistory() {
-  const isMainnet = process.env.NEXT_PUBLIC_API_VERSION === "mainnet";
+  const isMainnet = process.env.NEXT_PUBLIC_API_VERSION === 'mainnet'
   const networksFireblock = isMainnet
     ? [
         ...fireblockNetworksMainnet.sourceNetworks,
@@ -49,38 +43,37 @@ function TransactionsHistory() {
     : [
         ...fireblockNetworksTestnet.sourceNetworks,
         ...fireblockNetworksTestnet.destinationNetworks,
-      ];
+      ]
   const networksTeleport = isMainnet
     ? teleportNetworksMainnet
-    : teleportNetworksTestnet;
+    : teleportNetworksTestnet
 
-  const [page, setPage] = useState(0);
-  const [isLastPage, setIsLastPage] = useState(false);
-  const [swaps, setSwaps] = useState<SwapItem[]>();
-  const [loading, setLoading] = useState(false);
-  const router = useRouter();
-  const [selectedSwap, setSelectedSwap] = useState<SwapItem | undefined>();
-  const [openSwapDetailsModal, setOpenSwapDetailsModal] = useState(false);
-  const [showAllSwaps, setShowAllSwaps] = useState(false);
-  const [showToggleButton, setShowToggleButton] = useState(false);
+  const [page, setPage] = useState(0)
+  const [isLastPage, setIsLastPage] = useState(false)
+  const [swaps, setSwaps] = useState<SwapItem[]>()
+  const [loading, setLoading] = useState(false)
+  const router = useRouter()
+  const [selectedSwap, setSelectedSwap] = useState<SwapItem | undefined>()
+  const [openSwapDetailsModal, setOpenSwapDetailsModal] = useState(false)
+  const [showAllSwaps, setShowAllSwaps] = useState(false)
+  const [showToggleButton, setShowToggleButton] = useState(false)
 
-  const PAGE_SIZE = 20;
+  const PAGE_SIZE = 20
 
-  const searchParams = useSearchParams();
-  const canGoBackRef = useRef<boolean>(false);
-  const paramString = resolvePersistentQueryParams(searchParams).toString();
+  const searchParams = useSearchParams()
+  const canGoBackRef = useRef<boolean>(false)
+  const paramString = resolvePersistentQueryParams(searchParams).toString()
 
   const goBack = useCallback(() => {
     canGoBackRef.current = !!(
       window.history?.length && window.history.length > 1
-    );
+    )
     if (canGoBackRef.current) {
-      router.back();
+      router.back()
     } else {
-      router.push("/" + (paramString ? "?" + paramString : ""));
+      router.push('/' + (paramString ? '?' + paramString : ''))
     }
-  }, [paramString]);
-
+  }, [paramString])
 
   const getSwaps = async (page: number, status?: string | number) => {
     try {
@@ -88,122 +81,118 @@ function TransactionsHistory() {
         data: { data },
       } = await axios.get(
         `${process.env.NEXT_PUBLIC_BACKEND_API}/swaps?page=${page}${
-          status ? `&status=${status}` : ""
+          status ? `&status=${status}` : ''
         }&version=${BridgeApiClient.apiVersion}`
-      );
+      )
       return {
         data: data,
         error: null,
-      };
+      }
     } catch (err: any) {
       return {
         data: null,
         error: `Could not get swaps: ${err.message ?? 'unknown'}`,
-      };
+      }
     }
-  };
+  }
 
   useAsyncEffect(async () => {
-    const { data, error } = await getSwaps(1, SwapStatusInNumbers.Cancelled);
-    if (Number(data?.length) > 0) setShowToggleButton(true);
-  }, []);
+    const { data, error } = await getSwaps(1, SwapStatusInNumbers.Cancelled)
+    if (Number(data?.length) > 0) setShowToggleButton(true)
+  }, [])
 
   useAsyncEffect(async () => {
-    setIsLastPage(false);
-    setLoading(true);
+    setIsLastPage(false)
+    setLoading(true)
 
     if (showAllSwaps) {
-      const { data, error } = await getSwaps(1);
+      const { data, error } = await getSwaps(1)
 
       if (error) {
-        toast.error(error);
-        setLoading(false);
-        return;
+        toast.error(error)
+        setLoading(false)
+        return
       }
 
-      setSwaps(data);
-      setPage(1);
+      setSwaps(data)
+      setPage(1)
       if (Number(data?.length) < PAGE_SIZE) {
-        setIsLastPage(true);
+        setIsLastPage(true)
       }
 
-      setLoading(false);
-    } 
-    else {
+      setLoading(false)
+    } else {
       const { data, error } = await getSwaps(
         1,
         SwapStatusInNumbers.SwapsWithoutCancelledAndExpired
-      );
+      )
 
       if (error) {
-        toast.error(error);
-        setLoading(false);
-        return;
+        toast.error(error)
+        setLoading(false)
+        return
       }
 
-      setSwaps(data);
-      setPage(1);
+      setSwaps(data)
+      setPage(1)
       if (Number(data?.length) < PAGE_SIZE) {
-        setIsLastPage(true);
+        setIsLastPage(true)
       }
-      setLoading(false);
+      setLoading(false)
     }
-  }, [paramString, showAllSwaps]);
+  }, [paramString, showAllSwaps])
 
   const handleLoadMore = useCallback(async () => {
     //TODO refactor page change
-    const nextPage = page + 1;
-    setLoading(true);
+    const nextPage = page + 1
+    setLoading(true)
 
     if (showAllSwaps) {
-
-      const { data, error } = await getSwaps(nextPage);
+      const { data, error } = await getSwaps(nextPage)
 
       if (error) {
-        setLoading(false);
-        toast.error(error);
-        return;
+        setLoading(false)
+        toast.error(error)
+        return
       }
 
-      setSwaps((old) => [...(old ? old : []), ...(data ? data : [])]);
-      setPage(nextPage);
+      setSwaps((old) => [...(old ? old : []), ...(data ? data : [])])
+      setPage(nextPage)
       if (Number(data?.length) < PAGE_SIZE) {
-        setIsLastPage(true);
+        setIsLastPage(true)
       }
 
-      setLoading(false);
-    } 
-    else {
-
+      setLoading(false)
+    } else {
       const { data, error } = await getSwaps(
         nextPage,
         SwapStatusInNumbers.SwapsWithoutCancelledAndExpired
-      );
+      )
 
       if (error) {
-        toast.error(error);
-        setLoading(false);
-        return;
+        toast.error(error)
+        setLoading(false)
+        return
       }
 
-      setSwaps((old) => [...(old ? old : []), ...(data ? data : [])]);
-      setPage(nextPage);
+      setSwaps((old) => [...(old ? old : []), ...(data ? data : [])])
+      setPage(nextPage)
       if (Number(data?.length) < PAGE_SIZE) {
-        setIsLastPage(true);
+        setIsLastPage(true)
       }
 
-      setLoading(false);
+      setLoading(false)
     }
-  }, [page, setSwaps]);
+  }, [page, setSwaps])
 
   const handleopenSwapDetails = (swap: SwapItem) => {
-    setSelectedSwap(swap);
-    setOpenSwapDetailsModal(true);
-  };
+    setSelectedSwap(swap)
+    setOpenSwapDetailsModal(true)
+  }
 
   const handleToggleChange = (value: boolean) => {
-    setShowAllSwaps(value);
-  };
+    setShowAllSwaps(value)
+  }
 
   return (
     <div className="bg-background border border-[#404040] rounded-lg mb-6 w-full text-muted overflow-hidden relative min-h-[620px] max-w-lg">
@@ -256,24 +245,24 @@ function TransactionsHistory() {
                       {swaps?.map((swap, index) => {
                         const networks = swap.use_teleporter
                           ? networksTeleport
-                          : networksFireblock;
+                          : networksFireblock
                         const sourceNetwork = networks.find(
                           (n) => n.internal_name === swap.source_network
-                        );
+                        )
                         const destinationNetwork = networks.find(
                           (n) => n.internal_name === swap.destination_network
-                        );
+                        )
 
                         const sourceAsset = sourceNetwork?.currencies.find(
                           (c) => c.asset === swap.source_asset
-                        );
+                        )
                         const destinationAsset =
                           destinationNetwork?.currencies.find(
                             (c) => c.asset === swap.destination_asset
-                          );
+                          )
                         const output_transaction = swap.transactions.find(
                           (t) => t.type === TransactionType.Output
-                        );
+                        )
 
                         return (
                           <tr
@@ -282,8 +271,8 @@ function TransactionsHistory() {
                           >
                             <td
                               className={classNames(
-                                index === 0 ? "" : "border-t border-[#404040]",
-                                "relative text-sm  table-cell"
+                                index === 0 ? '' : 'border-t border-[#404040]',
+                                'relative text-sm  table-cell'
                               )}
                             >
                               <div className=" flex items-center">
@@ -311,7 +300,6 @@ function TransactionsHistory() {
                                       className="rounded-full border border-[#f3f3f32d] object-contain"
                                     />
                                   )}
-
                                 </div>
                               </div>
                               {index !== 0 ? (
@@ -320,8 +308,8 @@ function TransactionsHistory() {
                             </td>
                             <td
                               className={classNames(
-                                index === 0 ? "" : "border-t border-[#404040]",
-                                "relative text-sm table-cell"
+                                index === 0 ? '' : 'border-t border-[#404040]',
+                                'relative text-sm table-cell'
                               )}
                             >
                               <span className="flex items-center">
@@ -330,26 +318,26 @@ function TransactionsHistory() {
                             </td>
                             <td
                               className={classNames(
-                                index === 0 ? "" : "border-t border-[#404040]",
-                                "px-3 py-3.5 text-sm table-cell"
+                                index === 0 ? '' : 'border-t border-[#404040]',
+                                'px-3 py-3.5 text-sm table-cell'
                               )}
                             >
                               <div
                                 className="flex justify-between items-center cursor-pointer"
                                 onClick={(e) => {
-                                  handleopenSwapDetails(swap);
-                                  e.preventDefault();
+                                  handleopenSwapDetails(swap)
+                                  e.preventDefault()
                                 }}
                               >
                                 <div className="">
-                                  {swap?.status == "completed" ? (
+                                  {swap?.status == 'completed' ? (
                                     <span className="ml-1 md:ml-0">
                                       {output_transaction
                                         ? truncateDecimals(
                                             output_transaction?.amount,
                                             5
                                           )
-                                        : "-"}
+                                        : '-'}
                                     </span>
                                   ) : (
                                     <span>
@@ -367,7 +355,7 @@ function TransactionsHistory() {
                               </div>
                             </td>
                           </tr>
-                        );
+                        )
                       })}
                     </tbody>
                   </table>
@@ -411,7 +399,7 @@ function TransactionsHistory() {
                               (selectedSwap?.use_teleporter
                                 ? `/swap/teleporter/${selectedSwap.id}`
                                 : `/swap/${selectedSwap.id}`) + paramString
-                            );
+                            )
                           }}
                           isDisabled={false}
                           isSubmitting={false}
@@ -445,7 +433,7 @@ function TransactionsHistory() {
       )}
       <div id="modal_portal_root" />
     </div>
-  );
+  )
 }
 
-export default TransactionsHistory;
+export default TransactionsHistory
diff --git a/apps/bridge/src/components/SwapWithdrawal.tsx b/apps/bridge/src/components/SwapWithdrawal.tsx
index e810060f..88e0fdc6 100644
--- a/apps/bridge/src/components/SwapWithdrawal.tsx
+++ b/apps/bridge/src/components/SwapWithdrawal.tsx
@@ -7,7 +7,6 @@ import NotFound from './Swap/NotFound'
 import { BalancesDataProvider } from '../context/balances'
 
 const SwapWithdrawal: React.FC = () => {
-
   const { swap, swapApiError } = useSwapDataState()
   const { mutateSwap } = useSwapDataUpdate()
 
@@ -15,20 +14,19 @@ const SwapWithdrawal: React.FC = () => {
     mutateSwap()
   }, [])
 
-
-  return (swap ? (
+  return swap ? (
     <BalancesDataProvider>
-      <SwapDetails type='widget' />
+      <SwapDetails type="widget" />
     </BalancesDataProvider>
-
   ) : (
     <Widget>
-      <div className={`pb-6 rounded-lg w-full overflow-hidden relative h-[548px]`}>
-        {swapApiError && (<NotFound />) }
+      <div
+        className={`pb-6 rounded-lg w-full overflow-hidden relative h-[548px]`}
+      >
+        {swapApiError && <NotFound />}
       </div>
     </Widget>
-
-  ))
+  )
 }
 
 export default SwapWithdrawal
diff --git a/apps/bridge/src/components/Swapper.tsx b/apps/bridge/src/components/Swapper.tsx
index bbbd2c0d..996436e5 100644
--- a/apps/bridge/src/components/Swapper.tsx
+++ b/apps/bridge/src/components/Swapper.tsx
@@ -1,15 +1,19 @@
-"use client";
-import React from "react";
-import { useAtom } from "jotai";
+'use client'
+import React from 'react'
+import { useAtom } from 'jotai'
 
-import { useTelepoterAtom } from "@/store/teleport";
-import Teleporter from "@/components/lux/teleport/swap/Form";
-import SwapFireblock from "@/components/lux/fireblocks/swap/Form";
+import { useTelepoterAtom } from '@/store/teleport'
+import Teleporter from '@/components/lux/teleport/swap/Form'
+import SwapFireblock from '@/components/lux/fireblocks/swap/Form'
 
 const Swapper: React.FC = () => {
-  const [useTeleporter, _] = useAtom(useTelepoterAtom);
+  const [useTeleporter, _] = useAtom(useTelepoterAtom)
 
-  return useTeleporter ? <Teleporter /> : <SwapFireblock />;
-};
+  return (
+    <div className="py-20">
+      {useTeleporter ? <Teleporter /> : <SwapFireblock />}
+    </div>
+  )
+}
 
-export default Swapper;
+export default Swapper
diff --git a/apps/bridge/src/components/lux/fireblocks/process.tsx b/apps/bridge/src/components/lux/fireblocks/process.tsx
index d43d83ba..94f4dbfa 100644
--- a/apps/bridge/src/components/lux/fireblocks/process.tsx
+++ b/apps/bridge/src/components/lux/fireblocks/process.tsx
@@ -1,13 +1,13 @@
-"use client";
-import React from "react";
-import Modal from "../../modal/modal";
-import ResizablePanel from "../../ResizablePanel";
-import axios from "axios";
-import SwapDetails from "./swap/SwapDetails";
-import ConnectNetwork from "@/components/ConnectNetwork";
-import mainNetworks from "@/components/lux/fireblocks/constants/networks.mainnets";
-import devNetworks from "@/components/lux/fireblocks/constants/networks.sandbox";
-import Widget from "@/components/Widget";
+'use client'
+import React from 'react'
+import Modal from '../../modal/modal'
+import ResizablePanel from '../../ResizablePanel'
+import axios from 'axios'
+import SwapDetails from './swap/SwapDetails'
+import ConnectNetwork from '@/components/ConnectNetwork'
+import mainNetworks from '@/components/lux/fireblocks/constants/networks.mainnets'
+import devNetworks from '@/components/lux/fireblocks/constants/networks.sandbox'
+import Widget from '@/components/Widget'
 import {
   sourceNetworkAtom,
   sourceAssetAtom,
@@ -22,50 +22,50 @@ import {
   bridgeMintTransactionAtom,
   userTransferTransactionAtom,
   timeToExpireAtom,
-} from "@/store/fireblocks";
-import { useAtom } from "jotai";
-import type { Network, Token } from "@/types/fireblocks";
+} from '@/store/fireblocks'
+import { useAtom } from 'jotai'
+import type { Network, Token } from '@/types/fireblocks'
 
 type NetworkToConnect = {
-  DisplayName: string;
-  AppURL: string;
-};
+  DisplayName: string
+  AppURL: string
+}
 
 interface IProps {
-  swapId?: string;
+  swapId?: string
 }
 
 const Form: React.FC<IProps> = ({ swapId }) => {
-  const isMainnet = process.env.NEXT_PUBLIC_API_VERSION === "mainnet";
+  const isMainnet = process.env.NEXT_PUBLIC_API_VERSION === 'mainnet'
   const { sourceNetworks, destinationNetworks } = isMainnet
     ? mainNetworks
-    : devNetworks;
+    : devNetworks
 
-  const [sourceNetwork, setSourceNetwork] = useAtom(sourceNetworkAtom);
-  const [sourceAsset, setSourceAsset] = useAtom(sourceAssetAtom);
+  const [sourceNetwork, setSourceNetwork] = useAtom(sourceNetworkAtom)
+  const [sourceAsset, setSourceAsset] = useAtom(sourceAssetAtom)
   const [destinationNetwork, setDestinationNetwork] = useAtom(
     destinationNetworkAtom
-  );
-  const [destinationAsset, setDestinationAsset] = useAtom(destinationAssetAtom);
+  )
+  const [destinationAsset, setDestinationAsset] = useAtom(destinationAssetAtom)
   const [destinationAddress, setDestinationAddress] = useAtom(
     destinationAddressAtom
-  );
-  const [sourceAmount, setSourceAmount] = useAtom(sourceAmountAtom);
-  const [, setSwapStatus] = useAtom(swapStatusAtom);
-  const [, setEthPrice] = useAtom(ethPriceAtom);
-  const [, setSwapId] = useAtom(swapIdAtom);
-  const [, setUserTransferTransaction] = useAtom(userTransferTransactionAtom);
-  const [, setBridgeMintTransactionHash] = useAtom(bridgeMintTransactionAtom);
-  const [, setMpcSignature] = useAtom(mpcSignatureAtom);
-  const [, setTimeToExpire] = useAtom(timeToExpireAtom);
+  )
+  const [sourceAmount, setSourceAmount] = useAtom(sourceAmountAtom)
+  const [, setSwapStatus] = useAtom(swapStatusAtom)
+  const [, setEthPrice] = useAtom(ethPriceAtom)
+  const [, setSwapId] = useAtom(swapIdAtom)
+  const [, setUserTransferTransaction] = useAtom(userTransferTransactionAtom)
+  const [, setBridgeMintTransactionHash] = useAtom(bridgeMintTransactionAtom)
+  const [, setMpcSignature] = useAtom(mpcSignatureAtom)
+  const [, setTimeToExpire] = useAtom(timeToExpireAtom)
 
   React.useEffect(() => {
     if (sourceAsset) {
       axios.get(`/api/tokens/price/${sourceAsset.asset}`).then((data) => {
-        setEthPrice(Number(data?.data?.data?.price));
-      });
+        setEthPrice(Number(data?.data?.data?.price))
+      })
     }
-  }, [sourceAsset]);
+  }, [sourceAsset])
 
   const getSwapById = async (swapId: string) => {
     try {
@@ -73,58 +73,58 @@ const Form: React.FC<IProps> = ({ swapId }) => {
         data: { data },
       } = await axios.get(
         `/api/swaps/${swapId}?version=${process.env.NEXT_PUBLIC_API_VERSION}`
-      );
+      )
       // set time to expire
-      console.log("::swap data for fireblocks: ", data);
-      setTimeToExpire(new Date(data.created_date).getTime());
+      console.log('::swap data for fireblocks: ', data)
+      setTimeToExpire(new Date(data.created_date).getTime())
       const _sourceNetwork = sourceNetworks.find(
         (_n: Network) => _n.internal_name === data.source_network
-      ) as Network;
+      ) as Network
       const _sourceAsset = _sourceNetwork?.currencies?.find(
         (c: Token) => c.asset === data.source_asset
-      );
+      )
       const _destinationNetwork = destinationNetworks.find(
         (_n: Network) => _n.internal_name === data.destination_network
-      ) as Network;
+      ) as Network
       const _destinationAsset = _destinationNetwork?.currencies?.find(
         (c: Token) => c.asset === data.destination_asset
-      );
+      )
 
-      console.log("::swap data:", data);
+      console.log('::swap data:', data)
 
-      setSourceNetwork(_sourceNetwork);
-      setSourceAsset(_sourceAsset);
-      setDestinationNetwork(_destinationNetwork);
-      setDestinationAsset(_destinationAsset);
-      setSourceAmount(data.requested_amount);
-      setSwapStatus(data.status);
-      setSwapId(data.id);
-      setDestinationAddress(data.destination_address);
+      setSourceNetwork(_sourceNetwork)
+      setSourceAsset(_sourceAsset)
+      setDestinationNetwork(_destinationNetwork)
+      setDestinationAsset(_destinationAsset)
+      setSourceAmount(data.requested_amount)
+      setSwapStatus(data.status)
+      setSwapId(data.id)
+      setDestinationAddress(data.destination_address)
 
       const userTransferTransaction = data?.transactions?.find(
-        (t: any) => t.status === "user_transfer"
-      )?.transaction_hash;
-      setUserTransferTransaction(userTransferTransaction ?? "");
+        (t: any) => t.status === 'user_transfer'
+      )?.transaction_hash
+      setUserTransferTransaction(userTransferTransaction ?? '')
       const mpcSignTransaction = data?.transactions?.find(
-        (t: any) => t.status === "mpc_sign"
-      )?.transaction_hash;
-      setMpcSignature(mpcSignTransaction ?? "");
+        (t: any) => t.status === 'mpc_sign'
+      )?.transaction_hash
+      setMpcSignature(mpcSignTransaction ?? '')
       const payoutTransaction = data?.transactions?.find(
-        (t: any) => t.status === "payout"
-      )?.transaction_hash;
-      setBridgeMintTransactionHash(payoutTransaction ?? "");
+        (t: any) => t.status === 'payout'
+      )?.transaction_hash
+      setBridgeMintTransactionHash(payoutTransaction ?? '')
     } catch (err) {
-      console.log(err);
+      console.log(err)
     }
-  };
+  }
 
   React.useEffect(() => {
-    swapId && getSwapById(swapId);
-  }, [swapId]);
+    swapId && getSwapById(swapId)
+  }, [swapId])
 
   const [showConnectNetworkModal, setShowConnectNetworkModal] =
-    React.useState<boolean>(false);
-  const [networkToConnect] = React.useState<NetworkToConnect>();
+    React.useState<boolean>(false)
+  const [networkToConnect] = React.useState<NetworkToConnect>()
 
   return (
     <>
@@ -140,7 +140,7 @@ const Form: React.FC<IProps> = ({ swapId }) => {
         />
       </Modal>
 
-      <Widget className="sm:min-h-[504px]">
+      <Widget className="sm:min-h-[504px] max-w-lg">
         <Widget.Content>
           <ResizablePanel>
             {sourceNetwork &&
@@ -174,7 +174,7 @@ const Form: React.FC<IProps> = ({ swapId }) => {
         </Widget.Content>
       </Widget>
     </>
-  );
-};
+  )
+}
 
-export default Form;
+export default Form
diff --git a/apps/bridge/src/components/lux/fireblocks/swap/Form.tsx b/apps/bridge/src/components/lux/fireblocks/swap/Form.tsx
index 7bd1fb33..cf046cb2 100644
--- a/apps/bridge/src/components/lux/fireblocks/swap/Form.tsx
+++ b/apps/bridge/src/components/lux/fireblocks/swap/Form.tsx
@@ -1,24 +1,24 @@
-"use client";
-import React from "react";
-import dynamic from "next/dynamic";
-import Image from "next/image";
-import axios from "axios";
-import Modal from "@/components/modal/modal";
-import ResizablePanel from "@/components/ResizablePanel";
-import shortenAddress from "../../../utils/ShortenAddress";
-import { type FC } from "react";
-import { ArrowLeftRight } from "lucide-react";
-import Widget from "../../../Widget";
+'use client'
+import React from 'react'
+import dynamic from 'next/dynamic'
+import Image from 'next/image'
+import axios from 'axios'
+import Modal from '@/components/modal/modal'
+import ResizablePanel from '@/components/ResizablePanel'
+import shortenAddress from '../../../utils/ShortenAddress'
+import { type FC } from 'react'
+import { ArrowLeftRight } from 'lucide-react'
+import Widget from '../../../Widget'
 
-import FromNetworkForm from "./from/NetworkFormField";
-import ToNetworkForm from "./to/NetworkFormField";
-import SwapDetails from "./SwapDetails";
-import type { Token, Network } from "@/types/fireblocks";
-import { SWAP_PAIRS } from "@/components/lux/fireblocks/constants/settings";
-import { useAtom } from "jotai";
+import FromNetworkForm from './from/NetworkFormField'
+import ToNetworkForm from './to/NetworkFormField'
+import SwapDetails from './SwapDetails'
+import type { Token, Network } from '@/types/fireblocks'
+import { SWAP_PAIRS } from '@/components/lux/fireblocks/constants/settings'
+import { useAtom } from 'jotai'
 
-import devNetworks from "@/components/lux/fireblocks/constants/networks.sandbox";
-import mainNetworks from "@/components/lux/fireblocks/constants/networks.mainnets";
+import devNetworks from '@/components/lux/fireblocks/constants/networks.sandbox'
+import mainNetworks from '@/components/lux/fireblocks/constants/networks.mainnets'
 
 import {
   sourceNetworkAtom,
@@ -31,64 +31,63 @@ import {
   swapStatusAtom,
   swapIdAtom,
   timeToExpireAtom,
-} from "@/store/fireblocks";
-import SpinIcon from "@/components/icons/spinIcon";
-import { SwapStatus } from "@/Models/SwapStatus";
+} from '@/store/fireblocks'
+import SpinIcon from '@/components/icons/spinIcon'
+import { SwapStatus } from '@/Models/SwapStatus'
 
 const Address = dynamic(
-  () => import("@/components/lux/fireblocks/share/Address"),
+  () => import('@/components/lux/fireblocks/share/Address'),
   {
     loading: () => <></>,
   }
-);
+)
 
 const Swap: FC = () => {
-  const isMainnet = process.env.NEXT_PUBLIC_API_VERSION === "mainnet";
+  const isMainnet = process.env.NEXT_PUBLIC_API_VERSION === 'mainnet'
   const { sourceNetworks, destinationNetworks: dstNetworks } = isMainnet
     ? mainNetworks
-    : devNetworks;
+    : devNetworks
 
-  const [isSubmitting, setIsSubmitting] = React.useState<boolean>(false);
-  const [showAddressModal, setShowAddressModal] =
-    React.useState<boolean>(false);
-  const [sourceNetwork, setSourceNetwork] = useAtom(sourceNetworkAtom);
-  const [sourceAsset, setSourceAsset] = useAtom(sourceAssetAtom);
+  const [isSubmitting, setIsSubmitting] = React.useState<boolean>(false)
+  const [showAddressModal, setShowAddressModal] = React.useState<boolean>(false)
+  const [sourceNetwork, setSourceNetwork] = useAtom(sourceNetworkAtom)
+  const [sourceAsset, setSourceAsset] = useAtom(sourceAssetAtom)
   const [destinationNetwork, setDestinationNetwork] = useAtom(
     destinationNetworkAtom
-  );
-  const [destinationAsset, setDestinationAsset] = useAtom(destinationAssetAtom);
+  )
+  const [destinationAsset, setDestinationAsset] = useAtom(destinationAssetAtom)
   const [destinationAddress, setDestinationAddress] = useAtom(
     destinationAddressAtom
-  );
-  const [sourceAmount, setSourceAmount] = useAtom(sourceAmountAtom);
-  const [swapId, setSwapId] = useAtom(swapIdAtom);
-  const [, setSwapStatus] = useAtom(swapStatusAtom);
-  const [, setEthPrice] = useAtom(ethPriceAtom);
-  const [, setTimeToExpire] = useAtom(timeToExpireAtom);
+  )
+  const [sourceAmount, setSourceAmount] = useAtom(sourceAmountAtom)
+  const [swapId, setSwapId] = useAtom(swapIdAtom)
+  const [, setSwapStatus] = useAtom(swapStatusAtom)
+  const [, setEthPrice] = useAtom(ethPriceAtom)
+  const [, setTimeToExpire] = useAtom(timeToExpireAtom)
 
   const [destinationNetworks, setDestinationNetworks] =
-    React.useState<Network[]>(dstNetworks);
+    React.useState<Network[]>(dstNetworks)
 
   React.useEffect(() => {
     sourceNetwork &&
       sourceNetwork.currencies.length > 0 &&
       setSourceAsset(
-        sourceNetwork.currencies.find((c) => c.status === "active")
-      );
-  }, [sourceNetwork]);
+        sourceNetwork.currencies.find((c) => c.status === 'active')
+      )
+  }, [sourceNetwork])
 
   React.useEffect(() => {
-    setSourceNetwork(sourceNetworks.find((n) => n.status === "active"));
-  }, []);
+    setSourceNetwork(sourceNetworks.find((n) => n.status === 'active'))
+  }, [])
 
   React.useEffect(() => {
     if (sourceAsset) {
       const _networks = dstNetworks
         .filter((n: Network) => {
           if (n.currencies.some((c: Token) => SWAP_PAIRS[sourceAsset.asset])) {
-            return true;
+            return true
           } else {
-            return false;
+            return false
           }
         })
         .map((n: Network) => ({
@@ -97,47 +96,47 @@ const Swap: FC = () => {
             ...c,
             status: SWAP_PAIRS?.[sourceAsset.asset].includes(c.asset)
               ? c.status
-              : "inactive",
+              : 'inactive',
           })),
-        }));
-      setDestinationNetworks(_networks);
-      setDestinationNetwork(_networks.find((n) => n.status === "active"));
+        }))
+      setDestinationNetworks(_networks)
+      setDestinationNetwork(_networks.find((n) => n.status === 'active'))
     }
-  }, [sourceAsset, sourceNetwork]);
+  }, [sourceAsset, sourceNetwork])
 
   React.useEffect(() => {
     setDestinationAsset(
-      destinationNetwork?.currencies.find((c) => c.status === "active")
-    );
-  }, [destinationNetwork]);
+      destinationNetwork?.currencies.find((c) => c.status === 'active')
+    )
+  }, [destinationNetwork])
 
-  const [showSwapModal, setShowSwapModal] = React.useState<boolean>(false);
+  const [showSwapModal, setShowSwapModal] = React.useState<boolean>(false)
 
   React.useEffect(() => {
     if (sourceAsset) {
       axios.get(`/api/tokens/price/${sourceAsset.asset}`).then((data) => {
-        setEthPrice(Number(data?.data?.data?.price));
-      });
+        setEthPrice(Number(data?.data?.data?.price))
+      })
     }
-  }, [sourceAsset]);
+  }, [sourceAsset])
 
   const warnningMessage = React.useMemo(() => {
     if (!sourceNetwork) {
-      return "Select Source Network";
+      return 'Select Source Network'
     } else if (!sourceAsset) {
-      return "Select Source Asset";
+      return 'Select Source Asset'
     } else if (!destinationNetwork) {
-      return "Select Destination Network";
+      return 'Select Destination Network'
     } else if (!destinationAsset) {
-      return "Select Destination Asset";
+      return 'Select Destination Asset'
     } else if (!destinationAddress) {
-      return "Input Address";
-    } else if (sourceAmount === "") {
-      return "Enter Token Amount";
+      return 'Input Address'
+    } else if (sourceAmount === '') {
+      return 'Enter Token Amount'
     } else if (Number(sourceAmount) <= 0) {
-      return "Invalid Token Amount";
+      return 'Invalid Token Amount'
     } else {
-      return "Swap Now";
+      return 'Swap Now'
     }
   }, [
     sourceNetwork,
@@ -146,7 +145,7 @@ const Swap: FC = () => {
     destinationAsset,
     destinationAddress,
     sourceAmount,
-  ]);
+  ])
 
   const createSwap = async () => {
     try {
@@ -154,35 +153,35 @@ const Swap: FC = () => {
         amount: Number(sourceAmount),
         source_network: sourceNetwork,
         source_asset: sourceAsset?.asset,
-        source_address: "",
+        source_address: '',
         destination_network: destinationNetwork?.internal_name,
         destination_asset: destinationAsset?.asset,
         destination_address: destinationAddress,
         refuel: false,
         use_deposit_address: true,
         use_teleporter: false,
-        app_name: "Bridge",
-      };
+        app_name: 'Bridge',
+      }
       const response = await axios.post(
         `/api/swaps?version=${process.env.NEXT_PUBLIC_API_VERSION}`,
         data
-      );
-      console.log("::fireblocks res:", response.data);
-      setSwapId(response.data?.data?.swap_id);
-      setTimeToExpire(new Date(response.data?.data?.created_date).getTime());
+      )
+      console.log('::fireblocks res:', response.data)
+      setSwapId(response.data?.data?.swap_id)
+      setTimeToExpire(new Date(response.data?.data?.created_date).getTime())
       window.history.pushState(
         {},
-        "",
+        '',
         `/swap/fireblocks/${response.data?.data?.swap_id}`
-      );
-      setSwapStatus(SwapStatus.UserDepositPending);
-      setShowSwapModal(true);
+      )
+      setSwapStatus(SwapStatus.UserDepositPending)
+      setShowSwapModal(true)
     } catch (err) {
-      console.log(err);
+      console.log(err)
     } finally {
-      setIsSubmitting(false);
+      setIsSubmitting(false)
     }
-  };
+  }
 
   const handleSwap = () => {
     if (
@@ -193,10 +192,10 @@ const Swap: FC = () => {
       destinationAddress &&
       Number(sourceAmount) > 0
     ) {
-      createSwap();
-      setIsSubmitting(true);
+      createSwap()
+      setIsSubmitting(true)
     }
-  };
+  }
 
   return (
     <Widget className="sm:min-h-[504px] max-w-lg">
@@ -211,7 +210,7 @@ const Swap: FC = () => {
               network={sourceNetwork}
               asset={sourceAsset}
               setNetwork={(network: Network) => {
-                setSourceNetwork(network);
+                setSourceNetwork(network)
               }}
               setAsset={(token: Token) => setSourceAsset(token)}
               networks={sourceNetworks}
@@ -240,7 +239,7 @@ const Swap: FC = () => {
             htmlFor="destination_address"
             className="block font-semibold text-xs"
           >
-            {`To ${destinationNetwork?.display_name ?? ""} address`}
+            {`To ${destinationNetwork?.display_name ?? ''} address`}
           </label>
           <AddressButton
             disabled={
@@ -251,11 +250,11 @@ const Swap: FC = () => {
             }
             isPartnerWallet={false}
             openAddressModal={() => setShowAddressModal(true)}
-            partnerImage={"partnerImage"}
+            partnerImage={'partnerImage'}
             address={destinationAddress}
           />
           <Modal
-            header={`To ${destinationNetwork?.display_name ?? ""} address`}
+            header={`To ${destinationNetwork?.display_name ?? ''} address`}
             height="fit"
             show={showAddressModal}
             setShow={setShowAddressModal}
@@ -271,8 +270,8 @@ const Swap: FC = () => {
               }
               address={destinationAddress}
               setAddress={setDestinationAddress}
-              name={"destination_address"}
-              partnerImage={"partnerImage"}
+              name={'destination_address'}
+              partnerImage={'partnerImage'}
               isPartnerWallet={false}
               address_book={[]}
               network={destinationNetwork}
@@ -297,7 +296,7 @@ const Swap: FC = () => {
           {isSubmitting ? (
             <SpinIcon className="animate-spin h-5 w-5" />
           ) : (
-            warnningMessage === "Swap Now" && (
+            warnningMessage === 'Swap Now' && (
               <ArrowLeftRight className="h-5 w-5" aria-hidden="true" />
             )
           )}
@@ -319,7 +318,7 @@ const Swap: FC = () => {
             destinationAsset &&
             destinationAddress ? (
               <SwapDetails
-                className="min-h-[450px] justify-center"
+                className="min-h-[450px] justify-center max-w-lg"
                 sourceNetwork={sourceNetwork}
                 sourceAsset={sourceAsset}
                 destinationNetwork={destinationNetwork}
@@ -342,20 +341,20 @@ const Swap: FC = () => {
         </Modal>
       </Widget.Content>
     </Widget>
-  );
-};
+  )
+}
 
 const TruncatedAdrress = ({ address }: { address: string }) => {
-  const shortAddress = shortenAddress(address);
-  return <div className="tracking-wider ">{shortAddress}</div>;
-};
+  const shortAddress = shortenAddress(address)
+  return <div className="tracking-wider ">{shortAddress}</div>
+}
 
 const AddressButton: FC<{
-  openAddressModal: () => void;
-  isPartnerWallet: boolean;
-  partnerImage?: string;
-  disabled: boolean;
-  address: string;
+  openAddressModal: () => void
+  isPartnerWallet: boolean
+  partnerImage?: string
+  disabled: boolean
+  address: string
 }> = ({
   openAddressModal,
   isPartnerWallet,
@@ -390,6 +389,6 @@ const AddressButton: FC<{
       )}
     </div>
   </button>
-);
+)
 
-export default Swap;
+export default Swap
diff --git a/apps/bridge/src/components/lux/teleport/constants/networks.mainnets.ts b/apps/bridge/src/components/lux/teleport/constants/networks.mainnets.ts
index 8640e4df..395cf254 100644
--- a/apps/bridge/src/components/lux/teleport/constants/networks.mainnets.ts
+++ b/apps/bridge/src/components/lux/teleport/constants/networks.mainnets.ts
@@ -1,29 +1,29 @@
-import { type Network } from "@/types/teleport";
+import { type Network } from '@/types/teleport'
 
 export const networks: Network[] = [
   {
-    display_name: "Ethereum",
-    internal_name: "ETHEREUM_MAINNET",
-    native_currency: "ETH",
-    logo: "https://cdn.lux.network/bridge/networks/ethereum_mainnet.png",
+    display_name: 'Ethereum',
+    internal_name: 'ETHEREUM_MAINNET',
+    native_currency: 'ETH',
+    logo: 'https://cdn.lux.network/bridge/networks/ethereum_mainnet.png',
     is_testnet: false,
     is_featured: true,
-    average_completion_time: "00:01:04.0494430",
+    average_completion_time: '00:01:04.0494430',
     chain_id: 1,
-    status: "active",
-    type: "evm",
+    status: 'active',
+    type: 'evm',
     refuel_amount_in_usd: 0.5,
-    transaction_explorer_template: "https://etherscan.io/tx/{0}",
-    account_explorer_template: "https://etherscan.io/address/{0}",
-    node: "https://boldest-bold-uranium.quiknode.pro/a5e9ce66d6648e49889274a783acd07aebcc02bc/",
+    transaction_explorer_template: 'https://etherscan.io/tx/{0}',
+    account_explorer_template: 'https://etherscan.io/address/{0}',
+    node: 'https://boldest-bold-uranium.quiknode.pro/a5e9ce66d6648e49889274a783acd07aebcc02bc/',
     currencies: [
       {
-        name: "ETH",
-        asset: "ETH",
-        logo: "https://cdn.lux.network/bridge/currencies/ethereum_eth.svg",
-        contract_address: "0x0000000000000000000000000000000000000000",
+        name: 'ETH',
+        asset: 'ETH',
+        logo: 'https://cdn.lux.network/bridge/currencies/ethereum_eth.svg',
+        contract_address: '0x0000000000000000000000000000000000000000',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -35,12 +35,12 @@ export const networks: Network[] = [
         is_native: true,
       },
       {
-        name: "USDT",
-        asset: "USDT",
-        logo: "https://cdn.lux.network/bridge/currencies/usdt.png",
-        contract_address: "0xdac17f958d2ee523a2206206994597c13d831ec7",
+        name: 'USDT',
+        asset: 'USDT',
+        logo: 'https://cdn.lux.network/bridge/currencies/usdt.png',
+        contract_address: '0xdac17f958d2ee523a2206206994597c13d831ec7',
         decimals: 6,
-        status: "inactive",
+        status: 'inactive',
         is_deposit_enabled: false,
         is_withdrawal_enabled: false,
         is_refuel_enabled: false,
@@ -52,12 +52,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "USDC",
-        asset: "USDC",
-        logo: "https://cdn.lux.network/bridge/currencies/usdc.png",
-        contract_address: "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
+        name: 'USDC',
+        asset: 'USDC',
+        logo: 'https://cdn.lux.network/bridge/currencies/usdc.png',
+        contract_address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
         decimals: 6,
-        status: "inactive",
+        status: 'inactive',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: true,
@@ -69,12 +69,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "DAI",
-        asset: "DAI",
-        logo: "https://cdn.lux.network/bridge/currencies/dai.png",
-        contract_address: "0x6b175474e89094c44da98b954eedeac495271d0f",
+        name: 'DAI',
+        asset: 'DAI',
+        logo: 'https://cdn.lux.network/bridge/currencies/dai.png',
+        contract_address: '0x6b175474e89094c44da98b954eedeac495271d0f',
         decimals: 18,
-        status: "inactive",
+        status: 'inactive',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: true,
@@ -88,28 +88,28 @@ export const networks: Network[] = [
     ],
   },
   {
-    display_name: "Base",
-    internal_name: "BASE_MAINNET",
-    native_currency: "ETH",
-    logo: "https://cdn.lux.network/bridge/networks/base_mainnet.png",
+    display_name: 'Base',
+    internal_name: 'BASE_MAINNET',
+    native_currency: 'ETH',
+    logo: 'https://cdn.lux.network/bridge/networks/base_mainnet.png',
     is_testnet: false,
     is_featured: false,
-    average_completion_time: "00:01:04.0494430",
+    average_completion_time: '00:01:04.0494430',
     chain_id: 8453,
-    status: "active",
-    type: "evm",
+    status: 'active',
+    type: 'evm',
     refuel_amount_in_usd: 0.5,
-    transaction_explorer_template: "https://basescan.org/tx/{0}",
-    account_explorer_template: "https://basescan.org/address/{0}",
-    node: "https://mainnet.base.org",
+    transaction_explorer_template: 'https://basescan.org/tx/{0}',
+    account_explorer_template: 'https://basescan.org/address/{0}',
+    node: 'https://mainnet.base.org',
     currencies: [
       {
-        name: "ETH",
-        asset: "ETH",
-        logo: "https://cdn.lux.network/bridge/currencies/ethereum_eth.svg",
-        contract_address: "0x0000000000000000000000000000000000000000",
+        name: 'ETH',
+        asset: 'ETH',
+        logo: 'https://cdn.lux.network/bridge/currencies/ethereum_eth.svg',
+        contract_address: '0x0000000000000000000000000000000000000000',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -121,12 +121,12 @@ export const networks: Network[] = [
         is_native: true,
       },
       {
-        name: "WETH",
-        asset: "WETH",
-        logo: "https://cdn.lux.network/bridge/currencies/ethereum_eth.svg",
-        contract_address: "0x4200000000000000000000000000000000000006",
+        name: 'WETH',
+        asset: 'WETH',
+        logo: 'https://cdn.lux.network/bridge/currencies/ethereum_eth.svg',
+        contract_address: '0x4200000000000000000000000000000000000006',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -138,12 +138,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "USDT",
-        asset: "USDT",
-        logo: "https://cdn.lux.network/bridge/currencies/usdt.png",
-        contract_address: "0xfde4C96c8593536E31F229EA8f37b2ADa2699bb2",
+        name: 'USDT',
+        asset: 'USDT',
+        logo: 'https://cdn.lux.network/bridge/currencies/usdt.png',
+        contract_address: '0xfde4C96c8593536E31F229EA8f37b2ADa2699bb2',
         decimals: 6,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: false,
         is_withdrawal_enabled: false,
         is_refuel_enabled: false,
@@ -155,12 +155,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "USDC",
-        asset: "USDC",
-        logo: "https://cdn.lux.network/bridge/currencies/usdc.png",
-        contract_address: "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
+        name: 'USDC',
+        asset: 'USDC',
+        logo: 'https://cdn.lux.network/bridge/currencies/usdc.png',
+        contract_address: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',
         decimals: 6,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: true,
@@ -172,12 +172,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "DAI",
-        asset: "DAI",
-        logo: "https://cdn.lux.network/bridge/currencies/dai.png",
-        contract_address: "0x50c5725949A6F0c72E6C4a641F24049A917DB0Cb",
+        name: 'DAI',
+        asset: 'DAI',
+        logo: 'https://cdn.lux.network/bridge/currencies/dai.png',
+        contract_address: '0x50c5725949A6F0c72E6C4a641F24049A917DB0Cb',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: true,
@@ -191,28 +191,28 @@ export const networks: Network[] = [
     ],
   },
   {
-    display_name: "Optimism",
-    internal_name: "OPTIMISM_MAINNET",
-    native_currency: "ETH",
-    logo: "https://cdn.lux.network/bridge/networks/optimism_mainnet.png",
+    display_name: 'Optimism',
+    internal_name: 'OPTIMISM_MAINNET',
+    native_currency: 'ETH',
+    logo: 'https://cdn.lux.network/bridge/networks/optimism_mainnet.png',
     is_testnet: false,
     is_featured: true,
-    average_completion_time: "00:00:07.7777777",
+    average_completion_time: '00:00:07.7777777',
     chain_id: 10,
-    status: "active",
-    type: "evm",
+    status: 'active',
+    type: 'evm',
     refuel_amount_in_usd: 1,
-    transaction_explorer_template: "https://optimistic.etherscan.io/tx/{0}",
-    account_explorer_template: "https://optimistic.etherscan.io//address/{0}",
-    node: "https://eth-mainnet.g.alchemy.com/v2/-z4Zrujiou9ajXAplVapFFWWrPuLPSm7",
+    transaction_explorer_template: 'https://optimistic.etherscan.io/tx/{0}',
+    account_explorer_template: 'https://optimistic.etherscan.io//address/{0}',
+    node: 'https://eth-mainnet.g.alchemy.com/v2/-z4Zrujiou9ajXAplVapFFWWrPuLPSm7',
     currencies: [
       {
-        name: "ETH",
-        asset: "ETH",
-        logo: "https://cdn.lux.network/bridge/currencies/ethereum_eth.svg",
-        contract_address: "0x0000000000000000000000000000000000000000",
+        name: 'ETH',
+        asset: 'ETH',
+        logo: 'https://cdn.lux.network/bridge/currencies/ethereum_eth.svg',
+        contract_address: '0x0000000000000000000000000000000000000000',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -224,12 +224,12 @@ export const networks: Network[] = [
         is_native: true,
       },
       {
-        name: "WETH",
-        asset: "WETH",
-        logo: "https://cdn.lux.network/bridge/currencies/ethereum_eth.svg",
-        contract_address: "0x4200000000000000000000000000000000000006",
+        name: 'WETH',
+        asset: 'WETH',
+        logo: 'https://cdn.lux.network/bridge/currencies/ethereum_eth.svg',
+        contract_address: '0x4200000000000000000000000000000000000006',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -241,12 +241,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "USDT",
-        asset: "USDT",
-        logo: "https://cdn.lux.network/bridge/currencies/usdt.png",
-        contract_address: "0x94b008aa00579c1307b0ef2c499ad98a8ce58e58",
+        name: 'USDT',
+        asset: 'USDT',
+        logo: 'https://cdn.lux.network/bridge/currencies/usdt.png',
+        contract_address: '0x94b008aa00579c1307b0ef2c499ad98a8ce58e58',
         decimals: 6,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: false,
         is_withdrawal_enabled: false,
         is_refuel_enabled: false,
@@ -258,12 +258,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "USDC",
-        asset: "USDC",
-        logo: "https://cdn.lux.network/bridge/currencies/usdc.png",
-        contract_address: "0x0b2c639c533813f4aa9d7837caf62653d097ff85",
+        name: 'USDC',
+        asset: 'USDC',
+        logo: 'https://cdn.lux.network/bridge/currencies/usdc.png',
+        contract_address: '0x0b2c639c533813f4aa9d7837caf62653d097ff85',
         decimals: 6,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: true,
@@ -275,12 +275,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "DAI",
-        asset: "DAI",
-        logo: "https://cdn.lux.network/bridge/currencies/dai.png",
-        contract_address: "0xda10009cbd5d07dd0cecc66161fc93d7c9000da1",
+        name: 'DAI',
+        asset: 'DAI',
+        logo: 'https://cdn.lux.network/bridge/currencies/dai.png',
+        contract_address: '0xda10009cbd5d07dd0cecc66161fc93d7c9000da1',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: true,
@@ -294,28 +294,28 @@ export const networks: Network[] = [
     ],
   },
   {
-    display_name: "Polygon",
-    internal_name: "POLYGON_MAINNET",
-    native_currency: "POL",
-    logo: "https://cdn.lux.network/bridge/networks/polygon_mainnet.png",
+    display_name: 'Polygon',
+    internal_name: 'POLYGON_MAINNET',
+    native_currency: 'POL',
+    logo: 'https://cdn.lux.network/bridge/networks/polygon_mainnet.png',
     is_testnet: false,
     is_featured: true,
-    average_completion_time: "00:00:07.7777777",
+    average_completion_time: '00:00:07.7777777',
     chain_id: 137,
-    status: "active",
-    type: "evm",
+    status: 'active',
+    type: 'evm',
     refuel_amount_in_usd: 1,
-    transaction_explorer_template: "https://polygonscan.com/tx/{0}",
-    account_explorer_template: "https://polygonscan.com/address/{0}",
-    node: "https://polygon-bor-rpc.publicnode.com/",
+    transaction_explorer_template: 'https://polygonscan.com/tx/{0}',
+    account_explorer_template: 'https://polygonscan.com/address/{0}',
+    node: 'https://polygon-bor-rpc.publicnode.com/',
     currencies: [
       {
-        name: "POL",
-        asset: "POL",
-        logo: "https://cdn.lux.network/bridge/currencies/pol.png",
-        contract_address: "0x0000000000000000000000000000000000000000",
+        name: 'POL',
+        asset: 'POL',
+        logo: 'https://cdn.lux.network/bridge/currencies/pol.png',
+        contract_address: '0x0000000000000000000000000000000000000000',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -327,12 +327,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "WETH",
-        asset: "WETH",
-        logo: "https://cdn.lux.network/bridge/currencies/ethereum_eth.svg",
-        contract_address: "0x7ceb23fd6bc0add59e62ac25578270cff1b9f619",
+        name: 'WETH',
+        asset: 'WETH',
+        logo: 'https://cdn.lux.network/bridge/currencies/ethereum_eth.svg',
+        contract_address: '0x7ceb23fd6bc0add59e62ac25578270cff1b9f619',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -344,12 +344,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "USDT",
-        asset: "USDT",
-        logo: "https://cdn.lux.network/bridge/currencies/usdt.png",
-        contract_address: "0xc2132d05d31c914a87c6611c10748aeb04b58e8f",
+        name: 'USDT',
+        asset: 'USDT',
+        logo: 'https://cdn.lux.network/bridge/currencies/usdt.png',
+        contract_address: '0xc2132d05d31c914a87c6611c10748aeb04b58e8f',
         decimals: 6,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: false,
         is_withdrawal_enabled: false,
         is_refuel_enabled: false,
@@ -361,12 +361,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "USDC",
-        asset: "USDC",
-        logo: "https://cdn.lux.network/bridge/currencies/usdc.png",
-        contract_address: "0x3c499c542cef5e3811e1192ce70d8cc03d5c3359",
+        name: 'USDC',
+        asset: 'USDC',
+        logo: 'https://cdn.lux.network/bridge/currencies/usdc.png',
+        contract_address: '0x3c499c542cef5e3811e1192ce70d8cc03d5c3359',
         decimals: 6,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: true,
@@ -378,12 +378,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "DAI",
-        asset: "DAI",
-        logo: "https://cdn.lux.network/bridge/currencies/dai.png",
-        contract_address: "0x8f3Cf7ad23Cd3CaDbD9735AFf958023239c6A063",
+        name: 'DAI',
+        asset: 'DAI',
+        logo: 'https://cdn.lux.network/bridge/currencies/dai.png',
+        contract_address: '0x8f3Cf7ad23Cd3CaDbD9735AFf958023239c6A063',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: true,
@@ -397,63 +397,63 @@ export const networks: Network[] = [
     ],
   },
   {
-    display_name: "Arbitrum One",
-    internal_name: "ARBITRUM_MAINNET",
-    native_currency: "ETH",
-    logo: "https://cdn.lux.network/bridge/networks/arbitrum_mainnet.png",
+    display_name: 'Arbitrum One',
+    internal_name: 'ARBITRUM_MAINNET',
+    native_currency: 'ETH',
+    logo: 'https://cdn.lux.network/bridge/networks/arbitrum_mainnet.png',
     is_testnet: false,
     is_featured: false,
-    average_completion_time: "00:01:04.0494430",
+    average_completion_time: '00:01:04.0494430',
     chain_id: 42161,
-    status: "inactive",
-    type: "evm",
+    status: 'inactive',
+    type: 'evm',
     refuel_amount_in_usd: 0.5,
-    transaction_explorer_template: "https://arbiscan.io/tx/{0}",
-    account_explorer_template: "https://arbiscan.io/address/{0}",
-    node: "https://eth-mainnet.g.alchemy.com/v2/-z4Zrujiou9ajXAplVapFFWWrPuLPSm7",
+    transaction_explorer_template: 'https://arbiscan.io/tx/{0}',
+    account_explorer_template: 'https://arbiscan.io/address/{0}',
+    node: 'https://eth-mainnet.g.alchemy.com/v2/-z4Zrujiou9ajXAplVapFFWWrPuLPSm7',
     currencies: [],
   },
   {
-    display_name: "Celo",
-    internal_name: "CELO_MAINNET",
-    native_currency: "CELO",
-    logo: "https://cdn.lux.network/bridge/networks/celo_mainnet.svg",
+    display_name: 'Celo',
+    internal_name: 'CELO_MAINNET',
+    native_currency: 'CELO',
+    logo: 'https://cdn.lux.network/bridge/networks/celo_mainnet.svg',
     is_testnet: false,
     is_featured: false,
-    average_completion_time: "00:01:04.0494430",
+    average_completion_time: '00:01:04.0494430',
     chain_id: 42220,
-    status: "inactive",
-    type: "evm",
+    status: 'inactive',
+    type: 'evm',
     refuel_amount_in_usd: 0.5,
-    transaction_explorer_template: "https://celoscan.io/tx/{0}",
-    account_explorer_template: "https://celoscan.io/address/{0}",
-    node: "https://celo.drpc.org",
+    transaction_explorer_template: 'https://celoscan.io/tx/{0}',
+    account_explorer_template: 'https://celoscan.io/address/{0}',
+    node: 'https://celo.drpc.org',
     currencies: [],
   },
 
   {
-    display_name: "Binance Smart Chain",
-    internal_name: "BSC_MAINNET",
-    native_currency: "BNB",
-    logo: "https://cdn.lux.network/bridge/networks/bsc_mainnet.png",
+    display_name: 'Binance Smart Chain',
+    internal_name: 'BSC_MAINNET',
+    native_currency: 'BNB',
+    logo: 'https://cdn.lux.network/bridge/networks/bsc_mainnet.png',
     is_testnet: false,
     is_featured: false,
-    average_completion_time: "00:01:04.0494430",
+    average_completion_time: '00:01:04.0494430',
     chain_id: 56,
-    status: "active",
-    type: "evm",
+    status: 'active',
+    type: 'evm',
     refuel_amount_in_usd: 0.5,
-    transaction_explorer_template: "https://bscscan.com/tx/{0}",
-    account_explorer_template: "https://bscscan.com/address/{0}",
-    node: "https://data-seed-prebsc-1-s1.bnbchain.org:8545",
+    transaction_explorer_template: 'https://bscscan.com/tx/{0}',
+    account_explorer_template: 'https://bscscan.com/address/{0}',
+    node: 'https://data-seed-prebsc-1-s1.bnbchain.org:8545',
     currencies: [
       {
-        name: "BNB",
-        asset: "BNB",
-        logo: "https://cdn.lux.network/bridge/currencies/bnb.png",
-        contract_address: "0x0000000000000000000000000000000000000000",
+        name: 'BNB',
+        asset: 'BNB',
+        logo: 'https://cdn.lux.network/bridge/currencies/bnb.png',
+        contract_address: '0x0000000000000000000000000000000000000000',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -465,12 +465,12 @@ export const networks: Network[] = [
         is_native: true,
       },
       {
-        name: "WETH",
-        asset: "WETH",
-        logo: "https://cdn.lux.network/bridge/currencies/ethereum_eth.svg",
-        contract_address: "0x7b03a103fc847348e5e59f8d3b0740c48d597973",
+        name: 'WETH',
+        asset: 'WETH',
+        logo: 'https://cdn.lux.network/bridge/currencies/ethereum_eth.svg',
+        contract_address: '0x7b03a103fc847348e5e59f8d3b0740c48d597973',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -482,12 +482,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "USDT",
-        asset: "USDT",
-        logo: "https://cdn.lux.network/bridge/currencies/usdt.png",
-        contract_address: "0x9e5AAC1Ba1a2e6aEd6b32689DFcF62A509Ca96f3",
+        name: 'USDT',
+        asset: 'USDT',
+        logo: 'https://cdn.lux.network/bridge/currencies/usdt.png',
+        contract_address: '0x9e5AAC1Ba1a2e6aEd6b32689DFcF62A509Ca96f3',
         decimals: 6,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: false,
         is_withdrawal_enabled: false,
         is_refuel_enabled: false,
@@ -499,12 +499,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "USDC",
-        asset: "USDC",
-        logo: "https://cdn.lux.network/bridge/currencies/usdc.png",
-        contract_address: "0x8ac76a51cc950d9822d68b83fe1ad97b32cd580d",
+        name: 'USDC',
+        asset: 'USDC',
+        logo: 'https://cdn.lux.network/bridge/currencies/usdc.png',
+        contract_address: '0x8ac76a51cc950d9822d68b83fe1ad97b32cd580d',
         decimals: 6,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: true,
@@ -516,12 +516,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "DAI",
-        asset: "DAI",
-        logo: "https://cdn.lux.network/bridge/currencies/dai.png",
-        contract_address: "0x1af3f329e8be154074d8769d1ffa4ee058b1dbc3",
+        name: 'DAI',
+        asset: 'DAI',
+        logo: 'https://cdn.lux.network/bridge/currencies/dai.png',
+        contract_address: '0x1af3f329e8be154074d8769d1ffa4ee058b1dbc3',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: true,
@@ -535,147 +535,147 @@ export const networks: Network[] = [
     ],
   },
   {
-    display_name: "Gnosis",
-    internal_name: "GNOSIS_MAINNET",
-    native_currency: "XDAI",
-    logo: "https://cdn.lux.network/bridge/networks/gnosis_mainnet.png",
+    display_name: 'Gnosis',
+    internal_name: 'GNOSIS_MAINNET',
+    native_currency: 'XDAI',
+    logo: 'https://cdn.lux.network/bridge/networks/gnosis_mainnet.png',
     is_testnet: false,
     is_featured: false,
-    average_completion_time: "00:01:04.0494430",
+    average_completion_time: '00:01:04.0494430',
     chain_id: 100,
-    status: "inactive",
-    type: "evm",
+    status: 'inactive',
+    type: 'evm',
     refuel_amount_in_usd: 0.5,
-    transaction_explorer_template: "https://gnosisscan.io/tx/{0}",
-    account_explorer_template: "https://gnosisscan.io/address/{0}",
-    node: "https://rpc.gnosischain.com",
+    transaction_explorer_template: 'https://gnosisscan.io/tx/{0}',
+    account_explorer_template: 'https://gnosisscan.io/address/{0}',
+    node: 'https://rpc.gnosischain.com',
     currencies: [],
   },
   {
-    display_name: "Avalanche",
-    internal_name: "AVAX_MAINNET",
-    native_currency: "AVAX",
-    logo: "https://cdn.lux.network/bridge/networks/avax_mainnet.png",
+    display_name: 'Avalanche',
+    internal_name: 'AVAX_MAINNET',
+    native_currency: 'AVAX',
+    logo: 'https://cdn.lux.network/bridge/networks/avax_mainnet.png',
     is_testnet: false,
     is_featured: true,
-    average_completion_time: "00:00:07.7777777",
+    average_completion_time: '00:00:07.7777777',
     chain_id: 43114,
-    status: "inactive",
-    type: "evm",
+    status: 'inactive',
+    type: 'evm',
     refuel_amount_in_usd: 1,
-    transaction_explorer_template: "https://snowtrace.io/tx/{0}",
-    account_explorer_template: "https://snowtrace.io/address/{0}",
-    node: "https://api.avax.network/ext/bc/c/rpc",
+    transaction_explorer_template: 'https://snowtrace.io/tx/{0}',
+    account_explorer_template: 'https://snowtrace.io/address/{0}',
+    node: 'https://api.avax.network/ext/bc/c/rpc',
     currencies: [],
   },
   {
-    display_name: "Fantom",
-    internal_name: "FANTOM_MAINNET",
-    native_currency: "FTM",
-    logo: "https://cdn.lux.network/bridge/networks/fantom_mainnet.svg",
+    display_name: 'Fantom',
+    internal_name: 'FANTOM_MAINNET',
+    native_currency: 'FTM',
+    logo: 'https://cdn.lux.network/bridge/networks/fantom_mainnet.svg',
     is_testnet: false,
     is_featured: true,
-    average_completion_time: "00:00:07.7777777",
+    average_completion_time: '00:00:07.7777777',
     chain_id: 250,
-    status: "inactive",
-    type: "evm",
+    status: 'inactive',
+    type: 'evm',
     refuel_amount_in_usd: 1,
-    transaction_explorer_template: "https://ftmscan.io/tx/{0}",
-    account_explorer_template: "https://ftmscan.io/address/{0}",
-    node: "https://rpcapi.fantom.network",
+    transaction_explorer_template: 'https://ftmscan.io/tx/{0}',
+    account_explorer_template: 'https://ftmscan.io/address/{0}',
+    node: 'https://rpcapi.fantom.network',
     currencies: [],
   },
   {
-    display_name: "Aurora",
-    internal_name: "AURORA_MAINNET",
-    native_currency: "ETH",
-    logo: "https://cdn.lux.network/bridge/networks/aurora_mainnet.png",
+    display_name: 'Aurora',
+    internal_name: 'AURORA_MAINNET',
+    native_currency: 'ETH',
+    logo: 'https://cdn.lux.network/bridge/networks/aurora_mainnet.png',
     is_testnet: false,
     is_featured: true,
-    average_completion_time: "00:00:07.7777777",
+    average_completion_time: '00:00:07.7777777',
     chain_id: 1313161554,
-    status: "inactive",
-    type: "evm",
+    status: 'inactive',
+    type: 'evm',
     refuel_amount_in_usd: 1,
-    transaction_explorer_template: "https://explorer.aurora.dev/tx/{0}",
-    account_explorer_template: "https://explorer.aurora.dev/address/{0}",
-    node: "https://mainnet.aurora.dev",
+    transaction_explorer_template: 'https://explorer.aurora.dev/tx/{0}',
+    account_explorer_template: 'https://explorer.aurora.dev/address/{0}',
+    node: 'https://mainnet.aurora.dev',
     currencies: [],
   },
   {
-    display_name: "Zora",
-    internal_name: "ZORA_MAINNET",
-    native_currency: "ETH",
-    logo: "https://cdn.lux.network/bridge/networks/zora_mainnet.png",
+    display_name: 'Zora',
+    internal_name: 'ZORA_MAINNET',
+    native_currency: 'ETH',
+    logo: 'https://cdn.lux.network/bridge/networks/zora_mainnet.png',
     is_testnet: false,
     is_featured: false,
-    average_completion_time: "00:01:04.0494430",
+    average_completion_time: '00:01:04.0494430',
     chain_id: 7777777,
-    status: "inactive",
-    type: "evm",
+    status: 'inactive',
+    type: 'evm',
     refuel_amount_in_usd: 0.5,
-    transaction_explorer_template: "https://explorer.zora.energy/tx/{0}",
-    account_explorer_template: "https://explorer.zora.energy/address/{0}",
-    node: "https://rpc.zora.energy",
+    transaction_explorer_template: 'https://explorer.zora.energy/tx/{0}',
+    account_explorer_template: 'https://explorer.zora.energy/address/{0}',
+    node: 'https://rpc.zora.energy',
     currencies: [],
   },
   {
-    display_name: "Blast",
-    internal_name: "BLAST_MAINNET",
-    native_currency: "ETH",
-    logo: "https://cdn.lux.network/bridge/networks/blast_mainnet.png",
+    display_name: 'Blast',
+    internal_name: 'BLAST_MAINNET',
+    native_currency: 'ETH',
+    logo: 'https://cdn.lux.network/bridge/networks/blast_mainnet.png',
     is_testnet: false,
     is_featured: false,
-    average_completion_time: "00:01:04.0494430",
+    average_completion_time: '00:01:04.0494430',
     chain_id: 81457,
-    status: "inactive",
-    type: "evm",
+    status: 'inactive',
+    type: 'evm',
     refuel_amount_in_usd: 0.5,
-    transaction_explorer_template: "https://blastscan.io/tx/{0}",
-    account_explorer_template: "https://blastscan.io/address/{0}",
-    node: "https://rpc.blast.io",
+    transaction_explorer_template: 'https://blastscan.io/tx/{0}',
+    account_explorer_template: 'https://blastscan.io/address/{0}',
+    node: 'https://rpc.blast.io',
     currencies: [],
   },
   {
-    display_name: "Linea",
-    internal_name: "LINEA_MAINNET",
-    native_currency: "ETH",
-    logo: "https://cdn.lux.network/bridge/networks/linea_mainnet.png",
+    display_name: 'Linea',
+    internal_name: 'LINEA_MAINNET',
+    native_currency: 'ETH',
+    logo: 'https://cdn.lux.network/bridge/networks/linea_mainnet.png',
     is_testnet: false,
     is_featured: false,
-    average_completion_time: "00:01:12.1184390",
+    average_completion_time: '00:01:12.1184390',
     chain_id: 59144,
-    status: "inactive",
-    type: "evm",
+    status: 'inactive',
+    type: 'evm',
     refuel_amount_in_usd: 1,
-    transaction_explorer_template: "https://lineascan.build/tx/{0}",
-    account_explorer_template: "https://lineascan.build/address/{0}",
-    node: "https://rpc.linea.build",
+    transaction_explorer_template: 'https://lineascan.build/tx/{0}',
+    account_explorer_template: 'https://lineascan.build/address/{0}',
+    node: 'https://rpc.linea.build',
     currencies: [],
   },
   {
-    display_name: "Lux",
-    internal_name: "LUX_MAINNET",
-    native_currency: "LUX",
-    logo: "https://cdn.lux.network/bridge/networks/lux_mainnet.png",
+    display_name: 'Lux',
+    internal_name: 'LUX_MAINNET',
+    native_currency: 'LUX',
+    logo: 'https://cdn.lux.network/bridge/networks/lux_mainnet.png',
     is_testnet: false,
     is_featured: true,
-    average_completion_time: "00:00:07.7777777",
+    average_completion_time: '00:00:07.7777777',
     chain_id: 7777,
-    status: "active",
-    type: "evm",
+    status: 'active',
+    type: 'evm',
     refuel_amount_in_usd: 1,
-    transaction_explorer_template: "https://explore.lux.network/tx/{0}",
-    account_explorer_template: "https://explore.lux.network/address/{0}",
-    node: "https://api.lux.network",
+    transaction_explorer_template: 'https://explore.lux.network/tx/{0}',
+    account_explorer_template: 'https://explore.lux.network/address/{0}',
+    node: 'https://api.lux.network',
     currencies: [
       {
-        name: "LUX",
-        asset: "LUX",
-        logo: "https://cdn.lux.network/bridge/currencies/lux/lux.svg",
-        contract_address: "0x0000000000000000000000000000000000000000",
+        name: 'LUX',
+        asset: 'LUX',
+        logo: 'https://cdn.lux.network/bridge/currencies/lux/lux.svg',
+        contract_address: '0x0000000000000000000000000000000000000000',
         decimals: 18,
-        status: "inactive",
+        status: 'inactive',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -687,12 +687,12 @@ export const networks: Network[] = [
         is_native: true,
       },
       {
-        name: "Lux BTC",
-        asset: "LBTC",
-        logo: "https://cdn.lux.network/bridge/currencies/lux/lbtc.svg",
-        contract_address: "0xebD1Ee9BCAaeE50085077651c1a2dD452fc6b72e",
+        name: 'Lux BTC',
+        asset: 'LBTC',
+        logo: 'https://cdn.lux.network/bridge/currencies/lux/lbtc.svg',
+        contract_address: '0xebD1Ee9BCAaeE50085077651c1a2dD452fc6b72e',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -704,12 +704,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "Lux ETH",
-        asset: "LETH",
-        logo: "https://cdn.lux.network/bridge/currencies/lux/leth.svg",
-        contract_address: "0x2951A9386df11a4EA8ae5A823B94DC257dEb35Cb",
+        name: 'Lux ETH',
+        asset: 'LETH',
+        logo: 'https://cdn.lux.network/bridge/currencies/lux/leth.svg',
+        contract_address: '0x2951A9386df11a4EA8ae5A823B94DC257dEb35Cb',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -721,12 +721,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "Lux POL",
-        asset: "LPOL",
-        logo: "https://cdn.lux.network/bridge/currencies/lux/lpol.svg",
-        contract_address: "0x9F47CeB09cb88362f0274Bb354a9807Fd976D963",
+        name: 'Lux POL',
+        asset: 'LPOL',
+        logo: 'https://cdn.lux.network/bridge/currencies/lux/lpol.svg',
+        contract_address: '0x9F47CeB09cb88362f0274Bb354a9807Fd976D963',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -738,12 +738,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "Lux BNB",
-        asset: "LBNB",
-        logo: "https://cdn.lux.network/bridge/currencies/lux/lbnb.svg",
-        contract_address: "0xcf963Fe4E4cE126047147661e6e06e171f366506",
+        name: 'Lux BNB',
+        asset: 'LBNB',
+        logo: 'https://cdn.lux.network/bridge/currencies/lux/lbnb.svg',
+        contract_address: '0xcf963Fe4E4cE126047147661e6e06e171f366506',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -755,12 +755,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "Lux FTM",
-        asset: "LFTM",
-        logo: "https://cdn.lux.network/bridge/currencies/lux/lftm.svg",
-        contract_address: "0x15BA7dCA26c63029E33C81f7B3978B54Bc0CB08B",
+        name: 'Lux FTM',
+        asset: 'LFTM',
+        logo: 'https://cdn.lux.network/bridge/currencies/lux/lftm.svg',
+        contract_address: '0x15BA7dCA26c63029E33C81f7B3978B54Bc0CB08B',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -772,12 +772,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "Lux CELO",
-        asset: "LCELO",
-        logo: "https://cdn.lux.network/bridge/currencies/lux/lcelo.svg",
-        contract_address: "0xD257ADA332da217c78959A609e97c71ce5214925",
+        name: 'Lux CELO',
+        asset: 'LCELO',
+        logo: 'https://cdn.lux.network/bridge/currencies/lux/lcelo.svg',
+        contract_address: '0xD257ADA332da217c78959A609e97c71ce5214925',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -789,12 +789,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "Lux xDAI",
-        asset: "LXDAI",
-        logo: "https://cdn.lux.network/bridge/currencies/lux/ldai.svg",
-        contract_address: "0x0D15251ad56cE56cC22588F6645c20ee7d77aE39",
+        name: 'Lux xDAI',
+        asset: 'LXDAI',
+        logo: 'https://cdn.lux.network/bridge/currencies/lux/ldai.svg',
+        contract_address: '0x0D15251ad56cE56cC22588F6645c20ee7d77aE39',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -806,12 +806,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "Lux SOL",
-        asset: "LSOL",
-        logo: "https://cdn.lux.network/bridge/currencies/lux/lsol.svg",
-        contract_address: "0x372b3B7Cb87A7aE9Cb024861775f01015A71058C",
+        name: 'Lux SOL',
+        asset: 'LSOL',
+        logo: 'https://cdn.lux.network/bridge/currencies/lux/lsol.svg',
+        contract_address: '0x372b3B7Cb87A7aE9Cb024861775f01015A71058C',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -823,12 +823,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "Lux TON",
-        asset: "LTON",
-        logo: "https://cdn.lux.network/bridge/currencies/lux/lton.svg",
-        contract_address: "0xa4AA40ff2F2Cbe4FFcDfa5fF2A466fa7aF3390e5",
+        name: 'Lux TON',
+        asset: 'LTON',
+        logo: 'https://cdn.lux.network/bridge/currencies/lux/lton.svg',
+        contract_address: '0xa4AA40ff2F2Cbe4FFcDfa5fF2A466fa7aF3390e5',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -840,12 +840,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "Lux Dollar",
-        asset: "LUSD",
-        logo: "https://cdn.lux.network/bridge/currencies/lux/lusd.svg",
-        contract_address: "0x42b733cA4b3A8FC0237dBE39A47441cfD525f0F1",
+        name: 'Lux Dollar',
+        asset: 'LUSD',
+        logo: 'https://cdn.lux.network/bridge/currencies/lux/lusd.svg',
+        contract_address: '0x42b733cA4b3A8FC0237dBE39A47441cfD525f0F1',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -858,4 +858,4 @@ export const networks: Network[] = [
       },
     ],
   },
-];
+]
diff --git a/apps/bridge/src/components/lux/teleport/constants/networks.sandbox.ts b/apps/bridge/src/components/lux/teleport/constants/networks.sandbox.ts
index b3d6bdff..9ba60b37 100644
--- a/apps/bridge/src/components/lux/teleport/constants/networks.sandbox.ts
+++ b/apps/bridge/src/components/lux/teleport/constants/networks.sandbox.ts
@@ -1,29 +1,29 @@
-import { type Network } from "@/types/teleport";
+import { type Network } from '@/types/teleport'
 
 export const networks: Network[] = [
   {
-    display_name: "Ethereum Sepolia",
-    internal_name: "ETHEREUM_SEPOLIA",
-    native_currency: "ETH",
-    logo: "https://cdn.lux.network/bridge/networks/ethereum_sepolia.png",
+    display_name: 'Ethereum Sepolia',
+    internal_name: 'ETHEREUM_SEPOLIA',
+    native_currency: 'ETH',
+    logo: 'https://cdn.lux.network/bridge/networks/ethereum_sepolia.png',
     is_testnet: true,
     is_featured: true,
-    average_completion_time: "00:01:04.0494430",
+    average_completion_time: '00:01:04.0494430',
     chain_id: 11155111,
-    status: "active",
-    type: "evm",
+    status: 'active',
+    type: 'evm',
     refuel_amount_in_usd: 0.5,
-    transaction_explorer_template: "https://sepolia.etherscan.io/tx/{0}",
-    account_explorer_template: "https://sepolia.etherscan.io/address/{0}",
-    node: "https://old-green-glade.ethereum-sepolia.quiknode.pro/0523b575936957f0e7eae638096d19465aae8f8c/",
+    transaction_explorer_template: 'https://sepolia.etherscan.io/tx/{0}',
+    account_explorer_template: 'https://sepolia.etherscan.io/address/{0}',
+    node: 'https://old-green-glade.ethereum-sepolia.quiknode.pro/0523b575936957f0e7eae638096d19465aae8f8c/',
     currencies: [
       {
-        name: "ETH",
-        asset: "ETH",
-        logo: "https://cdn.lux.network/bridge/currencies/ethereum_eth.svg",
-        contract_address: "0x0000000000000000000000000000000000000000",
+        name: 'ETH',
+        asset: 'ETH',
+        logo: 'https://cdn.lux.network/bridge/currencies/ethereum_eth.svg',
+        contract_address: '0x0000000000000000000000000000000000000000',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -35,12 +35,12 @@ export const networks: Network[] = [
         is_native: true,
       },
       {
-        name: "USDT",
-        asset: "USDT",
-        logo: "https://cdn.lux.network/bridge/currencies/usdt.png",
-        contract_address: "0xE9FF4E487ffcA25a765D5445CC8665128Ac35820",
+        name: 'USDT',
+        asset: 'USDT',
+        logo: 'https://cdn.lux.network/bridge/currencies/usdt.png',
+        contract_address: '0xE9FF4E487ffcA25a765D5445CC8665128Ac35820',
         decimals: 6,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: false,
         is_withdrawal_enabled: false,
         is_refuel_enabled: false,
@@ -52,12 +52,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "USDC",
-        asset: "USDC",
-        logo: "https://cdn.lux.network/bridge/currencies/usdc.png",
-        contract_address: "0x299e04DE65090D3C48019893e369A7983124c514",
+        name: 'USDC',
+        asset: 'USDC',
+        logo: 'https://cdn.lux.network/bridge/currencies/usdc.png',
+        contract_address: '0x299e04DE65090D3C48019893e369A7983124c514',
         decimals: 6,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: true,
@@ -69,12 +69,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "DAI",
-        asset: "DAI",
-        logo: "https://cdn.lux.network/bridge/currencies/dai.png",
-        contract_address: "0x3FADaC51B852273e11Da42Db30714FddA785b8C5",
+        name: 'DAI',
+        asset: 'DAI',
+        logo: 'https://cdn.lux.network/bridge/currencies/dai.png',
+        contract_address: '0x3FADaC51B852273e11Da42Db30714FddA785b8C5',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: true,
@@ -88,28 +88,28 @@ export const networks: Network[] = [
     ],
   },
   {
-    display_name: "Holesky Testnet",
-    internal_name: "HOLESKY_TESTNET",
-    native_currency: "ETH",
-    logo: "https://cdn.lux.network/bridge/networks/holesky_testnet.png",
+    display_name: 'Holesky Testnet',
+    internal_name: 'HOLESKY_TESTNET',
+    native_currency: 'ETH',
+    logo: 'https://cdn.lux.network/bridge/networks/holesky_testnet.png',
     is_testnet: true,
     is_featured: true,
-    average_completion_time: "00:01:04.0494430",
+    average_completion_time: '00:01:04.0494430',
     chain_id: 17000,
-    status: "active",
-    type: "evm",
+    status: 'active',
+    type: 'evm',
     refuel_amount_in_usd: 0.5,
-    transaction_explorer_template: "https://holesky.etherscan.io/tx/{0}",
-    account_explorer_template: "https://holesky.etherscan.io/address/{0}",
-    node: "https://ethereum-holesky-rpc.publicnode.com/",
+    transaction_explorer_template: 'https://holesky.etherscan.io/tx/{0}',
+    account_explorer_template: 'https://holesky.etherscan.io/address/{0}',
+    node: 'https://ethereum-holesky-rpc.publicnode.com/',
     currencies: [
       {
-        name: "ETH",
-        asset: "ETH",
-        logo: "https://cdn.lux.network/bridge/currencies/ethereum_eth.svg",
-        contract_address: "0x0000000000000000000000000000000000000000",
+        name: 'ETH',
+        asset: 'ETH',
+        logo: 'https://cdn.lux.network/bridge/currencies/ethereum_eth.svg',
+        contract_address: '0x0000000000000000000000000000000000000000',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -121,12 +121,12 @@ export const networks: Network[] = [
         is_native: true,
       },
       {
-        name: "WETH",
-        asset: "WETH",
-        logo: "https://cdn.lux.network/bridge/currencies/ethereum_eth.svg",
-        contract_address: "0xcf963Fe4E4cE126047147661e6e06e171f366506",
+        name: 'WETH',
+        asset: 'WETH',
+        logo: 'https://cdn.lux.network/bridge/currencies/ethereum_eth.svg',
+        contract_address: '0xcf963Fe4E4cE126047147661e6e06e171f366506',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -138,12 +138,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "USDT",
-        asset: "USDT",
-        logo: "https://cdn.lux.network/bridge/currencies/usdt.png",
-        contract_address: "0xD257ADA332da217c78959A609e97c71ce5214925",
+        name: 'USDT',
+        asset: 'USDT',
+        logo: 'https://cdn.lux.network/bridge/currencies/usdt.png',
+        contract_address: '0xD257ADA332da217c78959A609e97c71ce5214925',
         decimals: 6,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: false,
         is_withdrawal_enabled: false,
         is_refuel_enabled: false,
@@ -155,12 +155,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "USDC",
-        asset: "USDC",
-        logo: "https://cdn.lux.network/bridge/currencies/usdc.png",
-        contract_address: "0x15BA7dCA26c63029E33C81f7B3978B54Bc0CB08B",
+        name: 'USDC',
+        asset: 'USDC',
+        logo: 'https://cdn.lux.network/bridge/currencies/usdc.png',
+        contract_address: '0x15BA7dCA26c63029E33C81f7B3978B54Bc0CB08B',
         decimals: 6,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: true,
@@ -172,12 +172,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "DAI",
-        asset: "DAI",
-        logo: "https://cdn.lux.network/bridge/currencies/dai.png",
-        contract_address: "0x9F47CeB09cb88362f0274Bb354a9807Fd976D963",
+        name: 'DAI',
+        asset: 'DAI',
+        logo: 'https://cdn.lux.network/bridge/currencies/dai.png',
+        contract_address: '0x9F47CeB09cb88362f0274Bb354a9807Fd976D963',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: true,
@@ -191,28 +191,28 @@ export const networks: Network[] = [
     ],
   },
   {
-    display_name: "Base Sepolia",
-    internal_name: "BASE_SEPOLIA",
-    native_currency: "ETH",
-    logo: "https://cdn.lux.network/bridge/networks/base_mainnet.png",
+    display_name: 'Base Sepolia',
+    internal_name: 'BASE_SEPOLIA',
+    native_currency: 'ETH',
+    logo: 'https://cdn.lux.network/bridge/networks/base_mainnet.png',
     is_testnet: true,
     is_featured: true,
-    average_completion_time: "00:01:04.0494430",
+    average_completion_time: '00:01:04.0494430',
     chain_id: 84532, //base sepolia
-    status: "active",
-    type: "evm",
+    status: 'active',
+    type: 'evm',
     refuel_amount_in_usd: 0.5,
-    transaction_explorer_template: "https://sepolia.basescan.org/tx/{0}", // sepolia
-    account_explorer_template: "https://sepolia.basescan.org/address/{0}", // sepolia
-    node: "https://sepolia.base.org", // sepolia
+    transaction_explorer_template: 'https://sepolia.basescan.org/tx/{0}', // sepolia
+    account_explorer_template: 'https://sepolia.basescan.org/address/{0}', // sepolia
+    node: 'https://sepolia.base.org', // sepolia
     currencies: [
       {
-        name: "ETH",
-        asset: "ETH",
-        logo: "https://cdn.lux.network/bridge/currencies/ethereum_eth.svg",
-        contract_address: "0x0000000000000000000000000000000000000000",
+        name: 'ETH',
+        asset: 'ETH',
+        logo: 'https://cdn.lux.network/bridge/currencies/ethereum_eth.svg',
+        contract_address: '0x0000000000000000000000000000000000000000',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -224,12 +224,12 @@ export const networks: Network[] = [
         is_native: true,
       },
       {
-        name: "USDT",
-        asset: "USDT",
-        logo: "https://cdn.lux.network/bridge/currencies/usdt.png",
-        contract_address: "0x46390FA219b22f739C63F0bF1c165a1FBc30B57c",
+        name: 'USDT',
+        asset: 'USDT',
+        logo: 'https://cdn.lux.network/bridge/currencies/usdt.png',
+        contract_address: '0x46390FA219b22f739C63F0bF1c165a1FBc30B57c',
         decimals: 6,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: false,
         is_withdrawal_enabled: false,
         is_refuel_enabled: false,
@@ -241,12 +241,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "USDC",
-        asset: "USDC",
-        logo: "https://cdn.lux.network/bridge/currencies/usdc.png",
-        contract_address: "0xE49355609F94A4B8a2EfC6FBd077542F8EC90080", //sepolia
+        name: 'USDC',
+        asset: 'USDC',
+        logo: 'https://cdn.lux.network/bridge/currencies/usdc.png',
+        contract_address: '0xE49355609F94A4B8a2EfC6FBd077542F8EC90080', //sepolia
         decimals: 6,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: true,
@@ -258,12 +258,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "DAI",
-        asset: "DAI",
-        logo: "https://cdn.lux.network/bridge/currencies/dai.png",
-        contract_address: "0x568BF299E115D78a1fBa57BafdAe0fD8A26BFb7e",
+        name: 'DAI',
+        asset: 'DAI',
+        logo: 'https://cdn.lux.network/bridge/currencies/dai.png',
+        contract_address: '0x568BF299E115D78a1fBa57BafdAe0fD8A26BFb7e',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: true,
@@ -277,28 +277,28 @@ export const networks: Network[] = [
     ],
   },
   {
-    display_name: "BSC Testnet",
-    internal_name: "BSC_TESTNET",
-    native_currency: "BNB",
-    logo: "https://cdn.lux.network/bridge/networks/bsc_mainnet.png",
+    display_name: 'BSC Testnet',
+    internal_name: 'BSC_TESTNET',
+    native_currency: 'BNB',
+    logo: 'https://cdn.lux.network/bridge/networks/bsc_mainnet.png',
     is_testnet: true,
     is_featured: false,
-    average_completion_time: "00:01:04.0494430",
+    average_completion_time: '00:01:04.0494430',
     chain_id: 97,
-    status: "active",
-    type: "evm",
+    status: 'active',
+    type: 'evm',
     refuel_amount_in_usd: 0.5,
-    transaction_explorer_template: "https://testnet.bscscan.com/tx/{0}",
-    account_explorer_template: "https://testnet.bscscan.com/address/{0}",
-    node: "https://data-seed-prebsc-1-s1.bnbchain.org:8545",
+    transaction_explorer_template: 'https://testnet.bscscan.com/tx/{0}',
+    account_explorer_template: 'https://testnet.bscscan.com/address/{0}',
+    node: 'https://data-seed-prebsc-1-s1.bnbchain.org:8545',
     currencies: [
       {
-        name: "BNB",
-        asset: "BNB",
-        logo: "https://cdn.lux.network/bridge/networks/bsc_mainnet.png",
-        contract_address: "0x0000000000000000000000000000000000000000",
+        name: 'BNB',
+        asset: 'BNB',
+        logo: 'https://cdn.lux.network/bridge/networks/bsc_mainnet.png',
+        contract_address: '0x0000000000000000000000000000000000000000',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -310,12 +310,12 @@ export const networks: Network[] = [
         is_native: true,
       },
       {
-        name: "USDT",
-        asset: "USDT",
-        logo: "https://cdn.lux.network/bridge/currencies/usdt.png",
-        contract_address: "0x5519582dde6eb1f53F92298622c2ecb39A64369A",
+        name: 'USDT',
+        asset: 'USDT',
+        logo: 'https://cdn.lux.network/bridge/currencies/usdt.png',
+        contract_address: '0x5519582dde6eb1f53F92298622c2ecb39A64369A',
         decimals: 6,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: false,
         is_withdrawal_enabled: false,
         is_refuel_enabled: false,
@@ -327,12 +327,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "USDC",
-        asset: "USDC",
-        logo: "https://cdn.lux.network/bridge/currencies/usdc.png",
-        contract_address: "0x6a49DbeD52B9Bd9a53E21C3bCb67dc2697cD6697",
+        name: 'USDC',
+        asset: 'USDC',
+        logo: 'https://cdn.lux.network/bridge/currencies/usdc.png',
+        contract_address: '0x6a49DbeD52B9Bd9a53E21C3bCb67dc2697cD6697',
         decimals: 6,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: true,
@@ -344,12 +344,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "DAI",
-        asset: "DAI",
-        logo: "https://cdn.lux.network/bridge/currencies/dai.png",
-        contract_address: "0x2E8A24dE21105772FD161BF56471A0470A8AF45e",
+        name: 'DAI',
+        asset: 'DAI',
+        logo: 'https://cdn.lux.network/bridge/currencies/dai.png',
+        contract_address: '0x2E8A24dE21105772FD161BF56471A0470A8AF45e',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -363,28 +363,28 @@ export const networks: Network[] = [
     ],
   },
   {
-    display_name: "Lux Testnet",
-    internal_name: "LUX_TESTNET",
-    native_currency: "LUX",
-    logo: "https://cdn.lux.network/bridge/networks/lux_mainnet.png",
+    display_name: 'Lux Testnet',
+    internal_name: 'LUX_TESTNET',
+    native_currency: 'LUX',
+    logo: 'https://cdn.lux.network/bridge/networks/lux_mainnet.png',
     is_testnet: true,
     is_featured: true,
-    average_completion_time: "00:00:07.7777777",
+    average_completion_time: '00:00:07.7777777',
     chain_id: 8888,
-    status: "active",
-    type: "evm",
+    status: 'active',
+    type: 'evm',
     refuel_amount_in_usd: 1,
-    transaction_explorer_template: "https://explore.lux-test.network/tx/{0}",
-    account_explorer_template: "https://explore.lux-test.network/address/{0}",
-    node: "https://api.lux-test.network",
+    transaction_explorer_template: 'https://explore.lux-test.network/tx/{0}',
+    account_explorer_template: 'https://explore.lux-test.network/address/{0}',
+    node: 'https://api.lux-test.network',
     currencies: [
       {
-        name: "LUX",
-        asset: "LUX",
-        logo: "https://cdn.lux.network/bridge/currencies/lux/lux.svg",
-        contract_address: "0x0000000000000000000000000000000000000000",
+        name: 'LUX',
+        asset: 'LUX',
+        logo: 'https://cdn.lux.network/bridge/currencies/lux/lux.svg',
+        contract_address: '0x0000000000000000000000000000000000000000',
         decimals: 18,
-        status: "inactive",
+        status: 'inactive',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -396,12 +396,12 @@ export const networks: Network[] = [
         is_native: true,
       },
       {
-        name: "Lux BTC",
-        asset: "LBTC",
-        logo: "https://cdn.lux.network/bridge/currencies/lux/lbtc.svg",
-        contract_address: "0xd7bE6F0E47acb95944fcc357a4392cAa5670B9e4",
+        name: 'Lux BTC',
+        asset: 'LBTC',
+        logo: 'https://cdn.lux.network/bridge/currencies/lux/lbtc.svg',
+        contract_address: '0xd7bE6F0E47acb95944fcc357a4392cAa5670B9e4',
         decimals: 18,
-        status: "inactive",
+        status: 'inactive',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -413,12 +413,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "Lux ETH",
-        asset: "LETH",
-        logo: "https://cdn.lux.network/bridge/currencies/lux/leth.svg",
-        contract_address: "0x999Ab39dF1Ae0F0069303B430A52f16FFdaAC69C",
+        name: 'Lux ETH',
+        asset: 'LETH',
+        logo: 'https://cdn.lux.network/bridge/currencies/lux/leth.svg',
+        contract_address: '0x999Ab39dF1Ae0F0069303B430A52f16FFdaAC69C',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -430,12 +430,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "Lux POL",
-        asset: "LPOL",
-        logo: "https://cdn.lux.network/bridge/currencies/lux/lpol.svg",
-        contract_address: "0x305B062C74F92d05de7Cbccd1923f19c7B27eAB1",
+        name: 'Lux POL',
+        asset: 'LPOL',
+        logo: 'https://cdn.lux.network/bridge/currencies/lux/lpol.svg',
+        contract_address: '0x305B062C74F92d05de7Cbccd1923f19c7B27eAB1',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -447,12 +447,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "Lux BNB",
-        asset: "LBNB",
-        logo: "https://cdn.lux.network/bridge/currencies/lux/lbnb.svg",
-        contract_address: "0x2c04439Dc52080E56882f61B2C4fb059A412fD5b",
+        name: 'Lux BNB',
+        asset: 'LBNB',
+        logo: 'https://cdn.lux.network/bridge/currencies/lux/lbnb.svg',
+        contract_address: '0x2c04439Dc52080E56882f61B2C4fb059A412fD5b',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -464,12 +464,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "Lux FTM",
-        asset: "LFTM",
-        logo: "https://cdn.lux.network/bridge/currencies/lux/lftm.svg",
-        contract_address: "0xE1276a2F675A1D7F69FC2C78Ca6a39d1D951fD35",
+        name: 'Lux FTM',
+        asset: 'LFTM',
+        logo: 'https://cdn.lux.network/bridge/currencies/lux/lftm.svg',
+        contract_address: '0xE1276a2F675A1D7F69FC2C78Ca6a39d1D951fD35',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -481,12 +481,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "Lux CELO",
-        asset: "LCELO",
-        logo: "https://cdn.lux.network/bridge/currencies/lux/lcelo.svg",
-        contract_address: "0xe0feC703840364714b97272973B8945FD5eB5600",
+        name: 'Lux CELO',
+        asset: 'LCELO',
+        logo: 'https://cdn.lux.network/bridge/currencies/lux/lcelo.svg',
+        contract_address: '0xe0feC703840364714b97272973B8945FD5eB5600',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -498,12 +498,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "Lux xDAI",
-        asset: "LXDAI",
-        logo: "https://cdn.lux.network/bridge/currencies/lux/ldai.svg",
-        contract_address: "0xFdAad51cE3C28bfCCC5217AFddCEFc2a3Da6Ab54",
+        name: 'Lux xDAI',
+        asset: 'LXDAI',
+        logo: 'https://cdn.lux.network/bridge/currencies/lux/ldai.svg',
+        contract_address: '0xFdAad51cE3C28bfCCC5217AFddCEFc2a3Da6Ab54',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -515,12 +515,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "Lux SOL",
-        asset: "LSOL",
-        logo: "https://cdn.lux.network/bridge/currencies/lux/lsol.svg",
-        contract_address: "0x4516dcca0EeE9021A1fe6BBe5deE68B501246Cd1",
+        name: 'Lux SOL',
+        asset: 'LSOL',
+        logo: 'https://cdn.lux.network/bridge/currencies/lux/lsol.svg',
+        contract_address: '0x4516dcca0EeE9021A1fe6BBe5deE68B501246Cd1',
         decimals: 18,
-        status: "inactive",
+        status: 'inactive',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -532,12 +532,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "Lux TON",
-        asset: "LTON",
-        logo: "https://cdn.lux.network/bridge/currencies/lux/lton.svg",
-        contract_address: "0xf41380968E9D408a143ddC63322565793d0750f8",
+        name: 'Lux TON',
+        asset: 'LTON',
+        logo: 'https://cdn.lux.network/bridge/currencies/lux/lton.svg',
+        contract_address: '0xf41380968E9D408a143ddC63322565793d0750f8',
         decimals: 18,
-        status: "inactive",
+        status: 'inactive',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -549,12 +549,12 @@ export const networks: Network[] = [
         is_native: false,
       },
       {
-        name: "Lux Dollar",
-        asset: "LUSD",
-        logo: "https://cdn.lux.network/bridge/currencies/lux/lusd.svg",
-        contract_address: "0xA7EF94FfacA04aA51aCB66Ad93691a10Ce6eAcf4",
+        name: 'Lux Dollar',
+        asset: 'LUSD',
+        logo: 'https://cdn.lux.network/bridge/currencies/lux/lusd.svg',
+        contract_address: '0xA7EF94FfacA04aA51aCB66Ad93691a10Ce6eAcf4',
         decimals: 18,
-        status: "active",
+        status: 'active',
         is_deposit_enabled: true,
         is_withdrawal_enabled: true,
         is_refuel_enabled: false,
@@ -567,4 +567,4 @@ export const networks: Network[] = [
       },
     ],
   },
-];
+]
diff --git a/apps/bridge/src/components/lux/teleport/constants/settings.ts b/apps/bridge/src/components/lux/teleport/constants/settings.ts
index 3fa58666..2d8e8fb4 100644
--- a/apps/bridge/src/components/lux/teleport/constants/settings.ts
+++ b/apps/bridge/src/components/lux/teleport/constants/settings.ts
@@ -1,143 +1,143 @@
 export const CONTRACTS = {
   7777: {
-    name: "LUX_MAINNET",
+    name: 'LUX_MAINNET',
     chain_id: 7777,
-    teleporter: "0xC58E07f1C07627af94ad77549499b642aeFf0a3C",
-    vault: "0x7C6e3BE7B72805f0f52d788b96695b9d7e59A00c",
+    teleporter: '0xC58E07f1C07627af94ad77549499b642aeFf0a3C',
+    vault: '0x7C6e3BE7B72805f0f52d788b96695b9d7e59A00c',
   },
   1: {
-    name: "ETHEREUM_MAINNET",
+    name: 'ETHEREUM_MAINNET',
     chain_id: 1,
-    teleporter: "0xebD1Ee9BCAaeE50085077651c1a2dD452fc6b72e",
-    vault: "0xcf963Fe4E4cE126047147661e6e06e171f366506",
+    teleporter: '0xebD1Ee9BCAaeE50085077651c1a2dD452fc6b72e',
+    vault: '0xcf963Fe4E4cE126047147661e6e06e171f366506',
   },
   137: {
-    name: "POLYGON_MAINNET",
+    name: 'POLYGON_MAINNET',
     chain_id: 137,
-    teleporter: "0xE09C9b6Ed2BADAa97AB00652dF75da05adc6dAeF",
-    vault: "0x217feE2a1a6A31Dda68433270531F56C91EC8D2B",
+    teleporter: '0xE09C9b6Ed2BADAa97AB00652dF75da05adc6dAeF',
+    vault: '0x217feE2a1a6A31Dda68433270531F56C91EC8D2B',
   },
   10: {
-    name: "OPTIMISM_MAINNET",
+    name: 'OPTIMISM_MAINNET',
     chain_id: 10,
-    teleporter: "0xbdCE894aEd7d30BA0C0D0B51604ee9d225fc8b95",
-    vault: "0x37d9fB96722ebDDbC8000386564945864675099B",
+    teleporter: '0xbdCE894aEd7d30BA0C0D0B51604ee9d225fc8b95',
+    vault: '0x37d9fB96722ebDDbC8000386564945864675099B',
   },
   42161: {
-    name: "ARBITRUM_MAINNET",
+    name: 'ARBITRUM_MAINNET',
     chain_id: 42161,
-    teleporter: "",
-    vault: "",
+    teleporter: '',
+    vault: '',
   },
   42220: {
-    name: "CELO_MAINNET",
+    name: 'CELO_MAINNET',
     chain_id: 42220,
-    teleporter: "",
-    vault: "",
+    teleporter: '',
+    vault: '',
   },
   8453: {
-    name: "BASE_MAINNET",
+    name: 'BASE_MAINNET',
     chain_id: 8453,
-    teleporter: "0x37d9fB96722ebDDbC8000386564945864675099B",
-    vault: "0x3226bb1d3055685EFC1b0E49718B909a1c6Ce18d",
+    teleporter: '0x37d9fB96722ebDDbC8000386564945864675099B',
+    vault: '0x3226bb1d3055685EFC1b0E49718B909a1c6Ce18d',
   },
   56: {
-    name: "BSC_MAINNET",
+    name: 'BSC_MAINNET',
     chain_id: 56,
-    teleporter: "0xebD1Ee9BCAaeE50085077651c1a2dD452fc6b72e",
-    vault: "0xcf963Fe4E4cE126047147661e6e06e171f366506",
+    teleporter: '0xebD1Ee9BCAaeE50085077651c1a2dD452fc6b72e',
+    vault: '0xcf963Fe4E4cE126047147661e6e06e171f366506',
   },
   100: {
-    name: "GNOSIS_MAINNET",
+    name: 'GNOSIS_MAINNET',
     chain_id: 100,
-    teleporter: "",
-    vault: "",
+    teleporter: '',
+    vault: '',
   },
   43114: {
-    name: "AVAX_MAINNET",
+    name: 'AVAX_MAINNET',
     chain_id: 43114,
-    teleporter: "",
-    vault: "",
+    teleporter: '',
+    vault: '',
   },
   250: {
-    name: "FANTOM_MAINNET",
+    name: 'FANTOM_MAINNET',
     chain_id: 250,
-    teleporter: "",
-    vault: "",
+    teleporter: '',
+    vault: '',
   },
   1313161554: {
-    name: "AURORA_MAINNET",
+    name: 'AURORA_MAINNET',
     chain_id: 1313161554,
-    teleporter: "",
-    vault: "",
+    teleporter: '',
+    vault: '',
   },
   7777777: {
-    name: "ZORA_MAINNET",
+    name: 'ZORA_MAINNET',
     chain_id: 7777777,
-    teleporter: "",
-    vault: "",
+    teleporter: '',
+    vault: '',
   },
   81457: {
-    name: "BLAST_MAINNET",
+    name: 'BLAST_MAINNET',
     chain_id: 81457,
-    teleporter: "",
-    vault: "",
+    teleporter: '',
+    vault: '',
   },
   59144: {
-    name: "LINEA_MAINNET",
+    name: 'LINEA_MAINNET',
     chain_id: 59144,
-    teleporter: "",
-    vault: "",
+    teleporter: '',
+    vault: '',
   },
   ///////////////////////////////////////// testnets ///////////////////////////////////////////
   11155111: {
-    name: "ETHEREUM_SEPOLIA",
+    name: 'ETHEREUM_SEPOLIA',
     chain_id: 11155111,
-    teleporter: "0xb34e8a93A56De724c432fD41052E715657Fb0B1D",
-    vault: "0x63139CFe43cEe881332a2264851940108333e8D0",
+    teleporter: '0xb34e8a93A56De724c432fD41052E715657Fb0B1D',
+    vault: '0x63139CFe43cEe881332a2264851940108333e8D0',
   },
   17000: {
-    name: "HOLESKY_TESTNET",
+    name: 'HOLESKY_TESTNET',
     chain_id: 17000,
-    teleporter: "0x2951A9386df11a4EA8ae5A823B94DC257dEb35Cb",
-    vault: "0xebD1Ee9BCAaeE50085077651c1a2dD452fc6b72e",
+    teleporter: '0x2951A9386df11a4EA8ae5A823B94DC257dEb35Cb',
+    vault: '0xebD1Ee9BCAaeE50085077651c1a2dD452fc6b72e',
   },
   84532: {
-    name: "BASE_SEPOLIA",
+    name: 'BASE_SEPOLIA',
     chain_id: 84532,
-    teleporter: "0xE139056397091c15F860E94b20cCc169520b086A",
-    vault: "0x2c4908f1B607A4448272ea29A054bf9AA08A1D76",
+    teleporter: '0xE139056397091c15F860E94b20cCc169520b086A',
+    vault: '0x2c4908f1B607A4448272ea29A054bf9AA08A1D76',
   },
   97: {
-    name: "BSC_TESTNET",
+    name: 'BSC_TESTNET',
     chain_id: 97,
-    teleporter: "0xD293337c79A951C0e93aEb6a5E255097d65b671f",
-    vault: "0xe0feC703840364714b97272973B8945FD5eB5600",
+    teleporter: '0xD293337c79A951C0e93aEb6a5E255097d65b671f',
+    vault: '0xe0feC703840364714b97272973B8945FD5eB5600',
   },
   8888: {
-    name: "LUX_TESTNET",
+    name: 'LUX_TESTNET',
     chain_id: 8888,
-    teleporter: "0x7d462c69057E404a172690E8C5021563382CAa78",
-    vault: "0xD1496b961855c3F554F3F71A653915EEe035c55e",
+    teleporter: '0x7d462c69057E404a172690E8C5021563382CAa78',
+    vault: '0xD1496b961855c3F554F3F71A653915EEe035c55e',
   },
-};
+}
 
 export const SWAP_PAIRS: Record<string, string[]> = {
-  LETH: ["ETH"],
-  LBNB: ["BNB"],
-  LFTM: ["FTM"],
-  LPOL: ["POL", "MATIC"],
-  LUSD: ["USDT", "USDC", "DAI"],
-  LCELO: ["CELO"],
-  LXDAI: ["XDAI"],
+  LETH: ['ETH'],
+  LBNB: ['BNB'],
+  LFTM: ['FTM'],
+  LPOL: ['POL', 'MATIC'],
+  LUSD: ['USDT', 'USDC', 'DAI'],
+  LCELO: ['CELO'],
+  LXDAI: ['XDAI'],
 
-  ETH: ["LETH"],
-  POL: ["LPOL"],
-  BNB: ["LBNB"],
-  FTM: ["LFTM"],
-  DAI: ["LUSD"],
-  USDT: ["LUSD"],
-  USDC: ["LUSD"],
-  CELO: ["LCELO"],
-  XDAI: ["LXDAI"],
-};
+  ETH: ['LETH'],
+  POL: ['LPOL'],
+  BNB: ['LBNB'],
+  FTM: ['LFTM'],
+  DAI: ['LUSD'],
+  USDT: ['LUSD'],
+  USDC: ['LUSD'],
+  CELO: ['LCELO'],
+  XDAI: ['LXDAI'],
+}
diff --git a/apps/bridge/src/components/lux/teleport/process.tsx b/apps/bridge/src/components/lux/teleport/process.tsx
index 2186f65b..14cebdf0 100644
--- a/apps/bridge/src/components/lux/teleport/process.tsx
+++ b/apps/bridge/src/components/lux/teleport/process.tsx
@@ -1,13 +1,13 @@
-"use client";
-import React from "react";
-import Modal from "../../modal/modal";
-import ResizablePanel from "../../ResizablePanel";
-import axios from "axios";
-import SwapDetails from "./swap/SwapDetails";
-import ConnectNetwork from "@/components/ConnectNetwork";
-import Widget from "@/components/Widget";
-import { networks as devNetworks } from "@/components/lux/teleport/constants/networks.sandbox";
-import { networks as mainNetworks } from "@/components/lux/teleport/constants/networks.mainnets";
+'use client'
+import React from 'react'
+import Modal from '../../modal/modal'
+import ResizablePanel from '../../ResizablePanel'
+import axios from 'axios'
+import SwapDetails from './swap/SwapDetails'
+import ConnectNetwork from '@/components/ConnectNetwork'
+import Widget from '@/components/Widget'
+import { networks as devNetworks } from '@/components/lux/teleport/constants/networks.sandbox'
+import { networks as mainNetworks } from '@/components/lux/teleport/constants/networks.mainnets'
 import {
   sourceNetworkAtom,
   sourceAssetAtom,
@@ -21,47 +21,48 @@ import {
   mpcSignatureAtom,
   bridgeMintTransactionAtom,
   userTransferTransactionAtom,
-} from "@/store/teleport";
-import { useAtom } from "jotai";
-import type { Network, Token } from "@/types/teleport";
+} from '@/store/teleport'
+import { useAtom } from 'jotai'
+import type { Network, Token } from '@/types/teleport'
 
 type NetworkToConnect = {
-  DisplayName: string;
-  AppURL: string;
-};
+  DisplayName: string
+  AppURL: string
+}
 
 interface IProps {
-  swapId?: string;
+  swapId?: string
+  className?: string
 }
 
-const Form: React.FC<IProps> = ({ swapId }) => {
-  const isMainnet = process.env.NEXT_PUBLIC_API_VERSION === "mainnet";
-  const networks = isMainnet ? mainNetworks : devNetworks;
+const Form: React.FC<IProps> = ({ swapId, className }) => {
+  const isMainnet = process.env.NEXT_PUBLIC_API_VERSION === 'mainnet'
+  const networks = isMainnet ? mainNetworks : devNetworks
 
-  const [sourceNetwork, setSourceNetwork] = useAtom(sourceNetworkAtom);
-  const [sourceAsset, setSourceAsset] = useAtom(sourceAssetAtom);
+  const [sourceNetwork, setSourceNetwork] = useAtom(sourceNetworkAtom)
+  const [sourceAsset, setSourceAsset] = useAtom(sourceAssetAtom)
   const [destinationNetwork, setDestinationNetwork] = useAtom(
     destinationNetworkAtom
-  );
-  const [destinationAsset, setDestinationAsset] = useAtom(destinationAssetAtom);
+  )
+  const [destinationAsset, setDestinationAsset] = useAtom(destinationAssetAtom)
   const [destinationAddress, setDestinationAddress] = useAtom(
     destinationAddressAtom
-  );
-  const [sourceAmount, setSourceAmount] = useAtom(sourceAmountAtom);
-  const [, setSwapStatus] = useAtom(swapStatusAtom);
-  const [, setEthPrice] = useAtom(ethPriceAtom);
-  const [, setSwapId] = useAtom(swapIdAtom);
-  const [, setUserTransferTransaction] = useAtom(userTransferTransactionAtom);
-  const [, setBridgeMintTransactionHash] = useAtom(bridgeMintTransactionAtom);
-  const [, setMpcSignature] = useAtom(mpcSignatureAtom);
+  )
+  const [sourceAmount, setSourceAmount] = useAtom(sourceAmountAtom)
+  const [, setSwapStatus] = useAtom(swapStatusAtom)
+  const [, setEthPrice] = useAtom(ethPriceAtom)
+  const [, setSwapId] = useAtom(swapIdAtom)
+  const [, setUserTransferTransaction] = useAtom(userTransferTransactionAtom)
+  const [, setBridgeMintTransactionHash] = useAtom(bridgeMintTransactionAtom)
+  const [, setMpcSignature] = useAtom(mpcSignatureAtom)
 
   React.useEffect(() => {
     if (sourceAsset) {
       axios.get(`/api/tokens/price/${sourceAsset.asset}`).then((data) => {
-        setEthPrice(Number(data?.data?.data?.price));
-      });
+        setEthPrice(Number(data?.data?.data?.price))
+      })
     }
-  }, [sourceAsset]);
+  }, [sourceAsset])
 
   const getSwapById = async (swapId: string) => {
     try {
@@ -69,54 +70,54 @@ const Form: React.FC<IProps> = ({ swapId }) => {
         data: { data },
       } = await axios.get(
         `${process.env.NEXT_PUBLIC_BACKEND_API}/swaps/${swapId}?version=mainnet`
-      );
+      )
 
-      console.log(data);
+      console.log(data)
       const _sourceNetwork = networks.find(
         (_n: Network) => _n.internal_name === data.source_network
-      ) as Network;
+      ) as Network
       const _sourceAsset = _sourceNetwork?.currencies?.find(
         (c: Token) => c.asset === data.source_asset
-      );
+      )
       const _destinationNetwork = networks.find(
         (_n: Network) => _n.internal_name === data.destination_network
-      ) as Network;
+      ) as Network
       const _destinationAsset = _destinationNetwork?.currencies?.find(
         (c: Token) => c.asset === data.destination_asset
-      );
-      setSourceNetwork(_sourceNetwork);
-      setSourceAsset(_sourceAsset);
-      setDestinationNetwork(_destinationNetwork);
-      setDestinationAsset(_destinationAsset);
-      setSourceAmount(data.requested_amount);
-      setSwapStatus(data.status);
-      setSwapId(data.id);
-      setDestinationAddress(data.destination_address);
+      )
+      setSourceNetwork(_sourceNetwork)
+      setSourceAsset(_sourceAsset)
+      setDestinationNetwork(_destinationNetwork)
+      setDestinationAsset(_destinationAsset)
+      setSourceAmount(data.requested_amount)
+      setSwapStatus(data.status)
+      setSwapId(data.id)
+      setDestinationAddress(data.destination_address)
 
       const userTransferTransaction = data?.transactions?.find(
-        (t: any) => t.status === "user_transfer"
-      )?.transaction_hash;
-      setUserTransferTransaction(userTransferTransaction ?? "");
+        (t: any) => t.status === 'user_transfer'
+      )?.transaction_hash
+      setUserTransferTransaction(userTransferTransaction ?? '')
       const mpcSignTransaction = data?.transactions?.find(
-        (t: any) => t.status === "mpc_sign"
-      )?.transaction_hash;
-      setMpcSignature(mpcSignTransaction ?? "");
+        (t: any) => t.status === 'mpc_sign'
+      )?.transaction_hash
+      setMpcSignature(mpcSignTransaction ?? '')
       const payoutTransaction = data?.transactions?.find(
-        (t: any) => t.status === "payout"
-      )?.transaction_hash;
-      setBridgeMintTransactionHash(payoutTransaction ?? "");
+        (t: any) => t.status === 'payout'
+      )?.transaction_hash
+      setBridgeMintTransactionHash(payoutTransaction ?? '')
     } catch (err) {
-      console.log(err);
+      console.log(err)
     }
-  };
+  }
 
   React.useEffect(() => {
-    swapId && getSwapById(swapId);
-  }, [swapId]);
+    swapId && getSwapById(swapId)
+  }, [swapId])
 
   const [showConnectNetworkModal, setShowConnectNetworkModal] =
-    React.useState<boolean>(false);
-  const [networkToConnect] = React.useState<NetworkToConnect>();
+    React.useState<boolean>(false)
+  const [networkToConnect] = React.useState<NetworkToConnect>()
 
   return (
     <>
@@ -132,7 +133,7 @@ const Form: React.FC<IProps> = ({ swapId }) => {
         />
       </Modal>
 
-      <Widget className="sm:min-h-[504px]">
+      <Widget className={`sm:min-h-[504px] max-w-lg ${className}`}>
         <Widget.Content>
           <ResizablePanel>
             {sourceNetwork &&
@@ -141,7 +142,7 @@ const Form: React.FC<IProps> = ({ swapId }) => {
             destinationNetwork &&
             destinationAsset &&
             destinationAddress ? (
-              <div className="min-h-[450px] justify-center items-center flex">
+              <div className="min-h-[450px] max-w-lg justify-center items-center flex">
                 <SwapDetails
                   sourceNetwork={sourceNetwork}
                   sourceAsset={sourceAsset}
@@ -166,7 +167,7 @@ const Form: React.FC<IProps> = ({ swapId }) => {
         </Widget.Content>
       </Widget>
     </>
-  );
-};
+  )
+}
 
-export default Form;
+export default Form
diff --git a/apps/bridge/src/components/lux/teleport/share/Address.tsx b/apps/bridge/src/components/lux/teleport/share/Address.tsx
index 3fa94060..ee81da9c 100644
--- a/apps/bridge/src/components/lux/teleport/share/Address.tsx
+++ b/apps/bridge/src/components/lux/teleport/share/Address.tsx
@@ -1,203 +1,245 @@
 'use client'
-import { type ChangeEvent, useCallback, useEffect, useState } from "react";
+import { type ChangeEvent, useCallback, useEffect, useState } from 'react'
 
-import { type Partner } from "@/Models/Partner";
-import { type AddressBookItem } from "@/lib/BridgeApiClient";
-import { isValidAddress } from "@/lib/addressValidator";
-import { type Network } from "@/types/teleport";
-import Image from 'next/image';
-import KnownInternalNames from "@/lib/knownIds";
-import shortenAddress from "@/components/utils/ShortenAddress";
-import WalletIcon from "@/components/icons/WalletIcon";
-import useWallet from "@/hooks/useWallet";
+import { type Partner } from '@/Models/Partner'
+import { type AddressBookItem } from '@/lib/BridgeApiClient'
+import { isValidAddress } from '@/lib/addressValidator'
+import { type Network } from '@/types/teleport'
+import Image from 'next/image'
+import KnownInternalNames from '@/lib/knownIds'
+import shortenAddress from '@/components/utils/ShortenAddress'
+import WalletIcon from '@/components/icons/WalletIcon'
+import useWallet from '@/hooks/useWallet'
 
-const Address: React.FC<{
-    hideLabel?: boolean;
-    disabled: boolean;
-    address: string,
-    name: string;
-    children?: JSX.Element | JSX.Element[];
-    ref?: any;
-    close: () => void,
-    isPartnerWallet: boolean,
-    partnerImage?: string,
-    partner?: Partner,
-    canFocus?: boolean,
-    address_book?: AddressBookItem[],
-    setAddress: React.Dispatch<React.SetStateAction<string>>,
+const Address: React.FC<
+  {
+    hideLabel?: boolean
+    disabled: boolean
+    address: string
+    name: string
+    children?: JSX.Element | JSX.Element[]
+    ref?: any
+    close: () => void
+    isPartnerWallet: boolean
+    partnerImage?: string
+    partner?: Partner
+    canFocus?: boolean
+    address_book?: AddressBookItem[]
+    setAddress: React.Dispatch<React.SetStateAction<string>>
     network?: Network
-} & Omit<React.HTMLProps<HTMLInputElement>, 'ref' | 'as' | 'onChange'> > = ({ 
-  name, 
-  close, 
-  disabled, 
-  isPartnerWallet, 
-  partnerImage, 
-  partner, 
-  address, 
-  setAddress, 
-  network 
+  } & Omit<React.HTMLProps<HTMLInputElement>, 'ref' | 'as' | 'onChange'>
+> = ({
+  name,
+  close,
+  disabled,
+  isPartnerWallet,
+  partnerImage,
+  partner,
+  address,
+  setAddress,
+  network,
 }) => {
+  const [wrongNetwork, setWrongNetwork] = useState(false)
+  const [inputValue, setInputValue] = useState<string | undefined>(address)
+  const [validInputAddress, setValidInputAddress] = useState<
+    string | undefined
+  >('')
 
-    const [wrongNetwork, setWrongNetwork] = useState(false)
-    const [inputValue, setInputValue] = useState<string | undefined>(address)
-    const [validInputAddress, setValidInputAddress] = useState<string | undefined>('')
+  const {
+    connectWallet,
+    disconnectWallet,
+    getAutofillProvider: getProvider,
+    getAutofillProviderWithNetworkName,
+  } = useWallet()
+  const provider = getAutofillProviderWithNetworkName(
+    network?.internal_name ?? 'ETHEREUM_MAINNET'
+  )
 
-    const { connectWallet, disconnectWallet, getAutofillProvider: getProvider, getAutofillProviderWithNetworkName } = useWallet()
-    const provider = getAutofillProviderWithNetworkName(network?.internal_name ?? "ETHEREUM_MAINNET")
+  const connectedWallet = provider?.getConnectedWallet()
 
-    const connectedWallet = provider?.getConnectedWallet()
-
-    useEffect(() => {
-        if (isValidAddress(connectedWallet?.address, { internal_name: network?.internal_name ?? "ETHEREUM_MAINNET" }) && !address) {
-            //TODO move to wallet implementation
-            if (connectedWallet
-                && connectedWallet.providerName === 'starknet'
-                && (connectedWallet.chainId != destinationChainId)
-            ) {
-                (async () => {
-                    setWrongNetwork(true)
-                    await disconnectWallet(connectedWallet.providerName)
-                })()
-                return
-            }
-            setInputValue(connectedWallet?.address)
-            setAddress(connectedWallet?.address ?? "")
-        }
-    }, [connectedWallet?.address])
+  useEffect(() => {
+    if (
+      isValidAddress(connectedWallet?.address, {
+        internal_name: network?.internal_name ?? 'ETHEREUM_MAINNET',
+      }) &&
+      !address
+    ) {
+      //TODO move to wallet implementation
+      if (
+        connectedWallet &&
+        connectedWallet.providerName === 'starknet' &&
+        connectedWallet.chainId != destinationChainId
+      ) {
+        ;(async () => {
+          setWrongNetwork(true)
+          await disconnectWallet(connectedWallet.providerName)
+        })()
+        return
+      }
+      setInputValue(connectedWallet?.address)
+      setAddress(connectedWallet?.address ?? '')
+    }
+  }, [connectedWallet?.address])
 
-    useEffect(() => {
-        address && setInputValue(address)
-    }, [address])
+  useEffect(() => {
+    address && setInputValue(address)
+  }, [address])
 
-    const destination = { internal_name: network?.internal_name ?? "ETHEREUM_MAINNET" }
-    const inputAddressIsValid = isValidAddress(inputValue, destination)
-    let errorMessage = '';
-    if (inputValue && !isValidAddress(inputValue, destination)) {
-        errorMessage = `Enter a valid ${network?.display_name ?? "ETHEREUM_MAINNET"} address`
-    }
+  const destination = {
+    internal_name: network?.internal_name ?? 'ETHEREUM_MAINNET',
+  }
+  const inputAddressIsValid = isValidAddress(inputValue, destination)
+  let errorMessage = ''
+  if (inputValue && !isValidAddress(inputValue, destination)) {
+    errorMessage = `Enter a valid ${network?.display_name ?? 'ETHEREUM_MAINNET'} address`
+  }
 
-    const handleInputChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-        setInputValue(e.target.value)
-    }, [])
+  const handleInputChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value)
+  }, [])
 
-    useEffect(() => {
-        if (inputAddressIsValid) {
-            setValidInputAddress(inputValue)
-        }
-    }, [inputValue, inputAddressIsValid])
+  useEffect(() => {
+    if (inputAddressIsValid) {
+      setValidInputAddress(inputValue)
+    }
+  }, [inputValue, inputAddressIsValid])
 
-    const handleSetNewAddress = useCallback(() => {
-        setAddress(validInputAddress ?? "")
-        close()
-    }, [validInputAddress])
+  const handleSetNewAddress = useCallback(() => {
+    setAddress(validInputAddress ?? '')
+    close()
+  }, [validInputAddress])
 
-    const handleRemoveDepositeAddress = useCallback(async () => {
-        setAddress("")
-        setInputValue("")
-    }, [])
+  const handleRemoveDepositeAddress = useCallback(async () => {
+    setAddress('')
+    setInputValue('')
+  }, [])
 
-    const destinationChainId = network?.chain_id ?? "ETHEREUM_MAINNET"
+  const destinationChainId = network?.chain_id ?? 'ETHEREUM_MAINNET'
 
-    return (
-        <div className='w-full flex flex-col justify-between h-full '>
-            <div className='flex flex-col self-center grow w-full'>
-                <div className='flex flex-col self-center grow w-full space-y-3'>
-                    <div className="text-left">
-                        <label htmlFor={name}>Address</label>
-                        {isPartnerWallet && partner && <span className='truncate text-sm text-indigo-200'> ({partner?.display_name})</span>}
-                        <div className="flex flex-wrap flex-col md:flex-row">
-                            <div className="relative flex grow rounded-lg shadow-sm mt-1.5 bg-level-1 border-[#404040] border focus-within:ring-0 focus-within:ring-foreground focus-within:border-foreground">
-                                {isPartnerWallet &&
-                                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                                        {
-                                            partnerImage &&
-                                            <Image alt="Partner logo" className='rounded-md object-contain' src={partnerImage} width="24" height="24"></Image>
-                                        }
-                                    </div>
-                                }
-                                <input
-                                    onChange={handleInputChange}
-                                    value={inputValue}
-                                    placeholder={"placeholder"}
-                                    autoCorrect="off"
-                                    type={"text"}
-                                    disabled={disabled || !!(connectedWallet && address)}
-                                    name={name}
-                                    id={name}
-                                    tabIndex={0}
-                                    className={(isPartnerWallet ? 'pl-11' : '') +
-                                        ' disabled:cursor-not-allowed grow h-12 border-none leading-4  block font-semibold w-full bg-level-1 rounded-lg truncate hover:overflow-x-scroll focus:ring-0 focus:outline-none'}
-                                />
-                                {
-                                    inputValue && !disabled &&
-                                    <span className="inline-flex items-center mr-2">
-                                        <div className="text-xs flex items-center space-x-2 md:ml-5 bg-level-2 rounded-md ">
-                                            <button
-                                                type="button"
-                                                className="p-0.5 duration-200 transition hover:bg-level-3 rounded-md"
-                                                onClick={handleRemoveDepositeAddress}
-                                            >
-                                                <div className="flex items-center px-2 text-sm py-1 font-semibold">
-                                                    Clear
-                                                </div>
-                                            </button>
-                                        </div>
-                                    </span>
-                                }
-                            </div>
-                            {errorMessage &&
-                                <div className="basis-full text-xs text-primary">
-                                    {errorMessage}
-                                </div>
-                            }
-                            {wrongNetwork && !inputValue &&
-                                <div className="basis-full text-xs text-primary">
-                                    {
-                                        destination?.internal_name === KnownInternalNames.Networks.StarkNetMainnet
-                                            ? <span>Please switch to Starknet Mainnet with your wallet and click Autofill again</span>
-                                            : <span>Please switch to Starknet Goerli with your wallet and click Autofill again</span>
-                                    }
-                                </div>
-                            }
+  return (
+    <div className="w-full flex flex-col justify-between h-full ">
+      <div className="flex flex-col self-center grow w-full">
+        <div className="flex flex-col self-center grow w-full space-y-3">
+          <div className="text-left">
+            <label htmlFor={name}>Address</label>
+            {isPartnerWallet && partner && (
+              <span className="truncate text-sm text-indigo-200">
+                {' '}
+                ({partner?.display_name})
+              </span>
+            )}
+            <div className="flex flex-wrap flex-col md:flex-row">
+              <div className="relative flex grow rounded-lg shadow-sm mt-1.5 bg-level-1 border-[#404040] border focus-within:ring-0 focus-within:ring-foreground focus-within:border-foreground">
+                {isPartnerWallet && (
+                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    {partnerImage && (
+                      <Image
+                        alt="Partner logo"
+                        className="rounded-md object-contain"
+                        src={partnerImage}
+                        width="24"
+                        height="24"
+                      ></Image>
+                    )}
+                  </div>
+                )}
+                <input
+                  onChange={handleInputChange}
+                  value={inputValue}
+                  placeholder={'placeholder'}
+                  autoCorrect="off"
+                  type={'text'}
+                  disabled={disabled || !!(connectedWallet && address)}
+                  name={name}
+                  id={name}
+                  tabIndex={0}
+                  className={
+                    (isPartnerWallet ? 'pl-11' : '') +
+                    'px-2 disabled:cursor-not-allowed grow h-12 border-none leading-4  block font-semibold w-full bg-level-1 rounded-lg truncate hover:overflow-x-scroll focus:ring-0 focus:outline-none'
+                  }
+                />
+                {inputValue && !disabled && (
+                  <span className="inline-flex items-center mr-2">
+                    <div className="text-xs flex items-center space-x-2 md:ml-5 bg-level-2 rounded-md ">
+                      <button
+                        type="button"
+                        className="p-0.5 duration-200 transition hover:bg-level-3 rounded-md"
+                        onClick={handleRemoveDepositeAddress}
+                      >
+                        <div className="flex items-center px-2 text-sm py-1 font-semibold">
+                          Clear
                         </div>
+                      </button>
                     </div>
-                    {
-                        validInputAddress &&
-                        <div onClick={handleSetNewAddress} className='text-left min-h-12 cursor-pointer space-x-2 border border-muted bg-level-1 shadow-xl flex text-sm rounded-md items-center w-full transform hover:bg-level-2 transition duration-200 px-2 py-2 hover:border-foreground hover:shadow-xl'>
-                            <div className="flex flex-col grow">
-                                <div className="text-md font-medium ">
-                                    {shortenAddress(validInputAddress)}
-                                </div>
-                            </div>
-                            <div className='flex flex-row items-left px-2 py-1 rounded-md'>
-                                Select
-                            </div>
-                        </div>
-                    }
-                    {
-                        !disabled
-                        && !inputValue
-                        && destination
-                        && provider
-                        && !connectedWallet &&
-                        <div onClick={() => { connectWallet(provider.name) }} className='min-h-12 text-left cursor-pointer space-x-2 bg-level-1  flex text-sm rounded-md items-center w-full transform transition duration-200 px-2 py-1.5 hover:bg-level-2 hover:shadow-xl'>
-                            <div className='flexflex-row items-left bg-level-3 px-2 py-1 rounded-md'>
-                                <WalletIcon className="w-6 h-6" />
-                            </div>
-                            <div className="flex flex-col">
-                                <div className="block text-sm font-medium">
-                                    Autofill from wallet
-                                </div>
-                                <div className="text-gray-500">
-                                    Connect your wallet to fetch the address
-                                </div>
-                            </div>
-                        </div>
-                    }
+                  </span>
+                )}
+              </div>
+              {errorMessage && (
+                <div className="basis-full text-xs text-primary">
+                  {errorMessage}
                 </div>
+              )}
+              {wrongNetwork && !inputValue && (
+                <div className="basis-full text-xs text-primary">
+                  {destination?.internal_name ===
+                  KnownInternalNames.Networks.StarkNetMainnet ? (
+                    <span>
+                      Please switch to Starknet Mainnet with your wallet and
+                      click Autofill again
+                    </span>
+                  ) : (
+                    <span>
+                      Please switch to Starknet Goerli with your wallet and
+                      click Autofill again
+                    </span>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+          {validInputAddress && (
+            <div
+              onClick={handleSetNewAddress}
+              className="text-left min-h-12 cursor-pointer space-x-2 border border-muted bg-level-1 shadow-xl flex text-sm rounded-md items-center w-full transform hover:bg-level-2 transition duration-200 px-2 py-2 hover:border-foreground hover:shadow-xl"
+            >
+              <div className="flex flex-col grow">
+                <div className="text-md font-medium ">
+                  {shortenAddress(validInputAddress)}
+                </div>
+              </div>
+              <div className="flex flex-row items-left px-2 py-1 rounded-md">
+                Select
+              </div>
             </div>
+          )}
+          {!disabled &&
+            !inputValue &&
+            destination &&
+            provider &&
+            !connectedWallet && (
+              <div
+                onClick={() => {
+                  connectWallet(provider.name)
+                }}
+                className="min-h-12 text-left cursor-pointer space-x-2 bg-level-1  flex text-sm rounded-md items-center w-full transform transition duration-200 px-2 py-1.5 hover:bg-level-2 hover:shadow-xl"
+              >
+                <div className="flexflex-row items-left bg-level-3 px-2 py-1 rounded-md">
+                  <WalletIcon className="w-6 h-6" />
+                </div>
+                <div className="flex flex-col">
+                  <div className="block text-sm font-medium">
+                    Autofill from wallet
+                  </div>
+                  <div className="text-gray-500">
+                    Connect your wallet to fetch the address
+                  </div>
+                </div>
+              </div>
+            )}
         </div>
-    )
+      </div>
+    </div>
+  )
 }
 
 export default Address
diff --git a/apps/bridge/src/components/lux/teleport/swap/AmountField.tsx b/apps/bridge/src/components/lux/teleport/swap/AmountField.tsx
index 380fa8a9..1c1268ff 100644
--- a/apps/bridge/src/components/lux/teleport/swap/AmountField.tsx
+++ b/apps/bridge/src/components/lux/teleport/swap/AmountField.tsx
@@ -1,18 +1,18 @@
-"use client";
-import React, { useState } from "react";
+'use client'
+import React, { useState } from 'react'
 
 interface IProps {
-  disabled: boolean;
-  setValue?: (value: string) => void;
-  value: string;
+  disabled: boolean
+  setValue?: (value: string) => void
+  value: string
 }
 
 const AmountField: React.FC<IProps> = ({ disabled, setValue, value }) => {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (/^[0-9]*[.,]?[0-9]*$/.test(e.target.value) && setValue) {
-      setValue(e.target.value);
+      setValue(e.target.value)
     }
-  };
+  }
 
   return (
     <>
@@ -20,11 +20,11 @@ const AmountField: React.FC<IProps> = ({ disabled, setValue, value }) => {
         <div className="relative w-full">
           <div className="flex relative w-full">
             <input
-              pattern={"^[0-9]*[.,]?[0-9]*$"}
+              pattern={'^[0-9]*[.,]?[0-9]*$'}
               inputMode="decimal"
               autoComplete="off"
               disabled={disabled}
-              placeholder={"0.0"}
+              placeholder={'0.0'}
               autoCorrect="off"
               min={0}
               max={10000}
@@ -33,9 +33,9 @@ const AmountField: React.FC<IProps> = ({ disabled, setValue, value }) => {
               type="text"
               value={value}
               step={0.01}
-              name={"name"}
-              id={"name"}
-              className="rounded-r-none w-full pl-0.5 p-0 focus:ring-0 disabled:cursor-not-allowed h-hit leading-4 bg-level-1 shadow-sm placeholder:text-muted-3 focus:ring-foreground focus:border-foreground block min-w-0 rounded-lg font-semibold border-0"
+              name={'name'}
+              id={'name'}
+              className="rounded-r-none outline-none w-full pl-0.5 p-0 focus:ring-0 disabled:cursor-not-allowed h-hit leading-4 bg-level-1 shadow-sm placeholder:text-muted-3 focus:ring-foreground focus:border-foreground block min-w-0 rounded-lg font-semibold border-0"
               onChange={handleChange}
             />
           </div>
@@ -57,15 +57,15 @@ const AmountField: React.FC<IProps> = ({ disabled, setValue, value }) => {
                 } */}
       </div>
     </>
-  );
-};
+  )
+}
 
 type AmountLabelProps = {
-  detailsAvailable: boolean;
-  minAllowedAmount: number | undefined;
-  maxAllowedAmount: number | undefined;
-  isBalanceLoading: boolean;
-};
+  detailsAvailable: boolean
+  minAllowedAmount: number | undefined
+  maxAllowedAmount: number | undefined
+  isBalanceLoading: boolean
+}
 const AmountLabel = ({
   detailsAvailable,
   minAllowedAmount,
@@ -85,7 +85,7 @@ const AmountLabel = ({
             } */}
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default AmountField;
+export default AmountField
diff --git a/apps/bridge/src/components/lux/teleport/swap/Form.tsx b/apps/bridge/src/components/lux/teleport/swap/Form.tsx
index 907abbf3..8efa0131 100644
--- a/apps/bridge/src/components/lux/teleport/swap/Form.tsx
+++ b/apps/bridge/src/components/lux/teleport/swap/Form.tsx
@@ -1,25 +1,25 @@
-"use client";
-import React, { type FC } from "react";
-import dynamic from "next/dynamic";
-import Image from "next/image";
-import axios from "axios";
+'use client'
+import React, { type FC } from 'react'
+import dynamic from 'next/dynamic'
+import Image from 'next/image'
+import axios from 'axios'
 
-import { ArrowLeftRight } from "lucide-react";
+import { ArrowLeftRight } from 'lucide-react'
 
-import Modal from "@/components/modal/modal";
-import ResizablePanel from "@/components/ResizablePanel";
-import shortenAddress from "../../../utils/ShortenAddress";
-import Widget from "../../../Widget";
+import Modal from '@/components/modal/modal'
+import ResizablePanel from '@/components/ResizablePanel'
+import shortenAddress from '../../../utils/ShortenAddress'
+import Widget from '../../../Widget'
 
-import FromNetworkForm from "./from/NetworkFormField";
-import ToNetworkForm from "./to/NetworkFormField";
-import SwapDetails from "./SwapDetails";
-import type { Token, Network } from "@/types/teleport";
-import { SWAP_PAIRS } from "@/components/lux/teleport/constants/settings";
-import { useAtom } from "jotai";
+import FromNetworkForm from './from/NetworkFormField'
+import ToNetworkForm from './to/NetworkFormField'
+import SwapDetails from './SwapDetails'
+import type { Token, Network } from '@/types/teleport'
+import { SWAP_PAIRS } from '@/components/lux/teleport/constants/settings'
+import { useAtom } from 'jotai'
 
-import { networks as devNetworks } from "@/components/lux/teleport/constants/networks.sandbox";
-import { networks as mainNetworks } from "@/components/lux/teleport/constants/networks.mainnets";
+import { networks as devNetworks } from '@/components/lux/teleport/constants/networks.sandbox'
+import { networks as mainNetworks } from '@/components/lux/teleport/constants/networks.mainnets'
 
 import {
   sourceNetworkAtom,
@@ -31,54 +31,53 @@ import {
   ethPriceAtom,
   swapStatusAtom,
   swapIdAtom,
-} from "@/store/teleport";
-import SpinIcon from "@/components/icons/spinIcon";
-import { SwapStatus } from "@/Models/SwapStatus";
+} from '@/store/teleport'
+import SpinIcon from '@/components/icons/spinIcon'
+import { SwapStatus } from '@/Models/SwapStatus'
 
 const Address = dynamic(
-  () => import("@/components/lux/teleport/share/Address"),
+  () => import('@/components/lux/teleport/share/Address'),
   {
     loading: () => <></>,
   }
-);
+)
 
 const Swap: FC = () => {
-  const isMainnet = process.env.NEXT_PUBLIC_API_VERSION === "mainnet";
-  const networks = isMainnet ? mainNetworks : devNetworks;
+  const isMainnet = process.env.NEXT_PUBLIC_API_VERSION === 'mainnet'
+  const networks = isMainnet ? mainNetworks : devNetworks
 
-  const [isSubmitting, setIsSubmitting] = React.useState<boolean>(false);
-  const [showAddressModal, setShowAddressModal] =
-    React.useState<boolean>(false);
-  const [sourceNetwork, setSourceNetwork] = useAtom(sourceNetworkAtom);
-  const [sourceAsset, setSourceAsset] = useAtom(sourceAssetAtom);
+  const [isSubmitting, setIsSubmitting] = React.useState<boolean>(false)
+  const [showAddressModal, setShowAddressModal] = React.useState<boolean>(false)
+  const [sourceNetwork, setSourceNetwork] = useAtom(sourceNetworkAtom)
+  const [sourceAsset, setSourceAsset] = useAtom(sourceAssetAtom)
   const [destinationNetwork, setDestinationNetwork] = useAtom(
     destinationNetworkAtom
-  );
-  const [destinationAsset, setDestinationAsset] = useAtom(destinationAssetAtom);
+  )
+  const [destinationAsset, setDestinationAsset] = useAtom(destinationAssetAtom)
   const [destinationAddress, setDestinationAddress] = useAtom(
     destinationAddressAtom
-  );
-  const [sourceAmount, setSourceAmount] = useAtom(sourceAmountAtom);
-  const [swapId, setSwapId] = useAtom(swapIdAtom);
-  const [, setSwapStatus] = useAtom(swapStatusAtom);
-  const [, setEthPrice] = useAtom(ethPriceAtom);
+  )
+  const [sourceAmount, setSourceAmount] = useAtom(sourceAmountAtom)
+  const [swapId, setSwapId] = useAtom(swapIdAtom)
+  const [, setSwapStatus] = useAtom(swapStatusAtom)
+  const [, setEthPrice] = useAtom(ethPriceAtom)
 
-  const sourceNetworks = networks;
+  const sourceNetworks = networks
   const [destinationNetworks, setDestinationNetworks] = React.useState<
     Network[]
-  >([]);
+  >([])
 
   React.useEffect(() => {
-    setSourceNetwork(networks.find((n) => n.status === "active"));
-  }, []);
+    setSourceNetwork(networks.find((n) => n.status === 'active'))
+  }, [])
 
   React.useEffect(() => {
     sourceNetwork &&
       sourceNetwork.currencies.length > 0 &&
       setSourceAsset(
-        sourceNetwork.currencies.find((c) => c.status === "active")
-      );
-  }, [sourceNetwork]);
+        sourceNetwork.currencies.find((c) => c.status === 'active')
+      )
+  }, [sourceNetwork])
 
   React.useEffect(() => {
     if (sourceAsset) {
@@ -97,48 +96,48 @@ const Swap: FC = () => {
             ...c,
             status: SWAP_PAIRS?.[sourceAsset.asset].includes(c.asset)
               ? c.status
-              : "inactive",
+              : 'inactive',
           })),
-        }));
+        }))
 
-      setDestinationNetworks(_networks);
-      setDestinationNetwork(_networks.find((n) => n.status === "active"));
+      setDestinationNetworks(_networks)
+      setDestinationNetwork(_networks.find((n) => n.status === 'active'))
     }
-  }, [sourceAsset, sourceNetwork]);
+  }, [sourceAsset, sourceNetwork])
 
   React.useEffect(() => {
     setDestinationAsset(
-      destinationNetwork?.currencies.find((c) => c.status === "active")
-    );
-  }, [destinationNetwork]);
+      destinationNetwork?.currencies.find((c) => c.status === 'active')
+    )
+  }, [destinationNetwork])
 
-  const [showSwapModal, setShowSwapModal] = React.useState<boolean>(false);
+  const [showSwapModal, setShowSwapModal] = React.useState<boolean>(false)
 
   React.useEffect(() => {
     if (sourceAsset) {
       axios.get(`/api/tokens/price/${sourceAsset.asset}`).then((data) => {
-        setEthPrice(Number(data?.data?.data?.price));
-      });
+        setEthPrice(Number(data?.data?.data?.price))
+      })
     }
-  }, [sourceAsset]);
+  }, [sourceAsset])
 
   const warnningMessage = React.useMemo(() => {
     if (!sourceNetwork) {
-      return "Select Source Network";
+      return 'Select Source Network'
     } else if (!sourceAsset) {
-      return "Select Source Asset";
+      return 'Select Source Asset'
     } else if (!destinationNetwork) {
-      return "Select Destination Network";
+      return 'Select Destination Network'
     } else if (!destinationAsset) {
-      return "Select Destination Asset";
+      return 'Select Destination Asset'
     } else if (!destinationAddress) {
-      return "Input Address";
-    } else if (sourceAmount === "") {
-      return "Enter Token Amount";
+      return 'Input Address'
+    } else if (sourceAmount === '') {
+      return 'Enter Token Amount'
     } else if (Number(sourceAmount) <= 0) {
-      return "Invalid Token Amount";
+      return 'Invalid Token Amount'
     } else {
-      return "Swap Now";
+      return 'Swap Now'
     }
   }, [
     sourceNetwork,
@@ -147,7 +146,7 @@ const Swap: FC = () => {
     destinationAsset,
     destinationAddress,
     sourceAmount,
-  ]);
+  ])
 
   const createSwap = async () => {
     try {
@@ -155,33 +154,33 @@ const Swap: FC = () => {
         amount: Number(sourceAmount),
         source_network: sourceNetwork?.internal_name,
         source_asset: sourceAsset?.asset,
-        source_address: "",
+        source_address: '',
         destination_network: destinationNetwork?.internal_name,
         destination_asset: destinationAsset?.asset,
         destination_address: destinationAddress,
         refuel: false,
         use_deposit_address: false,
         use_teleporter: true,
-        app_name: "Bridge",
-      };
+        app_name: 'Bridge',
+      }
       const response = await axios.post(
         `${process.env.NEXT_PUBLIC_BACKEND_API}/swaps?version=mainnet`,
         data
-      );
-      setSwapId(response.data?.data?.swap_id);
+      )
+      setSwapId(response.data?.data?.swap_id)
       window.history.pushState(
         {},
-        "",
+        '',
         `/swap/teleporter/${response.data?.data?.swap_id}`
-      );
-      setSwapStatus(SwapStatus.UserTransferPending);
-      setShowSwapModal(true);
+      )
+      setSwapStatus(SwapStatus.UserTransferPending)
+      setShowSwapModal(true)
       // router.push(`/swap/teleporter/${response.data?.data?.swap_id}`);
     } catch (err) {
-      console.log(err);
-      setIsSubmitting(false);
+      console.log(err)
+      setIsSubmitting(false)
     }
-  };
+  }
 
   const handleSwap = () => {
     if (
@@ -192,10 +191,10 @@ const Swap: FC = () => {
       destinationAddress &&
       Number(sourceAmount) > 0
     ) {
-      createSwap();
-      setIsSubmitting(true);
+      createSwap()
+      setIsSubmitting(true)
     }
-  };
+  }
 
   return (
     <Widget className="sm:min-h-[504px] max-w-lg">
@@ -207,7 +206,7 @@ const Swap: FC = () => {
               network={sourceNetwork}
               asset={sourceAsset}
               setNetwork={(network: Network) => {
-                setSourceNetwork(network);
+                setSourceNetwork(network)
               }}
               setAsset={(token: Token) => setSourceAsset(token)}
               networks={sourceNetworks}
@@ -236,7 +235,7 @@ const Swap: FC = () => {
             htmlFor="destination_address"
             className="block font-semibold text-xs"
           >
-            {`To ${destinationNetwork?.display_name ?? ""} address`}
+            {`To ${destinationNetwork?.display_name ?? ''} address`}
           </label>
           <AddressButton
             disabled={
@@ -247,11 +246,11 @@ const Swap: FC = () => {
             }
             isPartnerWallet={false}
             openAddressModal={() => setShowAddressModal(true)}
-            partnerImage={"partnerImage"}
+            partnerImage={'partnerImage'}
             address={destinationAddress}
           />
           <Modal
-            header={`To ${destinationNetwork?.display_name ?? ""} address`}
+            header={`To ${destinationNetwork?.display_name ?? ''} address`}
             height="fit"
             show={showAddressModal}
             setShow={setShowAddressModal}
@@ -267,8 +266,8 @@ const Swap: FC = () => {
               }
               address={destinationAddress}
               setAddress={setDestinationAddress}
-              name={"destination_address"}
-              partnerImage={"partnerImage"}
+              name={'destination_address'}
+              partnerImage={'partnerImage'}
               isPartnerWallet={false}
               address_book={[]}
               network={destinationNetwork}
@@ -293,7 +292,7 @@ const Swap: FC = () => {
           {isSubmitting ? (
             <SpinIcon className="animate-spin h-5 w-5" />
           ) : (
-            warnningMessage === "Swap Now" && (
+            warnningMessage === 'Swap Now' && (
               <ArrowLeftRight className="h-5 w-5" aria-hidden="true" />
             )
           )}
@@ -315,7 +314,7 @@ const Swap: FC = () => {
             destinationAsset &&
             destinationAddress ? (
               <SwapDetails
-                className="min-h-[450px] justify-center"
+                className="min-h-[450px] justify-center max-w-lg"
                 sourceNetwork={sourceNetwork}
                 sourceAsset={sourceAsset}
                 destinationNetwork={destinationNetwork}
@@ -338,20 +337,20 @@ const Swap: FC = () => {
         </Modal>
       </Widget.Content>
     </Widget>
-  );
-};
+  )
+}
 
 const TruncatedAdrress = ({ address }: { address: string }) => {
-  const shortAddress = shortenAddress(address);
-  return <div className="tracking-wider ">{shortAddress}</div>;
-};
+  const shortAddress = shortenAddress(address)
+  return <div className="tracking-wider ">{shortAddress}</div>
+}
 
 const AddressButton: FC<{
-  openAddressModal: () => void;
-  isPartnerWallet: boolean;
-  partnerImage?: string;
-  disabled: boolean;
-  address: string;
+  openAddressModal: () => void
+  isPartnerWallet: boolean
+  partnerImage?: string
+  disabled: boolean
+  address: string
 }> = ({
   openAddressModal,
   isPartnerWallet,
@@ -386,6 +385,6 @@ const AddressButton: FC<{
       )}
     </div>
   </button>
-);
+)
 
-export default Swap;
+export default Swap
diff --git a/apps/bridge/src/components/lux/teleport/swap/NumericInput.tsx b/apps/bridge/src/components/lux/teleport/swap/NumericInput.tsx
index c742751c..769c30b5 100644
--- a/apps/bridge/src/components/lux/teleport/swap/NumericInput.tsx
+++ b/apps/bridge/src/components/lux/teleport/swap/NumericInput.tsx
@@ -1,121 +1,124 @@
-"use client";
-import { type ChangeEvent, forwardRef } from "react";
-import { classNames } from "@/components/utils/classNames";
+'use client'
+import { type ChangeEvent, forwardRef } from 'react'
+import { classNames } from '@/components/utils/classNames'
 
 type InputProps = {
-  label?: JSX.Element | JSX.Element[];
-  pattern?: string;
-  disabled?: boolean;
-  placeholder: string;
-  min?: number;
-  max?: number;
-  minLength?: number;
-  maxLength?: number;
-  precision?: number;
-  step?: number;
-  name: string;
-  className?: string;
-  children?: JSX.Element | JSX.Element[] | null;
-  ref?: any;
-  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-  onFocus?: () => void;
-  onBlur?: () => void;
-};
+  label?: JSX.Element | JSX.Element[]
+  pattern?: string
+  disabled?: boolean
+  placeholder: string
+  min?: number
+  max?: number
+  minLength?: number
+  maxLength?: number
+  precision?: number
+  step?: number
+  name: string
+  className?: string
+  children?: JSX.Element | JSX.Element[] | null
+  ref?: any
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void
+  onFocus?: () => void
+  onBlur?: () => void
+}
 
 // Use with Formik
-const NumericInput: React.FC<InputProps> = 
-  forwardRef<HTMLInputElement, InputProps>(
-  function NumericInput(
-    {
-      label,
-      pattern,
-      disabled,
-      placeholder,
-      min,
-      max,
-      minLength,
-      maxLength,
-      precision,
-      step,
-      name,
-      className,
-      children,
-      onChange,
-      onFocus,
-      onBlur,
-    },
-    ref
-  ) {
-    // const [field] = useField(name)
+const NumericInput: React.FC<InputProps> = forwardRef<
+  HTMLInputElement,
+  InputProps
+>(function NumericInput(
+  {
+    label,
+    pattern,
+    disabled,
+    placeholder,
+    min,
+    max,
+    minLength,
+    maxLength,
+    precision,
+    step,
+    name,
+    className,
+    children,
+    onChange,
+    onFocus,
+    onBlur,
+  },
+  ref
+) {
+  // const [field] = useField(name)
 
-    return (
-      <div>
-        {label && (
-          <label
-            htmlFor={name}
-            className="block font-semibold  text-sm mb-1.5 w-full"
-          >
-            {label}
-          </label>
-        )}
-        <div className="flex relative w-full">
-          <input
-            pattern={pattern ? pattern : "^[0-9]*[.,]?[0-9]*$"}
-            inputMode="decimal"
-            autoComplete="off"
-            disabled={disabled}
-            placeholder={placeholder}
-            autoCorrect="off"
-            min={min}
-            max={max}
-            minLength={minLength}
-            maxLength={maxLength}
-            onInput={(event: React.ChangeEvent<HTMLInputElement>) => {
-              replaceComma(event);
-              limitDecimalPlaces(event, precision as number);
-            }}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            type="text"
-            step={step}
-            name={name}
-            id={name}
-            ref={ref}
-            className={classNames(
-              "disabled:cursor-not-allowed h-12 leading-4 bg-level-1 shadow-sm placeholder:text-muted-3 focus:ring-foreground focus:border-foreground block min-w-0 rounded-lg font-semibold border-0",
-              className
-            )}
-            // onChange={onChange ? onChange : e => {
-            //     /^[0-9]*[.,]?[0-9]*$/.test(e.target.value) && handleChange(e);
-            // }}
-          />
-          {children && <>{children}</>}
-        </div>
+  return (
+    <div>
+      {label && (
+        <label
+          htmlFor={name}
+          className="block font-semibold  text-sm mb-1.5 w-full"
+        >
+          {label}
+        </label>
+      )}
+      <div className="flex relative w-full">
+        <input
+          pattern={pattern ? pattern : '^[0-9]*[.,]?[0-9]*$'}
+          inputMode="decimal"
+          autoComplete="off"
+          disabled={disabled}
+          placeholder={placeholder}
+          autoCorrect="off"
+          min={min}
+          max={max}
+          minLength={minLength}
+          maxLength={maxLength}
+          onInput={(event: React.ChangeEvent<HTMLInputElement>) => {
+            replaceComma(event)
+            limitDecimalPlaces(event, precision as number)
+          }}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          type="text"
+          step={step}
+          name={name}
+          id={name}
+          ref={ref}
+          className={classNames(
+            'disabled:cursor-not-allowed h-12 leading-4 bg-level-1 shadow-sm placeholder:text-muted-3 focus:ring-foreground focus:border-foreground block min-w-0 rounded-lg font-semibold border-0',
+            className
+          )}
+          // onChange={onChange ? onChange : e => {
+          //     /^[0-9]*[.,]?[0-9]*$/.test(e.target.value) && handleChange(e);
+          // }}
+        />
+        {children && <>{children}</>}
       </div>
-    );
-  }
-);
+    </div>
+  )
+})
 
-function limitDecimalPlaces(e: React.ChangeEvent<HTMLInputElement>, count: number) {
-  if (e.target.value.indexOf(".") == -1) {
-    return;
+function limitDecimalPlaces(
+  e: React.ChangeEvent<HTMLInputElement>,
+  count: number
+) {
+  if (e.target.value.indexOf('.') == -1) {
+    return
   }
-  if (e.target.value.length - e.target.value.indexOf(".") > count) {
+  if (e.target.value.length - e.target.value.indexOf('.') > count) {
     e.target.value = ParseFloat(e.target.value, count) + ''
   }
 }
 
 function ParseFloat(str: string, val: number) {
-  str = str.toString();
-  str = str.slice(0, str.indexOf(".") + val + 1);
-  return Number(str);
+  str = str.toString()
+  str = str.slice(0, str.indexOf('.') + val + 1)
+  return Number(str)
 }
 
 function replaceComma(e: React.ChangeEvent<HTMLInputElement>) {
-  var val = e.target.value;
+  var val = e.target.value
   if (val.match(/\,/)) {
-    val = val.replace(/\,/g, ".");
-    e.target.value = val;
+    val = val.replace(/\,/g, '.')
+    e.target.value = val
   }
 }
 
diff --git a/apps/bridge/src/components/lux/teleport/swap/SuccessIcon.tsx b/apps/bridge/src/components/lux/teleport/swap/SuccessIcon.tsx
index 07d24a02..cb1c1a14 100644
--- a/apps/bridge/src/components/lux/teleport/swap/SuccessIcon.tsx
+++ b/apps/bridge/src/components/lux/teleport/swap/SuccessIcon.tsx
@@ -1,10 +1,21 @@
 export default () => (
-    <div className='flex place-content-center mb-4'>
-        <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 116 116" fill="none">
-            <circle cx="58" cy="58" r="58" fill="#55B585" fillOpacity="0.1" />
-            <circle cx="58" cy="58" r="45" fill="#55B585" fillOpacity="0.3" />
-            <circle cx="58" cy="58" r="30" fill="#55B585" />
-            <path d="M44.5781 57.245L53.7516 66.6843L70.6308 49.3159" stroke="white" strokeWidth="3.15789" strokeLinecap="round" />
-        </svg>
-    </div>
-)
\ No newline at end of file
+  <div className="flex place-content-center mb-4">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100"
+      height="100"
+      viewBox="0 0 116 116"
+      fill="none"
+    >
+      <circle cx="58" cy="58" r="58" fill="#55B585" fillOpacity="0.1" />
+      <circle cx="58" cy="58" r="45" fill="#55B585" fillOpacity="0.3" />
+      <circle cx="58" cy="58" r="30" fill="#55B585" />
+      <path
+        d="M44.5781 57.245L53.7516 66.6843L70.6308 49.3159"
+        stroke="white"
+        strokeWidth="3.15789"
+        strokeLinecap="round"
+      />
+    </svg>
+  </div>
+)
diff --git a/apps/bridge/src/components/lux/teleport/swap/SwapDetails.tsx b/apps/bridge/src/components/lux/teleport/swap/SwapDetails.tsx
index 275b396d..9e21ed50 100644
--- a/apps/bridge/src/components/lux/teleport/swap/SwapDetails.tsx
+++ b/apps/bridge/src/components/lux/teleport/swap/SwapDetails.tsx
@@ -1,23 +1,23 @@
-import React from "react";
-import { swapStatusAtom, swapIdAtom } from "@/store/teleport";
+import React from 'react'
+import { swapStatusAtom, swapIdAtom } from '@/store/teleport'
 //hooks
-import { useAtom } from "jotai";
+import { useAtom } from 'jotai'
 //types
-import type { Network, Token } from "@/types/teleport";
-import UserTokenDepositor from "./progress/TokenDepositor";
-import TeleportProcessor from "./progress/TeleportProcessor";
-import PayoutProcessor from "./progress/PayoutProcessor";
-import SwapSuccess from "./progress/SwapSuccess";
-import { SwapStatus } from "@/Models/SwapStatus";
+import type { Network, Token } from '@/types/teleport'
+import UserTokenDepositor from './progress/TokenDepositor'
+import TeleportProcessor from './progress/TeleportProcessor'
+import PayoutProcessor from './progress/PayoutProcessor'
+import SwapSuccess from './progress/SwapSuccess'
+import { SwapStatus } from '@/Models/SwapStatus'
 
 interface IProps {
-  className?: string;
-  sourceNetwork: Network;
-  sourceAsset: Token;
-  destinationNetwork: Network;
-  destinationAsset: Token;
-  destinationAddress: string;
-  sourceAmount: string;
+  className?: string
+  sourceNetwork: Network
+  sourceAsset: Token
+  destinationNetwork: Network
+  destinationAsset: Token
+  destinationAddress: string
+  sourceAmount: string
 }
 
 const SwapDetails: React.FC<IProps> = ({
@@ -30,8 +30,8 @@ const SwapDetails: React.FC<IProps> = ({
   className,
 }) => {
   //atoms
-  const [swapStatus] = useAtom(swapStatusAtom);
-  const [swapId] = useAtom(swapIdAtom);
+  const [swapStatus] = useAtom(swapStatusAtom)
+  const [swapId] = useAtom(swapIdAtom)
 
   //chain id
   if (swapStatus === SwapStatus.UserTransferPending) {
@@ -46,8 +46,8 @@ const SwapDetails: React.FC<IProps> = ({
         swapId={swapId}
         className={className}
       />
-    );
-  } else if (swapStatus === "teleport_processing_pending") {
+    )
+  } else if (swapStatus === 'teleport_processing_pending') {
     return (
       <TeleportProcessor
         sourceNetwork={sourceNetwork}
@@ -59,8 +59,8 @@ const SwapDetails: React.FC<IProps> = ({
         swapId={swapId}
         className={className}
       />
-    );
-  } else if (swapStatus === "user_payout_pending") {
+    )
+  } else if (swapStatus === 'user_payout_pending') {
     return (
       <PayoutProcessor
         sourceNetwork={sourceNetwork}
@@ -72,8 +72,8 @@ const SwapDetails: React.FC<IProps> = ({
         swapId={swapId}
         className={className}
       />
-    );
-  } else if (swapStatus === "payout_success") {
+    )
+  } else if (swapStatus === 'payout_success') {
     return (
       <SwapSuccess
         sourceNetwork={sourceNetwork}
@@ -85,10 +85,10 @@ const SwapDetails: React.FC<IProps> = ({
         swapId={swapId}
         className={className}
       />
-    );
+    )
   } else {
-    return <></>;
+    return <></>
   }
-};
+}
 
-export default SwapDetails;
+export default SwapDetails
diff --git a/apps/bridge/src/components/lux/teleport/swap/from/NetworkFormField.tsx b/apps/bridge/src/components/lux/teleport/swap/from/NetworkFormField.tsx
index 2835b6f3..f24223e2 100644
--- a/apps/bridge/src/components/lux/teleport/swap/from/NetworkFormField.tsx
+++ b/apps/bridge/src/components/lux/teleport/swap/from/NetworkFormField.tsx
@@ -1,33 +1,25 @@
-"use client";
-import { useAtom } from "jotai";
+'use client'
+import { useAtom } from 'jotai'
 
-import AmountField from "../AmountField";
-import NetworkSelectWrapper from "./NetworkSelectWrapper";
+import AmountField from '../AmountField'
+import NetworkSelectWrapper from './NetworkSelectWrapper'
 
-import type { Network, Token } from "@/types/teleport";
-import TokenSelectWrapper from "./TokenSelectWrapper";
-import { sourceAmountAtom } from "@/store/teleport";
+import type { Network, Token } from '@/types/teleport'
+import TokenSelectWrapper from './TokenSelectWrapper'
+import { sourceAmountAtom } from '@/store/teleport'
 
 const NetworkFormField: React.FC<{
-  networks: Network[],
-  network?: Network,
-  asset?: Token,
-  setNetwork: (network: Network) => void,
-  setAsset: (asset: Token) => void,
+  networks: Network[]
+  network?: Network
+  asset?: Token
+  setNetwork: (network: Network) => void
+  setAsset: (asset: Token) => void
   disabled: boolean
-}> = ({ 
-  networks, 
-  network, 
-  asset, 
-  setNetwork, 
-  setAsset, 
-  disabled 
-}) => {
-
-  const [amount, setAmount] = useAtom(sourceAmountAtom);
+}> = ({ networks, network, asset, setNetwork, setAsset, disabled }) => {
+  const [amount, setAmount] = useAtom(sourceAmountAtom)
 
   return (
-    <div className='p-3' id='NETWORK_FORM_FIELD'>
+    <div className="p-3" id="NETWORK_FORM_FIELD">
       <label htmlFor={'name'} className="block font-semibold text-xs">
         From
       </label>
diff --git a/apps/bridge/src/components/lux/teleport/swap/from/NetworkSelect.tsx b/apps/bridge/src/components/lux/teleport/swap/from/NetworkSelect.tsx
index 2dc77398..b0ce312e 100644
--- a/apps/bridge/src/components/lux/teleport/swap/from/NetworkSelect.tsx
+++ b/apps/bridge/src/components/lux/teleport/swap/from/NetworkSelect.tsx
@@ -1,5 +1,13 @@
 'use client'
 import type { Dispatch, SetStateAction } from 'react'
+import type { Network } from '@/types/teleport'
+
+import { cn } from '@hanzo/ui/util'
+import Modal from '@/components/modal/modal'
+import SpinIcon from '@/components/icons/spinIcon'
+import SelectItem from './SelectItem'
+import CommandWrapper from '@/components/shadcn/command-wrapper'
+import useWindowDimensions from '@/hooks/useWindowDimensions'
 
 import {
   CommandEmpty,
@@ -7,64 +15,54 @@ import {
   CommandItem,
   CommandList,
 } from '@hanzo/ui/primitives'
-import CommandWrapper from '@/components/shadcn/command-wrapper'
-
-import Modal from '@/components/modal/modal'
-import useWindowDimensions from '@/hooks/useWindowDimensions'
-import SpinIcon from '@/components/icons/spinIcon'
-import type { Network } from '@/types/teleport'
-import SelectItem from './SelectItem'
 
 const CommandSelect: React.FC<{
   show: boolean
   setShow: (value: boolean) => void
   searchHint: string
-  networks: Network[],
+  networks: Network[]
   network?: Network
   setNetwork: (value: Network) => void
-}> = ({ 
-  networks, 
-  network, 
-  setNetwork, 
-  show, 
-  setShow, 
-  searchHint 
-}) => {
+}> = ({ networks, network, setNetwork, show, setShow, searchHint }) => {
   const { isDesktop } = useWindowDimensions()
   return (
-    <Modal height='full' show={show} setShow={setShow as Dispatch<SetStateAction<boolean>>}>
+    <Modal
+      height="full"
+      show={show}
+      setShow={setShow as Dispatch<SetStateAction<boolean>>}
+    >
       {show ? (
         <CommandWrapper>
           <CommandInput autoFocus={isDesktop} placeholder={searchHint} />
-          {
-            networks && networks.length > 0 ? (
-                <CommandList>
-                    <CommandEmpty>No results found.</CommandEmpty>
-                    {
-                        networks.map((n: Network) => (
-                            <CommandItem
-                                disabled={false}
-                                value={n.internal_name}
-                                key={n.internal_name}
-                                onSelect={() => {
-                                    setNetwork(n)
-                                }}
-                                className={`${n?.status == 'active' ? 'opacity-100' : 'opacity-50'}`}
-                            >
-                                <SelectItem network={n} />
-                            </CommandItem>
-                        ))
-                    }
-                </CommandList>
-            ) : (
-                <div className='flex justify-center h-full items-center'>
-                    <SpinIcon className="animate-spin h-5 w-5" />
-                </div>
-            )
-          }
+          {networks && networks.length > 0 ? (
+            <CommandList>
+              <CommandEmpty>No results found.</CommandEmpty>
+              {networks.map((n: Network) => (
+                <CommandItem
+                  disabled={false}
+                  value={n.internal_name}
+                  key={n.internal_name}
+                  onSelect={() => {
+                    setNetwork(n)
+                  }}
+                  className={cn([
+                    n?.status == 'active' ? 'opacity-100' : 'opacity-50',
+                    'hover:!bg-[#1F1F1F] aria-selected:!bg-[#1F1F1F] cursor-pointer',
+                  ])}
+                >
+                  <SelectItem network={n} />
+                </CommandItem>
+              ))}
+            </CommandList>
+          ) : (
+            <div className="flex justify-center h-full items-center">
+              <SpinIcon className="animate-spin h-5 w-5" />
+            </div>
+          )}
         </CommandWrapper>
-        ) : <></>
-      }
+      ) : (
+        <></>
+      )}
     </Modal>
   )
 }
diff --git a/apps/bridge/src/components/lux/teleport/swap/from/NetworkSelectWrapper.tsx b/apps/bridge/src/components/lux/teleport/swap/from/NetworkSelectWrapper.tsx
index 5d497b45..5f7a916d 100644
--- a/apps/bridge/src/components/lux/teleport/swap/from/NetworkSelectWrapper.tsx
+++ b/apps/bridge/src/components/lux/teleport/swap/from/NetworkSelectWrapper.tsx
@@ -2,89 +2,89 @@
 import { useCallback, useState } from 'react'
 import Image from 'next/image'
 import NetworkSelect from './NetworkSelect'
-import type { Network, Token } from '@/types/teleport';
+import type { Network, Token } from '@/types/teleport'
 import { ChevronDown } from 'lucide-react'
 
 type NetworkSelectWrapperProps = {
-    network?: Network;
-    networks: Network[];
-    setNetwork: (network: Network) => void;
-    placeholder: string;
-    searchHint: string;
-    disabled: boolean;
-    className?: string
+  network?: Network
+  networks: Network[]
+  setNetwork: (network: Network) => void
+  placeholder: string
+  searchHint: string
+  disabled: boolean
+  className?: string
 }
 
 export default function NetworkSelectWrapper<T>({
-    network,
-    setNetwork,
-    networks,
-    disabled,
-    placeholder,
-    searchHint,
-    className
+  network,
+  setNetwork,
+  networks,
+  disabled,
+  placeholder,
+  searchHint,
+  className,
 }: NetworkSelectWrapperProps) {
-    const [showModal, setShowModal] = useState(false)
+  const [showModal, setShowModal] = useState(false)
 
-    function openModal() {
-        setShowModal(true)
-    }
+  function openModal() {
+    setShowModal(true)
+  }
 
-    const handleSelect = useCallback((item: Network) => {
-        if (item.status === 'active') {
-            setNetwork(item)
-            setShowModal(false)
-        }
-    }, [])
+  const handleSelect = useCallback((item: Network) => {
+    if (item.status === 'active') {
+      setNetwork(item)
+      setShowModal(false)
+    }
+  }, [])
 
-    return (
-        <>
-            <div className="flex items-center relative">
-                <button
-                    type="button"
-                    onClick={openModal}
-                    disabled={disabled}
-                    className={`rounded-lg focus-peer:ring-primary focus-peer:border-muted-3 focus-peer:border focus-peer:ring-1 focus:outline-none disabled:cursor-not-allowed relative grow h-12 flex items-center text-left justify-bottom w-full pl-3 pr-4 py-2 border border-muted-3 font-semibold ${className}`}
-                >
-                    <span className='flex grow text-left items-center text-xs md:text-base'>
-                        {
-                            network && <div className="flex items-center">
-                                <div className="flex-shrink-0 h-6 w-6 relative">
-                                    <Image
-                                        src={network.logo}
-                                        alt="Project Logo"
-                                        height="40"
-                                        width="40"
-                                        loading="eager"
-                                        priority
-                                        className="rounded-md object-contain"
-                                    />
-                                </div>
-                            </div>
-                        }
-                        {network
-                            ?
-                            <span className="ml-3 block font-medium text-muted flex-auto items-center">
-                                {network.display_name}
-                            </span>
-                            :
-                            <span className="block font-medium text-muted-2 flex-auto items-center">
-                                {placeholder}
-                            </span>}
-                    </span>
-                    <span className="ml-3 right-0 flex items-center pointer-events-none">
-                        <ChevronDown className="h-4 w-4" aria-hidden="true" />
-                    </span>
-                </button>
-            </div>
-            <NetworkSelect
-                setShow={setShowModal}
-                setNetwork={handleSelect}
-                show={showModal}
-                network={network}
-                searchHint=''
-                networks={networks}
-            />
-        </>
-    )
+  return (
+    <>
+      <div className="flex items-center relative">
+        <button
+          type="button"
+          onClick={openModal}
+          disabled={disabled}
+          className={`rounded-lg focus-peer:ring-primary focus-peer:border-muted-3 focus-peer:border focus-peer:ring-1 focus:outline-none disabled:cursor-not-allowed relative grow h-12 flex items-center text-left justify-bottom w-full pl-3 pr-4 py-2 border border-muted-3 font-semibold ${className}`}
+        >
+          <span className="flex grow text-left items-center text-xs md:text-base">
+            {network && (
+              <div className="flex items-center">
+                <div className="flex-shrink-0 h-6 w-6 relative">
+                  <Image
+                    src={network.logo}
+                    alt="Project Logo"
+                    height="40"
+                    width="40"
+                    loading="eager"
+                    priority
+                    className="rounded-md object-contain"
+                  />
+                </div>
+              </div>
+            )}
+            {network ? (
+              <span className="ml-3 block font-medium text-muted flex-auto items-center">
+                {network.display_name}
+              </span>
+            ) : (
+              <span className="block font-medium text-muted-2 flex-auto items-center">
+                {placeholder}
+              </span>
+            )}
+          </span>
+          <span className="ml-3 right-0 flex items-center pointer-events-none">
+            <ChevronDown className="h-4 w-4" aria-hidden="true" />
+          </span>
+        </button>
+      </div>
+      <NetworkSelect
+        setShow={setShowModal}
+        setNetwork={handleSelect}
+        show={showModal}
+        network={network}
+        searchHint=""
+        networks={networks}
+      />
+    </>
+  )
 }
diff --git a/apps/bridge/src/components/lux/teleport/swap/from/SelectItem.tsx b/apps/bridge/src/components/lux/teleport/swap/from/SelectItem.tsx
index 0b023322..d96b3f93 100644
--- a/apps/bridge/src/components/lux/teleport/swap/from/SelectItem.tsx
+++ b/apps/bridge/src/components/lux/teleport/swap/from/SelectItem.tsx
@@ -1,31 +1,27 @@
-import React from 'react';
-import type { Network } from '@/types/teleport';
+import React from 'react'
+import type { Network } from '@/types/teleport'
 import Image from 'next/image'
 
 const SelectItem: React.FC<{
-    network: Network
-}> = ({ 
-  network 
-}) => (
+  network: Network
+}> = ({ network }) => (
   <div className="flex items-center justify-between w-full">
-      <div className='flex items-center'>
-          <div className="flex-shrink-0 h-6 w-6 relative">
-              <Image
-                  src={network.logo}
-                  alt="Project Logo"
-                  height="40"
-                  width="40"
-                  loading="eager"
-                  className="rounded-md object-contain"
-              />
-          </div>
-          <div className="ml-4 flex items-center gap-3 justify-between w-full">
-              <p className='text-md font-medium'>
-                  {network.display_name}
-              </p>
-          </div>
+    <div className="flex items-center">
+      <div className="flex-shrink-0 h-6 w-6 relative">
+        <Image
+          src={network.logo}
+          alt="Project Logo"
+          height="40"
+          width="40"
+          loading="eager"
+          className="rounded-md object-contain"
+        />
       </div>
-      <div>{(network.status === 'active') ? 'active' : ''}</div>
+      <div className="ml-4 flex items-center gap-3 justify-between w-full">
+        <p className="text-md font-medium">{network.display_name}</p>
+      </div>
+    </div>
+    <div>{network.status === 'active' ? 'active' : ''}</div>
   </div>
 )
 
diff --git a/apps/bridge/src/components/lux/teleport/swap/from/TokenSelect.tsx b/apps/bridge/src/components/lux/teleport/swap/from/TokenSelect.tsx
index 3a3f5937..f68b6013 100644
--- a/apps/bridge/src/components/lux/teleport/swap/from/TokenSelect.tsx
+++ b/apps/bridge/src/components/lux/teleport/swap/from/TokenSelect.tsx
@@ -1,57 +1,53 @@
 import React from 'react'
 import Image from 'next/image'
-
-import {
-  CommandItem,
-  CommandList,
-} from '@hanzo/ui/primitives'
 import CommandWrapper from '@/components/shadcn/command-wrapper'
 
+import { cn } from '@hanzo/ui/util'
+import { CommandItem, CommandList } from '@hanzo/ui/primitives'
+
 import type { Token } from '@/types/teleport'
 
 const TokenSelect: React.FC<{
   values: Token[]
   setValue: (token: Token) => void
-}> = ({ 
-  values, 
-  setValue 
-}) => (
+}> = ({ values, setValue }) => (
   <CommandWrapper>
     <CommandList>
-    {values.map((item) => (
-      <CommandItem
-        className={`border-t border-t-slate-500 justify-between gap-6 ${
-          item.status !== 'active' && 'opacity-30'
-        }`}
-        disabled={false}
-        value={item.asset}
-        key={item.asset}
-        onSelect={() => {
-          setValue(item)
-        }}
-      >
-        <div className='flex items-center w-full'>
-          <div className='flex-shrink-0 h-6 w-6 relative'>
-            {item.logo && (
-              <Image
-                src={item.logo}
-                alt='Project Logo'
-                height='40'
-                width='40'
-                loading='eager'
-                className='rounded-full object-contain'
-              />
-            )}
+      {values.map((item) => (
+        <CommandItem
+          className={cn(
+            'border-t border-t-slate-500 justify-between gap-6 hover:!bg-[#1F1F1F] aria-selected:!bg-[#1F1F1F] !border-none cursor-pointer',
+            item.status !== 'active' && 'opacity-30'
+          )}
+          disabled={false}
+          value={item.asset}
+          key={item.asset}
+          onSelect={() => {
+            setValue(item)
+          }}
+        >
+          <div className="flex items-center w-full">
+            <div className="flex-shrink-0 h-6 w-6 relative">
+              {item.logo && (
+                <Image
+                  src={item.logo}
+                  alt="Project Logo"
+                  height="40"
+                  width="40"
+                  loading="eager"
+                  className="rounded-full object-contain"
+                />
+              )}
+            </div>
+            <div className="ml-4 flex items-center gap-3 justify-between w-full">
+              <p className="text-md font-medium">{item.asset}</p>
+            </div>
           </div>
-          <div className='ml-4 flex items-center gap-3 justify-between w-full'>
-            <p className='text-md font-medium'>{item.asset}</p>
+          <div className="text-xs text-[white]/60">
+            {item.status === 'active' && 'active'}
           </div>
-        </div>
-        <div className='text-xs text-[white]/60'>
-          {item.status === 'active' && 'active'}
-        </div>
-      </CommandItem>
-    ))}
+        </CommandItem>
+      ))}
     </CommandList>
   </CommandWrapper>
 )
diff --git a/apps/bridge/src/components/lux/teleport/swap/from/TokenSelectWrapper.tsx b/apps/bridge/src/components/lux/teleport/swap/from/TokenSelectWrapper.tsx
index a212bab1..be1fac77 100644
--- a/apps/bridge/src/components/lux/teleport/swap/from/TokenSelectWrapper.tsx
+++ b/apps/bridge/src/components/lux/teleport/swap/from/TokenSelectWrapper.tsx
@@ -1,40 +1,29 @@
-import { useCallback, useState } from "react"
-import Image from "next/image";
-import { ChevronDown } from "lucide-react";
+import { useCallback, useState } from 'react'
+import Image from 'next/image'
+import { ChevronDown } from 'lucide-react'
 
-import TokenSelect from "./TokenSelect";
-import { 
-  Popover, 
-  PopoverContent, 
-  PopoverTrigger,
-
-} from '@hanzo/ui/primitives'
-import type { Token } from "@/types/teleport";
+import TokenSelect from './TokenSelect'
+import { Popover, PopoverContent, PopoverTrigger } from '@hanzo/ui/primitives'
+import type { Token } from '@/types/teleport'
 
 const TokenSelectWrapper: React.FC<{
-  setValue: (value: Token) => void;
-  values: Token[];
-  value?: Token;
-  placeholder?: string;
-  searchHint?: string;
-  disabled?: boolean;
-}> = ({
-  setValue,
-  value,
-  values,
-  placeholder,
-  disabled,
-}) => {
-  const [showModal, setShowModal] = useState(false);
+  setValue: (value: Token) => void
+  values: Token[]
+  value?: Token
+  placeholder?: string
+  searchHint?: string
+  disabled?: boolean
+}> = ({ setValue, value, values, placeholder, disabled }) => {
+  const [showModal, setShowModal] = useState(false)
 
   const handleSelect = useCallback((item: Token) => {
-    if (item.status === "active") {
-      setValue(item);
-      setShowModal(false);
+    if (item.status === 'active') {
+      setValue(item)
+      setShowModal(false)
     }
-  }, []);
+  }, [])
 
-  if (values.length === 0) return <Placeholder placeholder={placeholder} />;
+  if (values.length === 0) return <Placeholder placeholder={placeholder} />
 
   return (
     <Popover open={showModal} onOpenChange={() => setShowModal(!showModal)}>
@@ -87,16 +76,16 @@ const TokenSelectWrapper: React.FC<{
         <TokenSelect setValue={handleSelect} values={values} />
       </PopoverContent>
     </Popover>
-  );
-};
+  )
+}
 
 const Placeholder = ({ placeholder }: { placeholder: string | undefined }) => {
   return (
     <span className="block text-xs md:text-base font-medium text-muted-3 flex-auto items-center">
       {placeholder}
     </span>
-  );
-};
+  )
+}
 
 const LockedAsset = ({ value }: { value: Token }) => {
   return (
@@ -119,7 +108,7 @@ const LockedAsset = ({ value }: { value: Token }) => {
         </span>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default TokenSelectWrapper;
+export default TokenSelectWrapper
diff --git a/apps/bridge/src/components/lux/teleport/swap/progress/MoveIcon.tsx b/apps/bridge/src/components/lux/teleport/swap/progress/MoveIcon.tsx
index bde1f5fb..18ff3607 100644
--- a/apps/bridge/src/components/lux/teleport/swap/progress/MoveIcon.tsx
+++ b/apps/bridge/src/components/lux/teleport/swap/progress/MoveIcon.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react'
 
 const MoveIcon: React.FC = () => {
   return (
@@ -197,7 +197,7 @@ const MoveIcon: React.FC = () => {
         ></animate>
       </circle>
     </svg>
-  );
-};
+  )
+}
 
-export default MoveIcon;
+export default MoveIcon
diff --git a/apps/bridge/src/components/lux/teleport/swap/progress/PayoutProcessor.tsx b/apps/bridge/src/components/lux/teleport/swap/progress/PayoutProcessor.tsx
index 85a2022c..eea2e79b 100644
--- a/apps/bridge/src/components/lux/teleport/swap/progress/PayoutProcessor.tsx
+++ b/apps/bridge/src/components/lux/teleport/swap/progress/PayoutProcessor.tsx
@@ -1,46 +1,45 @@
-import React from "react";
-import Web3 from "web3";
+import React from 'react'
+import Web3 from 'web3'
 
 import { Tooltip, TooltipContent, TooltipTrigger } from '@hanzo/ui/primitives'
 
-
-import useNotification from "@/hooks/useNotification";
+import useNotification from '@/hooks/useNotification'
 import {
   swapStatusAtom,
   mpcSignatureAtom,
   bridgeMintTransactionAtom,
   userTransferTransactionAtom,
-} from "@/store/teleport";
-import { Contract } from "ethers";
-import { CONTRACTS } from "@/components/lux/teleport/constants/settings";
-import { ethers } from "ethers";
-import teleporterABI from "@/components/lux/teleport/constants/abi/bridge.json";
+} from '@/store/teleport'
+import { Contract } from 'ethers'
+import { CONTRACTS } from '@/components/lux/teleport/constants/settings'
+import { ethers } from 'ethers'
+import teleporterABI from '@/components/lux/teleport/constants/abi/bridge.json'
 //hooks
-import { useAtom } from "jotai";
-import { useEthersSigner } from "@/lib/ethersToViem/ethers";
+import { useAtom } from 'jotai'
+import { useEthersSigner } from '@/lib/ethersToViem/ethers'
 
-import axios from "axios";
-import useWallet from "@/hooks/useWallet";
-import SwapItems from "./SwapItems";
-import shortenAddress from "@/components/utils/ShortenAddress";
-import SpinIcon from "@/components/icons/spinIcon";
-import Gauge from "@/components/gauge";
-import type { Network, Token } from "@/types/teleport";
-import { ArrowRight } from "lucide-react";
-import { formatUnits, parseEther } from "viem";
-import { useChainId, useSwitchChain } from "wagmi";
-import { localeNumber } from "@/lib/utils";
-import { parseUnits } from "ethers/lib/utils";
+import axios from 'axios'
+import useWallet from '@/hooks/useWallet'
+import SwapItems from './SwapItems'
+import shortenAddress from '@/components/utils/ShortenAddress'
+import SpinIcon from '@/components/icons/spinIcon'
+import Gauge from '@/components/gauge'
+import type { Network, Token } from '@/types/teleport'
+import { ArrowRight } from 'lucide-react'
+import { formatUnits, parseEther } from 'viem'
+import { useChainId, useSwitchChain } from 'wagmi'
+import { localeNumber } from '@/lib/utils'
+import { parseUnits } from 'ethers/lib/utils'
 
 interface IProps {
-  className?: string;
-  sourceNetwork: Network;
-  sourceAsset: Token;
-  destinationNetwork: Network;
-  destinationAsset: Token;
-  destinationAddress: string;
-  sourceAmount: string;
-  swapId: string;
+  className?: string
+  sourceNetwork: Network
+  sourceAsset: Token
+  destinationNetwork: Network
+  destinationAsset: Token
+  destinationAddress: string
+  sourceAmount: string
+  swapId: string
 }
 
 const PayoutProcessor: React.FC<IProps> = ({
@@ -53,42 +52,42 @@ const PayoutProcessor: React.FC<IProps> = ({
   className,
   swapId,
 }) => {
-  const { showNotification } = useNotification();
+  const { showNotification } = useNotification()
   //state
-  const [isGettingPayout, setIsGettingPayout] = React.useState<boolean>(false);
+  const [isGettingPayout, setIsGettingPayout] = React.useState<boolean>(false)
   //atoms
-  const [, setBridgeMintTransactionHash] = useAtom(bridgeMintTransactionAtom);
-  const [userTransferTransaction] = useAtom(userTransferTransactionAtom);
-  const [swapStatus, setSwapStatus] = useAtom(swapStatusAtom);
-  const [mpcSignature] = useAtom(mpcSignatureAtom);
+  const [, setBridgeMintTransactionHash] = useAtom(bridgeMintTransactionAtom)
+  const [userTransferTransaction] = useAtom(userTransferTransactionAtom)
+  const [swapStatus, setSwapStatus] = useAtom(swapStatusAtom)
+  const [mpcSignature] = useAtom(mpcSignatureAtom)
   //hooks
-  const chainId = useChainId();
-  const signer = useEthersSigner();
-  const { switchChain } = useSwitchChain();
-  const { connectWallet } = useWallet();
+  const chainId = useChainId()
+  const signer = useEthersSigner()
+  const { switchChain } = useSwitchChain()
+  const { connectWallet } = useWallet()
 
   const isWithdrawal = React.useMemo(
-    () => (sourceAsset.name.startsWith("Lux") ? true : false),
+    () => (sourceAsset.name.startsWith('Lux') ? true : false),
     [sourceAsset]
-  );
+  )
 
   React.useEffect(() => {
     if (!signer) {
-      connectWallet("evm");
+      connectWallet('evm')
     } else {
       if (isWithdrawal) {
         if (chainId === destinationNetwork.chain_id) {
-          withdrawDestinationToken();
+          withdrawDestinationToken()
         } else {
           destinationNetwork.chain_id &&
             switchChain &&
-            switchChain({ chainId: destinationNetwork.chain_id });
+            switchChain({ chainId: destinationNetwork.chain_id })
         }
       } else {
-        payoutDestinationToken();
+        payoutDestinationToken()
       }
     }
-  }, [swapStatus, chainId, signer, isWithdrawal]);
+  }, [swapStatus, chainId, signer, isWithdrawal])
 
   const payoutDestinationToken = async () => {
     const mintData = {
@@ -101,13 +100,13 @@ const PayoutProcessor: React.FC<IProps> = ({
       fromTokenDecimals_: sourceAsset?.decimals,
       receiverAddress_: destinationAddress,
       signedTXInfo_: mpcSignature,
-      vault_: "true",
-    };
+      vault_: 'true',
+    }
 
-    console.log("data for bridge mint::", mintData);
+    console.log('data for bridge mint::', mintData)
 
     try {
-      setIsGettingPayout(true);
+      setIsGettingPayout(true)
       // string memory hashedTxId_,
       // address toTokenAddress_,
       // uint256 tokenAmount_,
@@ -115,25 +114,27 @@ const PayoutProcessor: React.FC<IProps> = ({
       // address receiverAddress_,
       // bytes memory signedTXInfo_,
       // string memory vault_
-      if (!destinationNetwork.chain_id) return;
+      if (!destinationNetwork.chain_id) return
 
       // Set up provider and wallet
       const provider = new ethers.providers.JsonRpcProvider(
         destinationNetwork.node
-      );
+      )
 
-      const feeData = await provider.getFeeData();
-      console.log(feeData);
+      const feeData = await provider.getFeeData()
+      console.log(feeData)
 
       // Replace with your private key (store it securely, not hardcoded in production)
-      const privateKey = process.env.NEXT_PUBLIC_LUX_SIGNER;
-      const wallet = new ethers.Wallet(privateKey!, provider);
+      const privateKey = process.env.NEXT_PUBLIC_LUX_SIGNER
+      const wallet = new ethers.Wallet(privateKey!, provider)
 
       const bridgeContract = new Contract(
-        CONTRACTS[destinationNetwork.chain_id  as keyof typeof CONTRACTS].teleporter,
+        CONTRACTS[
+          destinationNetwork.chain_id as keyof typeof CONTRACTS
+        ].teleporter,
         teleporterABI,
         wallet
-      );
+      )
 
       const _signer = await bridgeContract.previewBridgeStealth(
         mintData.hashedTxId_,
@@ -143,8 +144,8 @@ const PayoutProcessor: React.FC<IProps> = ({
         mintData.receiverAddress_,
         mintData.signedTXInfo_,
         mintData.vault_
-      );
-      console.log("::signer", _signer);
+      )
+      console.log('::signer', _signer)
 
       const _bridgePayoutTx = await bridgeContract.bridgeMintStealth(
         mintData.hashedTxId_,
@@ -159,50 +160,52 @@ const PayoutProcessor: React.FC<IProps> = ({
           maxPriorityFeePerGas: feeData.maxPriorityFeePerGas,
           gasLimit: 3000000,
         }
-      );
-      await _bridgePayoutTx.wait();
+      )
+      await _bridgePayoutTx.wait()
       /////////////////////// send 1 lux to users /////////////////////
       try {
         const luxSendTxData = {
           to: mintData.receiverAddress_,
-          value: parseEther("1"), // eth to wei
+          value: parseEther('1'), // eth to wei
           maxFeePerGas: feeData.maxFeePerGas,
           maxPriorityFeePerGas: feeData.maxPriorityFeePerGas,
           gasLimit: 3000000,
-        };
+        }
         //@ts-expect-error no check
-        const _txSendLux = await wallet.sendTransaction(luxSendTxData);
-        await _txSendLux.wait();
+        const _txSendLux = await wallet.sendTransaction(luxSendTxData)
+        await _txSendLux.wait()
         console.log(
           `::1lux is sent to ${mintData.receiverAddress_}`,
           _txSendLux.hash
-        );
+        )
       } catch (err) {
-        console.log("::issue in sening 1 lux");
+        console.log('::issue in sening 1 lux')
       }
       ///////////////////////////////////////////////////////////////////
-      setBridgeMintTransactionHash(_bridgePayoutTx.hash);
+      setBridgeMintTransactionHash(_bridgePayoutTx.hash)
       await axios.post(
         `${process.env.NEXT_PUBLIC_BACKEND_API}/swaps/payout/${swapId}`,
         {
           txHash: _bridgePayoutTx.hash,
           amount: sourceAmount,
-          from: CONTRACTS[Number(sourceNetwork?.chain_id) as keyof typeof CONTRACTS].teleporter,
+          from: CONTRACTS[
+            Number(sourceNetwork?.chain_id) as keyof typeof CONTRACTS
+          ].teleporter,
           to: destinationAddress,
         }
-      );
-      setSwapStatus("payout_success");
+      )
+      setSwapStatus('payout_success')
     } catch (err) {
-      console.log(err);
-      if (String(err).includes("user rejected transaction")) {
-        showNotification(`User rejected transaction`, "warn");
+      console.log(err)
+      if (String(err).includes('user rejected transaction')) {
+        showNotification(`User rejected transaction`, 'warn')
       } else {
-        showNotification(`Failed to run transaction`, "error");
+        showNotification(`Failed to run transaction`, 'error')
       }
     } finally {
-      setIsGettingPayout(false);
+      setIsGettingPayout(false)
     }
-  };
+  }
 
   const withdrawDestinationToken = async () => {
     const withdrawData = {
@@ -212,29 +215,31 @@ const PayoutProcessor: React.FC<IProps> = ({
       fromTokenDecimals_: sourceAsset?.decimals,
       receiverAddress_: destinationAddress,
       signedTXInfo_: mpcSignature,
-      vault_: "false",
-    };
+      vault_: 'false',
+    }
 
     // previewVaultWithdraw
 
-    console.log("::data for bridge withdraw:", withdrawData);
-    if (!destinationNetwork.chain_id) return;
+    console.log('::data for bridge withdraw:', withdrawData)
+    if (!destinationNetwork.chain_id) return
     try {
       const bridgeContract = new Contract(
-        CONTRACTS[destinationNetwork.chain_id as keyof typeof CONTRACTS].teleporter,
+        CONTRACTS[
+          destinationNetwork.chain_id as keyof typeof CONTRACTS
+        ].teleporter,
         teleporterABI,
         signer
-      );
+      )
 
       const previewVaultWithdraw = await bridgeContract.previewVaultWithdraw(
         withdrawData.toTokenAddress_
-      );
+      )
       console.log({
         balance: Number(
           formatUnits(previewVaultWithdraw, destinationAsset.decimals)
         ),
         todo: Number(sourceAmount),
-      });
+      })
 
       if (
         Number(formatUnits(previewVaultWithdraw, destinationAsset.decimals)) <
@@ -244,12 +249,12 @@ const PayoutProcessor: React.FC<IProps> = ({
           `Bridge doesnt have enough balance to withdraw. You can only withdraw ${Number(
             formatUnits(previewVaultWithdraw, destinationAsset.decimals)
           )}tokens now. Please wait for the withdrawal to be activated.`,
-          "error"
-        );
-        return;
+          'error'
+        )
+        return
       }
       // console.log("::canWithdraw", canWithdraw);
-      setIsGettingPayout(true);
+      setIsGettingPayout(true)
       // string memory hashedTxId_,
       // address toTokenAddress_,
       // uint256 tokenAmount_,
@@ -266,8 +271,8 @@ const PayoutProcessor: React.FC<IProps> = ({
         withdrawData.receiverAddress_,
         withdrawData.signedTXInfo_,
         withdrawData.vault_
-      );
-      console.log("::signer", _signer);
+      )
+      console.log('::signer', _signer)
 
       const _bridgePayoutTx = await bridgeContract.bridgeWithdrawStealth(
         withdrawData.hashedTxId_,
@@ -277,52 +282,54 @@ const PayoutProcessor: React.FC<IProps> = ({
         withdrawData.receiverAddress_,
         withdrawData.signedTXInfo_,
         withdrawData.vault_
-      );
-      await _bridgePayoutTx.wait();
-      setBridgeMintTransactionHash(_bridgePayoutTx.hash);
+      )
+      await _bridgePayoutTx.wait()
+      setBridgeMintTransactionHash(_bridgePayoutTx.hash)
       await axios.post(
         `${process.env.NEXT_PUBLIC_BACKEND_API}/swaps/payout/${swapId}`,
         {
           txHash: _bridgePayoutTx.hash,
           amount: sourceAmount,
-          from: CONTRACTS[Number(sourceNetwork?.chain_id) as keyof typeof CONTRACTS].teleporter,
+          from: CONTRACTS[
+            Number(sourceNetwork?.chain_id) as keyof typeof CONTRACTS
+          ].teleporter,
           to: destinationAddress,
         }
-      );
-      setSwapStatus("payout_success");
+      )
+      setSwapStatus('payout_success')
     } catch (err) {
-      console.log(err);
-      if (String(err).includes("user rejected transaction")) {
-        showNotification(`User rejected transaction`, "warn");
+      console.log(err)
+      if (String(err).includes('user rejected transaction')) {
+        showNotification(`User rejected transaction`, 'warn')
       } else {
-        showNotification(`Failed to run transaction`, "error");
+        showNotification(`Failed to run transaction`, 'error')
       }
     } finally {
-      setIsGettingPayout(false);
+      setIsGettingPayout(false)
     }
-  };
+  }
 
   const handlePayoutDestinationToken = () => {
     if (!signer) {
       showNotification(
         `No connected wallet. Please connect your wallet`,
-        "error"
-      );
-      connectWallet("evm");
+        'error'
+      )
+      connectWallet('evm')
     } else {
       if (isWithdrawal) {
         if (chainId === destinationNetwork.chain_id) {
-          withdrawDestinationToken();
+          withdrawDestinationToken()
         } else {
           destinationNetwork.chain_id &&
             switchChain &&
-            switchChain({ chainId: destinationNetwork.chain_id });
+            switchChain({ chainId: destinationNetwork.chain_id })
         }
       } else {
-        payoutDestinationToken();
+        payoutDestinationToken()
       }
     }
-  };
+  }
 
   return (
     <div className={`w-full flex flex-col ${className}`}>
@@ -344,7 +351,7 @@ const PayoutProcessor: React.FC<IProps> = ({
                 <Gauge value={60} size="medium" />
               </span>
               <div className="mt-2">
-                {isWithdrawal ? "Withdraw" : "Get"} Your{" "}
+                {isWithdrawal ? 'Withdraw' : 'Get'} Your{' '}
                 {destinationAsset.asset}
               </div>
             </div>
@@ -355,17 +362,17 @@ const PayoutProcessor: React.FC<IProps> = ({
                 </span>
                 <div className="flex flex-col items-center text-sm">
                   <span>
-                    {sourceAsset?.asset}{" "}
-                    {isWithdrawal ? "burnt" : "transferred"}
+                    {sourceAsset?.asset}{' '}
+                    {isWithdrawal ? 'burnt' : 'transferred'}
                   </span>
                   <div className="underline flex gap-2 items-center">
                     {shortenAddress(userTransferTransaction)}
                     <Tooltip>
                       <TooltipTrigger asChild>
                         <a
-                          target={"_blank"}
+                          target={'_blank'}
                           href={sourceNetwork?.transaction_explorer_template?.replace(
-                            "{0}",
+                            '{0}',
                             userTransferTransaction
                           )}
                           className="cursor-pointer"
@@ -415,7 +422,7 @@ const PayoutProcessor: React.FC<IProps> = ({
                 <ArrowRight />
               )}
               <span className="grow">
-                {isWithdrawal ? "Withdraw" : "Get"} Your{" "}
+                {isWithdrawal ? 'Withdraw' : 'Get'} Your{' '}
                 {destinationAsset?.asset}
               </span>
             </button>
@@ -423,7 +430,7 @@ const PayoutProcessor: React.FC<IProps> = ({
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default PayoutProcessor;
+export default PayoutProcessor
diff --git a/apps/bridge/src/components/lux/teleport/swap/progress/SwapItems.tsx b/apps/bridge/src/components/lux/teleport/swap/progress/SwapItems.tsx
index b2b43cad..8e95e846 100644
--- a/apps/bridge/src/components/lux/teleport/swap/progress/SwapItems.tsx
+++ b/apps/bridge/src/components/lux/teleport/swap/progress/SwapItems.tsx
@@ -1,32 +1,32 @@
-import React from "react";
-import Image from "next/image";
-import shortenAddress from "@/components/utils/ShortenAddress";
-import { useAtom } from "jotai";
-import { ethPriceAtom } from "@/store/teleport";
-import { truncateDecimals } from "@/components/utils/RoundDecimals";
-import type { Network, Token } from "@/types/teleport";
-import { useChainId } from "wagmi";
-import { useEthersSigner } from "@/lib/ethersToViem/ethers";
-import { networks as devNetworks } from "@/components/lux/teleport/constants/networks.sandbox";
-import { networks as mainNetworks } from "@/components/lux/teleport/constants/networks.mainnets";
-import { ethers } from "ethers";
+import React from 'react'
+import Image from 'next/image'
+import shortenAddress from '@/components/utils/ShortenAddress'
+import { useAtom } from 'jotai'
+import { ethPriceAtom } from '@/store/teleport'
+import { truncateDecimals } from '@/components/utils/RoundDecimals'
+import type { Network, Token } from '@/types/teleport'
+import { useChainId } from 'wagmi'
+import { useEthersSigner } from '@/lib/ethersToViem/ethers'
+import { networks as devNetworks } from '@/components/lux/teleport/constants/networks.sandbox'
+import { networks as mainNetworks } from '@/components/lux/teleport/constants/networks.mainnets'
+import { ethers } from 'ethers'
 // import { erc20ABI } from "wagmi";
-import { formatEther } from "ethers/lib/utils";
-import MoveIcon from "./MoveIcon";
-import { WalletIcon } from "lucide-react";
-import { erc20ABI } from "@wagmi/core";
-import useWallet from "@/hooks/useWallet";
-import useAsyncEffect from "use-async-effect";
+import { formatEther } from 'ethers/lib/utils'
+import MoveIcon from './MoveIcon'
+import { WalletIcon } from 'lucide-react'
+import { erc20ABI } from '@wagmi/core'
+import useWallet from '@/hooks/useWallet'
+import useAsyncEffect from 'use-async-effect'
 
-const networks = [...devNetworks, ...mainNetworks];
+const networks = [...devNetworks, ...mainNetworks]
 
 interface IProps {
-  sourceNetwork: Network;
-  sourceAsset: Token;
-  destinationNetwork: Network;
-  destinationAsset: Token;
-  destinationAddress: string;
-  sourceAmount: string;
+  sourceNetwork: Network
+  sourceAsset: Token
+  destinationNetwork: Network
+  destinationAsset: Token
+  destinationAddress: string
+  sourceAmount: string
 }
 
 const SwapItems: React.FC<IProps> = ({
@@ -37,22 +37,22 @@ const SwapItems: React.FC<IProps> = ({
   destinationAsset,
   sourceAmount,
 }) => {
-  const [ethPrice] = useAtom(ethPriceAtom);
+  const [ethPrice] = useAtom(ethPriceAtom)
   //token price
-  const tokenPrice = ethPrice;
+  const tokenPrice = ethPrice
 
-  const { connectWallet } = useWallet();
+  const { connectWallet } = useWallet()
 
-  const [sourceBalance, setSourceBalance] = React.useState<string>("0");
+  const [sourceBalance, setSourceBalance] = React.useState<string>('0')
   const [destinationBalance, setDestinationBalance] =
-    React.useState<string>("0");
+    React.useState<string>('0')
 
-  const [isFetching, setIsFetching] = React.useState<boolean>(true);
+  const [isFetching, setIsFetching] = React.useState<boolean>(true)
 
-  const chainId = useChainId();
-  const signer = useEthersSigner();
+  const chainId = useChainId()
+  const signer = useEthersSigner()
 
-  const _network = networks.find((n) => n.chain_id === chainId);
+  const _network = networks.find((n) => n.chain_id === chainId)
 
   const _renderWallet = () => {
     if (signer) {
@@ -70,7 +70,7 @@ const SwapItems: React.FC<IProps> = ({
               <span>{_network.display_name}</span>
             </div>
           ) : (
-            "Unsupported Chain"
+            'Unsupported Chain'
           )}
           <span className="break-all truncate text-sm">
             {`${signer._address.substr(0, 10)}...${signer._address.substr(
@@ -78,64 +78,64 @@ const SwapItems: React.FC<IProps> = ({
             )}`}
           </span>
         </div>
-      );
+      )
     } else {
       return (
         <div className="bg-level-1 font-normal p-3 rounded-lg flex justify-between items-center gap-1 border border-[#404040] w-full">
           <span>No Connected Wallet</span>
           <span
-            onClick={() => connectWallet("evm")}
+            onClick={() => connectWallet('evm')}
             className="text-xs text-[#c9cca1] cursor-pointer hover:opacity-45"
           >
             CONNECT
           </span>
         </div>
-      );
+      )
     }
-  };
+  }
 
   const getNetworkBalance = async (network: Network, asset: Token) => {
     try {
-      const provider = new ethers.providers.JsonRpcProvider(network.node);
-      const address = signer?._address;
+      const provider = new ethers.providers.JsonRpcProvider(network.node)
+      const address = signer?._address
 
-      if (!address) return "0";
+      if (!address) return '0'
 
       if (asset.is_native) {
-        const ethBal = await provider.getBalance(signer?._address!);
-        return formatEther(ethBal);
+        const ethBal = await provider.getBalance(signer?._address!)
+        return formatEther(ethBal)
       } else {
         // Get ERC-20 token balance
         const tokenContract = new ethers.Contract(
           asset.contract_address!,
           erc20ABI,
           provider
-        );
-        const tokenBal = await tokenContract.balanceOf(address);
-        const decimals = await tokenContract.decimals();
-        return ethers.utils.formatUnits(tokenBal, decimals);
+        )
+        const tokenBal = await tokenContract.balanceOf(address)
+        const decimals = await tokenContract.decimals()
+        return ethers.utils.formatUnits(tokenBal, decimals)
       }
     } catch (err) {
-      console.log(err);
-      return "0";
+      console.log(err)
+      return '0'
     }
-  };
+  }
 
   useAsyncEffect(async () => {
     try {
-      setIsFetching(true);
+      setIsFetching(true)
       const [_sourceBalance, _destinationBalance] = await Promise.all([
         getNetworkBalance(sourceNetwork, sourceAsset),
         getNetworkBalance(destinationNetwork, destinationAsset),
-      ]);
-      setSourceBalance(_sourceBalance);
-      setDestinationBalance(_destinationBalance);
+      ])
+      setSourceBalance(_sourceBalance)
+      setDestinationBalance(_destinationBalance)
     } catch (err) {
-      console.log(":: balance fetch err", err);
+      console.log(':: balance fetch err', err)
     } finally {
-      setIsFetching(false);
+      setIsFetching(false)
     }
-  }, [signer, chainId]);
+  }, [signer, chainId])
 
   return (
     <div className="flex flex-col gap-4">
@@ -155,7 +155,7 @@ const SwapItems: React.FC<IProps> = ({
                 <p className=" text-sm leading-5">
                   {sourceNetwork.display_name}
                 </p>
-                <p className="text-sm ">{"Network"}</p>
+                <p className="text-sm ">{'Network'}</p>
               </div>
             </div>
             <div className="flex flex-col text-[#85c285]">
@@ -177,7 +177,7 @@ const SwapItems: React.FC<IProps> = ({
               <>
                 <WalletIcon height={20} width={20} />
                 <div className="opacity-80">
-                  {truncateDecimals(Number(sourceBalance), 5)}{" "}
+                  {truncateDecimals(Number(sourceBalance), 5)}{' '}
                   {sourceAsset.asset}
                 </div>
               </>
@@ -205,7 +205,7 @@ const SwapItems: React.FC<IProps> = ({
             </div>
             <div className="flex flex-col text-[#85c285]">
               <p className=" text-sm">
-                {truncateDecimals(Number(sourceAmount) * 0.99, 6)}{" "}
+                {truncateDecimals(Number(sourceAmount) * 0.99, 6)}{' '}
                 {destinationAsset.asset}
               </p>
               <p className=" text-sm flex justify-end">
@@ -222,7 +222,7 @@ const SwapItems: React.FC<IProps> = ({
               <>
                 <WalletIcon height={20} width={20} />
                 <div className="opacity-80">
-                  {truncateDecimals(Number(destinationBalance), 5)}{" "}
+                  {truncateDecimals(Number(destinationBalance), 5)}{' '}
                   {destinationAsset.asset}
                 </div>
               </>
@@ -231,7 +231,7 @@ const SwapItems: React.FC<IProps> = ({
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default SwapItems;
+export default SwapItems
diff --git a/apps/bridge/src/components/lux/teleport/swap/progress/SwapSuccess.tsx b/apps/bridge/src/components/lux/teleport/swap/progress/SwapSuccess.tsx
index 74636122..141b777a 100644
--- a/apps/bridge/src/components/lux/teleport/swap/progress/SwapSuccess.tsx
+++ b/apps/bridge/src/components/lux/teleport/swap/progress/SwapSuccess.tsx
@@ -1,25 +1,24 @@
-import { useAtom } from "jotai";
+import { useAtom } from 'jotai'
 
 import { Tooltip, TooltipContent, TooltipTrigger } from '@hanzo/ui/primitives'
 
-import SuccessIcon from "../SuccessIcon";
-import { bridgeMintTransactionAtom } from "@/store/teleport";
-import SwapItems from "./SwapItems";
-import shortenAddress from "@/components/utils/ShortenAddress";
-import Gauge from "@/components/gauge";
-import type { Network, Token } from "@/types/teleport";
+import SuccessIcon from '../SuccessIcon'
+import { bridgeMintTransactionAtom } from '@/store/teleport'
+import SwapItems from './SwapItems'
+import shortenAddress from '@/components/utils/ShortenAddress'
+import Gauge from '@/components/gauge'
+import type { Network, Token } from '@/types/teleport'
 
 const SwapSuccess: React.FC<{
-  className?: string;
-  sourceNetwork: Network;
-  sourceAsset: Token;
-  destinationNetwork: Network;
-  destinationAsset: Token;
-  destinationAddress: string;
-  sourceAmount: string;
-  swapId: string;
-}
-> = ({
+  className?: string
+  sourceNetwork: Network
+  sourceAsset: Token
+  destinationNetwork: Network
+  destinationAsset: Token
+  destinationAddress: string
+  sourceAmount: string
+  swapId: string
+}> = ({
   sourceNetwork,
   sourceAsset,
   destinationNetwork,
@@ -32,7 +31,7 @@ const SwapSuccess: React.FC<{
   //atoms
   const [bridgeMintTransactionHash, setBridgeMintTransactionHash] = useAtom(
     bridgeMintTransactionAtom
-  );
+  )
   return (
     <div className={`w-full flex flex-col ${className}`}>
       <div className="space-y-5">
@@ -55,7 +54,7 @@ const SwapSuccess: React.FC<{
               <div className="!-mt-2">
                 <span className=" text-[#7e8350] font-bold text-lg">
                   {sourceAsset.asset} -&gt; {destinationAsset.asset}
-                </span>{" "}
+                </span>{' '}
                 Swap Success
               </div>
             </div>
@@ -81,9 +80,9 @@ const SwapSuccess: React.FC<{
                     <Tooltip>
                       <TooltipTrigger asChild>
                         <a
-                          target={"_blank"}
+                          target={'_blank'}
                           href={destinationNetwork.transaction_explorer_template.replace(
-                            "{0}",
+                            '{0}',
                             bridgeMintTransactionHash
                           )}
                           className="cursor-pointer"
@@ -118,7 +117,7 @@ const SwapSuccess: React.FC<{
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default SwapSuccess;
+export default SwapSuccess
diff --git a/apps/bridge/src/components/lux/teleport/swap/progress/TeleportProcessor.tsx b/apps/bridge/src/components/lux/teleport/swap/progress/TeleportProcessor.tsx
index e050ad8a..90802d06 100644
--- a/apps/bridge/src/components/lux/teleport/swap/progress/TeleportProcessor.tsx
+++ b/apps/bridge/src/components/lux/teleport/swap/progress/TeleportProcessor.tsx
@@ -1,9 +1,9 @@
-import React from "react";
-import toast from "react-hot-toast";
-import Web3 from "web3";
-import { useSwitchChain, useChainId } from "wagmi";
-import { useAtom } from "jotai";
-import axios from "axios";
+import React from 'react'
+import toast from 'react-hot-toast'
+import Web3 from 'web3'
+import { useSwitchChain, useChainId } from 'wagmi'
+import { useAtom } from 'jotai'
+import axios from 'axios'
 
 import { Tooltip, TooltipContent, TooltipTrigger } from '@hanzo/ui/primitives'
 
@@ -11,28 +11,28 @@ import {
   swapStatusAtom,
   userTransferTransactionAtom,
   mpcSignatureAtom,
-} from "@/store/teleport";
-import { CONTRACTS } from "@/components/lux/teleport/constants/settings";
-import useNotification from "@/hooks/useNotification";
+} from '@/store/teleport'
+import { CONTRACTS } from '@/components/lux/teleport/constants/settings'
+import useNotification from '@/hooks/useNotification'
 
 //hooks
-import { useEthersSigner } from "@/lib/ethersToViem/ethers";
+import { useEthersSigner } from '@/lib/ethersToViem/ethers'
 
-import useWallet from "@/hooks/useWallet";
-import SwapItems from "./SwapItems";
-import shortenAddress from "@/components/utils/ShortenAddress";
-import Gauge from "@/components/gauge";
-import type { Network, Token } from "@/types/teleport";
+import useWallet from '@/hooks/useWallet'
+import SwapItems from './SwapItems'
+import shortenAddress from '@/components/utils/ShortenAddress'
+import Gauge from '@/components/gauge'
+import type { Network, Token } from '@/types/teleport'
 
 interface IProps {
-  className?: string;
-  sourceNetwork: Network;
-  sourceAsset: Token;
-  destinationNetwork: Network;
-  destinationAsset: Token;
-  destinationAddress: string;
-  sourceAmount: string;
-  swapId: string;
+  className?: string
+  sourceNetwork: Network
+  sourceAsset: Token
+  destinationNetwork: Network
+  destinationAsset: Token
+  destinationAddress: string
+  sourceAmount: string
+  swapId: string
 }
 
 const TeleportProcessor: React.FC<IProps> = ({
@@ -46,51 +46,51 @@ const TeleportProcessor: React.FC<IProps> = ({
   swapId,
 }) => {
   //state
-  const [isMpcSigning, setIsMpcSigning] = React.useState<boolean>(false);
+  const [isMpcSigning, setIsMpcSigning] = React.useState<boolean>(false)
   //atoms
-  const [userTransferTransaction] = useAtom(userTransferTransactionAtom);
-  const [swapStatus, setSwapStatus] = useAtom(swapStatusAtom);
-  const [, setMpcSignature] = useAtom(mpcSignatureAtom);
+  const [userTransferTransaction] = useAtom(userTransferTransactionAtom)
+  const [swapStatus, setSwapStatus] = useAtom(swapStatusAtom)
+  const [, setMpcSignature] = useAtom(mpcSignatureAtom)
   //hooks
-  const signer = useEthersSigner();
-  const chainId = useChainId();
-  const { switchChain } = useSwitchChain();
-  const { connectWallet } = useWallet();
+  const signer = useEthersSigner()
+  const chainId = useChainId()
+  const { switchChain } = useSwitchChain()
+  const { connectWallet } = useWallet()
 
-  const { showNotification } = useNotification();
+  const { showNotification } = useNotification()
 
   const isWithdrawal = React.useMemo(
-    () => (sourceAsset.name.startsWith("Lux") ? true : false),
+    () => (sourceAsset.name.startsWith('Lux') ? true : false),
     [sourceAsset]
-  );
+  )
 
   React.useEffect(() => {
     if (!signer) {
-      connectWallet("evm");
+      connectWallet('evm')
     } else {
       if (chainId === sourceNetwork?.chain_id) {
-        getMpcSignature();
+        getMpcSignature()
       } else {
         sourceNetwork.chain_id &&
           switchChain &&
-          switchChain({ chainId: sourceNetwork.chain_id });
+          switchChain({ chainId: sourceNetwork.chain_id })
       }
     }
-  }, [swapStatus, chainId, signer]);
+  }, [swapStatus, chainId, signer])
 
   const getMpcSignature = async () => {
     try {
-      setIsMpcSigning(true);
+      setIsMpcSigning(true)
       const msgSignature = await signer?.signMessage(
-        "Sign to prove you are initiator of transaction."
-      );
+        'Sign to prove you are initiator of transaction.'
+      )
       // const toNetworkId = Web3.utils.keccak256(
       //   String(destinationNetwork?.chain_id)
       // );
-      const toNetworkId = destinationNetwork?.chain_id;
+      const toNetworkId = destinationNetwork?.chain_id
       const receiverAddressHash = Web3.utils.keccak256(
         String(destinationAddress)
-      ); //Web3.utils.keccak256(evmToAddress.slice(2));
+      ) //Web3.utils.keccak256(evmToAddress.slice(2));
 
       const signData = {
         txId: userTransferTransaction,
@@ -99,20 +99,20 @@ const TeleportProcessor: React.FC<IProps> = ({
         toTokenAddress: destinationAsset?.contract_address,
         msgSignature: msgSignature,
         receiverAddressHash: receiverAddressHash,
-      };
+      }
 
       const response = await fetch(
         `${process.env.NEXT_PUBLIC_BACKEND_API}/swaps/getsig`,
         {
-          method: "POST", // Specify the method (GET is default, so it's optional here)
+          method: 'POST', // Specify the method (GET is default, so it's optional here)
           headers: {
-            "Content-Type": "application/json",
+            'Content-Type': 'application/json',
           },
           body: JSON.stringify(signData),
         }
-      );
-      const res = await response.json();
-      console.log("data from mpc oracle network:::", res);
+      )
+      const res = await response.json()
+      console.log('data from mpc oracle network:::', res)
       if (res.status) {
         await axios.post(
           `${process.env.NEXT_PUBLIC_BACKEND_API}/swaps/mpcsign/${swapId}`,
@@ -120,46 +120,48 @@ const TeleportProcessor: React.FC<IProps> = ({
             txHash: res.data.signature,
             amount: sourceAmount,
             from: signer?._address,
-            to: CONTRACTS[Number(sourceNetwork?.chain_id) as keyof typeof CONTRACTS].teleporter,
+            to: CONTRACTS[
+              Number(sourceNetwork?.chain_id) as keyof typeof CONTRACTS
+            ].teleporter,
           }
-        );
-        setMpcSignature(res.data.signature);
-        setSwapStatus("user_payout_pending");
+        )
+        setMpcSignature(res.data.signature)
+        setSwapStatus('user_payout_pending')
       } else {
-        const { msg } = res;
-        if (String(msg).includes("InvalidSenderError")) {
+        const { msg } = res
+        if (String(msg).includes('InvalidSenderError')) {
           showNotification(
             "Invalid token sender. Try again using correct sender's account",
-            "warn"
-          );
+            'warn'
+          )
         } else {
           showNotification(
-            "Failed to get signature from MPC oracle network, Please try again",
-            "error"
-          );
+            'Failed to get signature from MPC oracle network, Please try again',
+            'error'
+          )
         }
       }
     } catch (err) {
-      console.log("mpc sign request failed:::", err);
+      console.log('mpc sign request failed:::', err)
     } finally {
-      setIsMpcSigning(false);
+      setIsMpcSigning(false)
     }
-  };
+  }
   const handleGetMpcSignature = () => {
     if (!signer) {
       showNotification(
-        "No connected wallet. Please connect your wallet",
-        "warn"
-      );
-      connectWallet("evm");
+        'No connected wallet. Please connect your wallet',
+        'warn'
+      )
+      connectWallet('evm')
     } else if (chainId !== sourceNetwork.chain_id) {
       sourceNetwork.chain_id &&
         switchChain &&
-        switchChain({ chainId: sourceNetwork.chain_id });
+        switchChain({ chainId: sourceNetwork.chain_id })
     } else {
-      getMpcSignature();
+      getMpcSignature()
     }
-  };
+  }
 
   return (
     <div className={`w-full flex flex-col ${className}`}>
@@ -192,17 +194,17 @@ const TeleportProcessor: React.FC<IProps> = ({
                 </span>
                 <div className="flex flex-col items-center text-sm">
                   <span>
-                    {sourceAsset?.asset}{" "}
-                    {isWithdrawal ? "Burned" : "Transferred"}
+                    {sourceAsset?.asset}{' '}
+                    {isWithdrawal ? 'Burned' : 'Transferred'}
                   </span>
                   <div className="underline flex gap-2 items-center">
                     {shortenAddress(userTransferTransaction)}
                     <Tooltip>
                       <TooltipTrigger asChild>
                         <a
-                          target={"_blank"}
+                          target={'_blank'}
                           href={sourceNetwork?.transaction_explorer_template?.replace(
-                            "{0}",
+                            '{0}',
                             userTransferTransaction
                           )}
                           className="cursor-pointer"
@@ -271,7 +273,7 @@ const TeleportProcessor: React.FC<IProps> = ({
                                             <path d="M48 48L68 69" stroke="white" strokeWidth="3.15789" strokeLinecap="round" /> */}
                   </svg>
                   <div className="flex items-center gap-3 text-sm">
-                    <span>Signing from MPC Oracle</span>{" "}
+                    <span>Signing from MPC Oracle</span>{' '}
                     <a
                       onClick={handleGetMpcSignature}
                       className="underline font-bold cursor-pointer hover:font-extrabold text-[#77aa63]"
@@ -286,7 +288,7 @@ const TeleportProcessor: React.FC<IProps> = ({
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default TeleportProcessor;
+export default TeleportProcessor
diff --git a/apps/bridge/src/components/lux/teleport/swap/progress/TokenDepositor.tsx b/apps/bridge/src/components/lux/teleport/swap/progress/TokenDepositor.tsx
index aefeeab4..c2c753d8 100644
--- a/apps/bridge/src/components/lux/teleport/swap/progress/TokenDepositor.tsx
+++ b/apps/bridge/src/components/lux/teleport/swap/progress/TokenDepositor.tsx
@@ -1,34 +1,34 @@
-import React from "react";
-import { swapStatusAtom, userTransferTransactionAtom } from "@/store/teleport";
-import { ArrowRight, Router } from "lucide-react";
-import { Contract } from "ethers";
-import { CONTRACTS } from "@/components/lux/teleport/constants/settings";
+import React from 'react'
+import { swapStatusAtom, userTransferTransactionAtom } from '@/store/teleport'
+import { ArrowRight, Router } from 'lucide-react'
+import { Contract } from 'ethers'
+import { CONTRACTS } from '@/components/lux/teleport/constants/settings'
 
-import teleporterABI from "@/components/lux/teleport/constants/abi/bridge.json";
-import erc20ABI from "@/components/lux/teleport/constants/abi/erc20.json";
+import teleporterABI from '@/components/lux/teleport/constants/abi/bridge.json'
+import erc20ABI from '@/components/lux/teleport/constants/abi/erc20.json'
 //hooks
-import { useChainId, useSwitchChain } from "wagmi";
-import { useAtom } from "jotai";
-import { useEthersSigner } from "@/lib/ethersToViem/ethers";
-import { parseUnits } from "ethers/lib/utils";
+import { useChainId, useSwitchChain } from 'wagmi'
+import { useAtom } from 'jotai'
+import { useEthersSigner } from '@/lib/ethersToViem/ethers'
+import { parseUnits } from 'ethers/lib/utils'
 
-import axios from "axios";
-import useWallet from "@/hooks/useWallet";
-import SwapItems from "./SwapItems";
-import SpinIcon from "@/components/icons/spinIcon";
-import type { Network, Token } from "@/types/teleport";
-import useNotification from "@/hooks/useNotification";
-import { localeNumber } from "@/lib/utils";
+import axios from 'axios'
+import useWallet from '@/hooks/useWallet'
+import SwapItems from './SwapItems'
+import SpinIcon from '@/components/icons/spinIcon'
+import type { Network, Token } from '@/types/teleport'
+import useNotification from '@/hooks/useNotification'
+import { localeNumber } from '@/lib/utils'
 
 interface IProps {
-  className?: string;
-  sourceNetwork: Network;
-  sourceAsset: Token;
-  destinationNetwork: Network;
-  destinationAsset: Token;
-  destinationAddress: string;
-  sourceAmount: string;
-  swapId: string;
+  className?: string
+  sourceNetwork: Network
+  sourceAsset: Token
+  destinationNetwork: Network
+  destinationAsset: Token
+  destinationAddress: string
+  sourceAmount: string
+  swapId: string
 }
 
 const UserTokenDepositor: React.FC<IProps> = ({
@@ -41,108 +41,109 @@ const UserTokenDepositor: React.FC<IProps> = ({
   className,
   swapId,
 }) => {
-  const { showNotification } = useNotification();
+  const { showNotification } = useNotification()
   //state
   const [isTokenTransferring, setIsTokenTransferring] =
-    React.useState<boolean>(false);
-  const [userDepositNotice, setUserDepositNotice] = React.useState<string>("");
+    React.useState<boolean>(false)
+  const [userDepositNotice, setUserDepositNotice] = React.useState<string>('')
   //atoms
-  const [, setSwapStatus] = useAtom(swapStatusAtom);
-  const [, setUserTransferTransaction] = useAtom(userTransferTransactionAtom);
+  const [, setSwapStatus] = useAtom(swapStatusAtom)
+  const [, setUserTransferTransaction] = useAtom(userTransferTransactionAtom)
   //hooks
-  const signer = useEthersSigner();
-  const { switchChain } = useSwitchChain();
-  const { connectWallet } = useWallet();
+  const signer = useEthersSigner()
+  const { switchChain } = useSwitchChain()
+  const { connectWallet } = useWallet()
 
   const isWithdrawal = React.useMemo(
-    () => (sourceAsset.name.startsWith("Lux") ? true : false),
+    () => (sourceAsset.name.startsWith('Lux') ? true : false),
     [sourceAsset]
-  );
+  )
 
   //chain id
-  const chainId = useChainId();
+  const chainId = useChainId()
 
   React.useEffect(() => {
     if (!signer) {
-      connectWallet("evm");
+      connectWallet('evm')
     } else {
       if (chainId === sourceNetwork?.chain_id) {
-        isWithdrawal ? burnToken() : transferToken();
+        isWithdrawal ? burnToken() : transferToken()
       } else {
         sourceNetwork.chain_id &&
           switchChain &&
-          switchChain({ chainId: sourceNetwork.chain_id });
+          switchChain({ chainId: sourceNetwork.chain_id })
       }
     }
-  }, [chainId, signer, isWithdrawal]);
+  }, [chainId, signer, isWithdrawal])
 
   const transferToken = async () => {
     try {
-      setIsTokenTransferring(true);
-      console.log(sourceAmount, sourceAsset);
+      setIsTokenTransferring(true)
+      console.log(sourceAmount, sourceAsset)
       const _amount = parseUnits(
         localeNumber(sourceAmount),
         sourceAsset.decimals
-      );
+      )
       if (sourceAsset.is_native) {
-        const _balance = await signer?.getBalance();
-        console.log("::balance checking: ", {
+        const _balance = await signer?.getBalance()
+        console.log('::balance checking: ', {
           balance: Number(_balance) ?? 0,
           required: Number(_amount),
           gap: Number(_balance) ?? 0 - Number(_amount),
-        });
+        })
 
         if (Number(_balance) < Number(_amount)) {
-          showNotification(`Insufficient ${sourceAsset.asset} amount`, "warn");
-          return;
+          showNotification(`Insufficient ${sourceAsset.asset} amount`, 'warn')
+          return
         }
       } else {
         const erc20Contract = new Contract(
           sourceAsset?.contract_address as string,
           erc20ABI,
           signer
-        );
+        )
         // approve
-        setUserDepositNotice(`Approving ${sourceAsset.asset}...`);
+        setUserDepositNotice(`Approving ${sourceAsset.asset}...`)
         const _balance = await erc20Contract.balanceOf(
           signer?._address as string
-        );
+        )
 
-        console.log(_amount);
+        console.log(_amount)
 
-        console.log("::balance checking: ", {
+        console.log('::balance checking: ', {
           balance: Number(_balance),
           required: Number(_amount),
           gap: Number(_balance) - Number(_amount),
-        });
+        })
 
         if (Number(_balance) < Number(_amount)) {
-          showNotification(`Insufficient ${sourceAsset.asset} amount`, "warn");
-          return;
+          showNotification(`Insufficient ${sourceAsset.asset} amount`, 'warn')
+          return
         }
 
-        if (!sourceNetwork.chain_id) return;
+        if (!sourceNetwork.chain_id) return
         // if allowance is less than amount, approve
         const _allowance = await erc20Contract.allowance(
           signer?._address as string,
           CONTRACTS[sourceNetwork.chain_id as keyof typeof CONTRACTS].teleporter
-        );
+        )
         if (_allowance < _amount) {
           const _approveTx = await erc20Contract.approve(
-            CONTRACTS[sourceNetwork.chain_id as keyof typeof CONTRACTS].teleporter,
+            CONTRACTS[sourceNetwork.chain_id as keyof typeof CONTRACTS]
+              .teleporter,
             _amount
-          );
-          await _approveTx.wait();
+          )
+          await _approveTx.wait()
         }
       }
 
-      if (!sourceNetwork.chain_id) return;
-      setUserDepositNotice(`Transfer ${sourceAsset.asset}...`);
+      if (!sourceNetwork.chain_id) return
+      setUserDepositNotice(`Transfer ${sourceAsset.asset}...`)
       const bridgeContract = new Contract(
-        CONTRACTS[sourceNetwork.chain_id  as keyof typeof CONTRACTS].teleporter,
+        CONTRACTS[sourceNetwork.chain_id as keyof typeof CONTRACTS].teleporter,
         teleporterABI,
         signer
-      );
+      )
 
       const _bridgeTransferTx = await bridgeContract.vaultDeposit(
         _amount,
@@ -150,108 +151,108 @@ const UserTokenDepositor: React.FC<IProps> = ({
         {
           value: sourceAsset.is_native ? _amount : 0,
         }
-      );
-      await _bridgeTransferTx.wait();
+      )
+      await _bridgeTransferTx.wait()
       await axios.post(
         `${process.env.NEXT_PUBLIC_BACKEND_API}/swaps/transfer/${swapId}`,
         {
           txHash: _bridgeTransferTx.hash,
           amount: sourceAmount,
           from: signer?._address,
-          to: CONTRACTS[sourceNetwork.chain_id  as keyof typeof CONTRACTS].teleporter,
+          to: CONTRACTS[sourceNetwork.chain_id as keyof typeof CONTRACTS]
+            .teleporter,
         }
-      );
-      setUserTransferTransaction(_bridgeTransferTx.hash);
-      setSwapStatus("teleport_processing_pending");
+      )
+      setUserTransferTransaction(_bridgeTransferTx.hash)
+      setSwapStatus('teleport_processing_pending')
     } catch (err) {
-      console.log(err);
-      if (String(err).includes("user rejected transaction")) {
-        showNotification(`User rejected transaction`, "warn");
+      console.log(err)
+      if (String(err).includes('user rejected transaction')) {
+        showNotification(`User rejected transaction`, 'warn')
       } else {
-        showNotification(`Failed to run transaction`, "error");
+        showNotification(`Failed to run transaction`, 'error')
       }
     } finally {
-      setIsTokenTransferring(false);
+      setIsTokenTransferring(false)
     }
-  };
+  }
 
   const burnToken = async () => {
     try {
-      setIsTokenTransferring(true);
-      const _amount = parseUnits(String(sourceAmount), sourceAsset.decimals);
+      setIsTokenTransferring(true)
+      const _amount = parseUnits(String(sourceAmount), sourceAsset.decimals)
 
       const erc20Contract = new Contract(
         sourceAsset?.contract_address as string,
         erc20ABI,
         signer
-      );
-      setUserDepositNotice(`Checking token balance...`);
-      const _balance = await erc20Contract.balanceOf(
-        signer?._address as string
-      );
+      )
+      setUserDepositNotice(`Checking token balance...`)
+      const _balance = await erc20Contract.balanceOf(signer?._address as string)
       if (_balance < _amount) {
-        showNotification(`Insufficient ${sourceAsset.asset} amount`, "warn");
-        return;
+        showNotification(`Insufficient ${sourceAsset.asset} amount`, 'warn')
+        return
       }
 
-      if (!sourceNetwork.chain_id) return;
-      setUserDepositNotice(`Burning ${sourceAsset.asset}...`);
+      if (!sourceNetwork.chain_id) return
+      setUserDepositNotice(`Burning ${sourceAsset.asset}...`)
 
       const bridgeContract = new Contract(
-        CONTRACTS[sourceNetwork.chain_id  as keyof typeof CONTRACTS].teleporter,
+        CONTRACTS[sourceNetwork.chain_id as keyof typeof CONTRACTS].teleporter,
         teleporterABI,
         signer
-      );
+      )
 
       console.log({
         _amount,
         _asset: sourceAsset.contract_address,
-      });
+      })
       const _bridgeTransferTx = await bridgeContract.bridgeBurn(
         _amount,
         sourceAsset.contract_address
-      );
-      await _bridgeTransferTx.wait();
+      )
+      await _bridgeTransferTx.wait()
       await axios.post(
         `${process.env.NEXT_PUBLIC_BACKEND_API}/swaps/transfer/${swapId}`,
         {
           txHash: _bridgeTransferTx.hash,
           amount: sourceAmount,
           from: signer?._address,
-          to: CONTRACTS[sourceNetwork.chain_id  as keyof typeof CONTRACTS].teleporter,
+          to: CONTRACTS[sourceNetwork.chain_id as keyof typeof CONTRACTS]
+            .teleporter,
         }
-      );
-      setUserTransferTransaction(_bridgeTransferTx.hash);
-      setSwapStatus("teleport_processing_pending");
+      )
+      setUserTransferTransaction(_bridgeTransferTx.hash)
+      setSwapStatus('teleport_processing_pending')
     } catch (err) {
-      console.log(err);
-      if (String(err).includes("user rejected transaction")) {
-        showNotification("User rejected transaction", "error");
+      console.log(err)
+      if (String(err).includes('user rejected transaction')) {
+        showNotification('User rejected transaction', 'error')
       } else {
-        showNotification("Failed to run transaction", "error");
+        showNotification('Failed to run transaction', 'error')
       }
     } finally {
-      setIsTokenTransferring(false);
+      setIsTokenTransferring(false)
     }
-  };
+  }
   const handleTokenTransfer = async () => {
     if (!signer) {
       showNotification(
-        "No connected wallet. Please connect your wallet",
-        "error"
-      );
-      connectWallet("evm");
+        'No connected wallet. Please connect your wallet',
+        'error'
+      )
+      connectWallet('evm')
     } else if (chainId !== sourceNetwork.chain_id) {
       sourceNetwork.chain_id &&
         switchChain &&
-        switchChain({ chainId: sourceNetwork.chain_id });
+        switchChain({ chainId: sourceNetwork.chain_id })
     } else {
-      isWithdrawal ? burnToken() : transferToken();
+      isWithdrawal ? burnToken() : transferToken()
     }
-  };
+  }
 
   return (
-    <div className={`w-full flex flex-col ${className}`}>
+    <div className={`w-full flex flex-col ${className} max-w-lg`}>
       <div className="space-y-5">
         <div className="w-full flex flex-col space-y-5">
           <SwapItems
@@ -277,13 +278,13 @@ const UserTokenDepositor: React.FC<IProps> = ({
             <span className="grow">{userDepositNotice}</span>
           ) : (
             <span className="grow">
-              {isWithdrawal ? "Burn" : "Transfer"} {sourceAsset.asset}
+              {isWithdrawal ? 'Burn' : 'Transfer'} {sourceAsset.asset}
             </span>
           )}
         </button>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default UserTokenDepositor;
+export default UserTokenDepositor
diff --git a/apps/bridge/src/components/lux/teleport/swap/to/NetworkFormField.tsx b/apps/bridge/src/components/lux/teleport/swap/to/NetworkFormField.tsx
index 212b5a49..6c83df0b 100644
--- a/apps/bridge/src/components/lux/teleport/swap/to/NetworkFormField.tsx
+++ b/apps/bridge/src/components/lux/teleport/swap/to/NetworkFormField.tsx
@@ -1,22 +1,22 @@
-"use client";
-import React from "react";
-import AmountField from "../AmountField";
-import NetworkSelectWrapper from "./NetworkSelectWrapper";
-import TokenSelectWrapper from "./TokenSelectWrapper";
+'use client'
+import React from 'react'
+import AmountField from '../AmountField'
+import NetworkSelectWrapper from './NetworkSelectWrapper'
+import TokenSelectWrapper from './TokenSelectWrapper'
 
-import type { Network, Token } from "@/types/teleport";
-import { useAtom } from "jotai";
-import { sourceAmountAtom } from "@/store/teleport";
-import { truncateDecimals } from "@/components/utils/RoundDecimals";
+import type { Network, Token } from '@/types/teleport'
+import { useAtom } from 'jotai'
+import { sourceAmountAtom } from '@/store/teleport'
+import { truncateDecimals } from '@/components/utils/RoundDecimals'
 
 interface IProps {
-  networks: Network[];
-  network?: Network;
-  asset?: Token;
-  sourceAsset?: Token;
-  setNetwork: (network: Network) => void;
-  setAsset: (asset: Token) => void;
-  disabled: boolean;
+  networks: Network[]
+  network?: Network
+  asset?: Token
+  sourceAsset?: Token
+  setNetwork: (network: Network) => void
+  setAsset: (asset: Token) => void
+  disabled: boolean
 }
 
 const NetworkFormField: React.FC<IProps> = ({
@@ -28,11 +28,11 @@ const NetworkFormField: React.FC<IProps> = ({
   setAsset,
   disabled,
 }) => {
-  const [amount] = useAtom(sourceAmountAtom);
+  const [amount] = useAtom(sourceAmountAtom)
 
   return (
     <div className={`p-3`}>
-      <label htmlFor={"name"} className="block font-semibold text-xs">
+      <label htmlFor={'name'} className="block font-semibold text-xs">
         To
       </label>
       <div className="border border-[#404040] bg-level-1 rounded-lg mt-1.5 pb-2">
@@ -40,11 +40,11 @@ const NetworkFormField: React.FC<IProps> = ({
           <div className="w-full">
             <NetworkSelectWrapper
               disabled={disabled}
-              placeholder={"Destination"}
+              placeholder={'Destination'}
               setNetwork={setNetwork}
               network={network}
               networks={networks}
-              searchHint={"searchHint"}
+              searchHint={'searchHint'}
               className="rounded-b-none border-t-0 border-x-0"
             />
           </div>
@@ -65,7 +65,7 @@ const NetworkFormField: React.FC<IProps> = ({
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default NetworkFormField;
+export default NetworkFormField
diff --git a/apps/bridge/src/components/lux/teleport/swap/to/NetworkSelect.tsx b/apps/bridge/src/components/lux/teleport/swap/to/NetworkSelect.tsx
index a7d68f2f..deb4c955 100644
--- a/apps/bridge/src/components/lux/teleport/swap/to/NetworkSelect.tsx
+++ b/apps/bridge/src/components/lux/teleport/swap/to/NetworkSelect.tsx
@@ -22,18 +22,14 @@ const CommandSelect: React.FC<{
   networks: Network[]
   network?: Network
   setNetwork: (value: Network) => void
-}
-> = ({
-  networks,
-  network,
-  setNetwork,
-  show,
-  setShow,
-  searchHint,
-}) => {
+}> = ({ networks, network, setNetwork, show, setShow, searchHint }) => {
   const { isDesktop } = useWindowDimensions()
   return (
-    <Modal height='full' show={show} setShow={setShow as Dispatch<SetStateAction<boolean>>}>
+    <Modal
+      height="full"
+      show={show}
+      setShow={setShow as Dispatch<SetStateAction<boolean>>}
+    >
       {show ? (
         <CommandWrapper>
           <CommandInput autoFocus={isDesktop} placeholder={searchHint} />
@@ -57,8 +53,8 @@ const CommandSelect: React.FC<{
               ))}
             </CommandList>
           ) : (
-            <div className='flex justify-center h-full items-center'>
-              <SpinIcon className='animate-spin h-5 w-5' />
+            <div className="flex justify-center h-full items-center">
+              <SpinIcon className="animate-spin h-5 w-5" />
             </div>
           )}
         </CommandWrapper>
diff --git a/apps/bridge/src/components/lux/teleport/swap/to/NetworkSelectWrapper.tsx b/apps/bridge/src/components/lux/teleport/swap/to/NetworkSelectWrapper.tsx
index 48e97a7a..960a9427 100644
--- a/apps/bridge/src/components/lux/teleport/swap/to/NetworkSelectWrapper.tsx
+++ b/apps/bridge/src/components/lux/teleport/swap/to/NetworkSelectWrapper.tsx
@@ -2,7 +2,7 @@
 import { useCallback, useState } from 'react'
 import Image from 'next/image'
 import NetworkSelect from './NetworkSelect'
-import type { Network } from '@/types/teleport';
+import type { Network } from '@/types/teleport'
 import { ChevronDown } from 'lucide-react'
 
 export default function NetworkSelectWrapper<T>({
@@ -12,77 +12,77 @@ export default function NetworkSelectWrapper<T>({
   disabled,
   placeholder,
   searchHint,
-  className
+  className,
 }: {
-  network?: Network;
-  networks: Network[];
-  setNetwork: (network: Network) => void;
-  placeholder: string;
-  searchHint: string;
-  disabled: boolean;
+  network?: Network
+  networks: Network[]
+  setNetwork: (network: Network) => void
+  placeholder: string
+  searchHint: string
+  disabled: boolean
   className?: string
 }) {
-    const [showModal, setShowModal] = useState(false)
+  const [showModal, setShowModal] = useState(false)
 
-    function openModal() {
-        setShowModal(true)
-    }
+  function openModal() {
+    setShowModal(true)
+  }
 
-    const handleSelect = useCallback((item: Network) => {
-        if (item.status === 'active') {
-            setNetwork(item)
-            setShowModal(false)
-        }
-    }, [])
+  const handleSelect = useCallback((item: Network) => {
+    if (item.status === 'active') {
+      setNetwork(item)
+      setShowModal(false)
+    }
+  }, [])
 
-    return (
-        <>
-            <div className="flex items-center relative">
-                <button
-                    type="button"
-                    onClick={openModal}
-                    disabled={disabled}
-                    className={`rounded-lg focus-peer:ring-primary focus-peer:border-muted-3 focus-peer:border focus-peer:ring-1 focus:outline-none disabled:cursor-not-allowed relative grow h-12 flex items-center text-left justify-bottom w-full pl-3 pr-4 py-2 border border-muted-3 font-semibold ${className}`}
-                >
-                    <span className='flex grow text-left items-center text-xs md:text-base'>
-                        {
-                            network && <div className="flex items-center">
-                                <div className="flex-shrink-0 h-6 w-6 relative">
-                                    <Image
-                                        src={network.logo}
-                                        alt="Project Logo"
-                                        height="40"
-                                        width="40"
-                                        loading="eager"
-                                        priority
-                                        className="rounded-md object-contain"
-                                    />
-                                </div>
-                            </div>
-                        }
-                        {network
-                            ?
-                            <span className="ml-3 block font-medium text-muted flex-auto items-center">
-                                {network.display_name}
-                            </span>
-                            :
-                            <span className="block font-medium text-muted-2 flex-auto items-center">
-                                {placeholder}
-                            </span>}
-                    </span>
-                    <span className="ml-3 right-0 flex items-center pointer-events-none">
-                        <ChevronDown className="h-4 w-4" aria-hidden="true" />
-                    </span>
-                </button>
-            </div>
-            <NetworkSelect
-                setShow={setShowModal}
-                setNetwork={handleSelect}
-                show={showModal}
-                network={network}
-                searchHint=''
-                networks={networks}
-            />
-        </>
-    )
+  return (
+    <>
+      <div className="flex items-center relative">
+        <button
+          type="button"
+          onClick={openModal}
+          disabled={disabled}
+          className={`rounded-lg focus-peer:ring-primary focus-peer:border-muted-3 focus-peer:border focus-peer:ring-1 focus:outline-none disabled:cursor-not-allowed relative grow h-12 flex items-center text-left justify-bottom w-full pl-3 pr-4 py-2 border border-muted-3 font-semibold ${className}`}
+        >
+          <span className="flex grow text-left items-center text-xs md:text-base">
+            {network && (
+              <div className="flex items-center">
+                <div className="flex-shrink-0 h-6 w-6 relative">
+                  <Image
+                    src={network.logo}
+                    alt="Project Logo"
+                    height="40"
+                    width="40"
+                    loading="eager"
+                    priority
+                    className="rounded-md object-contain"
+                  />
+                </div>
+              </div>
+            )}
+            {network ? (
+              <span className="ml-3 block font-medium text-muted flex-auto items-center">
+                {network.display_name}
+              </span>
+            ) : (
+              <span className="block font-medium text-muted-2 flex-auto items-center">
+                {placeholder}
+              </span>
+            )}
+          </span>
+          <span className="ml-3 right-0 flex items-center pointer-events-none">
+            <ChevronDown className="h-4 w-4" aria-hidden="true" />
+          </span>
+        </button>
+      </div>
+      <NetworkSelect
+        setShow={setShowModal}
+        setNetwork={handleSelect}
+        show={showModal}
+        network={network}
+        searchHint=""
+        networks={networks}
+      />
+    </>
+  )
 }
diff --git a/apps/bridge/src/components/lux/teleport/swap/to/SelectItem.tsx b/apps/bridge/src/components/lux/teleport/swap/to/SelectItem.tsx
index c7d6cb6e..97bf674f 100644
--- a/apps/bridge/src/components/lux/teleport/swap/to/SelectItem.tsx
+++ b/apps/bridge/src/components/lux/teleport/swap/to/SelectItem.tsx
@@ -1,13 +1,9 @@
-import type { Network } from "@/types/teleport";
-import Image from "next/image";
-
+import type { Network } from '@/types/teleport'
+import Image from 'next/image'
 
 const SelectItem: React.FC<{
   network: Network
-}
-> = ({ 
-  network 
-}) => (
+}> = ({ network }) => (
   <div className="flex items-center justify-between w-full">
     <div className="flex items-center">
       <div className="flex-shrink-0 h-6 w-6 relative">
@@ -24,7 +20,7 @@ const SelectItem: React.FC<{
         <p className="text-md font-medium">{network.display_name}</p>
       </div>
     </div>
-    <div>{network.status === "active" && "active"}</div>
+    <div>{network.status === 'active' && 'active'}</div>
   </div>
 )
 
diff --git a/apps/bridge/src/components/lux/teleport/swap/to/TokenSelect.tsx b/apps/bridge/src/components/lux/teleport/swap/to/TokenSelect.tsx
index 0e72cfce..70f789ae 100644
--- a/apps/bridge/src/components/lux/teleport/swap/to/TokenSelect.tsx
+++ b/apps/bridge/src/components/lux/teleport/swap/to/TokenSelect.tsx
@@ -1,52 +1,48 @@
+import type { Token } from '@/types/teleport'
+
 import React from 'react'
 import Image from 'next/image'
-
-import {
-  CommandItem,
-  CommandList,
-} from '@hanzo/ui/primitives'
 import CommandWrapper from '@/components/shadcn/command-wrapper'
 
-import type { Token } from '@/types/teleport'
+import { cn } from '@hanzo/ui/util'
+import { CommandItem, CommandList } from '@hanzo/ui/primitives'
 
 const TokenSelect: React.FC<{
   values: Token[]
   setValue: (token: Token) => void
-}> = ({ 
-  values, 
-  setValue 
-}) => (
+}> = ({ values, setValue }) => (
   <CommandWrapper>
     <CommandList>
       {values.map((item) => {
         return (
           <CommandItem
-            className={`border-t border-t-slate-500 justify-between gap-6 ${
+            className={cn(
+              'border-t border-t-slate-500 justify-between gap-6 hover:!bg-[#1F1F1F] aria-selected:!bg-[#1F1F1F] !border-none cursor-pointer',
               item.status !== 'active' && 'opacity-30'
-            }`}
+            )}
             disabled={false}
             value={item.asset}
             key={item.asset}
             onSelect={() => setValue(item)}
           >
-            <div className='flex items-center w-full'>
-              <div className='flex-shrink-0 h-6 w-6 relative'>
+            <div className="flex items-center w-full">
+              <div className="flex-shrink-0 h-6 w-6 relative">
                 {item.logo && (
                   <Image
                     src={item.logo}
-                    alt='Project Logo'
-                    height='40'
-                    width='40'
-                    loading='eager'
-                    className='rounded-md object-contain'
+                    alt="Project Logo"
+                    height="40"
+                    width="40"
+                    loading="eager"
+                    className="rounded-md object-contain"
                   />
                 )}
               </div>
-              <div className='ml-4 flex items-center gap-3 justify-between w-full'>
-                <p className='text-md font-medium'>{item.asset}</p>
+              <div className="ml-4 flex items-center gap-3 justify-between w-full">
+                <p className="text-md font-medium">{item.asset}</p>
               </div>
             </div>
-            <div className='text-xs text-[white]/60'>
+            <div className="text-xs text-[white]/60">
               {item.status === 'active' && 'active'}
             </div>
           </CommandItem>
diff --git a/apps/bridge/src/components/lux/teleport/swap/to/TokenSelectWrapper.tsx b/apps/bridge/src/components/lux/teleport/swap/to/TokenSelectWrapper.tsx
index 62bb1b8d..3076cd45 100644
--- a/apps/bridge/src/components/lux/teleport/swap/to/TokenSelectWrapper.tsx
+++ b/apps/bridge/src/components/lux/teleport/swap/to/TokenSelectWrapper.tsx
@@ -4,16 +4,16 @@ import { ChevronDown } from 'lucide-react'
 import { Popover, PopoverContent, PopoverTrigger } from '@hanzo/ui/primitives'
 
 import TokenSelect from './TokenSelect'
-import type { Token } from '@/types/teleport';
+import type { Token } from '@/types/teleport'
 
 interface IProps {
-  setValue: (value: Token) => void;
-  values: Token[];
-  value?: Token;
-  sourceAsset?: Token;
-  placeholder?: string;
-  searchHint?: string;
-  disabled?: boolean;
+  setValue: (value: Token) => void
+  values: Token[]
+  value?: Token
+  sourceAsset?: Token
+  placeholder?: string
+  searchHint?: string
+  disabled?: boolean
 }
 
 const TokenSelectWrapper: React.FC<IProps> = ({
@@ -22,66 +22,68 @@ const TokenSelectWrapper: React.FC<IProps> = ({
   sourceAsset,
   values,
   placeholder,
-  disabled
+  disabled,
 }) => {
-  const [showModal, setShowModal] = useState(false);
+  const [showModal, setShowModal] = useState(false)
 
   const handleSelect = useCallback((item: Token) => {
     if (item.status === 'active') {
-      setValue(item);
-      setShowModal(false);
+      setValue(item)
+      setShowModal(false)
     }
-  }, []);
+  }, [])
 
   if (values.length === 0) return <Placeholder placeholder={placeholder} />
 
   return (
     <Popover open={showModal} onOpenChange={() => setShowModal(!showModal)}>
       <PopoverTrigger asChild>
-        {
-          value ?
-            <button type='button' className='py-0 border-transparent bg-transparent font-semibold rounded-md flex items-center justify-between'>
-              <span className="flex items-center text-xs md:text-base">
-                <div className="flex-shrink-0 h-6 w-6 relative">
-                  {
-                    value.logo && <Image
-                      src={value.logo}
-                      alt="Project Logo"
-                      priority
-                      height="40"
-                      width="40"
-                      className="rounded-md object-contain"
-                    />
-                  }
-                </div>
-                <span className="ml-3 block">{value.asset}</span>
-              </span>
-
-              <span className="ml-1 flex items-center pointer-events-none ">
-                <ChevronDown className="h-4 w-4" aria-hidden="true" />
-              </span>
-            </button>
-            :
-            <button type='button' className='py-0 border-transparent bg-transparent font-semibold rounded-md flex items-center justify-between'>
-              <div className="disabled:cursor-not-allowed relative grow flex items-center text-left w-full font-semibold">
-                <span className="flex grow text-left items-center">
-                  <span className="block text-xs md:text-base font-medium text-muted-3 flex-auto items-center">
-                    {placeholder}
-                  </span>
-                </span>
+        {value ? (
+          <button
+            type="button"
+            className="py-0 border-transparent bg-transparent font-semibold rounded-md flex items-center justify-between"
+          >
+            <span className="flex items-center text-xs md:text-base">
+              <div className="flex-shrink-0 h-6 w-6 relative">
+                {value.logo && (
+                  <Image
+                    src={value.logo}
+                    alt="Project Logo"
+                    priority
+                    height="40"
+                    width="40"
+                    className="rounded-md object-contain"
+                  />
+                )}
               </div>
+              <span className="ml-3 block">{value.asset}</span>
+            </span>
 
-              <span className="ml-1 flex items-center pointer-events-none">
-                <ChevronDown className="h-4 w-4" aria-hidden="true" />
+            <span className="ml-1 flex items-center pointer-events-none ">
+              <ChevronDown className="h-4 w-4" aria-hidden="true" />
+            </span>
+          </button>
+        ) : (
+          <button
+            type="button"
+            className="py-0 border-transparent bg-transparent font-semibold rounded-md flex items-center justify-between"
+          >
+            <div className="disabled:cursor-not-allowed relative grow flex items-center text-left w-full font-semibold">
+              <span className="flex grow text-left items-center">
+                <span className="block text-xs md:text-base font-medium text-muted-3 flex-auto items-center">
+                  {placeholder}
+                </span>
               </span>
-            </button>
-        }
+            </div>
+
+            <span className="ml-1 flex items-center pointer-events-none">
+              <ChevronDown className="h-4 w-4" aria-hidden="true" />
+            </span>
+          </button>
+        )}
       </PopoverTrigger>
       <PopoverContent className="w-fit bg-[black] border-[#404040]">
-        <TokenSelect
-          setValue={handleSelect}
-          values={values}
-        />
+        <TokenSelect setValue={handleSelect} values={values} />
       </PopoverContent>
     </Popover>
   )
@@ -98,11 +100,11 @@ const Placeholder = ({ placeholder }: { placeholder: string | undefined }) => {
 const LockedAsset = ({ value }: { value: Token }) => {
   return (
     <div className="rounded-lg focus-peer:ring-foreground focus-peer:border-muted-1 focus-peer:border focus-peer:ring-1 focus:outline-none disabled:cursor-not-allowed relative grow h-12 flex items-center text-left justify-bottom w-full pl-3 pr-2 py-2 bg-level-1 border border-[#404040] font-semibold align-sub ">
-      <div className='w-full border-transparent bg-transparent font-semibold rounded-md'>
+      <div className="w-full border-transparent bg-transparent font-semibold rounded-md">
         <span className="flex items-center">
           <div className="flex-shrink-0 h-6 w-6 relative">
-            {
-              value?.logo && <Image
+            {value?.logo && (
+              <Image
                 src={value?.logo}
                 alt="Project Logo"
                 priority
@@ -110,8 +112,7 @@ const LockedAsset = ({ value }: { value: Token }) => {
                 width="40"
                 className="rounded-md object-contain"
               />
-            }
-
+            )}
           </div>
           <span className="ml-3 block truncate ">{value?.name}</span>
         </span>
@@ -120,4 +121,4 @@ const LockedAsset = ({ value }: { value: Token }) => {
   )
 }
 
-export default TokenSelectWrapper;
\ No newline at end of file
+export default TokenSelectWrapper
diff --git a/apps/bridge/src/components/shadcn/command-wrapper.tsx b/apps/bridge/src/components/shadcn/command-wrapper.tsx
index 5f5fdedc..7b47f9a3 100644
--- a/apps/bridge/src/components/shadcn/command-wrapper.tsx
+++ b/apps/bridge/src/components/shadcn/command-wrapper.tsx
@@ -1,16 +1,17 @@
 'use client'
 import React from 'react'
-import { Command } from "@hanzo/ui/primitives"
-
+import { Command } from '@hanzo/ui/primitives'
 
 const CommandWrapper = React.forwardRef<
   React.ElementRef<typeof Command>,
   React.ComponentPropsWithoutRef<typeof Command>
 >(({ className, children, ...props }, ref) => (
-  <Command {...props} className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+  <Command
+    {...props}
+    className="bg-black [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
+  >
     {children}
   </Command>
 ))
 
-
 export default CommandWrapper
diff --git a/apps/bridge/src/util/getBridgeSettings.ts b/apps/bridge/src/util/getBridgeSettings.ts
index 35131174..6f8226a8 100644
--- a/apps/bridge/src/util/getBridgeSettings.ts
+++ b/apps/bridge/src/util/getBridgeSettings.ts
@@ -5,10 +5,7 @@ import BridgeApiClient from '@/lib/BridgeApiClient'
 
 const getBridgeSettings = async (
   swapId?: string // :aa TODO seems to be unused!
-): Promise<
-  BridgeSettings | { error: string } | undefined 
-> => {
-
+): Promise<BridgeSettings | { error: string } | undefined> => {
   if (swapId) {
     const isValidGuid =
       /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(
@@ -17,20 +14,20 @@ const getBridgeSettings = async (
 
     if (!isValidGuid) {
       return {
-        error: 'invalid guid!'
+        error: 'invalid guid!',
       }
     }
-    const apiClient = new BridgeApiClient()
-    const { data: networks } = await apiClient.GetLSNetworksAsync()
-    const { data: exchanges } = await apiClient.GetExchangesAsync()
+    // const apiClient = new BridgeApiClient()
+    // const { data: networks } = await apiClient.GetLSNetworksAsync()
+    // const { data: exchanges } = await apiClient.GetExchangesAsync()
 
-    if (!networks || !exchanges) return {
-      error: 'no network or exchange!' 
-    }
+    // if (!networks || !exchanges) return {
+    //   error: 'no network or exchange!'
+    // }
 
     return {
-      networks,
-      exchanges,
+      networks: [],
+      exchanges: [],
     }
   }
 
diff --git a/server/prisma/schema.prisma b/server/prisma/schema.prisma
index 10d0b5db..d1eafd24 100644
--- a/server/prisma/schema.prisma
+++ b/server/prisma/schema.prisma
@@ -8,8 +8,8 @@ generator client {
 }
 
 datasource db {
-  provider  = "postgresql"
-  // provider  = "sqlite"
+  // provider  = "postgresql"
+  provider  = "sqlite"
   url       = env("POSTGRES_URL") // uses connection pooling
   directUrl = env("POSTGRES_URL") // uses a direct connection
 }