diff --git a/apps/directory/src/app/layout.tsx b/apps/directory/src/app/layout.tsx
index 3617563..a6c303d 100644
--- a/apps/directory/src/app/layout.tsx
+++ b/apps/directory/src/app/layout.tsx
@@ -12,12 +12,12 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <head />
 
       <body
-        className={`bg-background font-sans relative antialiased max-h-screen min-h-full ${GeistSans.variable} ${GeistMono.variable}`}
+        className={`bg-background relative max-h-screen min-h-full font-sans antialiased ${GeistSans.variable} ${GeistMono.variable}`}
       >
         <ThemeProvider>
           <Header />
 
-          <main className="max-w-6xl mx-auto">{children}</main>
+          <main className="mx-auto max-w-6xl">{children}</main>
 
           <Footer />
         </ThemeProvider>
diff --git a/apps/directory/src/app/page.tsx b/apps/directory/src/app/page.tsx
index 88786f1..81d57d5 100644
--- a/apps/directory/src/app/page.tsx
+++ b/apps/directory/src/app/page.tsx
@@ -44,7 +44,7 @@ export default function Directory() {
       <Hero />
 
       <div id="templates" className="container">
-        <div className="flex flex-col min-[960px]:flex-row gap-10 py-16 sm:py-20">
+        <div className="flex flex-col gap-10 py-16 sm:py-20 min-[960px]:flex-row">
           <div className="min-[960px]:w-56">
             <Suspense>
               <Filters />
diff --git a/apps/directory/src/components/filters.tsx b/apps/directory/src/components/filters.tsx
index 5188856..24e0254 100644
--- a/apps/directory/src/components/filters.tsx
+++ b/apps/directory/src/components/filters.tsx
@@ -45,7 +45,7 @@ function Filter() {
   return (
     <div className="relative overflow-auto">
       <div className="flex items-center justify-between">
-        <h4 className="font-bold text-base">Filter</h4>
+        <h4 className="text-base font-bold">Filter</h4>
 
         <Button
           className={cn({
@@ -59,7 +59,7 @@ function Filter() {
             });
           }}
         >
-          <XCircle className="h-4 w-4 mr-2 text-muted" /> Clear
+          <XCircle className="text-muted mr-2 h-4 w-4" /> Clear
         </Button>
       </div>
 
@@ -74,7 +74,7 @@ function Filter() {
 
             return (
               <AccordionItem key={filterKey} value={filter}>
-                <AccordionTrigger className="text-sm px-3" iconSide="left">
+                <AccordionTrigger className="px-3 text-sm" iconSide="left">
                   {filter}
                 </AccordionTrigger>
 
@@ -87,7 +87,7 @@ function Filter() {
                       <label
                         key={optionValue}
                         htmlFor={optionValue}
-                        className="flex flex-row items-center space-x-3 space-y-0 rounded-md bg-secondary text-secondary-foreground p-3 hover:bg-secondary/60 cursor-pointer text-sm"
+                        className="bg-secondary text-secondary-foreground hover:bg-secondary/60 flex cursor-pointer flex-row items-center space-x-3 space-y-0 rounded-md p-3 text-sm"
                       >
                         <Checkbox
                           id={optionValue}
@@ -113,7 +113,7 @@ function Filter() {
                           }}
                         />
 
-                        <span className="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 flex-grow font-normal">
+                        <span className="flex-grow text-sm font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                           {option}
                         </span>
                       </label>
diff --git a/apps/directory/src/components/footer.tsx b/apps/directory/src/components/footer.tsx
index aed767d..e9975c3 100644
--- a/apps/directory/src/components/footer.tsx
+++ b/apps/directory/src/components/footer.tsx
@@ -27,14 +27,14 @@ export function Footer() {
             >
               <span className="sr-only">{item.name}</span>
               <item.icon
-                className="h-5 w-5 fill-muted hover:fill-muted/80"
+                className="fill-muted hover:fill-muted/80 h-5 w-5"
                 aria-hidden="true"
               />
             </a>
           ))}
         </div>
         <div className="mt-8 md:order-1 md:mt-0">
-          <p className="text-center text-xs leading-5 text-muted">
+          <p className="text-muted text-center text-xs leading-5">
             &copy; {new Date().getFullYear()} Swing. All rights reserved.
           </p>
         </div>
diff --git a/apps/directory/src/components/header.tsx b/apps/directory/src/components/header.tsx
index 01df469..39e1ab9 100644
--- a/apps/directory/src/components/header.tsx
+++ b/apps/directory/src/components/header.tsx
@@ -4,14 +4,14 @@ import { Button } from "./ui/button";
 
 export function Header() {
   return (
-    <header className="absolute top-0 inset-x-0 flex justify-between items-center h-20 p-4 max-w-6xl mx-auto z-10">
+    <header className="absolute inset-x-0 top-0 z-10 mx-auto flex h-20 max-w-6xl items-center justify-between p-4">
       <a href="https://swing.xyz" target="_blank">
         <SwingLogo className="h-7" />
       </a>
 
       <nav className="flex items-center gap-5">
         <a
-          className="text-sm font-medium hover:opacity-90 hidden sm:block"
+          className="hidden text-sm font-medium hover:opacity-90 sm:block"
           href="https://developers.swing.xyz"
           target="_blank"
         >
@@ -20,7 +20,7 @@ export function Header() {
 
         <Button className="hidden sm:inline-flex" variant="outline" asChild>
           <a href="https://github.com/swing-xyz/examples" target="__blank">
-            <GithubIcon className="w-4 h-4 mr-2" /> Fork on Github
+            <GithubIcon className="mr-2 h-4 w-4" /> Fork on Github
           </a>
         </Button>
 
diff --git a/apps/directory/src/components/hero.tsx b/apps/directory/src/components/hero.tsx
index f85f6a4..ed00dcf 100644
--- a/apps/directory/src/components/hero.tsx
+++ b/apps/directory/src/components/hero.tsx
@@ -18,7 +18,7 @@ export function Hero() {
                 [7, 3],
                 [10, 6],
               ]}
-              className="absolute inset-x-0 inset-y-[-50%] h-[200%] w-full skew-y-[-18deg] fill-black/40 stroke-black/50 mix-blend-overlay dark:fill-white/2.5 dark:stroke-white/5"
+              className="dark:fill-white/2.5 absolute inset-x-0 inset-y-[-50%] h-[200%] w-full skew-y-[-18deg] fill-black/40 stroke-black/50 mix-blend-overlay dark:stroke-white/5"
             />
           </div>
           <svg
@@ -31,12 +31,12 @@ export function Hero() {
         </div>
       </div>
 
-      <div className="container mx-auto max-w-3xl pt-32 sm:pt-40 lg:pt-48 pb-12 sm:pb-20">
+      <div className="container mx-auto max-w-3xl pb-12 pt-32 sm:pb-20 sm:pt-40 lg:pt-48">
         <div className="text-center">
-          <h1 className="text-3xl font-bold tracking-tight text-foreground md:text-5xl">
+          <h1 className="text-foreground text-3xl font-bold tracking-tight md:text-5xl">
             Swing Example Templates
           </h1>
-          <p className="mt-6 text-lg leading-8 text-muted">
+          <p className="text-muted mt-6 text-lg leading-8">
             Kickstart your Swing integration with ready-to-ship repositories.
           </p>
           <div className="mt-10 flex items-center justify-center gap-x-6">
diff --git a/apps/directory/src/components/template-grid.tsx b/apps/directory/src/components/template-grid.tsx
index fbfc7bb..e29c4f6 100644
--- a/apps/directory/src/components/template-grid.tsx
+++ b/apps/directory/src/components/template-grid.tsx
@@ -23,7 +23,7 @@ export type TemplateMeta = {
 
 export function TemplateGrid({ templates }: { templates: TemplateMeta[] }) {
   return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 min-[960px]:grid-cols-2 lg:grid-cols-3 gap-5">
+    <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 md:grid-cols-3 min-[960px]:grid-cols-2 lg:grid-cols-3">
       {templates.map((template) => {
         const FrameworkIcon = template.framework
           ? FrameworkIcons[template.framework as keyof typeof FrameworkIcons]
@@ -32,7 +32,7 @@ export function TemplateGrid({ templates }: { templates: TemplateMeta[] }) {
         return (
           <Card
             key={template.id}
-            className="sm:max-w-72 hover:scale-105 duration-300 mx-auto flex flex-col relative overflow-hidden bg-background"
+            className="bg-background relative mx-auto flex flex-col overflow-hidden duration-300 hover:scale-105 sm:max-w-72"
           >
             <a
               className="absolute inset-0"
@@ -42,7 +42,7 @@ export function TemplateGrid({ templates }: { templates: TemplateMeta[] }) {
 
             <div
               className={cn(
-                "h-44 flex items-center justify-center bg-gradient-to-r",
+                "flex h-44 items-center justify-center bg-gradient-to-r",
                 {
                   "to-slate-800": template.framework === "Next.js",
                   "to-sky-500": template.framework === "Webpack",
@@ -69,7 +69,7 @@ export function TemplateGrid({ templates }: { templates: TemplateMeta[] }) {
               <CardDescription>{template.description}</CardDescription>
             </CardHeader>
 
-            <CardFooter className="gap-x-2 flex-wrap gap-y-2">
+            <CardFooter className="flex-wrap gap-x-2 gap-y-2">
               {template.framework ? (
                 <Badge variant="secondary">{template.framework}</Badge>
               ) : null}
diff --git a/apps/directory/src/components/ui/accordion.tsx b/apps/directory/src/components/ui/accordion.tsx
index fcc692e..646782f 100644
--- a/apps/directory/src/components/ui/accordion.tsx
+++ b/apps/directory/src/components/ui/accordion.tsx
@@ -30,7 +30,7 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-90 gap-x-3",
+        "flex flex-1 items-center gap-x-3 py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-90",
         className,
         {
           "justify-between": iconSide === "right",
@@ -56,7 +56,7 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all"
     {...props}
   >
     <div className={cn("pb-4 pt-0", className)}>{children}</div>
diff --git a/apps/directory/src/components/ui/avatar.tsx b/apps/directory/src/components/ui/avatar.tsx
index c660799..5a12cd1 100644
--- a/apps/directory/src/components/ui/avatar.tsx
+++ b/apps/directory/src/components/ui/avatar.tsx
@@ -39,7 +39,7 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      "bg-muted flex h-full w-full items-center justify-center rounded-full",
       className,
     )}
     {...props}
diff --git a/apps/directory/src/components/ui/card.tsx b/apps/directory/src/components/ui/card.tsx
index 7f8d4bd..b0593c4 100644
--- a/apps/directory/src/components/ui/card.tsx
+++ b/apps/directory/src/components/ui/card.tsx
@@ -11,7 +11,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      "bg-card text-card-foreground rounded-lg border shadow-sm",
       className,
     )}
     {...props}
@@ -52,7 +52,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-muted-foreground text-sm", className)}
     {...props}
   />
 ));
diff --git a/apps/directory/src/components/ui/checkbox.tsx b/apps/directory/src/components/ui/checkbox.tsx
index 8718ee6..0a85415 100644
--- a/apps/directory/src/components/ui/checkbox.tsx
+++ b/apps/directory/src/components/ui/checkbox.tsx
@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-muted ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=checked]:text-background",
+      "border-muted ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-foreground data-[state=checked]:text-background peer h-4 w-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
     {...props}
diff --git a/apps/directory/src/components/ui/dialog.tsx b/apps/directory/src/components/ui/dialog.tsx
index e946e81..77e464f 100644
--- a/apps/directory/src/components/ui/dialog.tsx
+++ b/apps/directory/src/components/ui/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm",
       className,
     )}
     {...props}
@@ -38,13 +38,13 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+        "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full",
         className,
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -102,7 +102,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-muted-foreground text-sm", className)}
     {...props}
   />
 ));
diff --git a/apps/directory/src/components/ui/drawer.tsx b/apps/directory/src/components/ui/drawer.tsx
index d4f746a..16f7719 100644
--- a/apps/directory/src/components/ui/drawer.tsx
+++ b/apps/directory/src/components/ui/drawer.tsx
@@ -43,12 +43,12 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background max-h-screen",
+        "bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto max-h-screen flex-col rounded-t-[10px] border",
         className,
       )}
       {...props}
     >
-      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      <div className="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full" />
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>
@@ -98,7 +98,7 @@ const DrawerDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-muted-foreground text-sm", className)}
     {...props}
   />
 ));
diff --git a/examples/gas-widget-nextjs/src/app/layout.tsx b/examples/gas-widget-nextjs/src/app/layout.tsx
index fa16085..79f669f 100644
--- a/examples/gas-widget-nextjs/src/app/layout.tsx
+++ b/examples/gas-widget-nextjs/src/app/layout.tsx
@@ -11,10 +11,10 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     <html lang="en" suppressHydrationWarning>
       <head />
 
-      <body className="relative flex max-h-screen min-h-full text-white bg-slate-900">
+      <body className="relative flex max-h-screen min-h-full bg-slate-900 text-white">
         <Sidebar />
 
-        <main className="relative flex flex-col w-full min-h-screen overflow-y-auto">
+        <main className="relative flex min-h-screen w-full flex-col overflow-y-auto">
           <div className="flex justify-end p-6">
             <Button
               href="https://github.com/swing-xyz/examples/tree/main/examples/gas-widget-nextjs"
diff --git a/examples/gas-widget-nextjs/src/app/page.tsx b/examples/gas-widget-nextjs/src/app/page.tsx
index 319fbbe..2adcb60 100644
--- a/examples/gas-widget-nextjs/src/app/page.tsx
+++ b/examples/gas-widget-nextjs/src/app/page.tsx
@@ -3,7 +3,7 @@ import "@swing.xyz/ui/theme.css";
 
 export default function SwapPage() {
   return (
-    <div className="flex items-center justify-center h-full">
+    <div className="flex h-full items-center justify-center">
       <Gas
         title="Gas Refill with MetaWallet"
         projectId="example-gas-widget-nextjs"
diff --git a/examples/gas-widget-nextjs/src/components/Sidebar.tsx b/examples/gas-widget-nextjs/src/components/Sidebar.tsx
index 9969d66..e6e2d6d 100644
--- a/examples/gas-widget-nextjs/src/components/Sidebar.tsx
+++ b/examples/gas-widget-nextjs/src/components/Sidebar.tsx
@@ -15,13 +15,13 @@ import Link from "next/link";
 
 export default function Sidebar() {
   return (
-    <aside className="relative hidden h-screen py-5 pt-8 transition-all duration-700 ease-in-out group md:flex md:flex-col bg-slate-800 md:w-40 lg:w-52">
+    <aside className="group relative hidden h-screen bg-slate-800 py-5 pt-8 transition-all duration-700 ease-in-out md:flex md:w-40 md:flex-col lg:w-52">
       <Link
         id="sidebar-item-Home"
-        className="relative flex items-center px-4 py-2 text-orange-300 group hover:bg-slate-700"
+        className="group relative flex items-center px-4 py-2 text-orange-300 hover:bg-slate-700"
         href="/"
       >
-        <div className="flex items-center justify-center mr-2 text-orange-500">
+        <div className="mr-2 flex items-center justify-center text-orange-500">
           <FontAwesomeIcon icon={faOtter} />
         </div>
         <span className="truncate">MetaWallet</span>
@@ -32,10 +32,10 @@ export default function Sidebar() {
           <div className="space-y-3">
             <Link
               id="sidebar-item-Portfolio"
-              className="relative flex items-center px-4 py-2 text-white group hover:bg-slate-700"
+              className="group relative flex items-center px-4 py-2 text-white hover:bg-slate-700"
               href="/"
             >
-              <div className="flex items-center justify-center mr-2">
+              <div className="mr-2 flex items-center justify-center">
                 <FontAwesomeIcon icon={faLineChart} />
               </div>
               <span className="truncate">Portfolio</span>
@@ -43,12 +43,12 @@ export default function Sidebar() {
 
             <Link
               id="sidebar-item-Swap"
-              className="relative flex items-center px-4 py-2 font-semibold group bg-slate-700 text-midnight-primary dark:text-white"
+              className="text-midnight-primary group relative flex items-center bg-slate-700 px-4 py-2 font-semibold dark:text-white"
               href="/"
               aria-current="page"
             >
-              <div className="hidden md:inline-block h-6 w-0.5 bg-midnight-primary absolute right-0"></div>
-              <div className="flex items-center justify-center mr-2">
+              <div className="bg-midnight-primary absolute right-0 hidden h-6 w-0.5 md:inline-block"></div>
+              <div className="mr-2 flex items-center justify-center">
                 <FontAwesomeIcon icon={faRotate} />
               </div>
               <span className="truncate">Staking</span>
@@ -56,10 +56,10 @@ export default function Sidebar() {
 
             <Link
               id="sidebar-item-Watchlist"
-              className="relative flex items-center px-4 py-2 text-white group hover:bg-slate-700"
+              className="group relative flex items-center px-4 py-2 text-white hover:bg-slate-700"
               href="/"
             >
-              <div className="flex items-center justify-center mr-2">
+              <div className="mr-2 flex items-center justify-center">
                 <FontAwesomeIcon icon={faStar} />
               </div>
               <span className="truncate">Watchlist</span>
@@ -68,14 +68,14 @@ export default function Sidebar() {
         </nav>
       </div>
 
-      <div className="flex flex-1 mt-3">
+      <div className="mt-3 flex flex-1">
         <div className="w-full">
           <Link
             id="sidebar-item-Settings"
-            className="relative flex items-center px-4 py-2 text-white group hover:bg-slate-700"
+            className="group relative flex items-center px-4 py-2 text-white hover:bg-slate-700"
             href="/"
           >
-            <div className="flex items-center justify-center mr-2">
+            <div className="mr-2 flex items-center justify-center">
               <FontAwesomeIcon icon={faGear} />
             </div>
             <span className="truncate">Settings</span>
@@ -85,12 +85,12 @@ export default function Sidebar() {
 
       <div className="mb-8 space-y-6">
         <div>
-          <div className="w-full mt-3">
+          <div className="mt-3 w-full">
             <Link
               href="/"
-              className="relative flex items-center px-4 py-2 text-white group hover:bg-slate-700"
+              className="group relative flex items-center px-4 py-2 text-white hover:bg-slate-700"
             >
-              <div className="flex items-center justify-center mr-2">
+              <div className="mr-2 flex items-center justify-center">
                 <FontAwesomeIcon icon={faQuestionCircle} />
               </div>
               <span className="truncate">FAQ</span>
@@ -99,9 +99,9 @@ export default function Sidebar() {
           <div className="mt-3">
             <Link
               href="/"
-              className="relative flex items-center px-4 py-2 text-white group hover:bg-slate-700"
+              className="group relative flex items-center px-4 py-2 text-white hover:bg-slate-700"
             >
-              <div className="flex items-center justify-center mr-2">
+              <div className="mr-2 flex items-center justify-center">
                 <FontAwesomeIcon icon={faMessage} />
               </div>
               <span className="truncate">Contact</span>
@@ -113,7 +113,7 @@ export default function Sidebar() {
       <Link
         id="fork-on-github"
         href="https://github.com/swing-xyz/examples"
-        className="flex items-center px-6 py-4 -mb-5 space-x-2 text-white border-t cursor-pointer border-slate-700 hover:bg-slate-700"
+        className="-mb-5 flex cursor-pointer items-center space-x-2 border-t border-slate-700 px-6 py-4 text-white hover:bg-slate-700"
         target={"_blank"}
       >
         <FontAwesomeIcon size="lg" icon={faGithub} />
diff --git a/examples/staking-sdk-nextjs/src/app/layout.tsx b/examples/staking-sdk-nextjs/src/app/layout.tsx
index 57f3172..cbc39f6 100644
--- a/examples/staking-sdk-nextjs/src/app/layout.tsx
+++ b/examples/staking-sdk-nextjs/src/app/layout.tsx
@@ -20,8 +20,8 @@ export default function Layout({ children }: { children: React.ReactNode }) {
           <SwingSdkProvider>
             <Sidebar />
 
-            <main className="container relative flex flex-col w-full min-h-screen overflow-y-auto">
-              <div className="flex justify-end p-6 space-x-4">
+            <main className="container relative flex min-h-screen w-full flex-col overflow-y-auto">
+              <div className="flex justify-end space-x-4 p-6">
                 <ConnectWallet />
 
                 <Button className="space-x-2" variant="outline" asChild>
diff --git a/examples/staking-sdk-nextjs/src/components/Sidebar.tsx b/examples/staking-sdk-nextjs/src/components/Sidebar.tsx
index 75a28c2..06aeb8e 100644
--- a/examples/staking-sdk-nextjs/src/components/Sidebar.tsx
+++ b/examples/staking-sdk-nextjs/src/components/Sidebar.tsx
@@ -15,13 +15,13 @@ import Link from "next/link";
 
 export default function Sidebar() {
   return (
-    <aside className="relative hidden h-screen py-5 pt-8 transition-all duration-700 ease-in-out group md:flex md:flex-col bg-slate-800 md:w-40 lg:w-52">
+    <aside className="group relative hidden h-screen bg-slate-800 py-5 pt-8 transition-all duration-700 ease-in-out md:flex md:w-40 md:flex-col lg:w-52">
       <Link
         id="sidebar-item-Home"
-        className="relative flex items-center px-4 py-2 text-orange-300 group hover:bg-slate-700"
+        className="group relative flex items-center px-4 py-2 text-orange-300 hover:bg-slate-700"
         href="/"
       >
-        <div className="flex items-center justify-center mr-2 text-orange-500">
+        <div className="mr-2 flex items-center justify-center text-orange-500">
           <FontAwesomeIcon icon={faOtter} />
         </div>
         <span className="truncate">MetaWallet</span>
@@ -32,10 +32,10 @@ export default function Sidebar() {
           <div className="space-y-3">
             <Link
               id="sidebar-item-Portfolio"
-              className="relative flex items-center px-4 py-2 text-white group hover:bg-slate-700"
+              className="group relative flex items-center px-4 py-2 text-white hover:bg-slate-700"
               href="/"
             >
-              <div className="flex items-center justify-center mr-2">
+              <div className="mr-2 flex items-center justify-center">
                 <FontAwesomeIcon icon={faLineChart} />
               </div>
               <span className="truncate">Portfolio</span>
@@ -43,12 +43,12 @@ export default function Sidebar() {
 
             <Link
               id="sidebar-item-Swap"
-              className="relative flex items-center px-4 py-2 font-semibold group bg-slate-700 text-white"
+              className="group relative flex items-center bg-slate-700 px-4 py-2 font-semibold text-white"
               href="/"
               aria-current="page"
             >
-              <div className="hidden md:inline-block h-6 w-0.5 bg-midnight-primary absolute right-0"></div>
-              <div className="flex items-center justify-center mr-2">
+              <div className="bg-midnight-primary absolute right-0 hidden h-6 w-0.5 md:inline-block"></div>
+              <div className="mr-2 flex items-center justify-center">
                 <FontAwesomeIcon icon={faRotate} />
               </div>
               <span className="truncate">Staking</span>
@@ -56,10 +56,10 @@ export default function Sidebar() {
 
             <Link
               id="sidebar-item-Watchlist"
-              className="relative flex items-center px-4 py-2 text-white group hover:bg-slate-700"
+              className="group relative flex items-center px-4 py-2 text-white hover:bg-slate-700"
               href="/"
             >
-              <div className="flex items-center justify-center mr-2">
+              <div className="mr-2 flex items-center justify-center">
                 <FontAwesomeIcon icon={faStar} />
               </div>
               <span className="truncate">Watchlist</span>
@@ -68,14 +68,14 @@ export default function Sidebar() {
         </nav>
       </div>
 
-      <div className="flex flex-1 mt-3">
+      <div className="mt-3 flex flex-1">
         <div className="w-full">
           <Link
             id="sidebar-item-Settings"
-            className="relative flex items-center px-4 py-2 text-white group hover:bg-slate-700"
+            className="group relative flex items-center px-4 py-2 text-white hover:bg-slate-700"
             href="/"
           >
-            <div className="flex items-center justify-center mr-2">
+            <div className="mr-2 flex items-center justify-center">
               <FontAwesomeIcon icon={faGear} />
             </div>
             <span className="truncate">Settings</span>
@@ -85,12 +85,12 @@ export default function Sidebar() {
 
       <div className="mb-8 space-y-6">
         <div>
-          <div className="w-full mt-3">
+          <div className="mt-3 w-full">
             <Link
               href="/"
-              className="relative flex items-center px-4 py-2 text-white group hover:bg-slate-700"
+              className="group relative flex items-center px-4 py-2 text-white hover:bg-slate-700"
             >
-              <div className="flex items-center justify-center mr-2">
+              <div className="mr-2 flex items-center justify-center">
                 <FontAwesomeIcon icon={faQuestionCircle} />
               </div>
               <span className="truncate">FAQ</span>
@@ -99,9 +99,9 @@ export default function Sidebar() {
           <div className="mt-3">
             <Link
               href="/"
-              className="relative flex items-center px-4 py-2 text-white group hover:bg-slate-700"
+              className="group relative flex items-center px-4 py-2 text-white hover:bg-slate-700"
             >
-              <div className="flex items-center justify-center mr-2">
+              <div className="mr-2 flex items-center justify-center">
                 <FontAwesomeIcon icon={faMessage} />
               </div>
               <span className="truncate">Contact</span>
@@ -113,7 +113,7 @@ export default function Sidebar() {
       <Link
         id="fork-on-github"
         href="https://github.com/swing-xyz/examples"
-        className="flex items-center px-6 py-4 -mb-5 space-x-2 text-white border-t cursor-pointer border-slate-700 hover:bg-slate-700"
+        className="-mb-5 flex cursor-pointer items-center space-x-2 border-t border-slate-700 px-6 py-4 text-white hover:bg-slate-700"
         target={"_blank"}
       >
         <FontAwesomeIcon size="lg" icon={faGithub} />
diff --git a/examples/staking-sdk-nextjs/src/components/Stake.tsx b/examples/staking-sdk-nextjs/src/components/Stake.tsx
index 72ad415..8a0e73a 100644
--- a/examples/staking-sdk-nextjs/src/components/Stake.tsx
+++ b/examples/staking-sdk-nextjs/src/components/Stake.tsx
@@ -95,7 +95,7 @@ export function Stake() {
   }
 
   return (
-    <div className="container grid gap-4 pt-5 pb-20">
+    <div className="container grid gap-4 pb-20 pt-5">
       <div className="grid grid-cols-5">
         <div>Provider</div>
         <div>Chain</div>
@@ -169,7 +169,7 @@ export function Stake() {
         <DialogContent className="max-w-4xl">
           <DialogHeader>
             {transferParams ? (
-              <DialogTitle className="flex items-center gap-4 mb-8">
+              <DialogTitle className="mb-8 flex items-center gap-4">
                 <div>Stake</div>
 
                 <NameLogo
@@ -198,7 +198,7 @@ export function Stake() {
           </DialogHeader>
 
           {quote?.routes.length ? (
-            <div className="grid items-center grid-cols-[minmax(50px,_100px)_2fr_3fr_3fr_160px] gap-4">
+            <div className="grid grid-cols-[minmax(50px,_100px)_2fr_3fr_3fr_160px] items-center gap-4">
               <div>Provider</div>
               <div>Fees</div>
               <div>Gas</div>
@@ -274,7 +274,7 @@ export function Stake() {
                 <label className="block text-sm font-medium text-gray-700">
                   Error
                 </label>{" "}
-                <div className="text-red-500 capitalize">{error}</div>
+                <div className="capitalize text-red-500">{error}</div>
               </div>
             ) : null}
           </div>
@@ -287,7 +287,7 @@ export function Stake() {
 function NameLogo({ logo, name }: { logo?: string; name: string }) {
   return (
     <div className="flex items-center gap-2">
-      <Avatar className="w-5 h-5">
+      <Avatar className="h-5 w-5">
         <AvatarImage src={logo} alt={name} />
         <AvatarFallback>{name.slice(0, 1)}</AvatarFallback>
       </Avatar>
diff --git a/examples/staking-sdk-nextjs/src/components/ui/avatar.tsx b/examples/staking-sdk-nextjs/src/components/ui/avatar.tsx
index fb920f2..bf0d581 100644
--- a/examples/staking-sdk-nextjs/src/components/ui/avatar.tsx
+++ b/examples/staking-sdk-nextjs/src/components/ui/avatar.tsx
@@ -39,7 +39,7 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      "bg-muted flex h-full w-full items-center justify-center rounded-full",
       className,
     )}
     {...props}
diff --git a/examples/staking-sdk-nextjs/src/components/ui/dialog.tsx b/examples/staking-sdk-nextjs/src/components/ui/dialog.tsx
index 5277ff7..d07d0a3 100644
--- a/examples/staking-sdk-nextjs/src/components/ui/dialog.tsx
+++ b/examples/staking-sdk-nextjs/src/components/ui/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm",
       className,
     )}
     {...props}
@@ -38,13 +38,13 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+        "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full",
         className,
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -102,7 +102,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-muted-foreground text-sm", className)}
     {...props}
   />
 ));
diff --git a/examples/staking-widget-nextjs/src/app/layout.tsx b/examples/staking-widget-nextjs/src/app/layout.tsx
index ed7150c..a63e648 100644
--- a/examples/staking-widget-nextjs/src/app/layout.tsx
+++ b/examples/staking-widget-nextjs/src/app/layout.tsx
@@ -6,7 +6,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     <html lang="en" suppressHydrationWarning>
       <head />
 
-      <body className="relative flex max-h-screen min-h-full text-white bg-slate-900">
+      <body className="relative flex max-h-screen min-h-full bg-slate-900 text-white">
         {children}
       </body>
     </html>
diff --git a/examples/staking-widget-nextjs/src/app/page.tsx b/examples/staking-widget-nextjs/src/app/page.tsx
index dfe24e9..a4fe4cc 100644
--- a/examples/staking-widget-nextjs/src/app/page.tsx
+++ b/examples/staking-widget-nextjs/src/app/page.tsx
@@ -15,8 +15,8 @@ export default function StakePage() {
     <Provider>
       <Sidebar />
 
-      <main className="container relative flex flex-col w-full min-h-screen overflow-y-auto">
-        <div className="flex justify-end p-6 space-x-4">
+      <main className="container relative flex min-h-screen w-full flex-col overflow-y-auto">
+        <div className="flex justify-end space-x-4 p-6">
           <ConnectWallet />
 
           <Button className="space-x-2" variant="outline" asChild>
@@ -30,7 +30,7 @@ export default function StakePage() {
           </Button>
         </div>
 
-        <div className="flex items-center justify-center h-full">
+        <div className="flex h-full items-center justify-center">
           <Stake
             title="Stake with MetaWallet"
             projectId="example-staking-widget-nextjs"
diff --git a/examples/staking-widget-nextjs/src/components/Sidebar.tsx b/examples/staking-widget-nextjs/src/components/Sidebar.tsx
index 9969d66..e6e2d6d 100644
--- a/examples/staking-widget-nextjs/src/components/Sidebar.tsx
+++ b/examples/staking-widget-nextjs/src/components/Sidebar.tsx
@@ -15,13 +15,13 @@ import Link from "next/link";
 
 export default function Sidebar() {
   return (
-    <aside className="relative hidden h-screen py-5 pt-8 transition-all duration-700 ease-in-out group md:flex md:flex-col bg-slate-800 md:w-40 lg:w-52">
+    <aside className="group relative hidden h-screen bg-slate-800 py-5 pt-8 transition-all duration-700 ease-in-out md:flex md:w-40 md:flex-col lg:w-52">
       <Link
         id="sidebar-item-Home"
-        className="relative flex items-center px-4 py-2 text-orange-300 group hover:bg-slate-700"
+        className="group relative flex items-center px-4 py-2 text-orange-300 hover:bg-slate-700"
         href="/"
       >
-        <div className="flex items-center justify-center mr-2 text-orange-500">
+        <div className="mr-2 flex items-center justify-center text-orange-500">
           <FontAwesomeIcon icon={faOtter} />
         </div>
         <span className="truncate">MetaWallet</span>
@@ -32,10 +32,10 @@ export default function Sidebar() {
           <div className="space-y-3">
             <Link
               id="sidebar-item-Portfolio"
-              className="relative flex items-center px-4 py-2 text-white group hover:bg-slate-700"
+              className="group relative flex items-center px-4 py-2 text-white hover:bg-slate-700"
               href="/"
             >
-              <div className="flex items-center justify-center mr-2">
+              <div className="mr-2 flex items-center justify-center">
                 <FontAwesomeIcon icon={faLineChart} />
               </div>
               <span className="truncate">Portfolio</span>
@@ -43,12 +43,12 @@ export default function Sidebar() {
 
             <Link
               id="sidebar-item-Swap"
-              className="relative flex items-center px-4 py-2 font-semibold group bg-slate-700 text-midnight-primary dark:text-white"
+              className="text-midnight-primary group relative flex items-center bg-slate-700 px-4 py-2 font-semibold dark:text-white"
               href="/"
               aria-current="page"
             >
-              <div className="hidden md:inline-block h-6 w-0.5 bg-midnight-primary absolute right-0"></div>
-              <div className="flex items-center justify-center mr-2">
+              <div className="bg-midnight-primary absolute right-0 hidden h-6 w-0.5 md:inline-block"></div>
+              <div className="mr-2 flex items-center justify-center">
                 <FontAwesomeIcon icon={faRotate} />
               </div>
               <span className="truncate">Staking</span>
@@ -56,10 +56,10 @@ export default function Sidebar() {
 
             <Link
               id="sidebar-item-Watchlist"
-              className="relative flex items-center px-4 py-2 text-white group hover:bg-slate-700"
+              className="group relative flex items-center px-4 py-2 text-white hover:bg-slate-700"
               href="/"
             >
-              <div className="flex items-center justify-center mr-2">
+              <div className="mr-2 flex items-center justify-center">
                 <FontAwesomeIcon icon={faStar} />
               </div>
               <span className="truncate">Watchlist</span>
@@ -68,14 +68,14 @@ export default function Sidebar() {
         </nav>
       </div>
 
-      <div className="flex flex-1 mt-3">
+      <div className="mt-3 flex flex-1">
         <div className="w-full">
           <Link
             id="sidebar-item-Settings"
-            className="relative flex items-center px-4 py-2 text-white group hover:bg-slate-700"
+            className="group relative flex items-center px-4 py-2 text-white hover:bg-slate-700"
             href="/"
           >
-            <div className="flex items-center justify-center mr-2">
+            <div className="mr-2 flex items-center justify-center">
               <FontAwesomeIcon icon={faGear} />
             </div>
             <span className="truncate">Settings</span>
@@ -85,12 +85,12 @@ export default function Sidebar() {
 
       <div className="mb-8 space-y-6">
         <div>
-          <div className="w-full mt-3">
+          <div className="mt-3 w-full">
             <Link
               href="/"
-              className="relative flex items-center px-4 py-2 text-white group hover:bg-slate-700"
+              className="group relative flex items-center px-4 py-2 text-white hover:bg-slate-700"
             >
-              <div className="flex items-center justify-center mr-2">
+              <div className="mr-2 flex items-center justify-center">
                 <FontAwesomeIcon icon={faQuestionCircle} />
               </div>
               <span className="truncate">FAQ</span>
@@ -99,9 +99,9 @@ export default function Sidebar() {
           <div className="mt-3">
             <Link
               href="/"
-              className="relative flex items-center px-4 py-2 text-white group hover:bg-slate-700"
+              className="group relative flex items-center px-4 py-2 text-white hover:bg-slate-700"
             >
-              <div className="flex items-center justify-center mr-2">
+              <div className="mr-2 flex items-center justify-center">
                 <FontAwesomeIcon icon={faMessage} />
               </div>
               <span className="truncate">Contact</span>
@@ -113,7 +113,7 @@ export default function Sidebar() {
       <Link
         id="fork-on-github"
         href="https://github.com/swing-xyz/examples"
-        className="flex items-center px-6 py-4 -mb-5 space-x-2 text-white border-t cursor-pointer border-slate-700 hover:bg-slate-700"
+        className="-mb-5 flex cursor-pointer items-center space-x-2 border-t border-slate-700 px-6 py-4 text-white hover:bg-slate-700"
         target={"_blank"}
       >
         <FontAwesomeIcon size="lg" icon={faGithub} />
diff --git a/examples/staking-widget-nextjs/src/components/ui/avatar.tsx b/examples/staking-widget-nextjs/src/components/ui/avatar.tsx
index fb920f2..bf0d581 100644
--- a/examples/staking-widget-nextjs/src/components/ui/avatar.tsx
+++ b/examples/staking-widget-nextjs/src/components/ui/avatar.tsx
@@ -39,7 +39,7 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      "bg-muted flex h-full w-full items-center justify-center rounded-full",
       className,
     )}
     {...props}
diff --git a/examples/staking-widget-nextjs/src/components/ui/dialog.tsx b/examples/staking-widget-nextjs/src/components/ui/dialog.tsx
index 5277ff7..d07d0a3 100644
--- a/examples/staking-widget-nextjs/src/components/ui/dialog.tsx
+++ b/examples/staking-widget-nextjs/src/components/ui/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm",
       className,
     )}
     {...props}
@@ -38,13 +38,13 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+        "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full",
         className,
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -102,7 +102,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-muted-foreground text-sm", className)}
     {...props}
   />
 ));
diff --git a/examples/swaps-api-nextjs-bitcoin/src/components/Swap.tsx b/examples/swaps-api-nextjs-bitcoin/src/components/Swap.tsx
index 33202ea..1204a7d 100644
--- a/examples/swaps-api-nextjs-bitcoin/src/components/Swap.tsx
+++ b/examples/swaps-api-nextjs-bitcoin/src/components/Swap.tsx
@@ -113,15 +113,15 @@ const Swap = () => {
   }, [recipientAddress]);
 
   useEffect(() => {
-    if(!xDefiConfig?.isInstalled!()) {
-      console.log('not installed')
+    if (!xDefiConfig?.isInstalled!()) {
+      console.log("not installed");
       toast({
         variant: "destructive",
         title: "xDefi Wallet not installed",
         description: "Please install xDefi wallet in your browser",
       });
     }
-  }, [])
+  }, []);
 
   async function connectWallet(chainId?: number) {
     try {
@@ -147,20 +147,21 @@ const Swap = () => {
     }
   }
 
-  async function getTransStatus(transId: string, txHash: string): Promise<TransactionStatusAPIResponse> {
+  async function getTransStatus(
+    transId: string,
+    txHash: string,
+  ): Promise<TransactionStatusAPIResponse> {
     try {
-
       const transactionStatus = await getTransationStatus({
         id: transId,
         txHash,
       });
-  
+
       setTransStatus(transactionStatus);
-  
-      return transactionStatus!;
-    } catch(e) {
 
-      return { status: 'Submitted' }
+      return transactionStatus!;
+    } catch (e) {
+      return { status: "Submitted" };
     }
   }
 
@@ -214,7 +215,6 @@ const Swap = () => {
     try {
       // Get a quote from the Swing API
       const quotes = await getQuoteRequest({
-
         fromChain: transferParams.fromChain,
         fromTokenAddress: transferParams.fromTokenAddress,
         fromUserAddress: transferParams.fromUserAddress,
@@ -312,13 +312,13 @@ const Swap = () => {
 
       let txResponse;
 
-      if (transfer?.tx.meta) { 
+      if (transfer?.tx.meta) {
         // For Bitcoin to ETH, the send endpoint will return an object called `meta`
-        
+
         const { from, recipient, amount, memo } = transfer.tx.meta;
 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (window.xfi as any)?.bitcoin.request( 
+        (window.xfi as any)?.bitcoin.request(
           // Here, we're prompting a users wallet using xDEFI injected SDK
           {
             method: "transfer",
@@ -335,20 +335,20 @@ const Swap = () => {
           (error: any, result: any) => {
             console.log(error, result);
 
-            if(error) {
+            if (error) {
               toast({
                 variant: "destructive",
                 title: "Something went wrong!",
                 description:
                   "Swap error, please check your balance or swap config",
               });
-        
+
               setIsLoading(false);
-              setTransStatus(null)
+              setTransStatus(null);
             }
-            txResponse = result
+            txResponse = result;
             pollTransactionStatus(transfer.id.toString(), txResponse);
-            console.log(txResponse)
+            console.log(txResponse);
           },
         );
       } else {
@@ -357,7 +357,6 @@ const Swap = () => {
         const receipt = await txResponse?.wait();
         console.log("Transaction receipt:", receipt);
       }
-      
 
       // Wait for the transaction to be mined
     } catch (error) {
@@ -377,20 +376,20 @@ const Swap = () => {
   }
 
   return (
-    <div className="flex flex-col gap-y-4 lg:w-auto w-full px-5 py-7 bg-cyan-400 rounded-2xl border-8 border-cyan-200">
-      <div className="w-full flex flex-col sm:flex-row justify-center gap-3">
-        <div className="flex flex-col sm:flex-row lg:w-auto w-full items-center space-x-2 flex-2">
+    <div className="flex w-full flex-col gap-y-4 rounded-2xl border-8 border-cyan-200 bg-cyan-400 px-5 py-7 lg:w-auto">
+      <div className="flex w-full flex-col justify-center gap-3 sm:flex-row">
+        <div className="flex-2 flex w-full flex-col items-center space-x-2 sm:flex-row lg:w-auto">
           <div className="flex w-full">
-            <div className="w-full border-8 border-cyan-500 space-y-1 rounded-xl bg-zinc-900 p-3">
-              <div className="flex justify-between items-center">
+            <div className="w-full space-y-1 rounded-xl border-8 border-cyan-500 bg-zinc-900 p-3">
+              <div className="flex items-center justify-between">
                 <div className="flex flex-col">
                   <h4 className="w-full text-[11px] font-bold text-zinc-300">
                     Send
                   </h4>
-                  <div className="flex justify-between items-center">
+                  <div className="flex items-center justify-between">
                     <input
                       aria-label="deposit"
-                      className="border-none text-white w-full h-auto bg-transparent focus:border-none focus:ring-0 placeholder:m-0 placeholder:p-0 placeholder:text-lg p-0 m-0"
+                      className="m-0 h-auto w-full border-none bg-transparent p-0 text-white placeholder:m-0 placeholder:p-0 placeholder:text-lg focus:border-none focus:ring-0"
                       placeholder={"0"}
                       defaultValue={transferParams.tokenAmount}
                       ref={sendInputRef}
@@ -411,35 +410,38 @@ const Swap = () => {
                   </div>
                   <img
                     src={transferParams.fromTokenIconUrl}
-                    className="w-6 h-6"
+                    className="h-6 w-6"
                   />
                 </div>
               </div>
             </div>
           </div>
-          <div className="p-1 bg-zinc-200 rounded-2xl">
-            <LiaExchangeAltSolid className="rounded-2xl w-8 h-8 font-bold text-zinc-400 cursor-pointer hover:text-zinc-950 transition-colors ease-in-out" onClick={() => switchTransferParams()} />
+          <div className="rounded-2xl bg-zinc-200 p-1">
+            <LiaExchangeAltSolid
+              className="h-8 w-8 cursor-pointer rounded-2xl font-bold text-zinc-400 transition-colors ease-in-out hover:text-zinc-950"
+              onClick={() => switchTransferParams()}
+            />
           </div>
           <div className="flex w-full">
-            <div className="lg:w-auto w-full border-8 border-cyan-500 space-y-1 rounded-xl bg-zinc-900 p-3">
-              <div className="flex justify-between items-center">
+            <div className="w-full space-y-1 rounded-xl border-8 border-cyan-500 bg-zinc-900 p-3 lg:w-auto">
+              <div className="flex items-center justify-between">
                 <div className="flex items-center gap-3">
                   <img
                     src={transferParams.toTokenIconUrl}
-                    className="w-6 h-6"
+                    className="h-6 w-6"
                   />
                   <div className="text-sm text-white">
                     {transferParams.toChain}
                   </div>
                 </div>
                 <div className="flex flex-col">
-                  <h4 className="w-full text-[11px] font-bold text-zinc-300 text-right">
+                  <h4 className="w-full text-right text-[11px] font-bold text-zinc-300">
                     You get
                   </h4>
-                  <div className="flex justify-between items-center">
+                  <div className="flex items-center justify-between">
                     <input
                       aria-label="receive"
-                      className="border-none text-white text-right w-full h-auto bg-transparent focus:border-none focus:ring-0 placeholder:m-0 placeholder:p-0 placeholder:text-lg p-0 m-0"
+                      className="m-0 h-auto w-full border-none bg-transparent p-0 text-right text-white placeholder:m-0 placeholder:p-0 placeholder:text-lg focus:border-none focus:ring-0"
                       placeholder={"0"}
                       value={
                         convertWeiToEth(
@@ -468,16 +470,16 @@ const Swap = () => {
             {transferRoute ? (
               <Popover defaultOpen={false}>
                 <PopoverTrigger
-                  className="justify-center rounded-2xl py-2 px-3 text-sm font-semibold 
-                                            outline-2 outline-offset-2 transition-colors text-white hover:bg-gray-900
-                                            flex items-center cursor-pointer bg-zinc-600 
+                  className="flex cursor-pointer items-center justify-center rounded-2xl bg-zinc-600 
+                                            px-3 py-2 text-sm font-semibold text-white
+                                            outline-2 outline-offset-2 transition-colors hover:bg-gray-900 
                                             active:bg-gray-800 active:text-white/80"
                 >
                   {transStatus?.status ? "View Transaction" : "Start Transfer"}
                 </PopoverTrigger>
-                <PopoverContent className="rounded-2xl min-w-[300px]">
+                <PopoverContent className="min-w-[300px] rounded-2xl">
                   <div className="space-y-2">
-                    <div className="flex flex-col space-y-4 text-sm text-muted-foreground">
+                    <div className="text-muted-foreground flex flex-col space-y-4 text-sm">
                       <Label htmlFor="width" className="text-zinc-700">
                         Enter your {transferParams.toChain} wallet address
                       </Label>
@@ -494,7 +496,7 @@ const Swap = () => {
                         }}
                       />
                       {transStatus ? (
-                        <div className="flex flex-col w-full min-h-[30px] bg-zinc-700 text-white p-2 rounded">
+                        <div className="flex min-h-[30px] w-full flex-col rounded bg-zinc-700 p-2 text-white">
                           <h4 className="text-md">Transaction Processing</h4>
                           <div className="flex items-center text-zinc-200">
                             {transStatus.status}{" "}
@@ -514,7 +516,7 @@ const Swap = () => {
                       )}
                       <Button
                         className={clsx(
-                          "flex items-center cursor-pointer bg-zinc-600 rounded-xl",
+                          "flex cursor-pointer items-center rounded-xl bg-zinc-600",
                           {
                             "opacity-60": isLoading,
                           },
@@ -538,7 +540,7 @@ const Swap = () => {
             ) : (
               <Button
                 className={clsx(
-                  "flex items-center cursor-pointer bg-zinc-600 sm:rounded",
+                  "flex cursor-pointer items-center bg-zinc-600 sm:rounded",
                   {
                     "opacity-60": isLoading,
                   },
@@ -555,7 +557,7 @@ const Swap = () => {
           </>
         ) : (
           <Button
-            className={clsx("flex items-center cursor-pointer sm:rounded", {
+            className={clsx("flex cursor-pointer items-center sm:rounded", {
               "opacity-60": isLoading,
             })}
             disabled={isLoading}
@@ -565,9 +567,9 @@ const Swap = () => {
           </Button>
         )}
       </div>
-      <div className="flex bg-black min-w-full rounded-xl m-h-[20px] p-3 border-8 border-cyan-500">
-        <div className="w-full flex flex-col sm:flex-row justify-between items-center gap-4">
-          <div className="w-full bg-zinc-700 p-2 rounded">
+      <div className="m-h-[20px] flex min-w-full rounded-xl border-8 border-cyan-500 bg-black p-3">
+        <div className="flex w-full flex-col items-center justify-between gap-4 sm:flex-row">
+          <div className="w-full rounded bg-zinc-700 p-2">
             <label className="block text-xs font-medium text-zinc-200">
               From
             </label>
@@ -576,7 +578,7 @@ const Swap = () => {
             </div>
           </div>
 
-          <div className="w-full bg-zinc-700 p-2 rounded">
+          <div className="w-full rounded bg-zinc-700 p-2">
             <label className="block text-xs font-medium text-zinc-200">
               To
             </label>
@@ -585,7 +587,7 @@ const Swap = () => {
             </div>
           </div>
 
-          <div className="w-full bg-zinc-700 p-2 rounded">
+          <div className="w-full rounded bg-zinc-700 p-2">
             <label className="block text-xs font-medium text-zinc-200">
               Gas Fee
             </label>
@@ -594,7 +596,7 @@ const Swap = () => {
             </div>
           </div>
 
-          <div className="w-full bg-zinc-700 p-2 rounded">
+          <div className="w-full rounded bg-zinc-700 p-2">
             <label className="block text-xs font-medium text-zinc-200">
               Total
             </label>
diff --git a/examples/swaps-api-nextjs-bitcoin/src/components/ui/Footer.tsx b/examples/swaps-api-nextjs-bitcoin/src/components/ui/Footer.tsx
index 0d05aa9..acd467a 100644
--- a/examples/swaps-api-nextjs-bitcoin/src/components/ui/Footer.tsx
+++ b/examples/swaps-api-nextjs-bitcoin/src/components/ui/Footer.tsx
@@ -6,7 +6,7 @@ export function Footer() {
   return (
     <footer>
       <Container>
-        <div className="flex justify-center items-center pt-8 pb-12 md:pt-6">
+        <div className="flex items-center justify-center pb-12 pt-8 md:pt-6">
           <p className="mt-6 text-sm text-gray-500 md:mt-0">
             &copy; Copyright {new Date().getFullYear()}. All rights reserved.
           </p>
diff --git a/examples/swaps-api-nextjs-bitcoin/src/components/ui/Header.tsx b/examples/swaps-api-nextjs-bitcoin/src/components/ui/Header.tsx
index 2a310ee..59a6c73 100644
--- a/examples/swaps-api-nextjs-bitcoin/src/components/ui/Header.tsx
+++ b/examples/swaps-api-nextjs-bitcoin/src/components/ui/Header.tsx
@@ -69,7 +69,7 @@ export function Header() {
   return (
     <header>
       <nav>
-        <Container className="relative z-50 flex justify-between items-center py-8">
+        <Container className="relative z-50 flex items-center justify-between py-8">
           <div className="relative z-10 flex items-center gap-16">
             <Link href="/" aria-label="Home" className="text-2xl">
               BitZa<span className="text-cyan-500">pp</span>er
@@ -88,9 +88,9 @@ export function Header() {
                   >
                     {({ open }) =>
                       open ? (
-                        <ChevronUpIcon className="w-6 h-6" />
+                        <ChevronUpIcon className="h-6 w-6" />
                       ) : (
-                        <MenuIcon className="w-6 h-6" />
+                        <MenuIcon className="h-6 w-6" />
                       )
                     }
                   </Popover.Button>
@@ -115,7 +115,7 @@ export function Header() {
                             y: -32,
                             transition: { duration: 0.2 },
                           }}
-                          className="absolute inset-x-0 top-0 z-0 px-6 pt-32 pb-6 origin-top shadow-2xl rounded-b-2xl bg-gray-50 shadow-gray-900/20"
+                          className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-gray-50 px-6 pb-6 pt-32 shadow-2xl shadow-gray-900/20"
                         >
                           <div className="space-y-4">
                             <MobileNavLink href="#">Swap</MobileNavLink>
@@ -123,7 +123,7 @@ export function Header() {
                             <MobileNavLink href="#">Docs</MobileNavLink>
                           </div>
 
-                          <div className="flex flex-col mt-4 space-y-4">
+                          <div className="mt-4 flex flex-col space-y-4">
                             <Button
                               href="https://github.com/swing-xyz/examples/tree/main/examples/swaps-api-nextjs-bitcoin"
                               className="space-x-2"
diff --git a/examples/swaps-api-nextjs-bitcoin/src/components/ui/Hero.tsx b/examples/swaps-api-nextjs-bitcoin/src/components/ui/Hero.tsx
index 6982f3e..601da58 100644
--- a/examples/swaps-api-nextjs-bitcoin/src/components/ui/Hero.tsx
+++ b/examples/swaps-api-nextjs-bitcoin/src/components/ui/Hero.tsx
@@ -14,34 +14,34 @@ import clsx from "clsx";
 
 export function Hero() {
   return (
-    <div className="w-full py-20 overflow-hidden sm:py-32 lg:pb-32 xl:pb-36">
-      <Container className="flex flex-col gap-16 w-full">
-        <div className="w-full flex flex-col lg:gap-x-8 lg:gap-y-20">
-          <div className="flex flex-col justify-center items-center relative z-10 mx-auto">
-            <h1 className="text-4xl text-center font-medium tracking-tight text-gray-900">
+    <div className="w-full overflow-hidden py-20 sm:py-32 lg:pb-32 xl:pb-36">
+      <Container className="flex w-full flex-col gap-16">
+        <div className="flex w-full flex-col lg:gap-x-8 lg:gap-y-20">
+          <div className="relative z-10 mx-auto flex flex-col items-center justify-center">
+            <h1 className="text-center text-4xl font-medium tracking-tight text-gray-900">
               <div>
                 ETH to BTC Crypto{" "}
                 <span className="text-cyan-500">Exchange</span>
               </div>
             </h1>
-            <p className="mt-6 text-lg text-center text-gray-600 w-[60%]">
+            <p className="mt-6 w-[60%] text-center text-lg text-gray-600">
               This example demonstrates how you can perform a cross-chain swap
               between the Ethereum and Bitcoin blockchains (ETH to BTC)
             </p>
           </div>
 
-          <div className="flex justify-center items-center">
+          <div className="flex items-center justify-center">
             <SwapSDK />
           </div>
         </div>
 
         <div className="w-full">
-          <p className="text-sm font-semibold text-center text-gray-900">
+          <p className="text-center text-sm font-semibold text-gray-900">
             Trusted By
           </p>
           <ul
             role="list"
-            className="flex flex-wrap justify-center max-w-xl mx-auto mt-8 gap-x-10 gap-y-8"
+            className="mx-auto mt-8 flex max-w-xl flex-wrap justify-center gap-x-10 gap-y-8"
           >
             {[
               ["Forbes", logoForbes],
diff --git a/examples/swaps-api-nextjs-bitcoin/src/components/ui/NavLinks.tsx b/examples/swaps-api-nextjs-bitcoin/src/components/ui/NavLinks.tsx
index 7270368..58340f6 100644
--- a/examples/swaps-api-nextjs-bitcoin/src/components/ui/NavLinks.tsx
+++ b/examples/swaps-api-nextjs-bitcoin/src/components/ui/NavLinks.tsx
@@ -15,14 +15,14 @@ export function NavLinks() {
         <Link
           key={label}
           href={href!}
-          className="relative -my-2 -mx-3 rounded-lg px-3 py-2 text-sm text-gray-700 transition-colors delay-150 hover:text-gray-900 hover:delay-[0ms]"
+          className="relative -mx-3 -my-2 rounded-lg px-3 py-2 text-sm text-gray-700 transition-colors delay-150 hover:text-gray-900 hover:delay-[0ms]"
           onMouseEnter={() => setHoveredIndex(index)}
           onMouseLeave={() => setHoveredIndex(null)}
         >
           <AnimatePresence>
             {hoveredIndex === index && (
               <motion.span
-                className="absolute inset-0 bg-gray-100 rounded-lg"
+                className="absolute inset-0 rounded-lg bg-gray-100"
                 layoutId="hoverBackground"
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1, transition: { duration: 0.15 } }}
diff --git a/examples/swaps-api-nextjs-bitcoin/src/components/ui/popover.tsx b/examples/swaps-api-nextjs-bitcoin/src/components/ui/popover.tsx
index 640adb7..efbc6cf 100644
--- a/examples/swaps-api-nextjs-bitcoin/src/components/ui/popover.tsx
+++ b/examples/swaps-api-nextjs-bitcoin/src/components/ui/popover.tsx
@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border border-zinc-200 bg-white p-4 text-zinc-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border border-zinc-200 bg-white p-4 text-zinc-950 shadow-md outline-none dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
         className,
       )}
       {...props}
diff --git a/examples/swaps-api-nextjs-solana/package.json b/examples/swaps-api-nextjs-solana/package.json
index 43d2795..3ce22e4 100644
--- a/examples/swaps-api-nextjs-solana/package.json
+++ b/examples/swaps-api-nextjs-solana/package.json
@@ -27,7 +27,7 @@
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-toast": "^1.1.5",
     "@solana/web3.js": "^1.91.8",
-    "@swing.xyz/sdk": "^0.54.0",
+    "@swing.xyz/sdk": "^0.60.0",
     "@tailwindcss/forms": "^0.5.7",
     "@thirdweb-dev/react": "^4.4.17",
     "@thirdweb-dev/sdk": "^4.0.44",
diff --git a/examples/swaps-api-nextjs-solana/src/components/Swap.tsx b/examples/swaps-api-nextjs-solana/src/components/Swap.tsx
index 8839fde..28db933 100644
--- a/examples/swaps-api-nextjs-solana/src/components/Swap.tsx
+++ b/examples/swaps-api-nextjs-solana/src/components/Swap.tsx
@@ -562,8 +562,8 @@ const Swap = () => {
   function SelectFromChainPanel() {
     return (
       <div
-        className={clsx("bg-zinc-500 rounded-full", {
-          "hover:bg-gray-900 bg-zinc-500 cursor-pointer p-2":
+        className={clsx("rounded-full bg-zinc-500", {
+          "cursor-pointer bg-zinc-500 p-2 hover:bg-gray-900":
             transferParams.fromChain !== "solana",
         })}
       >
@@ -596,8 +596,8 @@ const Swap = () => {
   function SelectToChainPanel() {
     return (
       <div
-        className={clsx("p-2  rounded-xl", {
-          "bg-zinc-500 hover:bg-gray-900 cursor-pointer":
+        className={clsx("rounded-xl  p-2", {
+          "cursor-pointer bg-zinc-500 hover:bg-gray-900":
             transferParams.toChain !== "solana",
         })}
       >
@@ -631,7 +631,7 @@ const Swap = () => {
     return (
       <div
         className={clsx(
-          "p-2 rounded-xl bg-zinc-500 hover:bg-gray-900 cursor-pointer",
+          "cursor-pointer rounded-xl bg-zinc-500 p-2 hover:bg-gray-900",
         )}
       >
         <SelectTokenPanel
@@ -651,7 +651,7 @@ const Swap = () => {
     return (
       <div
         className={clsx(
-          "p-2  rounded-xl bg-zinc-500 hover:bg-gray-900 cursor-pointer",
+          "cursor-pointer  rounded-xl bg-zinc-500 p-2 hover:bg-gray-900",
         )}
       >
         <SelectTokenPanel
@@ -669,20 +669,20 @@ const Swap = () => {
 
   return (
     <div className="flex flex-col">
-      <div className="flex flex-col xl:flex-row lg:gap-y-2 gap-y-5 justify-between items-center mb-3">
-        <p className="font-bold text-4xl text-gray-200">BRIDGE</p>
+      <div className="mb-3 flex flex-col items-center justify-between gap-y-5 lg:gap-y-2 xl:flex-row">
+        <p className="text-4xl font-bold text-gray-200">BRIDGE</p>
         <div className="flex gap-x-2">
-          <div className="flex gap-x-2 font-bold text-md text-gray-200">
+          <div className="text-md flex gap-x-2 font-bold text-gray-200">
             {!isTransacting ? (
               <div
-                className="justify-center rounded-2xl py-2 px-3 text-sm font-semibold
-                                        outline-2 outline-offset-2 transition-colors text-whit
-                                        flex items-center bg-zinc-600 gap-x-2"
+                className="text-whit flex items-center justify-center gap-x-2 rounded-2xl
+                                        bg-zinc-600 px-3 py-2 text-sm
+                                        font-semibold outline-2 outline-offset-2 transition-colors"
               >
                 <SelectFromChainPanel />
                 <SelectFromTokenPanel />
                 <div
-                  className="group p-1 bg-zinc-500 rounded-full hover:bg-gray-900"
+                  className="group rounded-full bg-zinc-500 p-1 hover:bg-gray-900"
                   onClick={switchTransferParams}
                 >
                   <TbSwitchHorizontal className="size-8 group-hover:cursor-pointer" />
@@ -694,38 +694,38 @@ const Swap = () => {
               </div>
             ) : (
               <div
-                className="group rounded-2xl py-2 px-3 text-sm font-semibold
-                                 outline-2 outline-offset-2 transition-colors text-white hover:bg-gray-900
-                                 flex items-center cursor-pointer bg-zinc-600
-                                 active:bg-gray-800 active:text-white/80 justify-between gap-x-2"
+                className="group flex cursor-pointer items-center justify-between gap-x-2
+                                 rounded-2xl bg-zinc-600 px-3 py-2 text-sm
+                                 font-semibold text-white outline-2 outline-offset-2
+                                 transition-colors hover:bg-gray-900 active:bg-gray-800 active:text-white/80"
               >
                 <span>{transStatus?.status}</span>
-                <span className="w-5 h-5 bg-cyan-400 rounded-full"></span>
+                <span className="h-5 w-5 rounded-full bg-cyan-400"></span>
               </div>
             )}
           </div>
           <TransferHistoryPanel
             userAddress={transferParams.fromUserAddress}
             swingServiceAPI={swingServiceAPI!}
-            className="group rounded-2xl py-2 px-4 text-sm font-semibold hover:cursor-pointer
-                                        outline-2 outline-offset-2 transition-colors text-zinc-400
-                                        flex items-center bg-zinc-600 
-                                        active:bg-gray-800 active:text-zinc-400/80 gap-x-2"
+            className="group flex items-center gap-x-2 rounded-2xl bg-zinc-600 px-4
+                                        py-2 text-sm font-semibold text-zinc-400
+                                        outline-2 outline-offset-2 transition-colors 
+                                        hover:cursor-pointer active:bg-gray-800 active:text-zinc-400/80"
           />
         </div>
       </div>
 
-      <div className="w-full flex flex-col bg-cyan-100 min-h-[20vh] ring-1 ring-cyan-100 space-y-1 rounded-xl  p-3 mb-3">
-        <div className="flex flex-col xl:flex-row lg:gap-y-2 gap-y-5 justify-between items-center mb-3">
+      <div className="mb-3 flex min-h-[20vh] w-full flex-col space-y-1 rounded-xl bg-cyan-100 p-3  ring-1 ring-cyan-100">
+        <div className="mb-3 flex flex-col items-center justify-between gap-y-5 lg:gap-y-2 xl:flex-row">
           <h4 className="text-xl font-bold text-zinc-700">SEND</h4>
-          <div className="flex gap-x-2 font-bold text-md text-gray-200">
+          <div className="text-md flex gap-x-2 font-bold text-gray-200">
             {transferParams.fromChain === "solana" && (
               <>
                 <button
-                  className="group rounded-2xl py-2 px-3 text-sm font-semibold
-                                 outline-2 outline-offset-2 transition-colors text-white hover:bg-gray-900
-                                 flex items-center cursor-pointer bg-zinc-600
-                                 active:bg-gray-800 active:text-white/80 justify-between gap-x-2"
+                  className="group flex cursor-pointer items-center justify-between gap-x-2
+                                 rounded-2xl bg-zinc-600 px-3 py-2 text-sm
+                                 font-semibold text-white outline-2 outline-offset-2
+                                 transition-colors hover:bg-gray-900 active:bg-gray-800 active:text-white/80"
                   onClick={connectToPhantom}
                 >
                   <span>
@@ -733,16 +733,16 @@ const Swap = () => {
                       ? "Connect SOL Wallet"
                       : shortenSolanaAddress(solWalletAddress)}
                   </span>
-                  <span className="w-5 h-5 bg-purple-400 rounded-full"></span>
+                  <span className="h-5 w-5 rounded-full bg-purple-400"></span>
                 </button>
               </>
             )}
           </div>
         </div>
-        <div className="flex grow justify-between items-center">
+        <div className="flex grow items-center justify-between">
           <input
             aria-label="deposit"
-            className="border-none w-[50%] p-2 h-auto bg-transparent focus:border-none focus:ring-0 placeholder:m-0 placeholder:p-0 placeholder:text-4xl m-0 text-4xl"
+            className="m-0 h-auto w-[50%] border-none bg-transparent p-2 text-4xl placeholder:m-0 placeholder:p-0 placeholder:text-4xl focus:border-none focus:ring-0"
             placeholder={"0 " + transferParams.tokenSymbol}
             ref={sendInputRef}
             disabled={!solWalletAddress.length}
@@ -752,7 +752,7 @@ const Swap = () => {
             }}
             type="number"
           />
-          <div className="flex gap-x-1 items-center rounded-xl hover:cursor-pointer">
+          <div className="flex items-center gap-x-1 rounded-xl hover:cursor-pointer">
             <h4 className="w-full text-4xl font-bold text-zinc-700">
               {transferParams.tokenSymbol}
             </h4>
@@ -763,15 +763,15 @@ const Swap = () => {
           </div>
         </div>
 
-        <div className="flex justify-between items-center">
-          <p className="text-xs p-0 m-0 text-zinc-950/[0.6] grow"></p>
+        <div className="flex items-center justify-between">
+          <p className="m-0 grow p-0 text-xs text-zinc-950/[0.6]"></p>
         </div>
       </div>
 
-      <div className="relative w-full p-0 m-0 hidden xl:block">
-        <div className="w-full flex justify-center absolute -top-10">
+      <div className="relative m-0 hidden w-full p-0 xl:block">
+        <div className="absolute -top-10 flex w-full justify-center">
           <div
-            className="bg-slate-100 p-3 rounded-full ring-4 ring-purple-200 text-slate-300 hover:text-slate-900"
+            className="rounded-full bg-slate-100 p-3 text-slate-300 ring-4 ring-purple-200 hover:text-slate-900"
             onClick={switchTransferParams}
           >
             <TbSwitchVertical className="size-10 hover:cursor-pointer" />
@@ -779,16 +779,16 @@ const Swap = () => {
         </div>
       </div>
 
-      <div className="w-full flex flex-col bg-purple-200 min-h-[20vh] ring-1 ring-purple-200 space-y-2 rounded-xl  p-3 mb-3">
-        <div className="flex flex-col xl:flex-row lg:gap-y-2 gap-y-5 justify-between items-center mb-3">
+      <div className="mb-3 flex min-h-[20vh] w-full flex-col space-y-2 rounded-xl bg-purple-200 p-3  ring-1 ring-purple-200">
+        <div className="mb-3 flex flex-col items-center justify-between gap-y-5 lg:gap-y-2 xl:flex-row">
           <h4 className="text-xl font-bold text-zinc-700">RECEIVE</h4>
-          <div className="flex gap-x-2 font-bold text-md text-gray-200">
+          <div className="text-md flex gap-x-2 font-bold text-gray-200">
             {transferParams.toChain === "solana" && (
               <button
-                className="group rounded-2xl py-2 px-3 text-sm font-semibold
-                                 outline-2 outline-offset-2 transition-colors text-white hover:bg-gray-900
-                                 flex items-center cursor-pointer bg-zinc-600
-                                 active:bg-gray-800 active:text-white/80 justify-between gap-x-2"
+                className="group flex cursor-pointer items-center justify-between gap-x-2
+                                 rounded-2xl bg-zinc-600 px-3 py-2 text-sm
+                                 font-semibold text-white outline-2 outline-offset-2
+                                 transition-colors hover:bg-gray-900 active:bg-gray-800 active:text-white/80"
                 onClick={connectToPhantom}
               >
                 <span>
@@ -796,16 +796,16 @@ const Swap = () => {
                     ? "Connect SOL Wallet"
                     : shortenSolanaAddress(solWalletAddress)}
                 </span>
-                <span className="w-5 h-5 bg-purple-400 rounded-full"></span>
+                <span className="h-5 w-5 rounded-full bg-purple-400"></span>
               </button>
             )}
           </div>
         </div>
-        <div className="flex grow justify-between items-center">
+        <div className="flex grow items-center justify-between">
           <input
             aria-label="receive"
             disabled
-            className="border-none w-[50%] h-auto bg-transparent focus:border-none focus:ring-0 placeholder:m-0 placeholder:p-0 placeholder:text-4xl m-0 text-4xl"
+            className="m-0 h-auto w-[50%] border-none bg-transparent text-4xl placeholder:m-0 placeholder:p-0 placeholder:text-4xl focus:border-none focus:ring-0"
             placeholder={"0 SOL"}
             type="number"
             value={
@@ -822,7 +822,7 @@ const Swap = () => {
               }));
             }}
           />
-          <div className="flex gap-x-1 items-center rounded-xl hover:cursor-pointer">
+          <div className="flex items-center gap-x-1 rounded-xl hover:cursor-pointer">
             <h4 className="w-full text-4xl font-bold text-zinc-700">
               {transferParams.toTokenSymbol}
             </h4>
@@ -833,58 +833,58 @@ const Swap = () => {
           </div>
         </div>
 
-        <div className="flex justify-between items-center">
-          <p className="text-md p-0 m-0 text-zinc-950/[0.6]">
+        <div className="flex items-center justify-between">
+          <p className="text-md m-0 p-0 text-zinc-950/[0.6]">
             {formatUSD(transferRoute?.quote?.amountUSD! ?? 0)}
           </p>
         </div>
       </div>
 
-      <div className="grid lg:grid-cols-3 w-full gap-3 min-h-[150px] mb-3">
+      <div className="mb-3 grid min-h-[150px] w-full gap-3 lg:grid-cols-3">
         <div
           className={clsx(
-            "flex flex-col grow bg-pink-300 rounded-xl p-3 transition-all ease-in-out",
+            "flex grow flex-col rounded-xl bg-pink-300 p-3 transition-all ease-in-out",
             {
-              "hover:bg-pink-200 hover:cursor-pointer": !transferRoute,
+              "hover:cursor-pointer hover:bg-pink-200": !transferRoute,
             },
           )}
         >
-          <h4 className={clsx("w-full font-bold text-zinc-700 grow")}>
+          <h4 className={clsx("w-full grow font-bold text-zinc-700")}>
             BEST ROUTE
           </h4>
           {!transferRoute ? (
-            <div className="font-medium text-xl">NO ROUTE FOUND</div>
+            <div className="text-xl font-medium">NO ROUTE FOUND</div>
           ) : (
-            <div className="font-medium text-xl">
+            <div className="text-xl font-medium">
               {transferRoute.quote.integration.toUpperCase()}
             </div>
           )}
         </div>
         <div
           className={clsx(
-            "flex flex-col grow bg-zinc-300 rounded-xl p-3 transition-all ease-in-out",
+            "flex grow flex-col rounded-xl bg-zinc-300 p-3 transition-all ease-in-out",
           )}
         >
-          <h4 className={clsx("w-full font-bold text-zinc-700 grow")}>
+          <h4 className={clsx("w-full grow font-bold text-zinc-700")}>
             GAS FEE
           </h4>
-          <div className="font-medium text-xl">
+          <div className="text-xl font-medium">
             {formatUSD(transferRoute?.gasUSD! ?? 0)}
           </div>
         </div>
         <div
           className={clsx(
-            "flex flex-col grow bg-cyan-200 rounded-xl p-3 transition-all ease-in-out",
+            "flex grow flex-col rounded-xl bg-cyan-200 p-3 transition-all ease-in-out",
           )}
         >
-          <h4 className={clsx("w-full font-bold text-zinc-700 grow")}>TOTAL</h4>
-          <div className="font-medium text-xl">
+          <h4 className={clsx("w-full grow font-bold text-zinc-700")}>TOTAL</h4>
+          <div className="text-xl font-medium">
             {formatUSD(transferRoute?.quote?.amountUSD! ?? 0)}
           </div>
         </div>
       </div>
 
-      <div className="flex justify-between w-full gap-3 min-h-[150px]">
+      <div className="flex min-h-[150px] w-full justify-between gap-3">
         <button
           disabled={
             (connectionStatus === "connected" && isLoading) ||
@@ -892,7 +892,7 @@ const Swap = () => {
             (connectionStatus === "connected" && !transferRoute)
           }
           className={clsx(
-            "flex flex-col justify-center grow rounded-xl p-3 bg-zinc-300 transition-all ease-in-out hover:cursor-pointer",
+            "flex grow flex-col justify-center rounded-xl bg-zinc-300 p-3 transition-all ease-in-out hover:cursor-pointer",
             {
               "hover:bg-blue-200":
                 connectionStatus === "connected" && transferRoute,
diff --git a/examples/swaps-api-nextjs-solana/src/components/ui/Backdrop.tsx b/examples/swaps-api-nextjs-solana/src/components/ui/Backdrop.tsx
index 88c8785..6268dfd 100644
--- a/examples/swaps-api-nextjs-solana/src/components/ui/Backdrop.tsx
+++ b/examples/swaps-api-nextjs-solana/src/components/ui/Backdrop.tsx
@@ -1,7 +1,7 @@
 export const Backdrop = () => {
   return (
-    <div className="w-full h-full absolute inset-0 flex justify-center items-center -z-10">
-      <div className="w-[30%] h-[30%] bg-purple-500 rounded-full blur-[190px] -z-10"></div>
+    <div className="absolute inset-0 -z-10 flex h-full w-full items-center justify-center">
+      <div className="-z-10 h-[30%] w-[30%] rounded-full bg-purple-500 blur-[190px]"></div>
     </div>
   );
 };
diff --git a/examples/swaps-api-nextjs-solana/src/components/ui/ChainTokenItem.tsx b/examples/swaps-api-nextjs-solana/src/components/ui/ChainTokenItem.tsx
index 9154280..e06ed75 100644
--- a/examples/swaps-api-nextjs-solana/src/components/ui/ChainTokenItem.tsx
+++ b/examples/swaps-api-nextjs-solana/src/components/ui/ChainTokenItem.tsx
@@ -8,10 +8,10 @@ export const ChainTokenItem = ({
   onItemSelect?: () => void | undefined;
 }) => (
   <div
-    className="flex justify-between p-3 hover:bg-zinc-300 hover:cursor-pointer rounded-xl"
+    className="flex justify-between rounded-xl p-3 hover:cursor-pointer hover:bg-zinc-300"
     onClick={() => onItemSelect?.()}
   >
-    <img src={logo} alt={name} className="w-8 h-8 rounded-full" />
+    <img src={logo} alt={name} className="h-8 w-8 rounded-full" />
     <span className="">{name}</span>
   </div>
 );
diff --git a/examples/swaps-api-nextjs-solana/src/components/ui/Header.tsx b/examples/swaps-api-nextjs-solana/src/components/ui/Header.tsx
index cde2484..5a58734 100644
--- a/examples/swaps-api-nextjs-solana/src/components/ui/Header.tsx
+++ b/examples/swaps-api-nextjs-solana/src/components/ui/Header.tsx
@@ -69,7 +69,7 @@ export function Header() {
   return (
     <header>
       <nav>
-        <Container className="relative z-50 flex justify-between items-center py-8">
+        <Container className="relative z-50 flex items-center justify-between py-8">
           <div className="relative z-10 flex items-center gap-16">
             <Link href="/" aria-label="Home" className="text-2xl text-cyan-500">
               SolBridge
@@ -89,9 +89,9 @@ export function Header() {
                   >
                     {({ open }) =>
                       open ? (
-                        <ChevronUpIcon className="w-6 h-6 stroke-zinc-900" />
+                        <ChevronUpIcon className="h-6 w-6 stroke-zinc-900" />
                       ) : (
-                        <MenuIcon className="w-6 h-6" />
+                        <MenuIcon className="h-6 w-6" />
                       )
                     }
                   </Popover.Button>
@@ -116,7 +116,7 @@ export function Header() {
                             y: -32,
                             transition: { duration: 0.2 },
                           }}
-                          className="absolute inset-x-0 top-0 z-0 px-6 pt-32 pb-6 origin-top shadow-2xl rounded-b-2xl bg-gray-50 shadow-gray-900/20"
+                          className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-gray-50 px-6 pb-6 pt-32 shadow-2xl shadow-gray-900/20"
                         >
                           <div className="space-y-4">
                             <MobileNavLink href="#">Swap</MobileNavLink>
@@ -127,7 +127,7 @@ export function Header() {
                             </MobileNavLink>
                           </div>
 
-                          <div className="flex flex-col mt-4 space-y-4">
+                          <div className="mt-4 flex flex-col space-y-4">
                             <Button
                               href="https://github.com/swing-xyz/examples/tree/main/examples/swaps-api-nextjs-solana"
                               className="space-x-2 text-zinc-900"
@@ -147,7 +147,7 @@ export function Header() {
 
             <Button
               href="https://github.com/swing-xyz/examples/tree/main/examples/swaps-api-nextjs-solana"
-              className="hidden space-x-2 lg:block text-white"
+              className="hidden space-x-2 text-white lg:block"
               variant="outline"
             >
               <FontAwesomeIcon size="lg" icon={faGithub} />
diff --git a/examples/swaps-api-nextjs-solana/src/components/ui/Hero.tsx b/examples/swaps-api-nextjs-solana/src/components/ui/Hero.tsx
index 6dbd7b9..82ab49a 100644
--- a/examples/swaps-api-nextjs-solana/src/components/ui/Hero.tsx
+++ b/examples/swaps-api-nextjs-solana/src/components/ui/Hero.tsx
@@ -10,25 +10,25 @@ import Image from "next/image";
 
 export function Hero() {
   return (
-    <div className="w-full py-2 overflow-hidden">
-      <Container className="flex grow justify-start gap-16 w-full">
-        <div className="w-full hidden lg:flex flex-col justify-between grow">
-          <div className="relative w-full max-h-[50%] flex justify-center">
+    <div className="w-full overflow-hidden py-2">
+      <Container className="flex w-full grow justify-start gap-16">
+        <div className="hidden w-full grow flex-col justify-between lg:flex">
+          <div className="relative flex max-h-[50%] w-full justify-center">
             <Image
               src={sols}
               alt={"sols"}
-              className="absolute xl:top-28 top-20 left-20 xl:w-96 w-72"
+              className="absolute left-20 top-20 w-72 xl:top-28 xl:w-96"
               unoptimized
             />
             <Image
               src={sols}
               alt={"sols2"}
-              className="absolute xl:top-32 xl:w-96 w-72 rotate-90"
+              className="absolute w-72 rotate-90 xl:top-32 xl:w-96"
               unoptimized
             />
           </div>
-          <div className="w-full h-[50%] flex flex-col justify-start gap-y-2">
-            <p className="text-6xl text-gray-200 font-bold mt-auto">
+          <div className="flex h-[50%] w-full flex-col justify-start gap-y-2">
+            <p className="mt-auto text-6xl font-bold text-gray-200">
               Wicked Fast <br />
               Bridging On Solana!
             </p>
@@ -37,7 +37,7 @@ export function Hero() {
             </p>
           </div>
         </div>
-        <div className="grow min-h-[80vh] w-[70vw]">
+        <div className="min-h-[80vh] w-[70vw] grow">
           <SwapSDK />
         </div>
       </Container>
diff --git a/examples/swaps-api-nextjs-solana/src/components/ui/NavLinks.tsx b/examples/swaps-api-nextjs-solana/src/components/ui/NavLinks.tsx
index c6fe3c9..ff70568 100644
--- a/examples/swaps-api-nextjs-solana/src/components/ui/NavLinks.tsx
+++ b/examples/swaps-api-nextjs-solana/src/components/ui/NavLinks.tsx
@@ -16,14 +16,14 @@ export function NavLinks() {
         <Link
           key={label}
           href={href!}
-          className="relative -my-2 -mx-3 rounded-lg px-3 py-2 text-md text-gray-200 font-medium transition-colors delay-150 hover:text-gray-900 hover:delay-[0ms]"
+          className="text-md relative -mx-3 -my-2 rounded-lg px-3 py-2 font-medium text-gray-200 transition-colors delay-150 hover:text-gray-900 hover:delay-[0ms]"
           onMouseEnter={() => setHoveredIndex(index)}
           onMouseLeave={() => setHoveredIndex(null)}
         >
           <AnimatePresence>
             {hoveredIndex === index && (
               <motion.span
-                className="absolute inset-0 bg-gray-100 rounded-lg"
+                className="absolute inset-0 rounded-lg bg-gray-100"
                 layoutId="hoverBackground"
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1, transition: { duration: 0.15 } }}
diff --git a/examples/swaps-api-nextjs-solana/src/components/ui/SelectChainPanel.tsx b/examples/swaps-api-nextjs-solana/src/components/ui/SelectChainPanel.tsx
index 01e9970..88e453c 100644
--- a/examples/swaps-api-nextjs-solana/src/components/ui/SelectChainPanel.tsx
+++ b/examples/swaps-api-nextjs-solana/src/components/ui/SelectChainPanel.tsx
@@ -18,10 +18,10 @@ export const SelectChainPanel = ({
 
   return (
     <Popover defaultOpen={false} open={isOpen} onOpenChange={setIsOpen}>
-      <PopoverTrigger className="justify-center rounded-2xl flex items-center bg-zinc-600">
+      <PopoverTrigger className="flex items-center justify-center rounded-2xl bg-zinc-600">
         <img src={transferParams.chainIconUrl} className="w-7 rounded-full" />
       </PopoverTrigger>
-      <PopoverContent className="rounded-2xl min-w-[50px] max-h-96 overflow-scroll">
+      <PopoverContent className="max-h-96 min-w-[50px] overflow-scroll rounded-2xl">
         {chains.map(
           (chain) =>
             allowedChains.includes(chain.slug) && (
diff --git a/examples/swaps-api-nextjs-solana/src/components/ui/SelectTokenPanel.tsx b/examples/swaps-api-nextjs-solana/src/components/ui/SelectTokenPanel.tsx
index 40f3c4e..b4b57cf 100644
--- a/examples/swaps-api-nextjs-solana/src/components/ui/SelectTokenPanel.tsx
+++ b/examples/swaps-api-nextjs-solana/src/components/ui/SelectTokenPanel.tsx
@@ -28,15 +28,15 @@ export const SelectTokenPanel = ({
 
   return (
     <Popover defaultOpen={false} open={isOpen} onOpenChange={setIsOpen}>
-      <PopoverTrigger className="justify-center rounded-2xl flex items-center">
+      <PopoverTrigger className="flex items-center justify-center rounded-2xl">
         <span>{transferParams.token}</span>
       </PopoverTrigger>
-      <PopoverContent className="flex flex-col gap-y-2 rounded-2xl min-w-[50px] max-h-96 overflow-scroll">
+      <PopoverContent className="flex max-h-96 min-w-[50px] flex-col gap-y-2 overflow-scroll rounded-2xl">
         <input
           id="width"
           defaultValue=""
           placeholder={"Search Token (e.g. USDC)"}
-          className="col-span-2 h-8 focus:border-2 focus:border-purple-300 rounded-xl border-none w-full"
+          className="col-span-2 h-8 w-full rounded-xl border-none focus:border-2 focus:border-purple-300"
           onChange={(e) => {
             const tokenResults = tokens?.filter((token) =>
               token.symbol
diff --git a/examples/swaps-api-nextjs-solana/src/components/ui/TransferHistoryPanel.tsx b/examples/swaps-api-nextjs-solana/src/components/ui/TransferHistoryPanel.tsx
index 7e54f77..ddc59a9 100644
--- a/examples/swaps-api-nextjs-solana/src/components/ui/TransferHistoryPanel.tsx
+++ b/examples/swaps-api-nextjs-solana/src/components/ui/TransferHistoryPanel.tsx
@@ -43,12 +43,12 @@ export const TransferHistoryPanel = ({
       <PopoverTrigger className={className}>
         <MdOutlineHistory className="size-7 group-hover:text-zinc-50" />
       </PopoverTrigger>
-      <PopoverContent className="flex flex-col gap-y-2 p-2 rounded-2xl min-w-[50px] max-h-96 overflow-scroll">
+      <PopoverContent className="flex max-h-96 min-w-[50px] flex-col gap-y-2 overflow-scroll rounded-2xl p-2">
         <input
           id="width"
           defaultValue=""
           placeholder={"Search by status"}
-          className="col-span-2 h-8 focus:border-2 focus:border-purple-300 rounded-xl border-none w-full"
+          className="col-span-2 h-8 w-full rounded-xl border-none focus:border-2 focus:border-purple-300"
           onChange={(e) => {
             const historyResults = historyList?.filter(
               (history) =>
@@ -68,10 +68,10 @@ export const TransferHistoryPanel = ({
         {filteredItems?.reverse().map((transaction, index) => (
           <div
             key={index}
-            className="grid grid-cols-3 gap-x-1 min-h-24 shadow hover:bg-zinc-100 hover:cursor-pointer rounded-2xl p-2"
+            className="grid min-h-24 grid-cols-3 gap-x-1 rounded-2xl p-2 shadow hover:cursor-pointer hover:bg-zinc-100"
             onClick={() => onItemSelect?.(transaction)}
           >
-            <div className="flex flex-col p-1 justify-between bg-purple-100 rounded-xl">
+            <div className="flex flex-col justify-between rounded-xl bg-purple-100 p-1">
               <span className="text-xs font-bold">ROUTE</span>
               <span className="text-xs">
                 {transaction.fromChainSlug?.toUpperCase().substring(0, 3)} (
@@ -81,17 +81,17 @@ export const TransferHistoryPanel = ({
               </span>
             </div>
 
-            <div className="flex flex-col p-1 justify-between bg-blue-100 rounded-xl">
+            <div className="flex flex-col justify-between rounded-xl bg-blue-100 p-1">
               <span className="text-xs font-bold">AMOUNT</span>
               <span className="text-xs">
                 {transaction.toAmountUsdValue} USD
               </span>
             </div>
 
-            <div className="flex flex-col p-1 justify-between bg-cyan-100 rounded-xl">
+            <div className="flex flex-col justify-between rounded-xl bg-cyan-100 p-1">
               <span className="text-xs font-bold">STATUS</span>
               <span
-                className={clsx("text-xs font-bold rounded-xl p-1", {
+                className={clsx("rounded-xl p-1 text-xs font-bold", {
                   "bg-green-400": transaction.status === "Completed",
                   "bg-yellow-400 text-black": pendingStatuses.includes(
                     transaction.status,
diff --git a/examples/swaps-api-nextjs-solana/src/components/ui/popover.tsx b/examples/swaps-api-nextjs-solana/src/components/ui/popover.tsx
index 640adb7..efbc6cf 100644
--- a/examples/swaps-api-nextjs-solana/src/components/ui/popover.tsx
+++ b/examples/swaps-api-nextjs-solana/src/components/ui/popover.tsx
@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border border-zinc-200 bg-white p-4 text-zinc-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border border-zinc-200 bg-white p-4 text-zinc-950 shadow-md outline-none dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
         className,
       )}
       {...props}
diff --git a/examples/swaps-api-nextjs-solana/src/interfaces/chain.interface.ts b/examples/swaps-api-nextjs-solana/src/interfaces/chain.interface.ts
index 0564684..213fbc0 100644
--- a/examples/swaps-api-nextjs-solana/src/interfaces/chain.interface.ts
+++ b/examples/swaps-api-nextjs-solana/src/interfaces/chain.interface.ts
@@ -3,7 +3,7 @@ export interface Chain {
   slug: string;
   name: string;
   logo: string;
-  type: "solana" | "evm" | "bitcoin" | "ibc" | "multiversx";
+  type: "solana" | "evm" | "bitcoin" | "ibc" | "multiversx" | "tron" | "ton";
   singleChainSwap: boolean;
   singleChainStaking: boolean;
   txExplorer?: string | undefined;
diff --git a/examples/swaps-api-nextjs-solana/src/interfaces/status.interface.ts b/examples/swaps-api-nextjs-solana/src/interfaces/status.interface.ts
index 4d6029c..4a204aa 100644
--- a/examples/swaps-api-nextjs-solana/src/interfaces/status.interface.ts
+++ b/examples/swaps-api-nextjs-solana/src/interfaces/status.interface.ts
@@ -1,12 +1,5 @@
 export interface TransactionStatusAPIResponse {
-  type?:
-    | "swap"
-    | "deposit"
-    | "withdraw"
-    | "claim"
-    | "custom_contract"
-    | null
-    | undefined;
+  type?: "swap" | "approve" | "sign" | "claim" | "deposit" | "withdraw";
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   status: "Pending" | "Success" | "Failed" | any;
   reason?: string;
diff --git a/examples/swaps-api-nextjs-tron/.eslintrc.js b/examples/swaps-api-nextjs-tron/.eslintrc.js
new file mode 100644
index 0000000..ea43de2
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/.eslintrc.js
@@ -0,0 +1,8 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  extends: ["eslint-config-examples/index.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+};
diff --git a/examples/swaps-api-nextjs-tron/.gitignore b/examples/swaps-api-nextjs-tron/.gitignore
new file mode 100644
index 0000000..55175ef
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/.gitignore
@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
diff --git a/examples/swaps-api-nextjs-tron/README.md b/examples/swaps-api-nextjs-tron/README.md
new file mode 100644
index 0000000..bb7691b
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/README.md
@@ -0,0 +1,644 @@
+# Cross-chain Swaps using the Swing API in Next.js For Tron
+
+This example is built with:
+
+- [@swing.xyz/sdk](https://developers.swing.xyz/reference/sdk)
+- [@thirdweb-dev/react](https://portal.thirdweb.com/react)
+- [@thirdweb-dev/sdk](https://portal.thirdweb.com/typescript)
+- [TronLink Wallet Adapter](https://github.com/tronprotocol/tronwallet-adapter?tab=readme-ov-file#adapters)
+- [Tron React Hooks](https://github.com/web3-geek/tronwallet-adapter)
+- [Next.js App Router](https://nextjs.org)
+- [Tailwind CSS](https://tailwindcss.com)
+
+## Demo
+
+View the live demo [https://swaps-api-nextjs-tron.vercel.app](https://swaps-api-nextjs-tron.vercel.app/)
+
+## Swing Integration
+
+> The implementation of Swing's [Cross-chain API](https://developers.swing.xyz/reference/api) and [Platform API](https://developers.swing.xyz/reference/api/platform/a2glq2e1w44ad-project-configuration) can be found in [src/components/Swap.tsx](./src/components/Swap.tsx)
+
+This example demonstrates how you can perform a cross-chain transaction between the Tron and Ethereum chains using Swing's Cross-Chain and Platform APIs via Swing's SDK.
+
+In this example, we will be using thirdweb's SDK and **TronLink's Wallet Adapter** connector to connect to a user's Ethereum and Tron wallets, respectively. We will also demonstrate how to utilize Swing's SDK exported API functions, namely `crossChainAPI` and `platformAPI`, to build out a fully functionaly cross-chain application.
+
+The process/steps for performing a TRX to ETH transaction, and vice versa, are as follows:
+
+- Getting a [quote](https://developers.swing.xyz/reference/api/cross-chain/1169f8cbb6937-request-a-transfer-quote) and selecting the best route
+- Sending a [token approval](https://developers.swing.xyz/reference/api/contract-calls/approval) request for ERC20 Tokens. (Optional for TRON > EVM Route)
+- Sending a [transaction](https://developers.swing.xyz/reference/api/cross-chain/d83d0d65028dc-send-transfer)
+
+> Although not essential for performing a swap transaction, providing your users with real-time updates on the transaction's status by polling the [status](https://developers.swing.xyz/reference/api/cross-chain/6b61efd1b798a-transfer-status) can significantly enhance the user experience.
+
+## Getting started
+
+To get started with this template, first install the required npm dependencies:
+
+```bash
+yarn install
+```
+
+Next, launch the development server by running the following command:
+
+```bash
+yarn dev --filter=swaps-api-nextjs-tron
+```
+
+Finally, open [http://localhost:3000](http://localhost:3000) in your browser to view the website.
+
+## Initializing Swing's SDK
+
+Swing's SDK contains two (2) vital objects that are crucial to our API integration. Namely, the `platformAPI` and the `crossChainAPI` objects. These objects are a wrapper for all of Swing's Cross-Chain and Platform APIs removing the need for developers to make API requests using libraries like `fetch` or `axios`. The SDK handles those API requests from behind the scenes.
+
+We've included all the necessary request and response interfaces in the `src/interfaces` folder to aid development.
+
+Navigating to our `src/services/requests.ts`, let's start by initializing Swing's SDK in our `SwingServiceAPI` class:
+
+```typescript
+import { SwingSDK } from "@swing.xyz/sdk";
+
+export class SwingServiceAPI implements ISwingServiceAPI {
+  private readonly swingSDK: SwingSDK;
+
+  constructor() {
+    this.swingSDK = new SwingSDK({
+      projectId: "replug",
+      debug: true,
+    });
+  }
+}
+```
+
+The `SwingSDK` constructor accepts a `projectId` as a mandatory parameter and a few other optional parameters:
+
+| Property      | Example      | Description                                                      |
+| ------------- | ------------ | ---------------------------------------------------------------- |
+| `projectId`   | `replug`     | [Swing Platform project identifier](https://platform.swing.xyz/) |
+| `debug`       | `true`       | Enable verbose logging                                           |
+| `environment` | `production` | Set's SwingAPI to operate either on testnet or mainnet chains    |
+| `analytics`   | `false`      | Enable analytics and error reporting                             |
+
+> You can get your `projectId` by signing up to [Swing!](https://platform.swing.xyz/)
+
+## Getting a Quote
+
+To perform a swap between ETH and TRX, we first have to get a quote from Swing's Cross-Chain API.
+
+URL: [https://swap.prod.swing.xyz/v0/transfer/quote](https://swap.prod.swing.xyz/v0/transfer/quote)
+
+**Parameters**:
+
+| Property           | Example                                    | Description                                             |
+| ------------------ | ------------------------------------------ | ------------------------------------------------------- |
+| `tokenAmount`      | 1000000000000000000                        | Amount of the source token being sent (in wei for ETH). |
+| `fromChain`        | `ethereum`                                 | Source Chain slug                                       |
+| `fromUserAddress`  | 0x018c15DA1239B84b08283799B89045CD476BBbBb | Sender's wallet address                                 |
+| `fromTokenAddress` | 0x0000000000000000000000000000000000000000 | Source Token Address                                    |
+| `tokenSymbol`      | `ETH`                                      | Source Token slug                                       |
+| `toTokenAddress`   | 0x0000000000000000000000000000000000000000 | Destination Token Address.                              |
+| `toTokenSymbol`    | `TRX`                                      | Destination Token slug                                  |
+| `toChain`          | `tron`                                     | Destination Chain slug                                  |
+| `toUserAddress`    | TV6ybRmqiUK6a7JVMRwPg2cDDkLqgR5MaZ         | Receiver's wallet address                               |
+| `projectId`        | `replug`                                   | [Your project's ID](https://platform.swing.xyz/)        |
+
+Navigating to our `src/services/requests.ts` file, you will find our method for getting a quote from Swing's Cross-Chain API called `getQuoteRequest()`.
+
+```typescript
+async getQuoteRequest(
+  queryParams: QuoteQueryParams,
+): Promise<QuoteAPIResponse | undefined> {
+  try {
+    const response = await this.swingSDK.crossChainAPI.GET(
+      "/v0/transfer/quote",
+      {
+        params: {
+          query: queryParams,
+        },
+      },
+    );
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching quote:", error);
+    throw error;
+  }
+}
+```
+
+The response received from the `getQuoteRequest` endpoint provides us with the `fees` a user will have to pay when performing a transaction, as well as a list of possible `routes` for the user to choose from.
+
+The definition for the `getQuoteRequest` response can be found in `src/interfaces/quote.interface.ts.`
+
+```typescript
+export interface QuoteAPIResponse {
+  routes: Route[];
+  fromToken: Token;
+  fromChain: Chain;
+  toToken: Token;
+  toChain: Chain;
+}
+```
+
+Each `Route` contains a `gasFee`, `bridgeFee` and the amount of tokens the destination wallet will receive.
+
+Here's an example response that contains the route data:
+
+```json
+"routes": [
+        {
+            "duration": 1,
+            "gas": "1260090989371730",
+            "quote": {
+                "integration": "symbiosis",
+                "type": "swap",
+                "bridgeFee": "125402496",
+                "bridgeFeeInNativeToken": "0",
+                "amount": "60720124077",
+                "decimals": 6,
+                "amountUSD": "9296.676",
+                "bridgeFeeUSD": "19.199",
+                "bridgeFeeInNativeTokenUSD": "0",
+                "fees": [
+                    {
+                        "type": "bridge",
+                        "amount": "125402496",
+                        "amountUSD": "19.199",
+                        "chainSlug": "tron",
+                        "tokenSymbol": "TRX",
+                        "tokenAddress": "0x0000000000000000000000000000000000000000",
+                        "decimals": 6,
+                        "deductedFromSourceToken": true
+                    },
+                    {
+                        "type": "gas",
+                        "amount": "1260090989371730",
+                        "amountUSD": "2.954",
+                        "chainSlug": "ethereum",
+                        "tokenSymbol": "ETH",
+                        "tokenAddress": "0x0000000000000000000000000000000000000000",
+                        "decimals": 18,
+                        "deductedFromSourceToken": false
+                    }
+                ]
+            },
+            "route": [
+                {
+                    "bridge": "symbiosis",
+                    "bridgeTokenAddress": "0x0000000000000000000000000000000000000000",
+                    "steps": [
+                        "allowance",
+                        "approve",
+                        "send"
+                    ],
+                    "name": "ETH",
+                    "part": 100
+                }
+            ],
+            "distribution": {
+                "symbiosis": 1
+            },
+            "gasUSD": "2.954"
+        }
+    ]
+```
+
+Navigating to our `src/components/Swap.tsx` file, you'll find our `defaultTransferParams` object which will store the default transaction config for our example:
+
+```typescript
+const defaultTransferParams: TransferParams = {
+  tokenAmount: "1",
+  fromChain: "ethereum",
+  tokenSymbol: "ETH",
+  fromUserAddress: "",
+  fromTokenAddress: "0x0000000000000000000000000000000000000000",
+  fromNativeTokenSymbol: "ETH",
+  fromTokenIconUrl:
+    "https://raw.githubusercontent.com/Pymmdrza/Cryptocurrency_Logos/mainx/PNG/eth.png",
+  fromChainIconUrl:
+    "https://raw.githubusercontent.com/polkaswitch/assets/master/blockchains/ethereum/info/logo.png",
+  fromChainDecimal: 18,
+  toTokenAddress: "11111111111111111111111111111111",
+  toTokenSymbol: "TRX",
+  toNativeTokenSymbol: "TRX",
+  toChain: "tron",
+  toTokenIconUrl:
+    "https://raw.githubusercontent.com/Pymmdrza/Cryptocurrency_Logos/mainx/SVG/sol.svg",
+  toChainIconUrl:
+    "https://raw.githubusercontent.com/Pymmdrza/Cryptocurrency_Logos/mainx/SVG/sol.svg",
+  toUserAddress: "", //tron wallet address
+  toChainDecimal: 9,
+};
+```
+
+## Sending a Token Approval Request for ERC20 Tokens (Optional for TRON > EVM Route)
+
+If you're attempting to bridge an ERC20 token from a user's wallet to Tron, you need to prompt the user to approve the required amount of tokens to be bridged.
+
+Navigating to our `src/components/Swap.tsx` file, inside our `startTransfer()` method, you will find our implementation of the `getAllowanceRequest()` and `getApprovalTxDataRequest()` methods. Before approving, you have to perform two checks:
+
+- First, we will check if we're performing a native currency swap by comparing the values of `tokenSymbol` and `fromNativeTokenSymbol` on the source chain. If we're not dealing with a native currency swap, we then proceed to ask for an allowance.
+- Next, we will check if an allowance has already been made by Swing on a user's wallet by calling the `getAllowanceRequest()` method. If no approved allowance is found, we will then proceed to make an approval request by calling the `getApprovalTxDataRequest()` method.
+
+Since the `/approval` and `/approve` endpoints are specific to EVM chains, we have to check that source chain via `fromChain` is anything but `tron`. Skipping this check will result in the `/approval` endpoint returning an error to the user:
+
+```json
+{
+  "statusCode": 400,
+  "message": "Non-evm is not supported for approval method: tron",
+  "error": "Bad Request"
+}
+```
+
+Let's execute these steps:
+
+```typescript
+if (
+  transferParams.tokenSymbol !== transferParams.fromNativeTokenSymbol &&
+  transferParams.fromChain !== "tron"
+) {
+  const checkAllowance = await getAllowanceRequest({
+    bridge: transferRoute.quote.integration,
+    fromAddress: transferParams.fromUserAddress,
+    fromChain: transferParams.fromChain,
+    tokenAddress: transferParams.fromTokenAddress,
+    tokenSymbol: transferParams.tokenSymbol,
+    toChain: transferParams.toChain,
+    toTokenAddress: transferParams.toTokenAddress!,
+    toTokenSymbol: transferParams.toTokenSymbol!,
+    contractCall: false,
+  });
+
+  if (checkAllowance.allowance === tokenAmount) {
+    setTransStatus({
+      status: `Wallet Interaction Required: Approval Token`,
+    });
+
+    const getApprovalTxData = await getApprovalTxDataRequest({
+      tokenAmount: Number(tokenAmount),
+      bridge: transferRoute.quote.integration,
+      fromAddress: transferParams.fromUserAddress,
+      fromChain: transferParams.fromChain,
+      tokenAddress: transferParams.fromTokenAddress,
+      tokenSymbol: transferParams.tokenSymbol,
+      toChain: transferParams.toChain,
+      toTokenAddress: transferParams.toTokenAddress!,
+      toTokenSymbol: transferParams.toTokenSymbol!,
+      contractCall: false,
+    });
+
+    const txData: TransactionDetails = {
+      data: getApprovalTxData.tx[0].data,
+      from: getApprovalTxData.tx[0].from,
+      to: getApprovalTxData.tx[0].to,
+    };
+
+    const txResponse = await signer?.sendTransaction(txData);
+
+    const receipt = await txResponse?.wait();
+    console.log("Transaction receipt:", receipt);
+
+    setTransStatus({ status: "Token allowance approved" });
+  }
+}
+```
+
+## Sending a Transaction
+
+After getting a quote, you'll next have to send a transaction to Swing's Cross-Chain API.
+
+The steps for sending a transaction are as followed:
+
+- First, we will make a request to [`https://swap.prod.swing.xyz/v0/transfer/send`](https://developers.swing.xyz/reference/api/cross-chain/d83d0d65028dc-send-transfer)
+- Using the `txData` returned from the `/send` request, sign the transaction by using a user's wallet
+
+### Making a `/send` Request
+
+Navigating to our `src/services/requests.ts`, you'll find our request implemenation for the `/send` endpoint:
+
+```typescript
+async sendTransactionRequest(
+  payload: SendTransactionPayload,
+): Promise<SendTransactionApiResponse | undefined> {
+  try {
+    const response = await this.swingSDK.crossChainAPI.POST(
+      "/v0/transfer/send",
+      {
+        body: payload,
+      },
+    );
+    return response.data;
+  } catch (error) {
+    console.error("Error sending transaction:", error);
+    throw error;
+  }
+}
+```
+
+The `SendTransactionPayload` body payload contains the `source chain`, `destination chain`, `tokenAmount`, and the desired `route`.
+
+URL: [https://swap.prod.swing.xyz/v0/transfer/send](https://swap.prod.swing.xyz/v0/transfer/send)
+
+**Parameters**:
+
+| Key                | Example                                          | Description                                             |
+| ------------------ | ------------------------------------------------ | ------------------------------------------------------- |
+| `fromChain`        | ethereum                                         | The blockchain where the transaction originates.        |
+| `fromTokenAddress` | 0x0000000000000000000000000000000000000000       | Source Token Address                                    |
+| `fromUserAddress`  | 0x018c15DA1239B84b08283799B89045CD476BBbBb       | Sender's wallet address                                 |
+| `tokenSymbol`      | ETH                                              | Source Token slug                                       |
+| `toTokenAddress`   | 0x0000000000000000000000000000000000000000       | Destination Token Address.                              |
+| `toChain`          | tron                                             | Destination Source slug                                 |
+| `toTokenAmount`    | 4000000                                          | Amount of the destination token being received.         |
+| `toTokenSymbol`    | TRX                                              | Destination Chain slug                                  |
+| `toUserAddress`    | TV6ybRmqiUK6a7JVMRwPg2cDDkLqgR5MaZ               | Receiver's wallet address                               |
+| `tokenAmount`      | 1000000000000000000                              | Amount of the source token being sent (in wei for ETH). |
+| `type`             | swap                                             | Type of transaction.                                    |
+| `projectId`        | `replug`                                         | [Your project's ID](https://platform.swing.xyz/)        |
+| `route`            | see `Route` in`src/interfaces/send.interface.ts` | Selected Route                                          |
+
+Since performing a swap will change the state of a user's wallet, the next step of this transaction must be done via a `Smart Contract` Transaction and not via Swing's Cross-Chain API. The response received from the `sendTransactionRequest` endpoint provides us with the necessary `txData/callData` needed to be passed on to a user's wallet to sign the transaction.
+
+The `txData` from the `sendTransactionRequest` will look something like this:
+
+```json
+{
+   ....
+    "tx": {
+        "from": "0x018c15DA1239B84b08283799B89045CD476BBbBb",
+        "to": "0x39E3e49C99834C9573c9FC7Ff5A4B226cD7B0E63",
+        "data": "0x301a3720000000000000000000000000eeeeeeeeeeee........",
+        "value": "0x0e35fa931a0000",
+        "gas": "0x06a02f"
+    }
+   ....
+}
+
+```
+
+To demonstrate, we first make a request by calling the `sendTransactionRequest` method.
+
+```typescript
+// src/components/Swaps.tsx
+
+const transfer = await sendTransactionRequest({
+  fromChain: transferParams.fromChain,
+  fromTokenAddress: transferParams.fromTokenAddress,
+  fromUserAddress: transferParams.fromUserAddress,
+  tokenSymbol: transferParams.tokenSymbol,
+
+  toTokenAddress: transferParams.toTokenAddress!,
+  toChain: transferParams.toChain,
+  toTokenAmount: transferRoute.quote.amount,
+  toTokenSymbol: transferParams.toTokenSymbol!,
+  toUserAddress: transferParams.toUserAddress!,
+
+  tokenAmount: convertEthToWei(
+    transferParams.tokenAmount,
+    transferParams.fromChainDecimal,
+  ),
+  route: transferRoute.route,
+  type: "swap",
+});
+```
+
+Next, we'll extract the `txData`:
+
+```typescript
+// src/components/Swaps.tsx
+
+let txData: any = {
+  data: transfer.tx.data,
+  from: transfer.tx.from,
+  to: transfer.tx.to,
+  value: transfer.tx.value,
+  gasLimit: transfer.tx.gas,
+};
+```
+
+Using our wallet provider, we will send a transaction to the user's wallet.
+
+```typescript
+// src/components/Swaps.tsx
+
+const txResponse = await signer?.sendTransaction(txData); // <- `txResponse` contains the `txHash` of our transaction. You will need this later for getting a transaction's status.
+
+const receipt = await txResponse?.wait();
+
+console.log("Transaction receipt:", receipt);
+```
+
+The definition for the `sendTransactionRequest` response can be found in `src/interfaces/send.interface.ts.`
+
+```typescript
+export interface SendTransactionApiResponse {
+  id: number;
+  fromToken: Token;
+  toToken: Token;
+  fromChain: Chain;
+  toChain: Chain;
+  route: Route[];
+  tx: TransactionDetails;
+}
+```
+
+> The `sendTransactionRequest` will return and `id` whilst the `txResponse` will contain a `txHash` which we will need later for checking the status of a transaction.
+
+### Sending a Tron Transaction to the Tron Network
+
+If you've decided to perform a cross chain swap using Tron as the source chain, you'll have to sign the transaction using a wallet provider that supports the Tron Network like [TronLink](https://www.tronlink.org/).
+
+> Remember, you'll have to call the `/send` endpoint via `sendTransactionRequest` before signing the transaction.
+
+We will sign the `txData` returned from the `/send` endpoint using the **Tronlink Wallet React Hooks** library and then broadcast the transaction to the rest of the network using the **Tronlink Wallet Adapter** that comes installed with TronLink in your browser.
+
+As a reminder, the `txData` from the `sendTransactionRequest` will look something like this:
+
+```json
+{
+   ....
+    "tx": {
+        "from": "0x018c15DA1239B84b08283799B89045CD476BBbBb",
+        "to": "0x39E3e49C99834C9573c9FC7Ff5A4B226cD7B0E63",
+        "data": "0x301a3720000000000000000000000000eeeeeeeeeeee........",
+        "value": "0x0e35fa931a0000",
+        "meta": {
+          "raw_data_hex": {
+            .....
+          }
+        }
+        "gas": "0x06a02f"
+    }
+   ....
+}
+```
+
+> Note: You're only interested in the `meta` object in our `txData`.
+
+To sign a callData, you have to make a request to your TronLink Wallet and pass the `meta` object to the signer function. The `meta` object contains the necessary smart contract callData to be executed.
+
+```typescript
+// Create and sign the transaction
+const { wallet } = useWallet();
+
+const signedTx = await wallet.adapter.signTransaction(txData.meta!);
+```
+
+Next, we will send the transaction to the network:
+
+```typescript
+const broadcast =
+  await window?.tronLink?.tronWeb.trx.sendRawTransaction(signedTx);
+```
+
+Putting it all together:
+
+```typescript
+// Update the sendTronTrans function
+async function sendTronTrans(
+  txData: TransactionData,
+): Promise<string | undefined> {
+  try {
+    if (!tronConnected || !wallet) {
+      throw new Error("Tron wallet is not connected");
+    }
+
+    // Create and sign the transaction
+    const signedTx = await wallet.adapter.signTransaction(txData.meta!);
+
+    // Broadcasting the transaction
+    const broadcast =
+      await window?.tronLink?.tronWeb.trx.sendRawTransaction(signedTx);
+    console.log(`broadcast: ${broadcast?.result}`);
+
+    return signedTx.txID as string;
+  } catch (error) {
+    console.error("Error sending Tron transaction:", error);
+    throw new Error((error as Error).message);
+  }
+}
+```
+
+## Polling Transaction Status
+
+After sending a transaction over to the network, for the sake of user experience, it's best to poll the transaction status endpoint by periodically checking to see if the transaction is complete. This will let the user using your dapp know in realtime, the status of the current transaction.
+
+Navigating to our `src/services/requests.ts` file, you will find our method for getting a transaction status called `getTransationStatus()`.
+
+```typescript
+async getTransationStatusRequest(
+  queryParams: TransactionStatusParams,
+): Promise<TransactionStatusAPIResponse | undefined> {
+  try {
+    const response = await this.swingSDK.platformAPI.GET(
+      "/projects/{projectId}/transactions/{transactionId}",
+      {
+        params: {
+          path: {
+            transactionId: queryParams.id,
+            projectId,
+          },
+          query: {
+            txHash: queryParams.txHash,
+          },
+        },
+      },
+    );
+
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching transaction status:", error);
+    throw error;
+  }
+}
+```
+
+The `TransactionStatusParams` params contains the three properties, namely: `id`, `txHash` and `projectId`
+
+URL: [https://platform.swing.xyz/api/v1/projects/{projectId}/transactions/{transactionId}](https://developers.swing.xyz/reference/api/platform/ehwqfo1kv00ce-get-transaction)
+
+**Parameters**:
+
+| Key         | Example                             | Description                                      |
+| ----------- | ----------------------------------- | ------------------------------------------------ |
+| `id`        | 239750                              | Transaction ID from `/send` response             |
+| `txHash`    | 0x3b2a04e2d16489bcbbb10960a248..... | The transaction hash identifier.                 |
+| `projectId` | `replug`                            | [Your project's ID](https://platform.swing.xyz/) |
+
+To poll the `/status` endpoint, you will use `setTimeout()` to retry `getTransationStatus()` over a period of time. We will define a function, `pollTransactionStatus()`, which will recursively call `getTransStatus()` until the transaction is completed.
+
+```typescript
+// src/components/Swaps.tsx
+
+async function getTransStatus(transId: string, txHash: string) {
+  const transactionStatus = await swingServiceAPI?.getTransationStatusRequest({
+    id: transId,
+    txHash,
+  });
+
+  setTransStatus(transactionStatus);
+
+  return transactionStatus;
+}
+
+async function pollTransactionStatus(transId: string, txHash: string) {
+  const transactionStatus = await getTransStatus(transId, txHash);
+
+  if (transactionStatus?.status! === "Pending") {
+    setTimeout(
+      () => pollTransactionStatus(transId, txHash),
+      transactionPollingDuration,
+    );
+  } else {
+    if (transactionStatus?.status === "Success") {
+      toast({
+        title: "Transaction Successful",
+        description: `Bridge Successful`,
+      });
+    } else if (transactionStatus?.status === "Failed") {
+      toast({
+        variant: "destructive",
+        title: "Transaction Failed",
+        description: transStatus?.errorReason,
+      });
+    }
+
+    setTransferRoute(null);
+    setIsTransacting(false);
+    (sendInputRef.current as HTMLInputElement).value = "";
+  }
+}
+```
+
+In our `startTransfer()` method, you will run the `pollTransactionStatus()` immediately after our transaction has been sent to the network
+
+```typescript
+// src/components/Swaps.tsx
+
+let txHash = "";
+
+if (transferParams.fromChain === "tron") {
+  const hash = await sendSolTrans({
+    ...txData,
+    from: transferParams.fromUserAddress,
+  });
+  txHash = hash!;
+} else {
+  const txResponse = await signer?.sendTransaction({
+    data: txData.data,
+    from: txData.from,
+    to: txData.to,
+    value: txData.value,
+    gasLimit: txData.gasLimit,
+  });
+  // Wait for the transaction to be mined
+
+  const receipt = await txResponse?.wait();
+  console.log("Transaction receipt:", receipt);
+  txHash = txResponse?.hash!;
+}
+
+pollTransactionStatus(transfer?.id.toString()!, txHash);
+```
+
+## Customizing
+
+You can start editing this template by modifying the files in the `/src` folder. The site will auto-update as you edit these files.
diff --git a/examples/swaps-api-nextjs-tron/components.json b/examples/swaps-api-nextjs-tron/components.json
new file mode 100644
index 0000000..44d0040
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "styles/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "components",
+    "utils": "lib"
+  }
+}
\ No newline at end of file
diff --git a/examples/swaps-api-nextjs-tron/next-env.d.ts b/examples/swaps-api-nextjs-tron/next-env.d.ts
new file mode 100644
index 0000000..4f11a03
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/swaps-api-nextjs-tron/next.config.mjs b/examples/swaps-api-nextjs-tron/next.config.mjs
new file mode 100644
index 0000000..d5456a1
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/next.config.mjs
@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+export default nextConfig;
diff --git a/examples/swaps-api-nextjs-tron/package.json b/examples/swaps-api-nextjs-tron/package.json
new file mode 100644
index 0000000..8ffe8a1
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/package.json
@@ -0,0 +1,61 @@
+{
+  "name": "swaps-api-nextjs-tron",
+  "demo": "https://swaps-api-nextjs-tron.vercel.app/",
+  "keywords": [
+    "api",
+    "swaps",
+    "nextjs",
+    "thirdweb"
+  ],
+  "license": "MIT",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "lint": "eslint src",
+    "build": "next build",
+    "start": "next start",
+    "clean": "rm -rf .next node_modules"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@headlessui/react": "^1.7.18",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@swing.xyz/sdk": "^0.60.0",
+    "@tailwindcss/forms": "^0.5.7",
+    "@thirdweb-dev/react": "^4.4.17",
+    "@thirdweb-dev/sdk": "^4.0.44",
+    "@tronweb3/tronwallet-adapter-react-hooks": "^1.1.7",
+    "@tronweb3/tronwallet-adapter-react-ui": "^1.1.8",
+    "@tronweb3/tronwallet-adapters": "^1.2.3",
+    "axios": "^1.6.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "framer-motion": "^6.5.1",
+    "lucide-react": "^0.368.0",
+    "next": "14.1.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tailwind-merge": "^2.2.2",
+    "tailwindcss-animate": "^1.0.7",
+    "use-debounce": "^10.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "20.11.26",
+    "@types/react": "18.2.65",
+    "@types/react-dom": "18.2.22",
+    "autoprefixer": "^10.4.18",
+    "eslint": "^8.57.0",
+    "eslint-config-examples": "workspace:*",
+    "pino-pretty": "^10.3.1",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.4.2",
+    "typescript-config": "workspace:*"
+  }
+}
diff --git a/examples/swaps-api-nextjs-tron/postcss.config.js b/examples/swaps-api-nextjs-tron/postcss.config.js
new file mode 100644
index 0000000..12a703d
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/examples/swaps-api-nextjs-tron/public/favicon.ico b/examples/swaps-api-nextjs-tron/public/favicon.ico
new file mode 100644
index 0000000..88b1f7a
Binary files /dev/null and b/examples/swaps-api-nextjs-tron/public/favicon.ico differ
diff --git a/examples/swaps-api-nextjs-tron/public/fonts/Inter-italic.var.woff2 b/examples/swaps-api-nextjs-tron/public/fonts/Inter-italic.var.woff2
new file mode 100644
index 0000000..b826d5a
Binary files /dev/null and b/examples/swaps-api-nextjs-tron/public/fonts/Inter-italic.var.woff2 differ
diff --git a/examples/swaps-api-nextjs-tron/public/fonts/Inter-roman.var.woff2 b/examples/swaps-api-nextjs-tron/public/fonts/Inter-roman.var.woff2
new file mode 100644
index 0000000..6a256a0
Binary files /dev/null and b/examples/swaps-api-nextjs-tron/public/fonts/Inter-roman.var.woff2 differ
diff --git a/examples/swaps-api-nextjs-tron/src/app/layout.tsx b/examples/swaps-api-nextjs-tron/src/app/layout.tsx
new file mode 100644
index 0000000..810f73f
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/app/layout.tsx
@@ -0,0 +1,21 @@
+import "styles/globals.css";
+import "@fortawesome/fontawesome-svg-core/styles.css";
+
+import { Header } from "../components/ui/Header";
+
+import { Toaster } from "components/ui/toaster";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head />
+
+      <body className="min-h-screen">
+        <Header />
+
+        <main>{children}</main>
+        <Toaster />
+      </body>
+    </html>
+  );
+}
diff --git a/examples/swaps-api-nextjs-tron/src/app/page.tsx b/examples/swaps-api-nextjs-tron/src/app/page.tsx
new file mode 100644
index 0000000..d066105
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/app/page.tsx
@@ -0,0 +1,12 @@
+import { Hero } from "../components/ui/Hero";
+import { ThirdwebProvider } from "../components/ThirdwebProvider";
+import { Backdrop } from "components/ui/Backdrop";
+
+export default function Home() {
+  return (
+    <ThirdwebProvider>
+      <Backdrop />
+      <Hero />
+    </ThirdwebProvider>
+  );
+}
diff --git a/examples/swaps-api-nextjs-tron/src/components/Swap.tsx b/examples/swaps-api-nextjs-tron/src/components/Swap.tsx
new file mode 100644
index 0000000..ac2aa55
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/components/Swap.tsx
@@ -0,0 +1,882 @@
+"use client";
+
+import clsx from "clsx";
+import { useEffect, useRef, useState } from "react";
+import { useConnect, metamaskWallet } from "@thirdweb-dev/react";
+import {
+  useConnectionStatus,
+  useAddress,
+  useSigner,
+} from "@thirdweb-dev/react";
+import { SwingServiceAPI } from "services/requests";
+import { convertEthToWei, convertWeiToEth } from "utils/ethToWei";
+import { useDebouncedCallback } from "use-debounce";
+import { useToast } from "components/ui/use-toast";
+import { TransactionStatusAPIResponse } from "interfaces/status.interface";
+import { AxiosError } from "axios";
+import { Chain } from "interfaces/chain.interface";
+import { Token } from "interfaces/token.interface";
+import { SelectTokenPanel } from "./ui/SelectTokenPanel";
+import { SelectChainPanel } from "./ui/SelectChainPanel";
+import { TbSwitchHorizontal } from "react-icons/tb";
+import { faCircleNotch, faHistory } from "@fortawesome/free-solid-svg-icons";
+import { TransferParams } from "types/transfer.types";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ISwingServiceAPI } from "interfaces/swing-service.interface";
+import { Route } from "interfaces/quote.interface";
+import { TransactionData } from "interfaces/approval.interface";
+
+import { useWallet } from "@tronweb3/tronwallet-adapter-react-hooks";
+import { TronLinkAdapterName } from "@tronweb3/tronwallet-adapters";
+
+const walletConfig = metamaskWallet();
+
+const defaultTransferParams: TransferParams = {
+  tokenAmount: "1",
+  fromChain: "ethereum",
+  tokenSymbol: "ETH",
+  fromUserAddress: "",
+  dummyFromUserAddress: "0x018c15DA1239B84b08283799B89045CD476BBbBb",
+  dummyToUserAddress: "TV6ybRmqiUK6a7JVMRwPg2cDDkLqgR5MaZ",
+  fromTokenAddress: "0x0000000000000000000000000000000000000000",
+  fromNativeTokenSymbol: "ETH",
+  fromTokenIconUrl:
+    "https://raw.githubusercontent.com/Pymmdrza/Cryptocurrency_Logos/mainx/PNG/eth.png",
+  fromChainIconUrl:
+    "https://raw.githubusercontent.com/polkaswitch/assets/master/blockchains/ethereum/info/logo.png",
+  fromChainDecimal: 18,
+  toTokenAddress: "0x0000000000000000000000000000000000000000",
+  toTokenSymbol: "TRX",
+  toNativeTokenSymbol: "TRX",
+  toChain: "tron",
+  toTokenIconUrl:
+    "https://raw.githubusercontent.com/Pymmdrza/Cryptocurrency_Logos/mainx/SVG/trx.svg",
+  toChainIconUrl:
+    "https://raw.githubusercontent.com/Pymmdrza/Cryptocurrency_Logos/mainx/SVG/trx.svg",
+  toUserAddress: "", // tron wallet address
+  toChainDecimal: 6,
+};
+
+const transactionPollingDuration = 10000;
+
+const Swap = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [isTransacting, setIsTransacting] = useState(false);
+
+  const [transferParams, setTransferParams] = useState<TransferParams>(
+    defaultTransferParams,
+  );
+
+  const [tronWalletAddress, setTronWalletAddress] = useState<string>("");
+
+  const [transferRoute, setTransferRoute] = useState<Route | null>(null);
+  const [transStatus, setTransStatus] =
+    useState<TransactionStatusAPIResponse | null>();
+  const [tokens, setTokens] = useState<Token[]>([]);
+  const [tronTokens, setTronTokens] = useState<Token[]>([]);
+  const [chains, setChains] = useState<Chain[]>([]);
+  const [quotes, setQuotes] = useState<Route[]>();
+  const [swingServiceAPI, setSwingServiceAPI] = useState<
+    ISwingServiceAPI | undefined
+  >();
+
+  const connect = useConnect();
+  const address = useAddress();
+
+  const connectionStatus = useConnectionStatus();
+  const walletAddress = useAddress();
+  const signer = useSigner();
+
+  const { toast } = useToast();
+  const sendInputRef = useRef<HTMLInputElement>(null);
+
+  const {
+    wallet,
+    connected: tronConnected,
+    address: tronAddress,
+    select,
+    disconnect,
+  } = useWallet();
+
+  const debounced = useDebouncedCallback((value) => {
+    setTransferParams((prev: TransferParams) => ({
+      ...prev,
+      tokenAmount: value,
+    }));
+    getQuote(value);
+  }, 1000);
+
+  //Initialize Swing Service API from service.ts file and connect to tron wallet if installed
+  // Replace the TronLink connection logic in useEffect
+  useEffect(() => {
+    setSwingServiceAPI(new SwingServiceAPI());
+    if (tronConnected && tronAddress) {
+      setTronWalletAddress(tronAddress);
+      setTransferParams((prev) => ({
+        ...prev,
+        toUserAddress: tronAddress,
+      }));
+    }
+  }, [tronConnected, tronAddress]);
+
+  //Fetch chains and tokens whenever wallet address changes
+  useEffect(() => {
+    setTransferParams((prev) => {
+      return {
+        ...prev,
+        fromUserAddress: walletAddress!,
+      };
+    });
+
+    setChains([]);
+    setTokens([]);
+    setTronTokens([]);
+
+    swingServiceAPI
+      ?.getChainsRequest({ type: "evm" })
+      .then((chains: Chain[] | undefined) => {
+        setChains(chains!);
+      });
+
+    swingServiceAPI
+      ?.getTokensRequest({ chain: defaultTransferParams.fromChain })
+      .then((tokens: Token[] | undefined) => {
+        setTokens(tokens!);
+      });
+
+    swingServiceAPI
+      ?.getTokensRequest({ chain: "tron" })
+      .then((tokens: Token[] | undefined) => {
+        setTronTokens(tokens!);
+      });
+  }, [walletAddress]);
+
+  const selectRef = useRef<HTMLSelectElement>(null);
+
+  // Function to change the selected item
+  const changeSelectedItem = (index: string) => {
+    if (selectRef.current) {
+      selectRef.current.value = index;
+      // Trigger the onChange event manually
+      const event = new Event("change", { bubbles: true });
+      selectRef.current.dispatchEvent(event);
+    }
+  };
+
+  //Connect to Ethereum Wallet
+  async function connectWallet(chainId?: number) {
+    try {
+      // Connect to MetaMask
+      await connect(walletConfig, { chainId });
+
+      // Connect wallet signer to Swing SDK
+      const walletAddress = address;
+
+      setTransferParams((prev) => {
+        return {
+          ...prev,
+          fromUserAddress: walletAddress!,
+        };
+      });
+    } catch (error) {
+      console.error("Connect Wallet Error:", error);
+      toast({
+        variant: "destructive",
+        title: "Something went wrong!",
+        description: (error as Error).message,
+      });
+    }
+  }
+
+  async function getTransStatus(transId: string, txHash: string) {
+    const transactionStatus = await swingServiceAPI?.getTransationStatusRequest(
+      {
+        id: transId,
+        txHash,
+      },
+    );
+
+    setTransStatus(transactionStatus);
+
+    return transactionStatus;
+  }
+
+  async function pollTransactionStatus(transId: string, txHash: string) {
+    const transactionStatus = await getTransStatus(transId, txHash);
+
+    if (transactionStatus?.status! === "Pending") {
+      setTimeout(
+        () => pollTransactionStatus(transId, txHash),
+        transactionPollingDuration,
+      );
+    } else {
+      if (transactionStatus?.status === "Success") {
+        toast({
+          title: "Transaction Successful",
+          description: `Bridge Successful`,
+        });
+      } else if (transactionStatus?.status === "Failed") {
+        toast({
+          variant: "destructive",
+          title: "Transaction Failed",
+          description: transStatus?.errorReason,
+        });
+      }
+
+      setTransferRoute(null);
+      setTransStatus(null);
+      setIsTransacting(false);
+      setIsLoading(false);
+      (sendInputRef.current as HTMLInputElement).value = "";
+    }
+  }
+
+  async function getQuote(value: string) {
+    if (Number(value) <= 0) {
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      if (transferParams.toUserAddress === "") {
+        toast({
+          variant: "destructive",
+          title: "TRX Address Not Set",
+          description: "Please connect your TRX wallet",
+        });
+        return;
+      }
+
+      const quotes = await swingServiceAPI?.getQuoteRequest({
+        fromChain: transferParams.fromChain,
+        fromTokenAddress: transferParams.fromTokenAddress,
+        fromUserAddress:
+          transferParams.fromUserAddress ??
+          defaultTransferParams.dummyFromUserAddress,
+        toChain: transferParams.toChain,
+        tokenSymbol: transferParams.tokenSymbol,
+        toTokenAddress: transferParams.toTokenAddress,
+        toTokenSymbol: transferParams.toTokenSymbol,
+        toUserAddress:
+          transferParams.toUserAddress ??
+          defaultTransferParams.dummyToUserAddress,
+        tokenAmount: convertEthToWei(value, transferParams.fromChainDecimal),
+      });
+
+      if (!quotes?.routes?.length) {
+        toast({
+          variant: "destructive",
+          title: "No routes found",
+          description: "No routes available. Try increasing the send amount.",
+        });
+        setIsLoading(false);
+        changeSelectedItem("NON");
+        return;
+      }
+
+      setQuotes(quotes.routes);
+      setTransferRoute(quotes.routes[0]);
+      setTimeout(
+        () => changeSelectedItem(quotes.routes[0].quote.integration),
+        500,
+      );
+    } catch (error) {
+      console.error("Quote Error:", error);
+      toast({
+        variant: "destructive",
+        title: "Something went wrong!",
+        description: (error as Error).message,
+      });
+    }
+
+    setIsLoading(false);
+  }
+
+  // Update the sendTronTrans function
+  async function sendTronTrans(
+    txData: TransactionData,
+  ): Promise<string | undefined> {
+    try {
+      if (!tronConnected || !wallet) {
+        throw new Error("Tron wallet is not connected");
+      }
+
+      // Create and sign the transaction
+      const signedTx = await wallet.adapter.signTransaction(txData.meta!);
+
+      // Broadcasting the transaction
+      const broadcast =
+        await window?.tronLink?.tronWeb.trx.sendRawTransaction(signedTx);
+      console.log(`broadcast: ${broadcast?.result}`, signedTx.txID);
+
+      return signedTx.txID as string;
+    } catch (error) {
+      console.error("Error sending Tron transaction:", error);
+      throw new Error((error as Error).message);
+    }
+  }
+
+  function switchTransferParams() {
+    const tempTransferParams: TransferParams = Object.create(transferParams);
+
+    const newTransferParams: TransferParams = {
+      tokenAmount: "0",
+      fromChain: tempTransferParams.toChain,
+      tokenSymbol: tempTransferParams.toTokenSymbol!,
+      fromUserAddress: tempTransferParams.toUserAddress!,
+      fromTokenAddress: tempTransferParams.toTokenAddress!,
+      fromTokenIconUrl: tempTransferParams.toTokenIconUrl,
+      fromChainIconUrl: tempTransferParams.toChainIconUrl,
+      fromChainDecimal: tempTransferParams.toChainDecimal,
+      fromNativeTokenSymbol: tempTransferParams.toNativeTokenSymbol,
+      toTokenAddress: tempTransferParams.fromTokenAddress,
+      toTokenSymbol: tempTransferParams.tokenSymbol,
+      toChain: tempTransferParams.fromChain,
+      toChainIconUrl: tempTransferParams.fromChainIconUrl,
+      toTokenIconUrl: tempTransferParams.fromTokenIconUrl!,
+      toUserAddress: tempTransferParams.fromUserAddress,
+      toChainDecimal: tempTransferParams.fromChainDecimal,
+      toNativeTokenSymbol: tempTransferParams.fromNativeTokenSymbol,
+    };
+
+    setTransferRoute(null);
+    setTransferParams(newTransferParams);
+    setQuotes([]);
+    changeSelectedItem("NON"),
+      ((sendInputRef.current as HTMLInputElement).value = "");
+  }
+
+  function onEVMChainSelect(chain: Chain) {
+    swingServiceAPI
+      ?.getTokensRequest({ chain: chain.slug })
+      .then((tokens: Token[] | undefined) => {
+        setTokens(tokens!);
+      });
+
+    if (transferParams.fromChain !== "tron") {
+      setTransferParams((prev) => ({
+        ...prev,
+        tokenAmount: "0",
+        fromChain: chain.slug,
+        fromChainIconUrl: chain.logo,
+
+        tokenSymbol: chain.nativeToken?.symbol!,
+        fromTokenAddress: chain.nativeToken?.address!,
+        fromTokenIconUrl: chain.nativeToken?.logo,
+        fromChainDecimal: chain.nativeToken?.decimals,
+        fromNativeTokenSymbol: chain.nativeToken?.symbol,
+      }));
+    } else {
+      setTransferParams((prev) => ({
+        ...prev,
+        tokenAmount: "0",
+        toChain: chain.slug,
+        toChainIconUrl: chain.logo,
+
+        toTokenSymbol: chain.nativeToken?.symbol!,
+        toTokenAddress: chain.nativeToken?.address!,
+        toTokenIconUrl: chain.nativeToken?.logo!,
+        toChainDecimal: chain.nativeToken?.decimals!,
+        toNativeTokenSymbol: chain.nativeToken?.symbol,
+      }));
+    }
+
+    setTransferRoute(null);
+  }
+
+  function onFromTokenSelect(token: Token) {
+    setTransferParams((prev) => ({
+      ...prev,
+      tokenAmount: "0",
+      tokenSymbol: token.symbol,
+      fromTokenAddress: token.address,
+      fromTokenIconUrl: token.logo,
+      fromChainDecimal: token.decimals,
+    }));
+    setTransferRoute(null);
+  }
+
+  function onToTokenSelect(token: Token) {
+    setTransferParams((prev) => ({
+      ...prev,
+      tokenAmount: "0",
+      toTokenSymbol: token.symbol,
+      toTokenAddress: token.address,
+      toTokenIconUrl: token.logo,
+      toChainDecimal: token.decimals,
+    }));
+    setTransferRoute(null);
+  }
+
+  async function startTransfer() {
+    if (!transferRoute) {
+      toast({
+        variant: "destructive",
+        title: "Something went wrong!",
+        description: "Please get a route first before attempting a transaction",
+      });
+      return;
+    }
+
+    setIsLoading(true);
+    setIsTransacting(true);
+
+    const tokenAmount = convertEthToWei(
+      transferParams.tokenAmount,
+      transferParams.fromChainDecimal,
+    );
+
+    try {
+      if (
+        transferParams.tokenSymbol !== transferParams.fromNativeTokenSymbol &&
+        transferParams.fromChain !== "tron"
+      ) {
+        const checkAllowance = await swingServiceAPI?.getAllowanceRequest({
+          bridge: transferRoute.quote.integration,
+          fromAddress: transferParams.fromUserAddress,
+          fromChain: transferParams.fromChain,
+          tokenAddress: transferParams.fromTokenAddress,
+          tokenSymbol: transferParams.tokenSymbol,
+          toChain: transferParams.toChain,
+          toTokenAddress: transferParams.toTokenAddress!,
+          toTokenSymbol: transferParams.toTokenSymbol!,
+          contractCall: false,
+        });
+
+        if (checkAllowance?.allowance! != tokenAmount) {
+          setTransStatus({
+            status: `Wallet Interaction Required: Approval Token`,
+          });
+
+          const getApprovalTxData =
+            await swingServiceAPI?.getApprovalTxDataRequest({
+              tokenAmount: tokenAmount,
+              bridge: transferRoute.quote.integration,
+              fromAddress: transferParams.fromUserAddress,
+              fromChain: transferParams.fromChain,
+              tokenAddress: transferParams.fromTokenAddress,
+              tokenSymbol: transferParams.tokenSymbol,
+              toChain: transferParams.toChain,
+              toTokenAddress: transferParams.toTokenAddress!,
+              toTokenSymbol: transferParams.toTokenSymbol!,
+              contractCall: false,
+            });
+
+          const txData: TransactionData = {
+            data: getApprovalTxData?.tx?.at(0)?.data!,
+            from: getApprovalTxData?.tx?.at(0)?.from!,
+            to: getApprovalTxData?.tx?.at(0)?.to!,
+          };
+
+          const txResponse = await signer?.sendTransaction(txData);
+
+          const receipt = await txResponse?.wait();
+          console.log("Transaction receipt:", receipt);
+
+          setTransStatus({ status: "Token allowance approved" });
+        }
+      }
+
+      const transfer = await swingServiceAPI?.sendTransactionRequest({
+        fromChain: transferParams.fromChain,
+        fromTokenAddress: transferParams.fromTokenAddress,
+        fromUserAddress: transferParams.fromUserAddress,
+        tokenSymbol: transferParams.tokenSymbol,
+
+        toTokenAddress: transferParams.toTokenAddress!,
+        toChain: transferParams.toChain,
+        toTokenAmount: transferRoute.quote.amount,
+        toTokenSymbol: transferParams.toTokenSymbol!,
+        toUserAddress: transferParams.toUserAddress!,
+        integration: transferRoute.quote.integration,
+
+        tokenAmount,
+        route: transferRoute.route,
+        type: "swap",
+      });
+
+      if (!transfer) {
+        toast({
+          variant: "destructive",
+          title: "Something went wrong!",
+          description: "Transaction Failed",
+        });
+
+        setIsLoading(false);
+        setIsTransacting(false);
+        setTransStatus(null);
+        return;
+      }
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const txData: any = {
+        data: transfer?.tx?.data,
+        from: transfer?.tx?.from!,
+        to: transfer?.tx?.to!,
+        value: transfer?.tx?.value!,
+        txId: transfer?.tx?.txId!,
+        gasLimit: transfer?.tx?.gas!,
+        meta: transfer?.tx?.meta,
+      };
+
+      setTransStatus({
+        status: "Wallet Interaction Required: Approve Transaction",
+      });
+
+      let txHash = "";
+
+      if (transferParams.fromChain === "tron") {
+        const txId = await sendTronTrans(txData);
+        txHash = txId!;
+      } else {
+        const txResponse = await signer?.sendTransaction({
+          data: txData.data,
+          from: txData.from,
+          to: txData.to,
+          value: txData.value,
+          gasLimit: txData.gasLimit,
+        });
+        // Wait for the transaction to be mined
+
+        const receipt = await txResponse?.wait();
+        console.log("Transaction receipt:", receipt);
+        txHash = txResponse?.hash!;
+      }
+
+      pollTransactionStatus(transfer?.id.toString()!, txHash);
+    } catch (error) {
+      console.error("Transfer Error:", error);
+      toast({
+        variant: "destructive",
+        title: "Something went wrong!",
+        description:
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          `${(error as AxiosError & any)?.response?.data?.error} : ${(error as AxiosError & any)?.response?.data?.message}` ??
+          (error as Error).message ??
+          "Something went wrong",
+      });
+
+      setIsTransacting(false);
+      setTransStatus(null);
+    }
+  }
+
+  function SelectFromChainPanel() {
+    return (
+      <div
+        className={clsx("flex grow transform justify-center", {
+          "cursor-pointer p-2 hover:bg-gray-900":
+            transferParams.fromChain !== "tron",
+        })}
+      >
+        {transferParams.fromChain === "tron" ? (
+          <img src={transferParams.fromChainIconUrl} className="w-7" />
+        ) : (
+          <SelectChainPanel
+            onChainSelect={onEVMChainSelect}
+            chains={chains!}
+            transferParams={
+              transferParams.fromChain !== "tron"
+                ? {
+                    chain: transferParams.fromChain,
+                    chainIconUrl: transferParams.fromChainIconUrl!,
+                  }
+                : {
+                    chain: transferParams.toChain,
+                    chainIconUrl: transferParams.toChainIconUrl!,
+                  }
+            }
+          />
+        )}
+      </div>
+    );
+  }
+
+  function SelectToChainPanel() {
+    return (
+      <div
+        className={clsx("grow transform p-2", {
+          "cursor-pointer hover:bg-pink-900": transferParams.toChain !== "tron",
+        })}
+      >
+        {transferParams.toChain === "tron" ? (
+          <img src={transferParams.toChainIconUrl} className="w-7" />
+        ) : (
+          <SelectChainPanel
+            onChainSelect={onEVMChainSelect}
+            chains={chains!}
+            transferParams={
+              transferParams.fromChain !== "tron"
+                ? {
+                    chain: transferParams.fromChain,
+                    chainIconUrl: transferParams.fromChainIconUrl!,
+                  }
+                : {
+                    chain: transferParams.toChain,
+                    chainIconUrl: transferParams.toChainIconUrl!,
+                  }
+            }
+          />
+        )}
+      </div>
+    );
+  }
+
+  function SelectFromTokenPanel() {
+    return (
+      <div
+        className={clsx(
+          "relative z-10 h-12 grow -skew-x-2 transform cursor-pointer bg-purple-500 p-2 hover:bg-gray-900",
+        )}
+      >
+        <SelectTokenPanel
+          onTokenSelect={onFromTokenSelect}
+          tokens={transferParams.fromChain === "tron" ? tronTokens! : tokens}
+          transferParams={{
+            chain: transferParams.fromChain,
+            token: transferParams.tokenSymbol,
+            tokenIconUrl: transferParams.fromTokenIconUrl!,
+          }}
+        />
+      </div>
+    );
+  }
+
+  function SelectToTokenPanel() {
+    return (
+      <div
+        className={clsx(
+          "relative z-10 h-12 grow -skew-x-2 transform cursor-pointer bg-yellow-500 p-2 text-black hover:bg-gray-900",
+        )}
+      >
+        <SelectTokenPanel
+          onTokenSelect={onToTokenSelect}
+          tokens={transferParams.toChain === "tron" ? tronTokens! : tokens}
+          transferParams={{
+            chain: transferParams.toChain,
+            token: transferParams.toTokenSymbol,
+            tokenIconUrl: transferParams.toTokenIconUrl!,
+          }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-row justify-center">
+      <div className="w-96 rounded-xl bg-white shadow-md lg:max-w-96">
+        <div className="mb-6 flex items-center justify-between px-6 py-4">
+          <h1 className="text-2xl font-bold">Tron Gate</h1>
+
+          <div className="flex items-center">
+            <button
+              className="flex items-center gap-1 rounded-xl bg-purple-300 p-2 text-xs font-bold ring-1 ring-purple-600"
+              onClick={() =>
+                tronConnected ? disconnect() : select(TronLinkAdapterName)
+              }
+            >
+              <span
+                className={clsx("p4 h-4 w-4 rounded-full", {
+                  "bg-red-500": !tronConnected,
+                  "bg-green-500": tronConnected,
+                })}
+              ></span>
+              <span>
+                {tronConnected ? <>Tron Connected</> : <>Connect Tron</>}
+              </span>
+            </button>
+            <div className="h-5 w-5 cursor-pointer rounded-full">
+              <FontAwesomeIcon className="ml-2" icon={faHistory} />
+            </div>
+          </div>
+        </div>
+        <div className="space-y-5">
+          <div className="text-md flex justify-center gap-x-2 font-bold text-gray-200">
+            {!isTransacting ? (
+              <div className="flex w-full   justify-between  bg-purple-200">
+                <div
+                  className="flex items-center gap-x-2 px-3 text-sm
+                                        font-semibold text-white outline-2 outline-offset-2
+                                        transition-colors"
+                >
+                  <p className="text-black">SRC</p>
+                  <SelectFromChainPanel />
+                  <SelectFromTokenPanel />
+                </div>
+                <div
+                  className="group relative z-10 flex -skew-x-2 transform items-center bg-zinc-500
+                                        p-1 px-3 text-sm font-semibold
+                                        text-white outline-2 outline-offset-2 transition-colors hover:bg-gray-900"
+                  onClick={() => {
+                    switchTransferParams();
+                  }}
+                >
+                  <TbSwitchHorizontal className="size-8 group-hover:cursor-pointer" />
+                </div>
+
+                <div
+                  className="flex items-center gap-x-2 px-3 text-sm
+                                        font-semibold text-white outline-2 outline-offset-2
+                                        transition-colors"
+                >
+                  <SelectToTokenPanel />
+                  <SelectToChainPanel />
+                  <p className="text-black">DEST</p>
+                </div>
+              </div>
+            ) : (
+              <div
+                className="group flex w-full cursor-pointer items-center justify-between
+                                 gap-x-2 bg-zinc-600 px-3 py-2
+                                 text-xs font-semibold text-white
+                                 outline-2 outline-offset-2 transition-colors hover:bg-gray-900 active:bg-gray-800 active:text-white/80"
+              >
+                <span>{transStatus?.status ?? "Sending"}</span>
+                <span className="h-5 w-5 rounded-full bg-cyan-400"></span>
+              </div>
+            )}
+          </div>
+          <div className="flex items-center justify-between px-6">
+            <input
+              aria-label="deposit"
+              className="m-0 h-auto w-[50%] grow border-none bg-transparent p-0 text-3xl placeholder:m-0 placeholder:p-0 placeholder:text-3xl focus:border-none focus:ring-0"
+              placeholder={"0 " + transferParams.tokenSymbol}
+              ref={sendInputRef}
+              disabled={!tronWalletAddress.length}
+              onChange={(e) => {
+                debounced(e.target.value);
+                setTransferRoute(null); // Reset transfer route
+              }}
+              type="number"
+            />
+            <div className="flex items-center gap-x-1 rounded-xl hover:cursor-pointer">
+              <h4 className="w-full text-4xl font-bold text-zinc-700">
+                {transferParams.tokenSymbol}
+              </h4>
+              <img
+                src={transferParams.fromTokenIconUrl}
+                className="w-8 rounded-full"
+              />
+            </div>
+          </div>
+          <div className="flex items-center px-6">
+            <input
+              aria-label="receive"
+              disabled
+              className="m-0 h-auto w-[50%] grow border-none bg-transparent p-0 text-3xl placeholder:m-0 placeholder:p-0 placeholder:text-3xl focus:border-none focus:ring-0"
+              placeholder={`0 ${transferParams.toChain}`}
+              type="number"
+              value={
+                convertWeiToEth(
+                  transferRoute?.quote.amount! ?? 0,
+                  transferParams.toChainDecimal,
+                ) || `0 ${transferParams.toChain}`
+              }
+              onChange={(e) => {
+                setTransferRoute(null); // Reset transfer route
+                setTransferParams((prev) => ({
+                  ...prev,
+                  amount: e.target.value,
+                }));
+              }}
+            />
+            <div className="flex items-center gap-x-1 rounded-xl hover:cursor-pointer">
+              <h4 className="w-full text-4xl font-bold text-zinc-700">
+                {transferParams.toTokenSymbol}
+              </h4>
+              <img
+                src={transferParams.toTokenIconUrl}
+                className="w-8 rounded-full"
+              />
+            </div>
+          </div>
+          <p className="m-0 p-0 px-6 text-sm text-zinc-950/[0.6]">
+            You will receive: {formatUSD(transferRoute?.quote?.amountUSD! ?? 0)}
+          </p>
+          <div className="px-6">
+            <label htmlFor="wallet" className="mb-1 block font-semibold">
+              Select Route <span className="text-red-500">*</span>
+            </label>
+            <select
+              id="route"
+              ref={selectRef}
+              className="w-full rounded border border-gray-300 p-2"
+              onChange={(e) => {
+                setTransferRoute(
+                  quotes?.at(Number(e.currentTarget.value)) ?? null,
+                );
+              }}
+            >
+              <option value={"NON"}>No Route Selected</option>
+              {quotes?.map((route, index) => (
+                <option value={route.quote.integration} key={index}>
+                  {route.quote.integration} (Fee: ${route.quote.bridgeFeeUSD})
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="px-6">
+            <label htmlFor="wallet" className="mb-1 block font-semibold">
+              Send to {transferParams.toChain} wallet{" "}
+              <span className="text-red-500">*</span>
+            </label>
+            <input
+              type="text"
+              id="wallet"
+              className="w-full rounded border border-gray-300 p-2"
+              placeholder={`Enter your ${transferParams.toChain} wallet address`}
+            />
+          </div>
+        </div>
+        <div className="px-6 py-4">
+          <button
+            disabled={
+              (connectionStatus === "connected" && isLoading) ||
+              (connectionStatus === "connected" && isTransacting) ||
+              (connectionStatus === "connected" && !transferRoute)
+            }
+            className={clsx(
+              "mt-6 w-full rounded-xl bg-purple-800 px-2 py-4 font-semibold text-white transition-colors hover:bg-purple-600 ",
+              {
+                "hover:bg-blue-200":
+                  connectionStatus === "connected" && transferRoute,
+                "opacity-30":
+                  (isLoading || !transferRoute || isTransacting) &&
+                  connectionStatus === "connected",
+              },
+            )}
+            onClick={() =>
+              connectionStatus === "connected"
+                ? startTransfer()
+                : connectWallet()
+            }
+          >
+            <h4 className="w-full font-bold text-white">
+              <>
+                {connectionStatus === "connected"
+                  ? isLoading && !transferRoute
+                    ? "FETCHING QUOTE"
+                    : `START TRANSFER`
+                  : "CONNECT ETHEREUM WALLET"}
+                {(isLoading || isTransacting) && (
+                  <FontAwesomeIcon className="ml-2" icon={faCircleNotch} spin />
+                )}
+              </>
+            </h4>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+function formatUSD(amount: string) {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    currencyDisplay: "narrowSymbol",
+  }).format(Number(amount));
+}
+
+export default Swap;
diff --git a/examples/swaps-api-nextjs-tron/src/components/ThirdwebProvider.tsx b/examples/swaps-api-nextjs-tron/src/components/ThirdwebProvider.tsx
new file mode 100644
index 0000000..b420a91
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/components/ThirdwebProvider.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { ThirdwebProvider } from "@thirdweb-dev/react";
diff --git a/examples/swaps-api-nextjs-tron/src/components/ui/Backdrop.tsx b/examples/swaps-api-nextjs-tron/src/components/ui/Backdrop.tsx
new file mode 100644
index 0000000..3b2f643
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/components/ui/Backdrop.tsx
@@ -0,0 +1,7 @@
+export const Backdrop = () => {
+  return (
+    <div className="absolute inset-0 -z-10 flex h-full w-full items-center justify-center">
+      <div className="-z-10 h-[30%] w-[30%] rounded-full bg-red-500 blur-[190px]"></div>
+    </div>
+  );
+};
diff --git a/examples/swaps-api-nextjs-tron/src/components/ui/Button.tsx b/examples/swaps-api-nextjs-tron/src/components/ui/Button.tsx
new file mode 100644
index 0000000..251668b
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/components/ui/Button.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import Link from "next/link";
+import clsx from "clsx";
+
+const baseStyles = {
+  solid:
+    "inline-flex justify-center rounded-2xl py-2 px-3 text-sm font-semibold outline-2 outline-offset-2 transition-colors",
+  outline:
+    "inline-flex justify-center rounded-2xl border py-[calc(theme(spacing.2)-1px)] px-[calc(theme(spacing.3)-1px)] text-sm outline-2 outline-offset-2 transition-colors",
+};
+
+const variantStyles = {
+  solid: {
+    cyan: "relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-600 active:text-white/80 before:transition-colors",
+    white:
+      "bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70",
+    gray: "bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80",
+  },
+  outline: {
+    gray: "border-gray-300 text-gray-700 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80",
+  },
+};
+
+export const Button = function Button({
+  variant = "solid",
+  color = "gray",
+  className,
+  href,
+  ...props
+}: {
+  variant?: "solid" | "outline";
+  color?: "cyan" | "white" | "gray";
+  className?: string;
+  href?: string;
+} & React.InputHTMLAttributes<HTMLAnchorElement>) {
+  const styles = variantStyles[variant];
+
+  className = clsx(
+    baseStyles[variant],
+    color in styles ? styles[color as keyof typeof styles] : {},
+    className,
+  );
+
+  const isExternalLink = href?.startsWith("http");
+
+  return href ? (
+    <Link
+      href={href}
+      className={className}
+      target={isExternalLink ? "_blank" : undefined}
+      {...props}
+    />
+  ) : (
+    <a className={className} {...props} />
+  );
+};
diff --git a/examples/swaps-api-nextjs-tron/src/components/ui/ChainTokenItem.tsx b/examples/swaps-api-nextjs-tron/src/components/ui/ChainTokenItem.tsx
new file mode 100644
index 0000000..e06ed75
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/components/ui/ChainTokenItem.tsx
@@ -0,0 +1,17 @@
+export const ChainTokenItem = ({
+  logo,
+  name,
+  onItemSelect,
+}: {
+  logo: string;
+  name: string;
+  onItemSelect?: () => void | undefined;
+}) => (
+  <div
+    className="flex justify-between rounded-xl p-3 hover:cursor-pointer hover:bg-zinc-300"
+    onClick={() => onItemSelect?.()}
+  >
+    <img src={logo} alt={name} className="h-8 w-8 rounded-full" />
+    <span className="">{name}</span>
+  </div>
+);
diff --git a/examples/swaps-api-nextjs-tron/src/components/ui/Container.tsx b/examples/swaps-api-nextjs-tron/src/components/ui/Container.tsx
new file mode 100644
index 0000000..af45582
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/components/ui/Container.tsx
@@ -0,0 +1,17 @@
+import clsx from "clsx";
+
+export function Container({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      className={clsx("mx-auto max-w-[100rem] px-4 sm:px-6 lg:px-8", className)}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/examples/swaps-api-nextjs-tron/src/components/ui/Header.tsx b/examples/swaps-api-nextjs-tron/src/components/ui/Header.tsx
new file mode 100644
index 0000000..0ec2e7f
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/components/ui/Header.tsx
@@ -0,0 +1,159 @@
+"use client";
+
+import Link from "next/link";
+import { Popover } from "@headlessui/react";
+import { AnimatePresence, motion } from "framer-motion";
+
+import { Button } from "./Button";
+import { Container } from "./Container";
+import { NavLinks } from "./NavLinks";
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faGithub } from "@fortawesome/free-brands-svg-icons";
+
+function MenuIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+      className={className}
+    >
+      <path
+        d="M5 6h14M5 18h14M5 12h14"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ChevronUpIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+      className={className}
+    >
+      <path
+        d="M17 14l-5-5-5 5"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function MobileNavLink({
+  children,
+  href,
+}: {
+  children: React.ReactNode;
+  href: string;
+}) {
+  return (
+    <Popover.Button
+      as={Link}
+      className="block text-base leading-7 tracking-tight text-gray-700"
+      href={href}
+    >
+      {children}
+    </Popover.Button>
+  );
+}
+
+export function Header() {
+  return (
+    <header>
+      <nav>
+        <Container className="relative z-50 flex items-center justify-between py-8">
+          <div className="relative z-10 flex items-center gap-16">
+            <Link href="/" aria-label="Home" className="text-2xl text-cyan-100">
+              Tron Cate
+            </Link>
+            <div className="hidden lg:flex lg:gap-10">
+              <NavLinks />
+            </div>
+          </div>
+
+          <div className="flex items-center gap-6">
+            <Popover className="lg:hidden">
+              {({ open }) => (
+                <>
+                  <Popover.Button
+                    className="relative z-10 -m-2 inline-flex items-center rounded-lg stroke-zinc-50 p-2 hover:bg-gray-200/50 hover:stroke-gray-600 active:stroke-gray-900 [&:not(:focus-visible)]:focus:outline-none"
+                    aria-label="Toggle site navigation"
+                  >
+                    {({ open }) =>
+                      open ? (
+                        <ChevronUpIcon className="h-6 w-6 stroke-zinc-900" />
+                      ) : (
+                        <MenuIcon className="h-6 w-6" />
+                      )
+                    }
+                  </Popover.Button>
+                  <AnimatePresence initial={false}>
+                    {open && (
+                      <>
+                        <Popover.Overlay
+                          static
+                          as={motion.div}
+                          initial={{ opacity: 0 }}
+                          animate={{ opacity: 1 }}
+                          exit={{ opacity: 0 }}
+                          className="fixed inset-0 z-0 bg-gray-300/60 backdrop-blur"
+                        />
+                        <Popover.Panel
+                          static
+                          as={motion.div}
+                          initial={{ opacity: 0, y: -32 }}
+                          animate={{ opacity: 1, y: 0 }}
+                          exit={{
+                            opacity: 0,
+                            y: -32,
+                            transition: { duration: 0.2 },
+                          }}
+                          className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-gray-50 px-6 pb-6 pt-32 shadow-2xl shadow-gray-900/20"
+                        >
+                          <div className="space-y-4">
+                            <MobileNavLink href="#">Swap</MobileNavLink>
+                            <MobileNavLink href="#">
+                              Documentation
+                            </MobileNavLink>
+                          </div>
+
+                          <div className="mt-4 flex flex-col space-y-4">
+                            <Button
+                              href="https://github.com/swing-xyz/examples/tree/main/examples/swaps-api-nextjs-solana"
+                              className="space-x-2 text-zinc-900"
+                              variant="outline"
+                            >
+                              <FontAwesomeIcon size="lg" icon={faGithub} />
+                              <span className="">Fork on Github</span>
+                            </Button>
+                          </div>
+                        </Popover.Panel>
+                      </>
+                    )}
+                  </AnimatePresence>
+                </>
+              )}
+            </Popover>
+
+            <Button
+              href="https://github.com/swing-xyz/examples/tree/main/examples/swaps-api-nextjs-solana"
+              className="hidden space-x-2 text-white lg:block"
+              variant="outline"
+            >
+              <FontAwesomeIcon size="lg" icon={faGithub} />
+              <span>Fork on Github</span>
+            </Button>
+          </div>
+        </Container>
+      </nav>
+    </header>
+  );
+}
diff --git a/examples/swaps-api-nextjs-tron/src/components/ui/Hero.tsx b/examples/swaps-api-nextjs-tron/src/components/ui/Hero.tsx
new file mode 100644
index 0000000..88dcda8
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/components/ui/Hero.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import React from "react";
+import { Container } from "./Container";
+
+import SwapSDK from "../Swap";
+import { TronLinkAdapter } from "@tronweb3/tronwallet-adapters";
+import { WalletProvider } from "@tronweb3/tronwallet-adapter-react-hooks";
+
+export function Hero() {
+  const adapters = [new TronLinkAdapter()];
+
+  return (
+    <WalletProvider adapters={adapters} autoConnect={true}>
+      <div className="w-full overflow-hidden py-2">
+        <Container className="flex w-full grow justify-center gap-16">
+          <div className="min-h-[80vh] w-[70vw] grow">
+            <SwapSDK />
+          </div>
+        </Container>
+      </div>
+    </WalletProvider>
+  );
+}
diff --git a/examples/swaps-api-nextjs-tron/src/components/ui/NavLinks.tsx b/examples/swaps-api-nextjs-tron/src/components/ui/NavLinks.tsx
new file mode 100644
index 0000000..e6a71b1
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/components/ui/NavLinks.tsx
@@ -0,0 +1,40 @@
+import { useState } from "react";
+import Link from "next/link";
+import { AnimatePresence, motion } from "framer-motion";
+
+export function NavLinks() {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+  return (
+    <>
+      {[
+        ["Swap", "#"],
+        ["Documentation", "#"],
+      ].map(([label, href], index) => (
+        <Link
+          key={label}
+          href={href!}
+          className="text-md relative -mx-3 -my-2 rounded-lg px-3 py-2 font-medium text-gray-200 transition-colors delay-150 hover:text-gray-900 hover:delay-[0ms]"
+          onMouseEnter={() => setHoveredIndex(index)}
+          onMouseLeave={() => setHoveredIndex(null)}
+        >
+          <AnimatePresence>
+            {hoveredIndex === index && (
+              <motion.span
+                className="absolute inset-0 rounded-lg bg-gray-100"
+                layoutId="hoverBackground"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1, transition: { duration: 0.15 } }}
+                exit={{
+                  opacity: 0,
+                  transition: { duration: 0.15, delay: 0.2 },
+                }}
+              />
+            )}
+          </AnimatePresence>
+          <span className="relative z-10">{label}</span>
+        </Link>
+      ))}
+    </>
+  );
+}
diff --git a/examples/swaps-api-nextjs-tron/src/components/ui/SelectChainPanel.tsx b/examples/swaps-api-nextjs-tron/src/components/ui/SelectChainPanel.tsx
new file mode 100644
index 0000000..8b5c111
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/components/ui/SelectChainPanel.tsx
@@ -0,0 +1,48 @@
+import { useState } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { ChainTokenItem } from "./ChainTokenItem";
+import { Chain } from "interfaces/chain.interface";
+
+const allowedChains = [
+  "ethereum",
+  "polygon",
+  "avalanche",
+  "arbitrum",
+  "sepolia",
+];
+
+export const SelectChainPanel = ({
+  chains,
+  transferParams,
+  onChainSelect,
+}: {
+  chains: Chain[];
+  transferParams: { chainIconUrl: string; chain: string | undefined };
+  onChainSelect?: (chain: Chain) => void;
+}) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  return (
+    <Popover defaultOpen={false} open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger className="flex items-center justify-center rounded-2xl">
+        <img src={transferParams.chainIconUrl} className="w-7 rounded-full" />
+      </PopoverTrigger>
+      <PopoverContent className="max-h-96 min-w-[50px] overflow-scroll rounded-2xl">
+        {chains.map(
+          (chain) =>
+            allowedChains.includes(chain.slug) && (
+              <ChainTokenItem
+                logo={chain.logo}
+                name={chain.name}
+                key={chain.slug}
+                onItemSelect={() => {
+                  onChainSelect?.(chain);
+                  setIsOpen(false);
+                }}
+              />
+            ),
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+};
diff --git a/examples/swaps-api-nextjs-tron/src/components/ui/SelectTokenPanel.tsx b/examples/swaps-api-nextjs-tron/src/components/ui/SelectTokenPanel.tsx
new file mode 100644
index 0000000..a4b70d1
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/components/ui/SelectTokenPanel.tsx
@@ -0,0 +1,77 @@
+import { useEffect, useState } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { Token } from "interfaces/token.interface";
+import { ChainTokenItem } from "./ChainTokenItem";
+
+const allowedTokens = [
+  "MATIC",
+  "USDC",
+  "USDT",
+  "ARB",
+  "ETH",
+  "AVAX",
+  "POL",
+  "TRX",
+];
+
+export const SelectTokenPanel = ({
+  tokens,
+  transferParams,
+  onTokenSelect,
+}: {
+  tokens: Token[];
+  transferParams: {
+    tokenIconUrl: string;
+    chain: string | undefined;
+    token: string | undefined;
+  };
+  onTokenSelect?: (token: Token) => void;
+}) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const [filteredTokens, setFilteredTokens] = useState<Token[]>(tokens);
+
+  useEffect(() => {
+    if (isOpen) {
+      setFilteredTokens(tokens);
+    }
+  }, [isOpen]);
+
+  return (
+    <Popover defaultOpen={false} open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger className="flex items-center justify-center rounded-2xl">
+        <span>{transferParams.token}</span>
+      </PopoverTrigger>
+      <PopoverContent className="flex max-h-96 min-w-[50px] flex-col gap-y-2 overflow-scroll rounded-2xl">
+        <input
+          id="width"
+          defaultValue=""
+          placeholder={"Search Token (e.g. USDC)"}
+          className="col-span-2 h-8 w-full rounded-xl border-none focus:border-2 focus:border-purple-300"
+          onChange={(e) => {
+            const tokenResults = tokens?.filter((token) =>
+              token.symbol
+                .toLowerCase()
+                .startsWith(e.target.value.toLowerCase()),
+            );
+            setFilteredTokens(() => [...tokenResults!]);
+          }}
+        />
+        {filteredTokens?.map(
+          (token, index) =>
+            allowedTokens.includes(token.symbol) && (
+              <ChainTokenItem
+                logo={token.logo}
+                name={token.symbol}
+                key={index}
+                onItemSelect={() => {
+                  onTokenSelect?.(token);
+                  setIsOpen(false);
+                }}
+              />
+            ),
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+};
diff --git a/examples/swaps-api-nextjs-tron/src/components/ui/TransferHistoryPanel.tsx b/examples/swaps-api-nextjs-tron/src/components/ui/TransferHistoryPanel.tsx
new file mode 100644
index 0000000..ddc59a9
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/components/ui/TransferHistoryPanel.tsx
@@ -0,0 +1,112 @@
+import { useEffect, useState } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import {
+  Transaction,
+  TransactionResponseAPIResponse,
+} from "interfaces/history.interface";
+import { MdOutlineHistory } from "react-icons/md";
+import clsx from "clsx";
+import { pendingStatuses } from "interfaces/send.interface";
+import { ISwingServiceAPI } from "interfaces/swing-service.interface";
+
+export const TransferHistoryPanel = ({
+  swingServiceAPI,
+  userAddress = "",
+  className,
+  onItemSelect,
+}: {
+  userAddress: string;
+  className?: string;
+  onItemSelect?: (token: Transaction) => void;
+  swingServiceAPI: ISwingServiceAPI;
+}) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const [historyList, sethistoryList] = useState<Transaction[] | undefined>([]);
+  const [filteredItems, setFilteredItems] = useState<Transaction[] | undefined>(
+    [],
+  );
+
+  useEffect(() => {
+    if (isOpen && userAddress.length) {
+      swingServiceAPI
+        ?.getTransationHistoryRequest({ userAddress })
+        .then((response: TransactionResponseAPIResponse | undefined) => {
+          sethistoryList(response?.transactions);
+          setFilteredItems(response?.transactions);
+        });
+    }
+  }, [isOpen]);
+
+  return (
+    <Popover defaultOpen={false} open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger className={className}>
+        <MdOutlineHistory className="size-7 group-hover:text-zinc-50" />
+      </PopoverTrigger>
+      <PopoverContent className="flex max-h-96 min-w-[50px] flex-col gap-y-2 overflow-scroll rounded-2xl p-2">
+        <input
+          id="width"
+          defaultValue=""
+          placeholder={"Search by status"}
+          className="col-span-2 h-8 w-full rounded-xl border-none focus:border-2 focus:border-purple-300"
+          onChange={(e) => {
+            const historyResults = historyList?.filter(
+              (history) =>
+                history.status
+                  .toLowerCase()
+                  .startsWith(e.target.value.toLowerCase()) ||
+                history
+                  .fromChainSlug!.toLowerCase()
+                  .startsWith(e.target.value.toLowerCase()) ||
+                history
+                  .toChainSlug!.toLowerCase()
+                  .startsWith(e.target.value.toLowerCase()),
+            );
+            setFilteredItems(() => [...historyResults!]);
+          }}
+        />
+        {filteredItems?.reverse().map((transaction, index) => (
+          <div
+            key={index}
+            className="grid min-h-24 grid-cols-3 gap-x-1 rounded-2xl p-2 shadow hover:cursor-pointer hover:bg-zinc-100"
+            onClick={() => onItemSelect?.(transaction)}
+          >
+            <div className="flex flex-col justify-between rounded-xl bg-purple-100 p-1">
+              <span className="text-xs font-bold">ROUTE</span>
+              <span className="text-xs">
+                {transaction.fromChainSlug?.toUpperCase().substring(0, 3)} (
+                {transaction.fromTokenSymbol}) {">"}{" "}
+                {transaction.toChainSlug?.toUpperCase().substring(0, 3)} (
+                {transaction.toTokenSymbol})
+              </span>
+            </div>
+
+            <div className="flex flex-col justify-between rounded-xl bg-blue-100 p-1">
+              <span className="text-xs font-bold">AMOUNT</span>
+              <span className="text-xs">
+                {transaction.toAmountUsdValue} USD
+              </span>
+            </div>
+
+            <div className="flex flex-col justify-between rounded-xl bg-cyan-100 p-1">
+              <span className="text-xs font-bold">STATUS</span>
+              <span
+                className={clsx("rounded-xl p-1 text-xs font-bold", {
+                  "bg-green-400": transaction.status === "Completed",
+                  "bg-yellow-400 text-black": pendingStatuses.includes(
+                    transaction.status,
+                  ),
+                  "bg-red-400 text-white":
+                    transaction.status === "Failed Source Chain" ||
+                    "Failed Destination Chain",
+                })}
+              >
+                {transaction.status}
+              </span>
+            </div>
+          </div>
+        ))}
+      </PopoverContent>
+    </Popover>
+  );
+};
diff --git a/examples/swaps-api-nextjs-tron/src/components/ui/input.tsx b/examples/swaps-api-nextjs-tron/src/components/ui/input.tsx
new file mode 100644
index 0000000..433ae98
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { cn } from "lib";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-800 dark:bg-zinc-950 dark:ring-offset-zinc-950 dark:placeholder:text-zinc-400 dark:focus-visible:ring-zinc-300",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };
diff --git a/examples/swaps-api-nextjs-tron/src/components/ui/label.tsx b/examples/swaps-api-nextjs-tron/src/components/ui/label.tsx
new file mode 100644
index 0000000..644132e
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/components/ui/label.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "lib";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
diff --git a/examples/swaps-api-nextjs-tron/src/components/ui/popover.tsx b/examples/swaps-api-nextjs-tron/src/components/ui/popover.tsx
new file mode 100644
index 0000000..efbc6cf
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/components/ui/popover.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "lib";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border border-zinc-200 bg-white p-4 text-zinc-950 shadow-md outline-none dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };
diff --git a/examples/swaps-api-nextjs-tron/src/components/ui/toast.tsx b/examples/swaps-api-nextjs-tron/src/components/ui/toast.tsx
new file mode 100644
index 0000000..550ac85
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/components/ui/toast.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+
+import { cn } from "lib";
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className,
+    )}
+    {...props}
+  />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-xl border border-zinc-200 p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full dark:border-zinc-800",
+  {
+    variants: {
+      variant: {
+        default:
+          "border bg-white text-zinc-950 dark:bg-zinc-950 dark:text-zinc-50",
+        destructive:
+          "destructive group border-red-500 bg-red-500 text-zinc-50 dark:border-red-900 dark:bg-red-900 dark:text-zinc-50",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-xl border border-zinc-200 bg-transparent px-3 text-sm font-medium ring-offset-white transition-colors hover:bg-zinc-100 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-zinc-100/40 group-[.destructive]:hover:border-red-500/30 group-[.destructive]:hover:bg-red-500 group-[.destructive]:hover:text-zinc-50 group-[.destructive]:focus:ring-red-500 dark:border-zinc-800 dark:ring-offset-zinc-950 dark:hover:bg-zinc-800 dark:focus:ring-zinc-300 dark:group-[.destructive]:border-zinc-800/40 dark:group-[.destructive]:hover:border-red-900/30 dark:group-[.destructive]:hover:bg-red-900 dark:group-[.destructive]:hover:text-zinc-50 dark:group-[.destructive]:focus:ring-red-900",
+      className,
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-xl p-1 text-zinc-950/50 opacity-0 transition-opacity hover:text-zinc-950 focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:text-zinc-50/50 dark:hover:text-zinc-50",
+      className,
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+};
diff --git a/examples/swaps-api-nextjs-tron/src/components/ui/toaster.tsx b/examples/swaps-api-nextjs-tron/src/components/ui/toaster.tsx
new file mode 100644
index 0000000..32376bc
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/components/ui/toaster.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "components/ui/toast";
+import { useToast } from "components/ui/use-toast";
+
+export function Toaster() {
+  const { toasts } = useToast();
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        );
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  );
+}
diff --git a/examples/swaps-api-nextjs-tron/src/components/ui/use-toast.ts b/examples/swaps-api-nextjs-tron/src/components/ui/use-toast.ts
new file mode 100644
index 0000000..7bb041c
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/components/ui/use-toast.ts
@@ -0,0 +1,191 @@
+"use client";
+
+// Inspired by react-hot-toast library
+import * as React from "react";
+
+import type { ToastActionElement, ToastProps } from "components/ui/toast";
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+};
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"];
+      toast: ToasterToast;
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"];
+      toast: Partial<ToasterToast>;
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"];
+      toastId?: ToasterToast["id"];
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"];
+      toastId?: ToasterToast["id"];
+    };
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
+        ),
+      };
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      };
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+type Toast = Omit<ToasterToast, "id">;
+
+function toast({ ...props }: Toast) {
+  const id = genId();
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  };
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  };
+}
+
+export { useToast, toast };
diff --git a/examples/swaps-api-nextjs-tron/src/images/logos/cnn.svg b/examples/swaps-api-nextjs-tron/src/images/logos/cnn.svg
new file mode 100644
index 0000000..a640727
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/images/logos/cnn.svg
@@ -0,0 +1,11 @@
+<svg width="68" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M5.155 15.807c0 5.795 4.715 10.51 10.51 10.51h9.817c.617 0 1.095-.586 1.095-1.09V5.966a2.21 2.21 0 0 1 2.206-2.207c.78 0 1.508.414 1.897 1.08a91573.874 91573.874 0 0 1 12.332 21.263.918.918 0 0 0 1.701-.476V5.968c0-1.217.99-2.207 2.206-2.207.78 0 1.508.414 1.897 1.08.05.084 3.02 5.208 6.164 10.634l6.16 10.63a.918.918 0 0 0 1.7-.476V.138h-3.87V15.31S51.96 3.243 51.734 2.855C50.709 1.105 48.768 0 46.703 0a5.861 5.861 0 0 0-5.86 5.86v9.45s-7.01-12.067-7.238-12.455C32.582 1.105 30.641 0 28.575 0a5.861 5.861 0 0 0-5.86 5.86V21.39c.003.565-.422 1.057-1.04 1.059h-5.968a6.64 6.64 0 0 1 0-13.282h4.998V5.297h-5.04c-5.795 0-10.51 4.715-10.51 10.51Z"
+    fill="#737373" />
+  <path
+    d="M64.13.137v25.49c0 1.217-.989 2.207-2.206 2.207-.78 0-1.508-.414-1.897-1.08-.05-.084-3.02-5.209-6.163-10.634l-6.16-10.63a.918.918 0 0 0-1.7.475v19.662c-.001 1.217-.99 2.207-2.208 2.207-.78 0-1.507-.414-1.897-1.08L35.732 16.12 29.567 5.49a.917.917 0 0 0-1.7.475v19.26c0 1.269-1.115 2.381-2.385 2.381h-9.816c-6.507 0-11.8-5.293-11.8-11.8 0-6.506 5.293-11.8 11.8-11.8h5.04V.136H15.67C7.016.137 0 7.153 0 15.807c0 8.655 7.016 15.67 15.67 15.67h9.911c3.754.002 6.169-2.198 6.164-6.255v-8.938s7.06 12.153 7.238 12.456a5.86 5.86 0 0 0 10.89-3.006v-9.45s7.01 12.068 7.238 12.456c1.023 1.75 2.964 2.855 5.03 2.855A5.86 5.86 0 0 0 68 25.734V.136h-3.87Z"
+    fill="#737373" />
+  <path
+    d="M3.865 15.807c0 6.507 5.294 11.8 11.8 11.8h9.817c1.27 0 2.384-1.112 2.384-2.38V5.966a.917.917 0 0 1 1.7-.475c.05.084 3.159 5.445 6.165 10.629L41.9 26.755a2.202 2.202 0 0 0 1.897 1.08 2.21 2.21 0 0 0 2.207-2.207V5.967a.917.917 0 0 1 1.7-.475l6.16 10.629 6.163 10.634a2.201 2.201 0 0 0 1.897 1.08c1.218 0 2.207-.99 2.207-2.207V.138h-1.29v25.49a.918.918 0 0 1-1.7.475l-6.16-10.629c-3.145-5.426-6.114-10.55-6.164-10.634a2.201 2.201 0 0 0-1.897-1.08 2.21 2.21 0 0 0-2.206 2.207v19.66a.918.918 0 0 1-1.701.476A344293.41 344293.41 0 0 1 30.68 4.84a2.201 2.201 0 0 0-1.897-1.08 2.21 2.21 0 0 0-2.207 2.207v19.26c0 .504-.478 1.09-1.094 1.09h-9.817c-5.795 0-10.51-4.715-10.51-10.51s4.715-10.51 10.51-10.51h5.04v-1.29h-5.04c-6.506 0-11.8 5.294-11.8 11.8Z"
+    fill="#fff" />
+</svg>
diff --git a/examples/swaps-api-nextjs-tron/src/images/logos/forbes.svg b/examples/swaps-api-nextjs-tron/src/images/logos/forbes.svg
new file mode 100644
index 0000000..f3929e8
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/images/logos/forbes.svg
@@ -0,0 +1,5 @@
+<svg width="82" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M49.928 11.88c-1.318 0-2.354.286-3.39.854L46.632 6 40.32 7.138v.57l.66.094c.846.19 1.13.664 1.317 1.803.19 2.277.094 14.42 0 16.412 1.696.38 3.485.665 5.276.665 4.993 0 8.008-3.132 8.008-8.064 0-3.89-2.45-6.736-5.653-6.736v-.001Zm-2.166 13.757c-.377 0-.848 0-1.13-.095-.095-1.328-.189-6.925-.095-11.858.566-.19.941-.285 1.413-.285 2.075 0 3.205 2.467 3.205 5.502 0 3.796-1.414 6.736-3.392 6.736ZM16.58 6.378H0v.854l.942.095c1.224.19 1.696.948 1.884 2.75.283 3.416.189 9.583 0 12.523-.189 1.803-.659 2.657-1.884 2.75L0 25.54v.76h10.645v-.76l-1.13-.19c-1.226-.094-1.697-.948-1.884-2.75a77.793 77.793 0 0 1-.19-5.692l2.262.095c1.413 0 2.072 1.139 2.354 2.75h.849V13.02h-.849c-.283 1.613-.941 2.75-2.354 2.75l-2.26.096c0-3.226.094-6.262.189-8.064h3.296c2.545 0 3.864 1.612 4.805 4.459l.942-.285-.094-5.598h-.001Zm5.37 5.313c4.71 0 7.065 3.226 7.065 7.495 0 4.079-2.638 7.495-7.348 7.495s-7.065-3.227-7.065-7.495c0-4.08 2.638-7.495 7.349-7.495h-.001Zm-.283.949c-2.073 0-2.638 2.846-2.638 6.546 0 3.604.942 6.545 2.826 6.545 2.166 0 2.731-2.846 2.731-6.545 0-3.605-.94-6.546-2.92-6.546h.001Zm35.138 6.64c0-3.889 2.449-7.589 7.253-7.589 3.955 0 5.84 2.942 5.84 6.83h-8.76c-.095 3.51 1.6 6.073 4.992 6.073 1.508 0 2.26-.379 3.204-1.044l.376.474c-.943 1.328-3.014 2.657-5.652 2.657-4.24-.001-7.253-3.036-7.253-7.4Zm4.332-1.802 4.428-.095c0-1.897-.283-4.743-1.883-4.743-1.601 0-2.45 2.656-2.544 4.838Zm19.974-5.028c-1.13-.475-2.638-.759-4.334-.759-3.485 0-5.653 2.087-5.653 4.554s1.6 3.51 3.864 4.27c2.355.852 3.014 1.517 3.014 2.655 0 1.139-.848 2.182-2.355 2.182-1.79 0-3.11-1.043-4.145-3.89l-.66.19.095 4.175c1.13.474 3.202.855 4.993.855 3.674 0 6.03-1.899 6.03-4.839 0-1.993-1.038-3.13-3.487-4.08-2.638-1.043-3.579-1.707-3.579-2.94 0-1.234.85-2.088 1.98-2.088 1.695 0 2.826 1.043 3.675 3.606l.659-.19-.096-3.7h-.001Zm-39.85-.379c-1.6-.948-4.427-.474-5.934 2.942l.093-3.321-6.31 1.233v.57l.66.095c.848.095 1.223.57 1.319 1.803.188 2.277.093 6.261 0 8.253-.095 1.138-.47 1.707-1.32 1.802l-.66.095v.759h8.761v-.759l-1.13-.095c-.942-.095-1.224-.665-1.32-1.802-.188-1.803-.188-5.408-.093-7.684.47-.665 2.543-1.233 4.427 0l1.508-3.89Z"
+    fill="#737373" />
+</svg>
diff --git a/examples/swaps-api-nextjs-tron/src/images/logos/sols.png b/examples/swaps-api-nextjs-tron/src/images/logos/sols.png
new file mode 100644
index 0000000..38664dc
Binary files /dev/null and b/examples/swaps-api-nextjs-tron/src/images/logos/sols.png differ
diff --git a/examples/swaps-api-nextjs-tron/src/images/logos/techcrunch.svg b/examples/swaps-api-nextjs-tron/src/images/logos/techcrunch.svg
new file mode 100644
index 0000000..de91f48
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/images/logos/techcrunch.svg
@@ -0,0 +1,5 @@
+<svg width="181" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M66.825 12.77v11.34h-4.157V12.77H58.48V9.14h12.54v3.63h-4.195Zm13.89 6.85h-6.632a1.77 1.77 0 0 0 1.904 1.803 5.853 5.853 0 0 0 2.911-.793l1.507 2.506a8.69 8.69 0 0 1-4.528 1.293c-3.398 0-5.241-2.405-5.241-5.852 0-3.878 2.186-5.875 5.132-5.875 2.945 0 5.002 2.041 5.002 6.215-.044.272-.044.51-.056.704h.001Zm-5.099-4.117c-.884 0-1.37.601-1.495 1.724h3.206c-.193-1.145-.578-1.723-1.711-1.723Zm12.257 8.88c-3.296 0-5.256-2.098-5.256-5.897 0-3.402 1.745-5.83 5.347-5.83A4.676 4.676 0 0 1 92.28 15.2l-2.651 2.038c-.532-.975-.895-1.452-1.733-1.452-.837 0-1.47.986-1.47 2.766s.533 2.704 1.587 2.704c.725 0 1.23-.409 1.948-1.463l2.436 1.906c-1.31 1.94-2.526 2.688-4.52 2.688l-.004-.003Zm13.142-.238V17.76c0-1.463-.488-1.849-1.28-1.849-.793 0-1.311.386-1.311 1.804v6.43h-3.851V10.071l3.85-1.543v5.115a4.348 4.348 0 0 1 2.833-.986c2.462 0 3.637 1.656 3.637 4.604v6.884h-3.878Zm13.095.239c-4.453 0-6.797-3.3-6.797-7.735 0-4.82 2.832-7.734 6.797-7.734 3.681 0 5.131 1.577 6.162 4.41l-3.761 1.471c-.544-1.39-1.053-2.268-2.424-2.268-1.734 0-2.482 1.736-2.482 4.117 0 2.382.726 4.106 2.527 4.106 1.302 0 1.858-.704 2.673-2.121l3.513 1.871a6.446 6.446 0 0 1-6.209 3.878l.001.005Zm15.701-7.247a2.411 2.411 0 0 0-1.79-.942c-.94 0-1.517.453-1.517 1.826v6.124h-3.852V12.93h3.852v.816a3.394 3.394 0 0 1 4.213-.578l-.906 3.97Zm9.165 7.009v-.749a4.259 4.259 0 0 1-2.81.987c-2.462 0-3.636-1.656-3.636-4.617v-6.839h3.863v6.35c0 1.453.498 1.838 1.291 1.838.793 0 1.28-.385 1.28-1.792v-6.396h3.874v11.25l-3.862-.033Zm13.095 0V17.76c0-1.463-.499-1.849-1.28-1.849-.782 0-1.311.386-1.311 1.804v6.43h-3.851V12.93h3.851v.749a4.349 4.349 0 0 1 2.833-.987c2.461 0 3.636 1.656 3.636 4.604v6.884l-3.878-.033Zm11.385.238c-3.296 0-5.268-2.098-5.268-5.897 0-3.403 1.756-5.83 5.347-5.83a4.714 4.714 0 0 1 4.327 2.54l-2.65 2.007c-.545-.975-.907-1.452-1.734-1.452s-1.484.987-1.484 2.767c0 1.78.533 2.703 1.586 2.703.725 0 1.246-.408 1.949-1.463l2.435 1.905c-1.302 1.973-2.526 2.722-4.509 2.722l.001-.003v.001Zm13.13-.238V17.76c0-1.463-.488-1.849-1.281-1.849-.792 0-1.302.386-1.302 1.804v6.43h-3.851V10.071l3.851-1.543v5.115a4.296 4.296 0 0 1 2.821-.986c2.47 0 3.637 1.656 3.637 4.604v6.884h-3.875ZM0 3v8.54h8.519v17.066h8.53V11.539h8.518V3H0Zm34.096 17.067V11.54h-8.53v17.067h25.578v-8.539H34.096Zm0-17.066h17.048v8.538H34.096V3.001Z"
+    fill="#737373" />
+</svg>
diff --git a/examples/swaps-api-nextjs-tron/src/images/logos/wired.svg b/examples/swaps-api-nextjs-tron/src/images/logos/wired.svg
new file mode 100644
index 0000000..e76e50b
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/images/logos/wired.svg
@@ -0,0 +1,5 @@
+<svg width="121" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M101.512 7.74v16.645h8.198c2.291 0 3.617-.362 4.582-1.207 1.206-1.085 1.808-3.015 1.808-7.116 0-4.102-.602-6.031-1.808-7.117-.965-.844-2.291-1.206-4.582-1.206h-8.198Zm11.213 8.322c0 3.618-.241 4.463-.965 4.945-.482.362-1.085.482-2.29.482h-4.582V10.513h4.582c1.205 0 1.808 0 2.29.483.724.603.965 1.447.965 5.066Zm7.595 12.002H96.268V4h24.052v24.064Zm-43.703-17.55V7.739h14.226v5.308h-3.015v-2.534h-5.787v3.981h4.582v2.654H82.04v4.463h5.909v-2.895h3.013v5.669H76.618V21.61h2.29V10.513h-2.29Zm-12.9 9.528c0 1.81.12 3.136.36 4.222h3.257c-.122-.844-.241-2.412-.241-4.463-.122-2.412-.845-2.774-2.533-3.136 1.929-.362 2.774-1.206 2.774-4.222 0-2.412-.363-3.377-1.086-3.98-.482-.482-1.325-.724-2.653-.724H53.468v16.646h3.376V17.87h4.703c.965 0 1.325.121 1.688.362s.482.604.482 1.81Zm-6.873-4.825v-4.583h5.426c.724 0 .965.12 1.084.241.241.241.483.603.483 2.05 0 1.448-.242 1.93-.483 2.172-.119.12-.36.24-1.084.24l-5.426-.12Zm15.312 12.847H48.044V4h24.052v24.064h.06Zm-30.38-6.453v2.774H30.32V21.61h4.099V10.513h-4.1V7.74h11.454v2.775h-4.1V21.61h4.101ZM22.423 7.739H19.29L17 20.887 14.346 8.704c-.12-.844-.482-.965-1.206-.965h-1.688c-.723 0-1.085.241-1.205.965L7.595 20.887 5.305 7.739H1.929l3.255 15.802c.12.723.362.844 1.206.844h2.29c.724 0 .965-.12 1.207-.845l2.532-11.458L14.95 23.54c.12.723.361.844 1.205.844h2.17c.724 0 1.085-.12 1.206-.845l2.894-15.8h-.002Zm1.688 20.325H0V4h24.052v24.064h.06Z"
+    fill="#737373" />
+</svg>
diff --git a/examples/swaps-api-nextjs-tron/src/interfaces/allowance.interface.ts b/examples/swaps-api-nextjs-tron/src/interfaces/allowance.interface.ts
new file mode 100644
index 0000000..1493f6f
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/interfaces/allowance.interface.ts
@@ -0,0 +1,15 @@
+export interface AllowanceQueryParams {
+  bridge: string;
+  fromAddress: string;
+  fromChain: string;
+  toChain: string;
+  tokenAddress: string;
+  tokenSymbol: string;
+  toTokenSymbol: string;
+  toTokenAddress: string;
+  contractCall: boolean;
+}
+
+export interface AllowanceAPIResponse {
+  allowance: string;
+}
diff --git a/examples/swaps-api-nextjs-tron/src/interfaces/approval.interface.ts b/examples/swaps-api-nextjs-tron/src/interfaces/approval.interface.ts
new file mode 100644
index 0000000..e4cc3e0
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/interfaces/approval.interface.ts
@@ -0,0 +1,58 @@
+export interface ApprovalTxDataQueryParams {
+  bridge: string;
+  fromAddress: string;
+  fromChain: string;
+  toChain: string;
+  tokenAddress: string;
+  tokenSymbol: string;
+  tokenAmount: string;
+  toTokenSymbol: string;
+  toTokenAddress: string;
+  contractCall: boolean;
+}
+
+export interface ApprovalTxDataAPIResponse {
+  tx?: TransactionData[] | undefined;
+  fromChain: Chain | undefined;
+}
+
+export interface TransactionData {
+  data: string;
+  to: string;
+  value?: string | undefined;
+  gas?: string | undefined;
+  from: string;
+  nonce?: number | undefined;
+  txId?: string;
+  meta?: {
+    visible: boolean;
+    txID: string;
+    raw_data: {
+      contract: Array<{
+        parameter: {
+          value: {
+            data: string;
+            owner_address: string;
+            contract_address: string;
+            call_value: number;
+          };
+          type_url: string;
+        };
+        type: string;
+      }>;
+      ref_block_bytes: string;
+      ref_block_hash: string;
+      expiration: number;
+      fee_limit: number;
+      timestamp: number;
+    };
+    raw_data_hex: string;
+  };
+}
+
+interface Chain {
+  chainId: number;
+  name?: string | undefined;
+  slug: string;
+  protocolType: "evm" | "ibc" | "solana" | "multiversx";
+}
diff --git a/examples/swaps-api-nextjs-tron/src/interfaces/chain.interface.ts b/examples/swaps-api-nextjs-tron/src/interfaces/chain.interface.ts
new file mode 100644
index 0000000..213fbc0
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/interfaces/chain.interface.ts
@@ -0,0 +1,24 @@
+export interface Chain {
+  id: string;
+  slug: string;
+  name: string;
+  logo: string;
+  type: "solana" | "evm" | "bitcoin" | "ibc" | "multiversx" | "tron" | "ton";
+  singleChainSwap: boolean;
+  singleChainStaking: boolean;
+  txExplorer?: string | undefined;
+  tokenExplorer?: string | undefined;
+  rpcUrl?: string | undefined;
+  nativeToken?: {
+    symbol: string;
+    decimals: number;
+    logo: string;
+    address: string;
+    chain: string;
+  };
+}
+
+export interface ChainsQueryParams {
+  integration?: string | undefined;
+  type?: "evm" | "ibc" | "solana" | "multiversx" | "bitcoin" | undefined;
+}
diff --git a/examples/swaps-api-nextjs-tron/src/interfaces/history.interface.ts b/examples/swaps-api-nextjs-tron/src/interfaces/history.interface.ts
new file mode 100644
index 0000000..424bd5d
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/interfaces/history.interface.ts
@@ -0,0 +1,61 @@
+export interface Transaction {
+  type?:
+    | "swap"
+    | "deposit"
+    | "withdraw"
+    | "claim"
+    | "custom_contract"
+    | null
+    | undefined;
+  status:
+    | "Submitted"
+    | "Pending Source Chain"
+    | "Pending Destination Chain"
+    | "Completed"
+    | "Refund Required"
+    | "Refunded"
+    | "Failed Source Chain"
+    | "Failed Destination Chain"
+    | "Fallback"
+    | "Not Sent"
+    | "Claim Required";
+  reason?: string;
+  bridge?: string | undefined;
+  txId?: string | undefined;
+  integration?: string;
+  needClaim?: boolean;
+  refundReason?: string;
+  errorReason?: string;
+  fromTokenAddress?: string;
+  fromChainId?: number;
+  fromChainSlug?: string;
+  fromAmount?: string;
+  fromAmountUsdValue?: string;
+  toTokenAddress?: string;
+  toChainId?: number;
+  toChainSlug?: string;
+  toAmount?: string;
+  toAmountUsdValue?: string;
+  fromChainTxHash?: string;
+  toChainTxHash?: string;
+  fromTokenSymbol?: string;
+  toTokenSymbol?: string;
+  fromUserAddress?: string;
+  toUserAddress?: string;
+  txStartedTimestamp?: number;
+  txCompletedTimestamp?: number;
+  updatedAt?: string;
+  createdAt?: string;
+  fallbackTokenAddress?: string;
+  fallbackAmount?: string;
+  id?: number;
+  projectId?: string;
+}
+
+export interface TransactionResponseAPIResponse {
+  transactions?: Transaction[] | undefined;
+}
+
+export interface TransactionQueryParams {
+  userAddress: string;
+}
diff --git a/examples/swaps-api-nextjs-tron/src/interfaces/quote.interface.ts b/examples/swaps-api-nextjs-tron/src/interfaces/quote.interface.ts
new file mode 100644
index 0000000..979c028
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/interfaces/quote.interface.ts
@@ -0,0 +1,104 @@
+export interface QuoteQueryParams {
+  tokenSymbol: string;
+  dummyFromUserAddress?: string;
+  toTokenSymbol: string;
+  tokenAmount: string;
+  fromTokenAddress: string;
+  dummyToUserAddress?: string;
+  fromChain: string;
+  toChain: string;
+  fromUserAddress: string;
+  maxSlippage?: number;
+  toUserAddress: string;
+  partner?: string;
+  projectId?: string;
+  toTokenAddress: string;
+  debug?: string;
+  contractCall?: boolean;
+  skipGasEstimate?: boolean;
+  fee?: number;
+  nativeStaking?: boolean;
+}
+
+export interface QuoteAPIResponse {
+  routes: Route[];
+  fromToken: Token;
+  fromChain: Chain;
+  toToken: Token;
+  toChain: Chain;
+}
+
+export interface Route {
+  route: RouteStep[];
+  quote: Quote;
+  duration: number;
+  gas: string;
+  distribution?: {
+    [key: string]: number;
+  };
+  gasUSD: string;
+}
+
+export interface RouteStep {
+  bridge: string;
+  bridgeTokenAddress: string;
+  steps: (
+    | "allowance"
+    | "approve"
+    | "send"
+    | "nativeStaking"
+    | "sign"
+    | "claim"
+    | "bridge"
+  )[];
+  name: string;
+  part: number;
+  encryptionKeyRequired?: boolean | undefined;
+}
+
+interface Quote {
+  bridgeFeeInNativeToken: string;
+  bridgeFee: string;
+  integration: string;
+  type: "swap" | "custom_contract" | "deposit" | "withdraw" | "claim" | null;
+  fromAmount?: string;
+  amount: string;
+  decimals: number;
+  amountUSD: string;
+  bridgeFeeUSD: string;
+  bridgeFeeInNativeTokenUSD: string;
+  fees: Fee[];
+}
+
+interface Fee {
+  type: "bridge" | "gas" | "partner";
+  amount: string;
+  amountUSD: string;
+  tokenSymbol: string;
+  tokenAddress: string;
+  chainSlug: string;
+  decimals: number;
+  deductedFromSourceToken: boolean;
+}
+
+interface Token {
+  symbol: string;
+  name?: string | undefined;
+  address: string;
+  decimals: number;
+  chainId?: number | undefined;
+  chain?: string | undefined;
+  logoURI?: string | undefined;
+}
+
+interface Chain {
+  chainId: number;
+  name?: string;
+  slug: string;
+  protocolType: "evm" | "ibc" | "solana" | "multiversx";
+  logo?: string;
+  isSingleChainSupported?: boolean;
+  blockExploreUrls?: string[];
+  tokenExplorer?: string;
+  txExplorer?: string;
+}
diff --git a/examples/swaps-api-nextjs-tron/src/interfaces/send.interface.ts b/examples/swaps-api-nextjs-tron/src/interfaces/send.interface.ts
new file mode 100644
index 0000000..6d64091
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/interfaces/send.interface.ts
@@ -0,0 +1,77 @@
+export const pendingStatuses = [
+  "Submitted",
+  "Not Sent",
+  "Pending Source Chain",
+  "Pending Destination Chain",
+];
+
+export interface SendTransactionApiResponse {
+  id: number;
+  fromToken: Token;
+  toToken: Token;
+  fromChain: Chain;
+  toChain: Chain;
+  route: Route[];
+  tx?: TransactionDetails;
+}
+
+interface Token {
+  symbol: string;
+  name?: string | undefined;
+  address: string;
+  decimals: number;
+  chainId?: number | undefined;
+  chain?: string | undefined;
+  logoURI?: string | undefined;
+}
+
+interface Chain {
+  chainId: number;
+  name?: string;
+  slug: string;
+  protocolType: string;
+}
+
+export interface TransactionDetails {
+  from: string;
+  to: string;
+  data: string;
+  meta?: object;
+  value?: string;
+  nonce?: number;
+  txId?: string;
+  gas?: string;
+}
+
+export interface SendTransactionPayload {
+  fromUserAddress: string;
+  toUserAddress: string;
+  tokenSymbol: string;
+  fromTokenAddress: string;
+  fromChain: string;
+  toTokenSymbol: string;
+  toTokenAddress: string;
+  toChain: string;
+  tokenAmount: string;
+  toTokenAmount: string;
+  route: Route[];
+  projectId?: string;
+  type?: string;
+  integration?: string;
+}
+
+interface Route {
+  bridge: string;
+  bridgeTokenAddress: string;
+  steps: (
+    | "allowance"
+    | "approve"
+    | "send"
+    | "nativeStaking"
+    | "sign"
+    | "claim"
+    | "bridge"
+  )[];
+  name: string;
+  part: number;
+}
diff --git a/examples/swaps-api-nextjs-tron/src/interfaces/status.interface.ts b/examples/swaps-api-nextjs-tron/src/interfaces/status.interface.ts
new file mode 100644
index 0000000..4a204aa
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/interfaces/status.interface.ts
@@ -0,0 +1,41 @@
+export interface TransactionStatusAPIResponse {
+  type?: "swap" | "approve" | "sign" | "claim" | "deposit" | "withdraw";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  status: "Pending" | "Success" | "Failed" | any;
+  reason?: string;
+  bridge?: string | undefined;
+  txId?: string | undefined;
+  integration?: string;
+  needClaim?: boolean;
+  refundReason?: string;
+  errorReason?: string;
+  fromTokenAddress?: string;
+  fromChainId?: number;
+  fromChainSlug?: string;
+  fromAmount?: string;
+  fromAmountUsdValue?: string;
+  toTokenAddress?: string;
+  toChainId?: number;
+  toChainSlug?: string;
+  toAmount?: string;
+  toAmountUsdValue?: string;
+  fromChainTxHash?: string;
+  toChainTxHash?: string;
+  fromTokenSymbol?: string;
+  toTokenSymbol?: string;
+  fromUserAddress?: string;
+  toUserAddress?: string;
+  txStartedTimestamp?: number;
+  txCompletedTimestamp?: number;
+  updatedAt?: string;
+  createdAt?: string;
+  fallbackTokenAddress?: string;
+  fallbackAmount?: string;
+  id?: string;
+  projectId?: string;
+}
+
+export interface TransactionStatusParams {
+  id: string;
+  txHash?: string;
+}
diff --git a/examples/swaps-api-nextjs-tron/src/interfaces/swing-service.interface.ts b/examples/swaps-api-nextjs-tron/src/interfaces/swing-service.interface.ts
new file mode 100644
index 0000000..940e52f
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/interfaces/swing-service.interface.ts
@@ -0,0 +1,48 @@
+import {
+  AllowanceQueryParams,
+  AllowanceAPIResponse,
+} from "./allowance.interface";
+import {
+  ApprovalTxDataQueryParams,
+  ApprovalTxDataAPIResponse,
+} from "./approval.interface";
+import { ChainsQueryParams, Chain } from "./chain.interface";
+import {
+  TransactionQueryParams,
+  TransactionResponseAPIResponse,
+} from "./history.interface";
+import { QuoteAPIResponse, QuoteQueryParams } from "./quote.interface";
+import {
+  SendTransactionPayload,
+  SendTransactionApiResponse,
+} from "./send.interface";
+import {
+  TransactionStatusParams,
+  TransactionStatusAPIResponse,
+} from "./status.interface";
+import { TokenQueryParams, Token } from "./token.interface";
+
+export interface ISwingServiceAPI {
+  getQuoteRequest(
+    queryParams: QuoteQueryParams,
+  ): Promise<QuoteAPIResponse | undefined>;
+  getAllowanceRequest(
+    queryParams: AllowanceQueryParams,
+  ): Promise<AllowanceAPIResponse | undefined>;
+  getApprovalTxDataRequest(
+    queryParams: ApprovalTxDataQueryParams,
+  ): Promise<ApprovalTxDataAPIResponse | undefined>;
+  getChainsRequest(
+    queryParams: ChainsQueryParams,
+  ): Promise<Chain[] | undefined>;
+  getTokensRequest(queryParams: TokenQueryParams): Promise<Token[] | undefined>;
+  getTransationHistoryRequest(
+    queryParams: TransactionQueryParams,
+  ): Promise<TransactionResponseAPIResponse | undefined>;
+  getTransationStatusRequest(
+    queryParams: TransactionStatusParams,
+  ): Promise<TransactionStatusAPIResponse | undefined>;
+  sendTransactionRequest(
+    payload: SendTransactionPayload,
+  ): Promise<SendTransactionApiResponse | undefined>;
+}
diff --git a/examples/swaps-api-nextjs-tron/src/interfaces/token.interface.ts b/examples/swaps-api-nextjs-tron/src/interfaces/token.interface.ts
new file mode 100644
index 0000000..55a059a
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/interfaces/token.interface.ts
@@ -0,0 +1,11 @@
+export interface TokenQueryParams {
+  chain: string;
+}
+
+export interface Token {
+  symbol: string;
+  address: string;
+  logo: string;
+  decimals: number;
+  chain: string;
+}
diff --git a/examples/swaps-api-nextjs-tron/src/lib.ts b/examples/swaps-api-nextjs-tron/src/lib.ts
new file mode 100644
index 0000000..365058c
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/lib.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/examples/swaps-api-nextjs-tron/src/services/requests.ts b/examples/swaps-api-nextjs-tron/src/services/requests.ts
new file mode 100644
index 0000000..f4a2a91
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/services/requests.ts
@@ -0,0 +1,205 @@
+import { SwingSDK } from "@swing.xyz/sdk";
+import {
+  AllowanceAPIResponse,
+  AllowanceQueryParams,
+} from "interfaces/allowance.interface";
+import {
+  ApprovalTxDataAPIResponse,
+  ApprovalTxDataQueryParams,
+} from "interfaces/approval.interface";
+import { Chain, ChainsQueryParams } from "interfaces/chain.interface";
+import {
+  TransactionQueryParams,
+  TransactionResponseAPIResponse,
+} from "interfaces/history.interface";
+import { QuoteAPIResponse, QuoteQueryParams } from "interfaces/quote.interface";
+import {
+  SendTransactionApiResponse,
+  SendTransactionPayload,
+} from "interfaces/send.interface";
+import {
+  TransactionStatusAPIResponse,
+  TransactionStatusParams,
+} from "interfaces/status.interface";
+import { ISwingServiceAPI } from "interfaces/swing-service.interface";
+import { Token, TokenQueryParams } from "interfaces/token.interface";
+
+const projectId = "replug";
+
+export class SwingServiceAPI implements ISwingServiceAPI {
+  private readonly swingSDK: SwingSDK;
+
+  constructor() {
+    this.swingSDK = new SwingSDK({
+      projectId: "replug",
+      // environment: "testnet",
+      debug: true,
+    });
+  }
+
+  async getQuoteRequest(
+    queryParams: QuoteQueryParams,
+  ): Promise<QuoteAPIResponse | undefined> {
+    try {
+      const response = await this.swingSDK.crossChainAPI.GET(
+        "/v0/transfer/quote",
+        {
+          params: {
+            query: queryParams,
+          },
+        },
+      );
+      return response.data;
+    } catch (error) {
+      console.error("Error fetching quote:", error);
+      throw error;
+    }
+  }
+
+  async getAllowanceRequest(
+    queryParams: AllowanceQueryParams,
+  ): Promise<AllowanceAPIResponse | undefined> {
+    try {
+      const response = await this.swingSDK.crossChainAPI.GET(
+        "/v0/transfer/allowance",
+        {
+          params: {
+            query: queryParams,
+          },
+        },
+      );
+
+      return response.data;
+    } catch (error) {
+      console.error("Error fetching allowance:", error);
+      throw error;
+    }
+  }
+
+  async getApprovalTxDataRequest(
+    queryParams: ApprovalTxDataQueryParams,
+  ): Promise<ApprovalTxDataAPIResponse | undefined> {
+    try {
+      const response = await this.swingSDK.crossChainAPI.GET(
+        "/v0/transfer/approve",
+        {
+          params: {
+            query: queryParams,
+          },
+        },
+      );
+      return response.data;
+    } catch (error) {
+      console.error("Error fetching approval:", error);
+      throw error;
+    }
+  }
+
+  async getChainsRequest(
+    queryParams: ChainsQueryParams,
+  ): Promise<Chain[] | undefined> {
+    try {
+      const response = await this.swingSDK.platformAPI.GET("/chains", {
+        params: {
+          query: queryParams,
+        },
+      });
+      return response.data;
+    } catch (error) {
+      console.error("Error fetching approval:", error);
+      throw error;
+    }
+  }
+
+  async getTokensRequest(
+    queryParams: TokenQueryParams,
+  ): Promise<Token[] | undefined> {
+    try {
+      const response = await this.swingSDK.platformAPI.GET("/tokens", {
+        params: {
+          query: queryParams,
+        },
+      });
+      return response.data;
+    } catch (error) {
+      console.error("Error fetching approval:", error);
+      throw error;
+    }
+  }
+
+  async getTransationHistoryRequest(
+    queryParams: TransactionQueryParams,
+  ): Promise<TransactionResponseAPIResponse | undefined> {
+    try {
+      const response = await this.swingSDK.crossChainAPI.GET(
+        "/v0/transfer/history",
+        {
+          params: {
+            query: queryParams,
+          },
+        },
+      );
+
+      return response.data;
+    } catch (error) {
+      console.error("Error fetching transaction status:", error);
+
+      throw error;
+    }
+  }
+
+  async getTransationStatusRequest(
+    queryParams: TransactionStatusParams,
+  ): Promise<TransactionStatusAPIResponse | undefined> {
+    try {
+      const response = await this.swingSDK.platformAPI.GET(
+        "/projects/{projectId}/transactions/{transactionId}",
+        {
+          params: {
+            path: {
+              transactionId: queryParams.id,
+              projectId,
+            },
+            query: {
+              txHash: queryParams.txHash,
+            },
+          },
+        },
+      );
+
+      return response.data;
+    } catch (error) {
+      console.error("Error fetching transaction status:", error);
+      throw error;
+    }
+  }
+
+  async sendTransactionRequest(
+    payload: SendTransactionPayload,
+  ): Promise<SendTransactionApiResponse | undefined> {
+    try {
+      const response = await this.swingSDK.crossChainAPI.POST(
+        "/v0/transfer/send",
+        {
+          body: payload,
+        },
+      );
+      return response.data;
+    } catch (error) {
+      console.error("Error sending transaction:", error);
+      throw error;
+    }
+  }
+
+  get isSDKConnected() {
+    return this.swingSDK.isReady;
+  }
+
+  get swingSdk(): null | this {
+    if (this.isSDKConnected) {
+      return this;
+    }
+
+    return null;
+  }
+}
diff --git a/examples/swaps-api-nextjs-tron/src/styles/globals.css b/examples/swaps-api-nextjs-tron/src/styles/globals.css
new file mode 100644
index 0000000..61d3838
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/styles/globals.css
@@ -0,0 +1,16 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+  
+body {
+  --tw-bg-opacity: 1;
+  background-color: rgb(72, 44, 44);
+}
+
+@layer base {
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}
\ No newline at end of file
diff --git a/examples/swaps-api-nextjs-tron/src/types/global.d.ts b/examples/swaps-api-nextjs-tron/src/types/global.d.ts
new file mode 100644
index 0000000..a6bc56d
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/types/global.d.ts
@@ -0,0 +1,46 @@
+interface TronLinkProvider {
+  tronWeb: {
+    defaultAddress: {
+      base58: string;
+      hex: string;
+    };
+    toHex: (address: string) => string;
+    toBase58: (address: string) => string;
+    transactionBuilder: {
+      sendTrx: (
+        to: string,
+        amount: number,
+        from: string,
+      ) => Promise<Transaction>;
+      triggerSmartContract: (
+        contractAddress: string,
+        functionSelector: string,
+        options: {
+          feeLimit: number;
+          callValue: number;
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        parameters: any[],
+        issuerAddress?: string,
+      ) => Promise<Transaction>;
+    };
+    trx: {
+      sign: (transaction: Transaction) => Promise<SignedTransaction>;
+      sendRawTransaction: (
+        signedTransaction: SignedTransaction,
+      ) => Promise<{ result: boolean; txid: string }>;
+    };
+  };
+  ready: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  request: (args: { method: string; params?: any[] }) => Promise<any>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  on: (event: string, handler: (args: any) => void) => void;
+  sign: (transaction: object) => Promise<string>;
+  sendTransaction: (to: string, amount: number) => Promise<{ txid: string }>;
+  disconnect: () => Promise<void>;
+}
+
+interface Window {
+  tronLink?: TronLinkProvider;
+}
diff --git a/examples/swaps-api-nextjs-tron/src/types/transfer.types.ts b/examples/swaps-api-nextjs-tron/src/types/transfer.types.ts
new file mode 100644
index 0000000..c6b1109
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/types/transfer.types.ts
@@ -0,0 +1,29 @@
+import { QuoteQueryParams } from "interfaces/quote.interface";
+
+interface ChainDecimals {
+  fromChainDecimal?: number;
+  toChainDecimal?: number;
+}
+
+interface ChainIcons {
+  fromChainIconUrl?: string;
+  toChainIconUrl?: string;
+  fromTokenIconUrl?: string;
+  toTokenIconUrl?: string;
+}
+
+interface NativeSourceToken {
+  fromNativeTokenSymbol?: string;
+  toNativeTokenSymbol?: string;
+}
+
+interface ChainIds {
+  fromChainId?: string;
+  toChainId?: string;
+}
+
+export type TransferParams = QuoteQueryParams &
+  ChainDecimals &
+  ChainIcons &
+  NativeSourceToken &
+  ChainIds;
diff --git a/examples/swaps-api-nextjs-tron/src/utils/ethToWei.ts b/examples/swaps-api-nextjs-tron/src/utils/ethToWei.ts
new file mode 100644
index 0000000..77c06be
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/src/utils/ethToWei.ts
@@ -0,0 +1,19 @@
+import { ethers } from "ethers";
+
+/**
+ * Converts ETH to Wei.
+ *
+ * @param {string | number} ethAmount The amount in ETH to convert.
+ * @returns {string} The amount in Wei as a string.
+ */
+export const convertEthToWei = (ethAmount: string, decimals = 18) => {
+  // Convert the amount to a string to handle both string and number inputs
+  const weiAmount = ethers.utils.parseUnits(ethAmount.toString(), decimals);
+  return weiAmount.toString();
+};
+
+export const convertWeiToEth = (weiAmount: string, decimals = 18) => {
+  // Convert the amount to a string to handle both string and number inputs
+  const ethAmount = ethers.utils.formatUnits(weiAmount.toString(), decimals);
+  return Number(ethAmount.toString()).toFixed(2).trim();
+};
diff --git a/examples/swaps-api-nextjs-tron/styles/globals.css b/examples/swaps-api-nextjs-tron/styles/globals.css
new file mode 100644
index 0000000..91f55f0
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/styles/globals.css
@@ -0,0 +1,4 @@
+@tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+  
\ No newline at end of file
diff --git a/examples/swaps-api-nextjs-tron/tailwind.config.js b/examples/swaps-api-nextjs-tron/tailwind.config.js
new file mode 100644
index 0000000..456c63a
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/tailwind.config.js
@@ -0,0 +1,127 @@
+const defaultTheme = require('tailwindcss/defaultTheme');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    darkMode: ['class'],
+    content: ['./pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './app/**/*.{ts,tsx}', './src/**/*.{ts,tsx}'],
+    prefix: '',
+    theme: {
+        container: {
+            center: true,
+            padding: '2rem',
+            screens: {
+                '2xl': '1400px',
+            },
+        },
+        fontSize: {
+            xs: ['0.75rem', { lineHeight: '1rem' }],
+            sm: ['0.875rem', { lineHeight: '1.5rem' }],
+            base: ['1rem', { lineHeight: '1.5rem' }],
+            lg: ['1.125rem', { lineHeight: '2rem' }],
+            xl: ['1.25rem', { lineHeight: '1.75rem' }],
+            '2xl': ['1.5rem', { lineHeight: '2rem' }],
+            '3xl': ['2rem', { lineHeight: '3rem' }],
+            '4xl': ['2.5rem', { lineHeight: '3rem' }],
+            '5xl': ['3rem', { lineHeight: '1' }],
+            '6xl': ['3.75rem', { lineHeight: '1' }],
+            '7xl': ['4.5rem', { lineHeight: '1' }],
+            '8xl': ['6rem', { lineHeight: '1' }],
+            '9xl': ['8rem', { lineHeight: '1' }],
+        },
+        extend: {
+            colors: ({ colors }) => ({
+                gray: colors.neutral,
+            }),
+            fontFamily: {
+                sans: ['Consolas', 'Courier New', ...defaultTheme.fontFamily.sans],
+            },
+            keyframes: {
+                'fade-in': {
+                    from: {
+                        opacity: 0,
+                    },
+                    to: {
+                        opacity: 1,
+                    },
+                },
+                marquee: {
+                    '100%': {
+                        transform: 'translateY(-50%)',
+                    },
+                },
+                'spin-reverse': {
+                    to: {
+                        transform: 'rotate(-360deg)',
+                    },
+                },
+            },
+            maxWidth: {
+                '2xl': '40rem',
+            },
+            colors: {
+                border: 'hsl(var(--border))',
+                input: 'hsl(var(--input))',
+                ring: 'hsl(var(--ring))',
+                background: 'hsl(var(--background))',
+                foreground: 'hsl(var(--foreground))',
+                primary: {
+                    DEFAULT: 'hsl(var(--primary))',
+                    foreground: 'hsl(var(--primary-foreground))',
+                },
+                secondary: {
+                    DEFAULT: 'hsl(var(--secondary))',
+                    foreground: 'hsl(var(--secondary-foreground))',
+                },
+                destructive: {
+                    DEFAULT: 'hsl(var(--destructive))',
+                    foreground: 'hsl(var(--destructive-foreground))',
+                },
+                muted: {
+                    DEFAULT: 'hsl(var(--muted))',
+                    foreground: 'hsl(var(--muted-foreground))',
+                },
+                accent: {
+                    DEFAULT: 'hsl(var(--accent))',
+                    foreground: 'hsl(var(--accent-foreground))',
+                },
+                popover: {
+                    DEFAULT: 'hsl(var(--popover))',
+                    foreground: 'hsl(var(--popover-foreground))',
+                },
+                card: {
+                    DEFAULT: 'hsl(var(--card))',
+                    foreground: 'hsl(var(--card-foreground))',
+                },
+            },
+            borderRadius: {
+                lg: 'var(--radius)',
+                md: 'calc(var(--radius) - 2px)',
+                sm: 'calc(var(--radius) - 4px)',
+                '4xl': '2rem',
+                '5xl': '2.5rem',
+            },
+            keyframes: {
+                'accordion-down': {
+                    from: { height: '0' },
+                    to: { height: 'var(--radix-accordion-content-height)' },
+                },
+                'accordion-up': {
+                    from: { height: 'var(--radix-accordion-content-height)' },
+                    to: { height: '0' },
+                },
+            },
+            animation: {
+                'accordion-down': 'accordion-down 0.2s ease-out',
+                'accordion-up': 'accordion-up 0.2s ease-out',
+                'fade-in': 'fade-in 0.5s linear forwards',
+                marquee: 'marquee var(--marquee-duration) linear infinite',
+                'spin-slow': 'spin 4s linear infinite',
+                'spin-slower': 'spin 6s linear infinite',
+                'spin-reverse': 'spin-reverse 1s linear infinite',
+                'spin-reverse-slow': 'spin-reverse 4s linear infinite',
+                'spin-reverse-slower': 'spin-reverse 6s linear infinite',
+            },
+        },
+    },
+    plugins: [require('tailwindcss-animate'), require('@tailwindcss/forms')],
+};
diff --git a/examples/swaps-api-nextjs-tron/tsconfig.json b/examples/swaps-api-nextjs-tron/tsconfig.json
new file mode 100644
index 0000000..0bf84cb
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "typescript-config/nextjs.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "baseUrl": "./src",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": ["next-env.d.ts", "src", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/swaps-api-nextjs-tron/turbo.json b/examples/swaps-api-nextjs-tron/turbo.json
new file mode 100644
index 0000000..1dbe6de
--- /dev/null
+++ b/examples/swaps-api-nextjs-tron/turbo.json
@@ -0,0 +1,11 @@
+{
+  "extends": ["//"],
+  "$schema": "https://turbo.build/schema.json",
+  "pipeline": {
+    "build": {
+      "outputs": [".next/**", "!.next/cache/**"],
+      "env": ["NEXT_PUBLIC_THIRD_WEB_CLIENT_ID", "THIRD_WEB_SECRET_KEY"],
+      "outputMode": "new-only"
+    }
+  }
+}
diff --git a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/app/layout.tsx b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/app/layout.tsx
index 3415d7e..80932dd 100644
--- a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/app/layout.tsx
+++ b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/app/layout.tsx
@@ -10,7 +10,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     <html lang="en" suppressHydrationWarning>
       <head />
 
-      <body className="relative bg-gradient-to-b to-purple-300 via-purple-200 from-purple-100 w-full min-h-[100vh] flex flex-col justify-between">
+      <body className="relative flex min-h-[100vh] w-full flex-col justify-between bg-gradient-to-b from-purple-100 via-purple-200 to-purple-300">
         <Backdrop />
         <main className="mb-auto">{children}</main>
 
diff --git a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/Swap.tsx b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/Swap.tsx
index 00f0acd..f1ce4e6 100644
--- a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/Swap.tsx
+++ b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/Swap.tsx
@@ -425,41 +425,41 @@ const Swap = () => {
   return (
     <div
       id="#altcoin"
-      className="w-full max-w-4xl p-5 m-auto space-y-4 bg-white rounded-4xl lg:ml-auto md:w-[20rem] sm:w-[20rem] lg:w-[21rem]"
+      className="rounded-4xl m-auto w-full max-w-4xl space-y-4 bg-white p-5 sm:w-[20rem] md:w-[20rem] lg:ml-auto lg:w-[21rem]"
     >
       <div className="flex flex-col space-y-3">
-        <div className="w-full flex justify-between items-center">
+        <div className="flex w-full items-center justify-between">
           <div className="text-lg font-bold italic">PowerSwap 🔥</div>
-          <div className="flex min-w-5 min-h-5 rounded-4xl bg-gray-100">
-            <div className="bg-black text-white rounded-4xl text-[9px] font-bold px-2 py-1.5">
+          <div className="rounded-4xl flex min-h-5 min-w-5 bg-gray-100">
+            <div className="rounded-4xl bg-black px-2 py-1.5 text-[9px] font-bold text-white">
               Swap
             </div>
-            <div className=" text-gray-500 rounded-4xl text-[9px] font-bold px-2 py-1.5">
+            <div className=" rounded-4xl px-2 py-1.5 text-[9px] font-bold text-gray-500">
               Stake
             </div>
           </div>
         </div>
 
-        <div className="w-full flex border-2 rounded-xl border-zinc-100">
-          <div className="w-full flex justify-between items-center p-1">
+        <div className="flex w-full rounded-xl border-2 border-zinc-100">
+          <div className="flex w-full items-center justify-between p-1">
             <div
-              className="flex mr-auto space-x-1 items-center hover:bg-zinc-300/[0.2] hover:rounded-lg hover:cursor-pointer p-3"
+              className="mr-auto flex items-center space-x-1 p-3 hover:cursor-pointer hover:rounded-lg hover:bg-zinc-300/[0.2]"
               onClick={openSendDialog}
             >
               <img
                 src={fromChain?.logo}
                 alt={fromChain?.name}
-                className="rounded-full w-7 h-7"
+                className="h-7 w-7 rounded-full"
               />
               <div className="flex flex-col">
-                <h5 className="text-gray-400 font-bold text-[9px]">From</h5>
-                <h5 className="font-bold text-[10px] capitalize">
+                <h5 className="text-[9px] font-bold text-gray-400">From</h5>
+                <h5 className="text-[10px] font-bold capitalize">
                   {fromChain?.name}
                 </h5>
               </div>
             </div>
             <div
-              className="flex mx-auto justify-center p-3 group hover:rounded-full hover:bg-zinc-100 hover:cursor-pointer"
+              className="group mx-auto flex justify-center p-3 hover:cursor-pointer hover:rounded-full hover:bg-zinc-100"
               onClick={() => {
                 const tempToChain = { ...toChain! };
                 setToChain(fromChain);
@@ -478,141 +478,141 @@ const Swap = () => {
                 }
               }}
             >
-              <LiaExchangeAltSolid className="rounded-2xl w-5 h-5 text-zinc-300 group-hover:text-zinc-600 font-bold" />
+              <LiaExchangeAltSolid className="h-5 w-5 rounded-2xl font-bold text-zinc-300 group-hover:text-zinc-600" />
             </div>
             <div
-              className="flex ml-auto space-x-1 items-center hover:bg-zinc-300/[0.2] hover:rounded-lg hover:cursor-pointer p-3"
+              className="ml-auto flex items-center space-x-1 p-3 hover:cursor-pointer hover:rounded-lg hover:bg-zinc-300/[0.2]"
               onClick={openReceiveDialog}
             >
               <div className="flex flex-col">
-                <h5 className="text-gray-400 font-bold text-[9px] text-right">
+                <h5 className="text-right text-[9px] font-bold text-gray-400">
                   To
                 </h5>
-                <h5 className="font-bold text-[10px] capitalize">
+                <h5 className="text-[10px] font-bold capitalize">
                   {toChain?.name}
                 </h5>
               </div>
               <img
                 src={toChain?.logo}
                 alt={toChain?.name}
-                className="rounded-full w-7 h-7"
+                className="h-7 w-7 rounded-full"
               />
             </div>
           </div>
         </div>
 
-        <div className="w-full flex flex-col border-2 border-zinc-100 space-y-1 rounded-xl bg-zinc-950/[0.02] p-3">
+        <div className="flex w-full flex-col space-y-1 rounded-xl border-2 border-zinc-100 bg-zinc-950/[0.02] p-3">
           <h4 className="w-full text-[11px] font-bold text-zinc-700">
             Deposit
           </h4>
-          <div className="flex justify-between items-center">
+          <div className="flex items-center justify-between">
             <input
               aria-label="deposit"
-              className="border-none w-[50%] h-auto bg-transparent focus:border-none focus:ring-0 placeholder:m-0 placeholder:p-0 placeholder:text-lg p-0 m-0"
+              className="m-0 h-auto w-[50%] border-none bg-transparent p-0 placeholder:m-0 placeholder:p-0 placeholder:text-lg focus:border-none focus:ring-0"
               placeholder={"0"}
               disabled={!isConnected}
               onChange={(e) => debounced(e.target.value)}
               type="number"
             />
             <div
-              className="flex items-center space-x-1 bg-white p-2 rounded-xl hover:cursor-pointer"
+              className="flex items-center space-x-1 rounded-xl bg-white p-2 hover:cursor-pointer"
               onClick={openSendDialog}
             >
               <img
                 src={fromToken?.logo ?? ""}
                 alt={fromToken?.symbol ?? defaultTransferParams.fromChain}
-                className="rounded-full w-4 h-4"
+                className="h-4 w-4 rounded-full"
               />
-              <p className="text-zinc-800 text-xs">
+              <p className="text-xs text-zinc-800">
                 {fromToken?.symbol ?? <>USDC</>}
               </p>
-              <MdOutlineArrowDropDown className="rounded-2xl w-5 h-5 text-zinc-300 font-bold" />
+              <MdOutlineArrowDropDown className="h-5 w-5 rounded-2xl font-bold text-zinc-300" />
             </div>
           </div>
 
-          <div className="flex justify-between items-center">
-            <p className="text-xs p-0 m-0 text-zinc-950/[0.6]">
+          <div className="flex items-center justify-between">
+            <p className="m-0 p-0 text-xs text-zinc-950/[0.6]">
               {!transferRoute ? <>$0</> : <>{}</>}
             </p>
-            <p className="text-[10px] p-0 m-0 text-zinc-950/[0.6]">
+            <p className="m-0 p-0 text-[10px] text-zinc-950/[0.6]">
               {Number(fromTokenBalance).toFixed(3)}{" "}
               {fromToken?.symbol ?? <>USDC</>} available
             </p>
           </div>
         </div>
 
-        <div className="w-full flex flex-col border-2 border-zinc-100 space-y-2 rounded-xl bg-zinc-950/[0.02] p-3">
+        <div className="flex w-full flex-col space-y-2 rounded-xl border-2 border-zinc-100 bg-zinc-950/[0.02] p-3">
           <h4 className="w-full text-[11px] font-bold text-zinc-700">
             Receive
           </h4>
-          <div className="flex justify-between items-center">
+          <div className="flex items-center justify-between">
             <input
               aria-label="receive"
               disabled
-              className="border-none w-[50%] h-auto bg-transparent focus:border-none focus:ring-0 placeholder:m-0 placeholder:p-0 placeholder:text-lg p-0 m-0"
+              className="m-0 h-auto w-[50%] border-none bg-transparent p-0 placeholder:m-0 placeholder:p-0 placeholder:text-lg focus:border-none focus:ring-0"
               placeholder={"0"}
               type="number"
               value={receiveAmount}
             />
             <div
-              className="flex items-center space-x-1 bg-white p-2 rounded-xl hover:cursor-pointer"
+              className="flex items-center space-x-1 rounded-xl bg-white p-2 hover:cursor-pointer"
               onClick={openReceiveDialog}
             >
               <img
                 src={toToken?.logo ?? ""}
                 alt={toToken?.symbol ?? defaultTransferParams.fromChain}
-                className="rounded-full w-4 h-4"
+                className="h-4 w-4 rounded-full"
               />
-              <p className="text-zinc-800 text-xs">
+              <p className="text-xs text-zinc-800">
                 {toToken?.symbol ?? <>USDC</>}
               </p>
-              <MdOutlineArrowDropDown className="rounded-2xl w-5 h-5 text-zinc-300 font-bold" />
+              <MdOutlineArrowDropDown className="h-5 w-5 rounded-2xl font-bold text-zinc-300" />
             </div>
           </div>
 
-          <div className="flex justify-between items-center">
-            <p className="text-xs p-0 m-0 text-zinc-950/[0.6]">
+          <div className="flex items-center justify-between">
+            <p className="m-0 p-0 text-xs text-zinc-950/[0.6]">
               {!transferRoute || receiveAmount === "0" ? (
                 <>$0</>
               ) : (
                 <>{formatUSD(toTokenLocalAmount)}</>
               )}
             </p>
-            <p className="text-[10px] p-0 m-0 text-zinc-950/[0.6]">
+            <p className="m-0 p-0 text-[10px] text-zinc-950/[0.6]">
               {Number(toTokenBalance).toFixed(3)} {toToken?.symbol ?? <>USDC</>}{" "}
               available
             </p>
           </div>
         </div>
 
-        <div className="w-full flex flex-col justify-between border-2 border-zinc-100 space-y-2 rounded-xl">
-          <div className="flex justify-between items-center border-b">
+        <div className="flex w-full flex-col justify-between space-y-2 rounded-xl border-2 border-zinc-100">
+          <div className="flex items-center justify-between border-b">
             <div className="mr-auto flex items-center gap-1 px-2 py-1">
-              <MdOutlineArrowForward className="w-3 h-3" />
+              <MdOutlineArrowForward className="h-3 w-3" />
               <p className="text-[10px] font-bold">To address</p>
             </div>
-            <div className="flex items-center space-x-1 bg-white p-2 rounded-xl">
+            <div className="flex items-center space-x-1 rounded-xl bg-white p-2">
               {!isConnected ? (
                 <>-</>
               ) : (
-                <div className="flex space-x-1 bg-green-200 font-bold rounded-full text-[9px] text-green-600 px-2 py-1">
+                <div className="flex space-x-1 rounded-full bg-green-200 px-2 py-1 text-[9px] font-bold text-green-600">
                   <p>{shortenAddress(walletAddress)}</p>
-                  <MdCheckCircle className="w-3 h-3" />
+                  <MdCheckCircle className="h-3 w-3" />
                 </div>
               )}
             </div>
           </div>
-          <div className="flex justify-between items-center border-b my-0/!">
+          <div className="my-0/! flex items-center justify-between border-b">
             <div className="mr-auto flex items-center gap-1 px-2 py-0">
-              <MdOutlineTransform className="w-3 h-3" />
+              <MdOutlineTransform className="h-3 w-3" />
               <p className="text-[10px] font-bold">Route</p>
             </div>
-            <div className="flex items-center space-x-1 bg-white p-2 rounded-xl">
+            <div className="flex items-center space-x-1 rounded-xl bg-white p-2">
               {!quotes.length ? (
                 <>-</>
               ) : (
                 <div
-                  className="flex items-center w-full space-x-1 bg-red-200 font-bold rounded-full text-[10px] text-red-600 px-2 py-1 hover:cursor-pointer"
+                  className="flex w-full items-center space-x-1 rounded-full bg-red-200 px-2 py-1 text-[10px] font-bold text-red-600 hover:cursor-pointer"
                   onClick={() => {
                     openSelectRouteModal(modalContext, {
                       title: "Select Route",
@@ -633,26 +633,26 @@ const Swap = () => {
                       )?.logo
                     }
                     alt={transferRoute?.quote?.integration}
-                    className="rounded-full w-3 h-3"
+                    className="h-3 w-3 rounded-full"
                   />
                   <p className="capitalize">
                     ⚡{transferRoute?.quote?.integration}
                   </p>
-                  <MdOutlineArrowDropDown className="w-4 h-4" />
+                  <MdOutlineArrowDropDown className="h-4 w-4" />
                 </div>
               )}
             </div>
           </div>
-          <div className="flex justify-between items-center border-b my-0/!">
+          <div className="my-0/! flex items-center justify-between border-b">
             <div className="mr-auto flex items-center gap-1 px-2 py-0">
-              <MdOutlineTimelapse className="w-3 h-3" />
+              <MdOutlineTimelapse className="h-3 w-3" />
               <p className="text-[10px] font-bold">Transfer Time</p>
             </div>
-            <div className="flex items-center space-x-1 bg-white p-2 rounded-xl">
+            <div className="flex items-center space-x-1 rounded-xl bg-white p-2">
               {!transferRoute ? (
                 <>-</>
               ) : (
-                <div className="flex space-x-1 font-bold rounded-full text-[10px] px-2 py-1">
+                <div className="flex space-x-1 rounded-full px-2 py-1 text-[10px] font-bold">
                   <p className="capitalize">
                     ~{transferRoute?.duration} mins 🔥
                   </p>
@@ -660,16 +660,16 @@ const Swap = () => {
               )}
             </div>
           </div>
-          <div className="flex justify-between items-center my-0/!">
+          <div className="my-0/! flex items-center justify-between">
             <div className="mr-auto flex items-center gap-1 px-2 py-0">
-              <MdLocalGasStation className="w-3 h-3 text-green-500" />
+              <MdLocalGasStation className="h-3 w-3 text-green-500" />
               <p className="text-[10px] font-bold">Fees</p>
             </div>
-            <div className="flex items-center space-x-1 bg-white p-2 rounded-xl">
+            <div className="flex items-center space-x-1 rounded-xl bg-white p-2">
               {!transferRoute ? (
                 <>-</>
               ) : (
-                <div className="flex space-x-1 font-bold rounded-full text-[10px] px-2 py-1">
+                <div className="flex space-x-1 rounded-full px-2 py-1 text-[10px] font-bold">
                   <p className="capitalize">
                     {formatUSD(transferRoute.gasUSD)}
                   </p>
@@ -683,7 +683,7 @@ const Swap = () => {
       <div className="">
         {isConnected ? (
           <Button
-            className={clsx("flex items-center cursor-pointer w-full mt-4", {
+            className={clsx("mt-4 flex w-full cursor-pointer items-center", {
               "opacity-60": isLoading,
             })}
             disabled={isLoading || !(fromTokenBalance >= transferParams.amount)}
@@ -698,7 +698,7 @@ const Swap = () => {
           </Button>
         ) : (
           <Button
-            className={clsx("flex items-center cursor-pointer w-full", {
+            className={clsx("flex w-full cursor-pointer items-center", {
               "opacity-60": isLoading,
             })}
             disabled={isLoading || !swingSDK?.isReady}
diff --git a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/AppScreen.tsx b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/AppScreen.tsx
index 5c5018a..27927b6 100644
--- a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/AppScreen.tsx
+++ b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/AppScreen.tsx
@@ -20,7 +20,7 @@ AppScreen.Header = forwardRef(function AppScreenHeader(
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   return (
-    <div ref={ref} className="px-4 mt-6 text-white">
+    <div ref={ref} className="mt-6 px-4 text-white">
       {children}
     </div>
   );
@@ -53,7 +53,7 @@ AppScreen.Body = forwardRef(function AppScreenBody(
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   return (
-    <div ref={ref} className={clsx("flex-auto mt-6 rounded-t-2xl", className)}>
+    <div ref={ref} className={clsx("mt-6 flex-auto rounded-t-2xl", className)}>
       {children}
     </div>
   );
diff --git a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Backdrop.tsx b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Backdrop.tsx
index 7ed5884..19e204f 100644
--- a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Backdrop.tsx
+++ b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Backdrop.tsx
@@ -1,7 +1,7 @@
 export const Backdrop = () => {
   return (
-    <div className="w-full h-full absolute inset-0 flex justify-center items-center -z-10">
-      <div className="w-[30%] h-[30%] bg-red-300 rounded-full blur-[190px] -z-10"></div>
+    <div className="absolute inset-0 -z-10 flex h-full w-full items-center justify-center">
+      <div className="-z-10 h-[30%] w-[30%] rounded-full bg-red-300 blur-[190px]"></div>
     </div>
   );
 };
diff --git a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Chain.tsx b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Chain.tsx
index 88a222c..badace2 100644
--- a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Chain.tsx
+++ b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Chain.tsx
@@ -6,14 +6,14 @@ export const SingleChain: FC<IChain> = ({ chain, onSelectChain }) => {
   return (
     <div
       key={chain.id}
-      className="mt-1 group hover:bg-slate-200 hover:rounded-md hover:cursor-pointer grayscale hover:grayscale-0 transition-all"
+      className="group mt-1 grayscale transition-all hover:cursor-pointer hover:rounded-md hover:bg-slate-200 hover:grayscale-0"
       onClick={() => onSelectChain({ chain, token: null })}
     >
-      <div className="group inline-flex justify-start items-center space-x-2 p-3">
+      <div className="group inline-flex items-center justify-start space-x-2 p-3">
         <img
           src={chain.logo}
           alt={chain.name}
-          className="rounded-full w-8 h-8"
+          className="h-8 w-8 rounded-full"
         />
         <h2>{chain.name}</h2>
       </div>
diff --git a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Footer.tsx b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Footer.tsx
index 8486f6e..a20877d 100644
--- a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Footer.tsx
+++ b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Footer.tsx
@@ -10,27 +10,27 @@ export function Footer() {
   return (
     <footer className="w-full">
       <Container>
-        <div className="w-full flex justify-between">
-          <div className="w-full flex">
-            <div className="w-full flex justify-between items-center p-4">
-              <div className="flex min-w-5 min-h-5 rounded-4xl bg-gray-100 p-2 gap-4">
-                <div className=" text-gray-700 rounded-4xl text-[9px] font-bold p2">
-                  <FiSun className="w-4 h-4" />
+        <div className="flex w-full justify-between">
+          <div className="flex w-full">
+            <div className="flex w-full items-center justify-between p-4">
+              <div className="rounded-4xl flex min-h-5 min-w-5 gap-4 bg-gray-100 p-2">
+                <div className=" rounded-4xl p2 text-[9px] font-bold text-gray-700">
+                  <FiSun className="h-4 w-4" />
                 </div>
-                <div className="text-slate-300 rounded-4xl text-[9px] font-bold p2">
-                  <FaMoon className="w-4 h-4" />
+                <div className="rounded-4xl p2 text-[9px] font-bold text-slate-300">
+                  <FaMoon className="h-4 w-4" />
                 </div>
               </div>
-              <div className="flex items-center min-w-5 min-h-5 rounded-4xl bg-gray-100 py-2 px-4 gap-1">
-                <h4 className="text-black text-xs font-medium">Activity</h4>
+              <div className="rounded-4xl flex min-h-5 min-w-5 items-center gap-1 bg-gray-100 px-4 py-2">
+                <h4 className="text-xs font-medium text-black">Activity</h4>
                 <MdArrowDropUp />
               </div>
-              <div className="flex min-w-5 min-h-5 rounded-4xl bg-gray-100 p-2 gap-4">
-                <div className=" text-gray-700 rounded-4xl text-[9px] font-bold p2">
-                  <FiSettings className="w-4 h-4" />
+              <div className="rounded-4xl flex min-h-5 min-w-5 gap-4 bg-gray-100 p-2">
+                <div className=" rounded-4xl p2 text-[9px] font-bold text-gray-700">
+                  <FiSettings className="h-4 w-4" />
                 </div>
-                <div className="text-gray-700 rounded-4xl text-[9px] font-bold p2">
-                  <FiMoreHorizontal className="w-4 h-4" />
+                <div className="rounded-4xl p2 text-[9px] font-bold text-gray-700">
+                  <FiMoreHorizontal className="h-4 w-4" />
                 </div>
               </div>
             </div>
diff --git a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Header.tsx b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Header.tsx
index 581d6a5..9f5bf1d 100644
--- a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Header.tsx
+++ b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Header.tsx
@@ -74,7 +74,7 @@ function ConnectButtonMobile() {
     <>
       {isConnected ? (
         <Button
-          className="bg-[#06b6d4] block"
+          className="block bg-[#06b6d4]"
           onClick={async () => {
             await navigator.clipboard.writeText(walletAddress);
             alert("Wallet address copied to clipboard! 🚀");
@@ -98,7 +98,7 @@ function ConnectButton() {
     <>
       {isConnected ? (
         <Button
-          className="bg-[#06b6d4] hidden lg:block"
+          className="hidden bg-[#06b6d4] lg:block"
           onClick={async () => {
             await navigator.clipboard.writeText(walletAddress);
             alert("Wallet address copied to clipboard! 🚀");
@@ -126,11 +126,11 @@ export function Header() {
         <Container className="relative z-50 flex justify-between py-8">
           <div className="relative z-10 flex items-center gap-16">
             <Link href="/" aria-label="Home">
-              <h1 className="relative center align-middle font-bold text-xl italic bg-white px-5 py-2 rounded-full before:contents-[''] transition-all ease-in-out hover:before:absolute before:left-0 hover:before:left-2 before:top-0 hover:before:top-3 before:min-w-full before:h-full before:rounded-full before:-z-10 before:bg-purple-500">
+              <h1 className="center before:contents-[''] relative rounded-full bg-white px-5 py-2 align-middle text-xl font-bold italic transition-all ease-in-out before:left-0 before:top-0 before:-z-10 before:h-full before:min-w-full before:rounded-full before:bg-purple-500 hover:before:absolute hover:before:left-2 hover:before:top-3">
                 PowerSwap 🔥
               </h1>
             </Link>
-            <div className="hidden lg:flex items-center lg:gap-10">
+            <div className="hidden items-center lg:flex lg:gap-10">
               <NavLinks />
             </div>
           </div>
@@ -144,9 +144,9 @@ export function Header() {
                   >
                     {({ open }) =>
                       open ? (
-                        <ChevronUpIcon className="w-6 h-6" />
+                        <ChevronUpIcon className="h-6 w-6" />
                       ) : (
-                        <MenuIcon className="w-6 h-6" />
+                        <MenuIcon className="h-6 w-6" />
                       )
                     }
                   </Popover.Button>
@@ -171,14 +171,14 @@ export function Header() {
                             y: -32,
                             transition: { duration: 0.2 },
                           }}
-                          className="absolute inset-x-0 top-0 z-0 px-6 pt-32 pb-6 origin-top shadow-2xl rounded-b-2xl bg-gray-50 shadow-gray-900/20"
+                          className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-gray-50 px-6 pb-6 pt-32 shadow-2xl shadow-gray-900/20"
                         >
                           <div className="space-y-4">
                             <MobileNavLink href="#swap">Swap</MobileNavLink>
                             <MobileNavLink href="#stake">Stake</MobileNavLink>
                           </div>
 
-                          <div className="flex flex-col mt-4 space-y-4">
+                          <div className="mt-4 flex flex-col space-y-4">
                             <ConnectButtonMobile />
 
                             <Button
diff --git a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Hero.tsx b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Hero.tsx
index fe956ef..0f5aa5e 100644
--- a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Hero.tsx
+++ b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Hero.tsx
@@ -24,9 +24,9 @@ function AppDemo() {
 
 export function Hero() {
   return (
-    <div className="py-5 overflow-hidden">
+    <div className="overflow-hidden py-5">
       <Container>
-        <div className="flex justify-center items-center">
+        <div className="flex items-center justify-center">
           <AppDemo />
         </div>
       </Container>
diff --git a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Modal.tsx b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Modal.tsx
index ef2cff2..5d35bfe 100644
--- a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Modal.tsx
+++ b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Modal.tsx
@@ -45,16 +45,16 @@ export const Modal: React.FC<IModal> = () => {
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className="w-full max-w-md max-h-[60vh] transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
-                  <div className="flex justify-between items-center">
+                <Dialog.Panel className="max-h-[60vh] w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+                  <div className="flex items-center justify-between">
                     <Dialog.Title
                       as="h3"
-                      className="text-lg font-medium leading-6 text-gray-900 flex-1 text-center"
+                      className="flex-1 text-center text-lg font-medium leading-6 text-gray-900"
                     >
                       {title}
                     </Dialog.Title>
                     <MdOutlineClose
-                      className="hover:cursor-pointer hover:bg-gray-300 transition-all ease-in-out bg-gray-200 rounded-2xl w-8 h-8 p-1 flex-none"
+                      className="h-8 w-8 flex-none rounded-2xl bg-gray-200 p-1 transition-all ease-in-out hover:cursor-pointer hover:bg-gray-300"
                       onClick={closeModal}
                     />
                   </div>
diff --git a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/NavLinks.tsx b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/NavLinks.tsx
index 618bbbe..fbd74a3 100644
--- a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/NavLinks.tsx
+++ b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/NavLinks.tsx
@@ -14,14 +14,14 @@ export function NavLinks() {
         <Link
           key={label}
           href={href!}
-          className="relative -my-2 -mx-3 rounded-lg px-3 py-2 text-sm text-gray-700 transition-colors delay-150 hover:text-gray-900 hover:delay-[0ms]"
+          className="relative -mx-3 -my-2 rounded-lg px-3 py-2 text-sm text-gray-700 transition-colors delay-150 hover:text-gray-900 hover:delay-[0ms]"
           onMouseEnter={() => setHoveredIndex(index)}
           onMouseLeave={() => setHoveredIndex(null)}
         >
           <AnimatePresence>
             {hoveredIndex === index && (
               <motion.span
-                className="absolute inset-0 bg-gray-100 rounded-lg"
+                className="absolute inset-0 rounded-lg bg-gray-100"
                 layoutId="hoverBackground"
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1, transition: { duration: 0.15 } }}
diff --git a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Route.tsx b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Route.tsx
index 1179f4b..c17bc9a 100644
--- a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Route.tsx
+++ b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Route.tsx
@@ -20,43 +20,43 @@ export const Route: FC<IRoute> = ({ route, onRouteSelected }) => {
   return (
     <div
       key={route.quote.integration}
-      className="mt-1 group hover:bg-slate-200 hover:rounded-md hover:cursor-pointer transition-all"
+      className="group mt-1 transition-all hover:cursor-pointer hover:rounded-md hover:bg-slate-200"
       onClick={() => onRouteSelected({ ...route, ...processedRoute })}
     >
-      <div className="flex justify-between items-center">
-        <div className="group flex flex-col justify-center items-start space-y-3 p-3">
+      <div className="flex items-center justify-between">
+        <div className="group flex flex-col items-start justify-center space-y-3 p-3">
           <div className="flex">
             {/* @ts-expect-error override route */}
             {route?.isBest ? (
-              <div className="flex space-x-1 bg-green-200 font-bold rounded-full text-[9px] text-green-600 px-2 py-1">
-                <MdCheckCircle className="w-3 h-3" />
+              <div className="flex space-x-1 rounded-full bg-green-200 px-2 py-1 text-[9px] font-bold text-green-600">
+                <MdCheckCircle className="h-3 w-3" />
                 <span>Best</span>
               </div>
             ) : (
               <></>
             )}
           </div>
-          <div className="flex justify-start items-start space-x-3 ">
+          <div className="flex items-start justify-start space-x-3 ">
             <img
               src={processedRoute?.logo}
               alt={route.quote.integration}
-              className="rounded-full w-8 h-8"
+              className="h-8 w-8 rounded-full"
             />
             <div className="flex flex-col space-y-2">
-              <h2 className="capitalize text-sm font-bold">
+              <h2 className="text-sm font-bold capitalize">
                 {route.quote.integration}
               </h2>
               <div className="flex items-center space-x-2">
-                <div className="flex items-center space-x-1 bg-red-200 font-bold rounded-full text-[9px] text-red-600 px-2 py-1">
-                  <FaMoneyBill className="w-3 h-3" />
+                <div className="flex items-center space-x-1 rounded-full bg-red-200 px-2 py-1 text-[9px] font-bold text-red-600">
+                  <FaMoneyBill className="h-3 w-3" />
                   <span>${route.quote.amountUSD}</span>
                 </div>
-                <div className="flex items-center space-x-1 bg-purple-200 font-bold rounded-full text-[9px] text-purple-600 px-2 py-1">
-                  <FaGasPump className="w-3 h-3" />
+                <div className="flex items-center space-x-1 rounded-full bg-purple-200 px-2 py-1 text-[9px] font-bold text-purple-600">
+                  <FaGasPump className="h-3 w-3" />
                   <span>${route.gasUSD}</span>
                 </div>
-                <div className="flex items-center space-x-1 bg-green-200 font-bold rounded-full text-[9px] text-green-600 px-2 py-1">
-                  <MdOutlineTimelapse className="w-3 h-3" />
+                <div className="flex items-center space-x-1 rounded-full bg-green-200 px-2 py-1 text-[9px] font-bold text-green-600">
+                  <MdOutlineTimelapse className="h-3 w-3" />
                   <span>~{route.duration} mins 🔥</span>
                 </div>
               </div>
diff --git a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/SelectChain.tsx b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/SelectChain.tsx
index 1ecdc8a..d45905a 100644
--- a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/SelectChain.tsx
+++ b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/SelectChain.tsx
@@ -53,16 +53,16 @@ export const SelectChain: FC<ISelectChain> = ({
   return (
     <div className="w-full">
       {selectedChain?.chain ? (
-        <div className="flex flex-col space-y-7 relative">
-          <div className="w-full flex items-center space-x-2 fixed bg-white z-10">
+        <div className="relative flex flex-col space-y-7">
+          <div className="fixed z-10 flex w-full items-center space-x-2 bg-white">
             <MdOutlineArrowBack
-              className="hover:cursor-pointer hover:bg-gray-300 transition-all ease-in-out bg-gray-200 rounded-2xl w-8 h-8 p-1"
+              className="h-8 w-8 rounded-2xl bg-gray-200 p-1 transition-all ease-in-out hover:cursor-pointer hover:bg-gray-300"
               onClick={clearChainAndToken}
             />
             <h3 className="mr-auto">Select Token</h3>
           </div>
 
-          <div className="h-[400px] scrollbar scrollbar-thumb-black overflow-y-auto p-3">
+          <div className="scrollbar scrollbar-thumb-black h-[400px] overflow-y-auto p-3">
             <div className="mt-10">
               {tokens?.map((token: Token, index: number) => (
                 <SingleToken
@@ -76,7 +76,7 @@ export const SelectChain: FC<ISelectChain> = ({
           </div>
         </div>
       ) : (
-        <div className="h-[400px] mt-4 scrollbar scrollbar-thumb-black overflow-y-auto p-3">
+        <div className="scrollbar scrollbar-thumb-black mt-4 h-[400px] overflow-y-auto p-3">
           {chains?.map((chain: Chain, index: number) => (
             <SingleChain
               key={index}
diff --git a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/SelectRoute.tsx b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/SelectRoute.tsx
index 82f253c..5157e4f 100644
--- a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/SelectRoute.tsx
+++ b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/SelectRoute.tsx
@@ -15,7 +15,7 @@ export const SelectRoute: FC<ISelectRoute> = ({
 
   return (
     <div className="w-full">
-      <div className="h-[400px] mt-4 scrollbar scrollbar-thumb-black overflow-y-auto p-3">
+      <div className="scrollbar scrollbar-thumb-black mt-4 h-[400px] overflow-y-auto p-3">
         {groupedRoutes?.map((route: TransferRoute, index: number) => (
           <Route key={index} route={route} onRouteSelected={onRouteSelected} />
         ))}
diff --git a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Token.tsx b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Token.tsx
index b56276d..f990954 100644
--- a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Token.tsx
+++ b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/Token.tsx
@@ -21,15 +21,15 @@ export const SingleToken: FC<IToken> = ({ chain, token, onSelectChain }) => {
   return (
     <div
       key={token.symbol}
-      className="w-full mt-1 group hover:bg-slate-200 hover:rounded-md hover:cursor-pointer grayscale hover:grayscale-0 transition-all"
+      className="group mt-1 w-full grayscale transition-all hover:cursor-pointer hover:rounded-md hover:bg-slate-200 hover:grayscale-0"
       onClick={() => onSelectChain({ chain, token })}
     >
-      <div className="group flex justify-between items-center p-3">
-        <div className="flex justify-start items-center space-x-2">
+      <div className="group flex items-center justify-between p-3">
+        <div className="flex items-center justify-start space-x-2">
           <img
             src={token.logo}
             alt={token.symbol}
-            className="rounded-full w-8 h-8"
+            className="h-8 w-8 rounded-full"
           />
           <h2>{token.symbol}</h2>
         </div>
diff --git a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/toast.tsx b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/toast.tsx
index 2bc23c1..d69702c 100644
--- a/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/toast.tsx
+++ b/examples/swaps-sdk-nextjs-thirdweb-embedded-wallet/src/components/ui/toast.tsx
@@ -60,7 +60,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      "ring-offset-background hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
       className,
     )}
     {...props}
@@ -75,7 +75,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      "text-foreground/50 hover:text-foreground absolute right-2 top-2 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
       className,
     )}
     toast-close=""
diff --git a/examples/swaps-sdk-nextjs-web3-react/src/components/Swap.tsx b/examples/swaps-sdk-nextjs-web3-react/src/components/Swap.tsx
index 5e097ff..c0d60c2 100644
--- a/examples/swaps-sdk-nextjs-web3-react/src/components/Swap.tsx
+++ b/examples/swaps-sdk-nextjs-web3-react/src/components/Swap.tsx
@@ -238,51 +238,51 @@ const Swap = () => {
   }
 
   return (
-    <div className="flex flex-col gap-3 items-center justify-center">
+    <div className="flex flex-col items-center justify-center gap-3">
       <h3 className="mt-5 text-sm">Bridge your MATIC to the Rapid Network</h3>
-      <div className="w-full flex border-2 rounded-xl border-zinc-100">
-        <div className="w-full flex justify-between items-center p-1">
-          <div className="flex mr-auto space-x-1 items-center hover:bg-zinc-300/[0.2] hover:rounded-lg hover:cursor-pointer p-3">
+      <div className="flex w-full rounded-xl border-2 border-zinc-100">
+        <div className="flex w-full items-center justify-between p-1">
+          <div className="mr-auto flex items-center space-x-1 p-3 hover:cursor-pointer hover:rounded-lg hover:bg-zinc-300/[0.2]">
             <img
               src={
                 "https://raw.githubusercontent.com/polkaswitch/assets/master/blockchains/polygon/info/logo.png"
               }
               alt={""}
-              className="rounded-full w-7 h-7"
+              className="h-7 w-7 rounded-full"
             />
             <div className="flex flex-col">
-              <h5 className="text-gray-400 font-bold text-[9px]">From</h5>
-              <h5 className="font-bold text-[10px] capitalize">MATIC</h5>
+              <h5 className="text-[9px] font-bold text-gray-400">From</h5>
+              <h5 className="text-[10px] font-bold capitalize">MATIC</h5>
             </div>
           </div>
-          <div className="flex mx-auto justify-center p-3 group">
-            <LiaExchangeAltSolid className="rounded-2xl w-5 h-5 text-zinc-300 font-bold" />
+          <div className="group mx-auto flex justify-center p-3">
+            <LiaExchangeAltSolid className="h-5 w-5 rounded-2xl font-bold text-zinc-300" />
           </div>
-          <div className="flex ml-auto space-x-1 items-center hover:bg-zinc-300/[0.2] hover:rounded-lg hover:cursor-pointer p-3">
+          <div className="ml-auto flex items-center space-x-1 p-3 hover:cursor-pointer hover:rounded-lg hover:bg-zinc-300/[0.2]">
             <div className="flex flex-col">
-              <h5 className="text-gray-400 font-bold text-[9px] text-right">
+              <h5 className="text-right text-[9px] font-bold text-gray-400">
                 To
               </h5>
-              <h5 className="font-bold text-[10px] capitalize">USDC</h5>
+              <h5 className="text-[10px] font-bold capitalize">USDC</h5>
             </div>
             <img
               src={
                 "https://s3.ap-northeast-1.amazonaws.com/platform.swing.xyz/assets/usdc/0c7e4c2dc978757682eed00e438afa3eab3a97bdb63ad57abfbb9d79eb42f006.png"
               }
               alt={""}
-              className="rounded-full w-7 h-7"
+              className="h-7 w-7 rounded-full"
             />
           </div>
         </div>
       </div>
       <div className="flex w-full space-x-2">
         <div className="flex w-full">
-          <div className="w-full flex flex-col border-2 border-zinc-100 space-y-1 rounded-xl bg-zinc-950/[0.02] p-3">
+          <div className="flex w-full flex-col space-y-1 rounded-xl border-2 border-zinc-100 bg-zinc-950/[0.02] p-3">
             <h4 className="w-full text-[11px] font-bold text-zinc-300">Send</h4>
-            <div className="flex justify-between items-center">
+            <div className="flex items-center justify-between">
               <input
                 aria-label="deposit"
-                className="border-none w-[50%] h-auto bg-transparent focus:border-none focus:ring-0 placeholder:m-0 placeholder:p-0 placeholder:text-lg p-0 m-0"
+                className="m-0 h-auto w-[50%] border-none bg-transparent p-0 placeholder:m-0 placeholder:p-0 placeholder:text-lg focus:border-none focus:ring-0"
                 placeholder={"0"}
                 value={transferParams.amount}
                 onChange={(e) => {
@@ -299,14 +299,14 @@ const Swap = () => {
           </div>
         </div>
         <div className="flex w-full">
-          <div className="w-full flex flex-col border-2 border-zinc-100 space-y-1 rounded-xl bg-zinc-950/[0.02] p-3">
+          <div className="flex w-full flex-col space-y-1 rounded-xl border-2 border-zinc-100 bg-zinc-950/[0.02] p-3">
             <h4 className="w-full text-[11px] font-bold text-zinc-300">
               You get
             </h4>
-            <div className="flex justify-between items-center">
+            <div className="flex items-center justify-between">
               <input
                 aria-label="receive"
-                className="border-none w-[50%] h-auto bg-transparent focus:border-none focus:ring-0 placeholder:m-0 placeholder:p-0 placeholder:text-lg p-0 m-0"
+                className="m-0 h-auto w-[50%] border-none bg-transparent p-0 placeholder:m-0 placeholder:p-0 placeholder:text-lg focus:border-none focus:ring-0"
                 placeholder={"0"}
                 value={transferRoute?.quote?.amountUSD! ?? 0}
                 type="number"
@@ -326,7 +326,7 @@ const Swap = () => {
             )
           }
         >
-          <SelectTrigger className="w-[180px] bg-zinc-900 w-full">
+          <SelectTrigger className="w-[180px] w-full bg-zinc-900">
             <SelectValue placeholder="Select Route" className="bg-zinc-900" />
           </SelectTrigger>
           <SelectContent className="bg-zinc-900">
@@ -345,7 +345,7 @@ const Swap = () => {
 
       {isConnected ? (
         <Button
-          className={clsx("w-full flex items-center cursor-pointer", {
+          className={clsx("flex w-full cursor-pointer items-center", {
             "opacity-60": isLoading,
           })}
           disabled={isLoading}
@@ -358,7 +358,7 @@ const Swap = () => {
         </Button>
       ) : (
         <Button
-          className={clsx("w-full flex items-center cursor-pointer", {
+          className={clsx("flex w-full cursor-pointer items-center", {
             "opacity-60": isLoading,
           })}
           disabled={isLoading}
diff --git a/examples/swaps-sdk-nextjs-web3-react/src/components/ui/Footer.tsx b/examples/swaps-sdk-nextjs-web3-react/src/components/ui/Footer.tsx
index 4f595c3..6ad5bc7 100644
--- a/examples/swaps-sdk-nextjs-web3-react/src/components/ui/Footer.tsx
+++ b/examples/swaps-sdk-nextjs-web3-react/src/components/ui/Footer.tsx
@@ -9,23 +9,23 @@ export function Footer() {
   return (
     <footer className="w-full">
       <Container>
-        <div className="w-full flex justify-between">
-          <div className="w-full flex">
-            <div className="w-full flex justify-between items-center p-4">
-              <div className="flex min-w-5 min-h-5 rounded-4xl bg-zinc-700 p-2 gap-4">
-                <div className=" text-gray-700 rounded-4xl text-[9px] font-bold p2">
-                  <FiSun className="w-5 h-5" />
+        <div className="flex w-full justify-between">
+          <div className="flex w-full">
+            <div className="flex w-full items-center justify-between p-4">
+              <div className="rounded-4xl flex min-h-5 min-w-5 gap-4 bg-zinc-700 p-2">
+                <div className=" rounded-4xl p2 text-[9px] font-bold text-gray-700">
+                  <FiSun className="h-5 w-5" />
                 </div>
-                <div className="text-slate-300 rounded-4xl text-[9px] font-bold p2">
-                  <FaMoon className="w-5 h-5" />
+                <div className="rounded-4xl p2 text-[9px] font-bold text-slate-300">
+                  <FaMoon className="h-5 w-5" />
                 </div>
               </div>
-              <div className="flex min-w-5 min-h-5 rounded-4xl bg-zinc-700 p-2 gap-4">
-                <div className=" text-gray-700 rounded-4xl text-[9px] font-bold p2">
-                  <FiSettings className="w-4 h-4" />
+              <div className="rounded-4xl flex min-h-5 min-w-5 gap-4 bg-zinc-700 p-2">
+                <div className=" rounded-4xl p2 text-[9px] font-bold text-gray-700">
+                  <FiSettings className="h-4 w-4" />
                 </div>
-                <div className="text-gray-700 rounded-4xl text-[9px] font-bold p2">
-                  <FiMoreHorizontal className="w-5 h-5" />
+                <div className="rounded-4xl p2 text-[9px] font-bold text-gray-700">
+                  <FiMoreHorizontal className="h-5 w-5" />
                 </div>
               </div>
             </div>
diff --git a/examples/swaps-sdk-nextjs-web3-react/src/components/ui/Header.tsx b/examples/swaps-sdk-nextjs-web3-react/src/components/ui/Header.tsx
index 82c21a2..5c2d969 100644
--- a/examples/swaps-sdk-nextjs-web3-react/src/components/ui/Header.tsx
+++ b/examples/swaps-sdk-nextjs-web3-react/src/components/ui/Header.tsx
@@ -88,9 +88,9 @@ export function Header() {
                   >
                     {({ open }) =>
                       open ? (
-                        <ChevronUpIcon className="w-6 h-6" />
+                        <ChevronUpIcon className="h-6 w-6" />
                       ) : (
-                        <MenuIcon className="w-6 h-6" />
+                        <MenuIcon className="h-6 w-6" />
                       )
                     }
                   </Popover.Button>
@@ -115,7 +115,7 @@ export function Header() {
                             y: -32,
                             transition: { duration: 0.2 },
                           }}
-                          className="absolute inset-x-0 top-0 z-0 px-6 pt-32 pb-6 origin-top shadow-2xl rounded-b-2xl bg-black shadow-gray-900/20"
+                          className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-black px-6 pb-6 pt-32 shadow-2xl shadow-gray-900/20"
                         >
                           <div className="space-y-4">
                             <MobileNavLink href="#gov">
@@ -124,7 +124,7 @@ export function Header() {
                             <MobileNavLink href="#docs">Docs</MobileNavLink>
                           </div>
 
-                          <div className="flex flex-col mt-4 space-y-4">
+                          <div className="mt-4 flex flex-col space-y-4">
                             {/* <Button href="#altcoin">Connect</Button> */}
 
                             <Button
diff --git a/examples/swaps-sdk-nextjs-web3-react/src/components/ui/Hero.tsx b/examples/swaps-sdk-nextjs-web3-react/src/components/ui/Hero.tsx
index 84c84bc..1a7dcfa 100644
--- a/examples/swaps-sdk-nextjs-web3-react/src/components/ui/Hero.tsx
+++ b/examples/swaps-sdk-nextjs-web3-react/src/components/ui/Hero.tsx
@@ -13,25 +13,25 @@ const SwapSDK = dynamic(() => import("../Swap"), {
 
 export function Hero() {
   return (
-    <div className="py-20 overflow-hidden sm:py-32 lg:pb-32 xl:pb-36">
+    <div className="overflow-hidden py-20 sm:py-32 lg:pb-32 xl:pb-36">
       <Container>
-        <div className="absolute -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 -z-10">
+        <div className="absolute left-1/2 top-1/2 -z-10 -translate-x-1/2 -translate-y-1/2">
           <CircleBackground
             color="#a29bfe"
-            className="hidden lg:block animate-spin-slower"
+            className="animate-spin-slower hidden lg:block"
           />
         </div>
-        <div className="flex flex-col justify-center items-center mb-10 gap-5">
-          <p className="bg-gray-800 rounded-3xl w-auto px-3 py-2 font-bold text-[11px]">
+        <div className="mb-10 flex flex-col items-center justify-center gap-5">
+          <p className="w-auto rounded-3xl bg-gray-800 px-3 py-2 text-[11px] font-bold">
             RapidPay API V3 is live 🎉
           </p>
 
-          <h1 className="text-xl md:text-2xl lg:text-4xl font-medium tracking-tight text-gray-900">
+          <h1 className="text-xl font-medium tracking-tight text-gray-900 md:text-2xl lg:text-4xl">
             <div>Quickly bridge MATIC to USDC 🚀</div>
           </h1>
         </div>
 
-        <div className="w-full flex justify-center items-center">
+        <div className="flex w-full items-center justify-center">
           <Tabs defaultValue="deposit" className="lg:w-[40%]">
             <TabsList className="grid w-full grid-cols-2 bg-zinc-900">
               <TabsTrigger value="deposit">Bridge</TabsTrigger>
diff --git a/examples/swaps-sdk-nextjs-web3-react/src/components/ui/NavLinks.tsx b/examples/swaps-sdk-nextjs-web3-react/src/components/ui/NavLinks.tsx
index 520768b..cbdc698 100644
--- a/examples/swaps-sdk-nextjs-web3-react/src/components/ui/NavLinks.tsx
+++ b/examples/swaps-sdk-nextjs-web3-react/src/components/ui/NavLinks.tsx
@@ -14,14 +14,14 @@ export function NavLinks() {
         <Link
           key={label}
           href={href!}
-          className="relative -my-2 -mx-3 rounded-lg px-3 py-2 text-sm text-gray-700 transition-colors delay-150 hover:delay-[0ms]"
+          className="relative -mx-3 -my-2 rounded-lg px-3 py-2 text-sm text-gray-700 transition-colors delay-150 hover:delay-[0ms]"
           onMouseEnter={() => setHoveredIndex(index)}
           onMouseLeave={() => setHoveredIndex(null)}
         >
           <AnimatePresence>
             {hoveredIndex === index && (
               <motion.span
-                className="absolute inset-0 bg-gray-800 rounded-lg"
+                className="absolute inset-0 rounded-lg bg-gray-800"
                 layoutId="hoverBackground"
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1, transition: { duration: 0.15 } }}
diff --git a/examples/swaps-sdk-nextjs-web3-react/src/components/ui/StatusSheet.tsx b/examples/swaps-sdk-nextjs-web3-react/src/components/ui/StatusSheet.tsx
index 27bfa60..b3c2af5 100644
--- a/examples/swaps-sdk-nextjs-web3-react/src/components/ui/StatusSheet.tsx
+++ b/examples/swaps-sdk-nextjs-web3-react/src/components/ui/StatusSheet.tsx
@@ -30,18 +30,18 @@ export const StatusSheet = ({
 
     if (logType === "CHAIN_SWITCH") {
       return (
-        <div className="flex sm:flex-col gap-4 min-h-[50px] mb-2">
+        <div className="mb-2 flex min-h-[50px] gap-4 sm:flex-col">
           <span className={clsx("text-yellow-400")}>{time}</span>
-          <div className="bg-zinc-700 rounded-xl p-1">
+          <div className="rounded-xl bg-zinc-700 p-1">
             <h3 className="text-sm sm:text-xs">{log}</h3>
           </div>
         </div>
       );
     } else if (logType === "ACTION_REQUIRED") {
       return (
-        <div className="lg:flex sm:block gap-4 min-h-[50px] mb-2">
+        <div className="mb-2 min-h-[50px] gap-4 sm:block lg:flex">
           <span className={clsx("text-yellow-400")}>{time}</span>
-          <div className="bg-zinc-700 rounded-xl p-2">
+          <div className="rounded-xl bg-zinc-700 p-2">
             <h3 className="text-sm sm:text-xs">{log}</h3>
           </div>
         </div>
@@ -59,14 +59,14 @@ export const StatusSheet = ({
 
   return (
     <Drawer open={isOpen}>
-      <DrawerContent className="bg-black border-zinc-700">
+      <DrawerContent className="border-zinc-700 bg-black">
         <div className="mx-auto w-full max-w-2xl">
           <DrawerHeader>
             <DrawerTitle>Transaction Processing</DrawerTitle>
             <DrawerDescription></DrawerDescription>
           </DrawerHeader>
           <div className="p-4 pb-0">
-            <ScrollArea className="flex flex-col justify-start space-x-2 bg-zinc-800  text-sm sm:text-xs rounded max-h-[200px]">
+            <ScrollArea className="flex max-h-[200px] flex-col justify-start space-x-2  rounded bg-zinc-800 text-sm sm:text-xs">
               <div className="w-full">
                 <div className="">
                   <span className="text-zinc-400">
@@ -83,7 +83,7 @@ export const StatusSheet = ({
           <DrawerFooter>
             <Button
               className={clsx(
-                "w-full flex items-center cursor-pointer bg-red-400",
+                "flex w-full cursor-pointer items-center bg-red-400",
               )}
               onClick={onCancel}
             >
diff --git a/examples/swaps-sdk-nextjs-web3-react/src/components/ui/select.tsx b/examples/swaps-sdk-nextjs-web3-react/src/components/ui/select.tsx
index 7a09720..4410cf1 100644
--- a/examples/swaps-sdk-nextjs-web3-react/src/components/ui/select.tsx
+++ b/examples/swaps-sdk-nextjs-web3-react/src/components/ui/select.tsx
@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 dark:border-zinc-800 dark:bg-zinc-950 dark:ring-offset-zinc-950 dark:placeholder:text-zinc-400 dark:focus:ring-zinc-300",
+      "flex h-10 w-full items-center justify-between rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-800 dark:bg-zinc-950 dark:ring-offset-zinc-950 dark:placeholder:text-zinc-400 dark:focus:ring-zinc-300 [&>span]:line-clamp-1",
       className,
     )}
     {...props}
@@ -75,7 +75,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white text-zinc-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white text-zinc-950 shadow-md dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className,
diff --git a/examples/swaps-sdk-nextjs/src/components/Swap.tsx b/examples/swaps-sdk-nextjs/src/components/Swap.tsx
index 5c39165..f59bb37 100644
--- a/examples/swaps-sdk-nextjs/src/components/Swap.tsx
+++ b/examples/swaps-sdk-nextjs/src/components/Swap.tsx
@@ -186,7 +186,7 @@ const Swap = () => {
   return (
     <div
       id="#altcoin"
-      className="w-full max-w-2xl p-5 m-auto space-y-4 bg-white border rounded-md lg:ml-auto lg:w-80"
+      className="m-auto w-full max-w-2xl space-y-4 rounded-md border bg-white p-5 lg:ml-auto lg:w-80"
     >
       <div className="text-lg font-bold">Swap for $ALTCOIN</div>
 
@@ -197,12 +197,12 @@ const Swap = () => {
         >
           Amount
         </label>
-        <div className="relative flex items-center mt-1">
+        <div className="relative mt-1 flex items-center">
           <input
             type="number"
             name="amount"
             id="amount"
-            className="block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+            className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
             placeholder="0.0"
             value={transferParams.amount}
             onChange={(e) => {
@@ -220,7 +220,7 @@ const Swap = () => {
       <div>
         {isConnected ? (
           <Button
-            className={clsx("flex items-center cursor-pointer", {
+            className={clsx("flex cursor-pointer items-center", {
               "opacity-60": isLoading,
             })}
             disabled={isLoading}
@@ -233,7 +233,7 @@ const Swap = () => {
           </Button>
         ) : (
           <Button
-            className={clsx("flex items-center cursor-pointer", {
+            className={clsx("flex cursor-pointer items-center", {
               "opacity-60": isLoading,
             })}
             disabled={isLoading}
@@ -244,7 +244,7 @@ const Swap = () => {
         )}
 
         {transferRoute && (
-          <div className="grid grid-cols-2 gap-4 mt-4">
+          <div className="mt-4 grid grid-cols-2 gap-4">
             <div>
               <label className="block text-sm font-medium text-gray-700">
                 From
@@ -300,7 +300,7 @@ const Swap = () => {
               <label className="block text-sm font-medium text-gray-700">
                 Error
               </label>{" "}
-              <div className="text-red-500 capitalize">
+              <div className="capitalize text-red-500">
                 {status?.status === "FAILED" ? status.error : error}
               </div>
             </div>
diff --git a/examples/swaps-sdk-nextjs/src/components/ui/AppScreen.tsx b/examples/swaps-sdk-nextjs/src/components/ui/AppScreen.tsx
index 5c5018a..27927b6 100644
--- a/examples/swaps-sdk-nextjs/src/components/ui/AppScreen.tsx
+++ b/examples/swaps-sdk-nextjs/src/components/ui/AppScreen.tsx
@@ -20,7 +20,7 @@ AppScreen.Header = forwardRef(function AppScreenHeader(
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   return (
-    <div ref={ref} className="px-4 mt-6 text-white">
+    <div ref={ref} className="mt-6 px-4 text-white">
       {children}
     </div>
   );
@@ -53,7 +53,7 @@ AppScreen.Body = forwardRef(function AppScreenBody(
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   return (
-    <div ref={ref} className={clsx("flex-auto mt-6 rounded-t-2xl", className)}>
+    <div ref={ref} className={clsx("mt-6 flex-auto rounded-t-2xl", className)}>
       {children}
     </div>
   );
diff --git a/examples/swaps-sdk-nextjs/src/components/ui/CallToAction.tsx b/examples/swaps-sdk-nextjs/src/components/ui/CallToAction.tsx
index 45e074c..9d6e0b5 100644
--- a/examples/swaps-sdk-nextjs/src/components/ui/CallToAction.tsx
+++ b/examples/swaps-sdk-nextjs/src/components/ui/CallToAction.tsx
@@ -8,13 +8,13 @@ export function CallToAction() {
   return (
     <section
       id="get-free-shares-today"
-      className="relative py-20 overflow-hidden bg-gray-900 sm:py-28"
+      className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
     >
-      <div className="absolute -translate-y-1/2 top-1/2 left-20 sm:left-1/2 sm:-translate-x-1/2">
+      <div className="absolute left-20 top-1/2 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2">
         <CircleBackground color="#fff" className="animate-spin-slower" />
       </div>
       <Container className="relative">
-        <div className="max-w-md mx-auto sm:text-center">
+        <div className="mx-auto max-w-md sm:text-center">
           <h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl">
             Get your first Altcoin today
           </h2>
@@ -22,7 +22,7 @@ export function CallToAction() {
             It takes minutes to buy. Use <a>app.swing.xyz</a> to bridge and swap
             your assets into $Altcoin.
           </p>
-          <div className="flex justify-center mt-8">
+          <div className="mt-8 flex justify-center">
             <Button href="#altcoin">Buy $ALTCOIN</Button>
           </div>
         </div>
diff --git a/examples/swaps-sdk-nextjs/src/components/ui/Footer.tsx b/examples/swaps-sdk-nextjs/src/components/ui/Footer.tsx
index 13e6e0d..738353b 100644
--- a/examples/swaps-sdk-nextjs/src/components/ui/Footer.tsx
+++ b/examples/swaps-sdk-nextjs/src/components/ui/Footer.tsx
@@ -10,31 +10,31 @@ export function Footer() {
   return (
     <footer className="border-t border-gray-200">
       <Container>
-        <div className="flex flex-col items-start justify-between pt-16 pb-6 gap-y-12 lg:flex-row lg:items-center lg:py-16">
+        <div className="flex flex-col items-start justify-between gap-y-12 pb-6 pt-16 lg:flex-row lg:items-center lg:py-16">
           <div>
             <div className="flex items-center text-gray-900">
-              <Logomark className="flex-none w-10 h-10 fill-cyan-500" />
+              <Logomark className="h-10 w-10 flex-none fill-cyan-500" />
               <div className="ml-4">
                 <p className="text-base font-semibold">Altcoin</p>
                 <p className="mt-1 text-sm">Buy at the top.</p>
               </div>
             </div>
-            <nav className="flex gap-8 mt-11">
+            <nav className="mt-11 flex gap-8">
               <NavLinks />
             </nav>
           </div>
         </div>
-        <div className="flex flex-col items-center pt-8 pb-12 border-t border-gray-200 md:flex-row-reverse md:justify-between md:pt-6">
-          <form className="flex justify-center w-full md:w-auto">
+        <div className="flex flex-col items-center border-t border-gray-200 pb-12 pt-8 md:flex-row-reverse md:justify-between md:pt-6">
+          <form className="flex w-full justify-center md:w-auto">
             <TextField
               type="email"
               aria-label="Email address"
               placeholder="Email address"
               autoComplete="email"
               required
-              className="min-w-0 w-60 shrink"
+              className="w-60 min-w-0 shrink"
             />
-            <Button type="submit" color="cyan" className="flex-none ml-4">
+            <Button type="submit" color="cyan" className="ml-4 flex-none">
               <span className="hidden lg:inline">Join our newsletter</span>
               <span className="lg:hidden">Join newsletter</span>
             </Button>
diff --git a/examples/swaps-sdk-nextjs/src/components/ui/Header.tsx b/examples/swaps-sdk-nextjs/src/components/ui/Header.tsx
index 4ab1468..76ae6c5 100644
--- a/examples/swaps-sdk-nextjs/src/components/ui/Header.tsx
+++ b/examples/swaps-sdk-nextjs/src/components/ui/Header.tsx
@@ -73,7 +73,7 @@ export function Header() {
         <Container className="relative z-50 flex justify-between py-8">
           <div className="relative z-10 flex items-center gap-16">
             <Link href="/" aria-label="Home">
-              <Logo className="w-auto h-10" />
+              <Logo className="h-10 w-auto" />
             </Link>
             <div className="hidden lg:flex lg:gap-10">
               <NavLinks />
@@ -89,9 +89,9 @@ export function Header() {
                   >
                     {({ open }) =>
                       open ? (
-                        <ChevronUpIcon className="w-6 h-6" />
+                        <ChevronUpIcon className="h-6 w-6" />
                       ) : (
-                        <MenuIcon className="w-6 h-6" />
+                        <MenuIcon className="h-6 w-6" />
                       )
                     }
                   </Popover.Button>
@@ -116,7 +116,7 @@ export function Header() {
                             y: -32,
                             transition: { duration: 0.2 },
                           }}
-                          className="absolute inset-x-0 top-0 z-0 px-6 pt-32 pb-6 origin-top shadow-2xl rounded-b-2xl bg-gray-50 shadow-gray-900/20"
+                          className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-gray-50 px-6 pb-6 pt-32 shadow-2xl shadow-gray-900/20"
                         >
                           <div className="space-y-4">
                             <MobileNavLink href="#about">
@@ -127,7 +127,7 @@ export function Header() {
                             <MobileNavLink href="#faqs">FAQs</MobileNavLink>
                           </div>
 
-                          <div className="flex flex-col mt-4 space-y-4">
+                          <div className="mt-4 flex flex-col space-y-4">
                             <Button href="#altcoin">Buy $ALTCOIN</Button>
 
                             <Button
diff --git a/examples/swaps-sdk-nextjs/src/components/ui/Hero.tsx b/examples/swaps-sdk-nextjs/src/components/ui/Hero.tsx
index 29f740a..048ffe4 100644
--- a/examples/swaps-sdk-nextjs/src/components/ui/Hero.tsx
+++ b/examples/swaps-sdk-nextjs/src/components/ui/Hero.tsx
@@ -34,10 +34,10 @@ function AppDemo() {
 
 export function Hero() {
   return (
-    <div className="py-20 overflow-hidden sm:py-32 lg:pb-32 xl:pb-36">
+    <div className="overflow-hidden py-20 sm:py-32 lg:pb-32 xl:pb-36">
       <Container>
         <div className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
-          <div className="relative z-10 max-w-2xl mx-auto lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
+          <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
             <h1 className="text-4xl font-medium tracking-tight text-gray-900">
               <div>Buy at the top.</div>
               <div>Sell at the bottom.</div>
@@ -53,13 +53,13 @@ export function Hero() {
             <AppDemo />
           </div>
 
-          <div className="relative mt-10 lg:mt-0 lg:col-span-7 xl:col-span-6">
-            <p className="text-sm font-semibold text-center text-gray-900 lg:text-left">
+          <div className="relative mt-10 lg:col-span-7 lg:mt-0 xl:col-span-6">
+            <p className="text-center text-sm font-semibold text-gray-900 lg:text-left">
               As featured in
             </p>
             <ul
               role="list"
-              className="flex flex-wrap justify-center max-w-xl mx-auto mt-8 gap-x-10 gap-y-8 lg:mx-0 lg:justify-start"
+              className="mx-auto mt-8 flex max-w-xl flex-wrap justify-center gap-x-10 gap-y-8 lg:mx-0 lg:justify-start"
             >
               {[
                 ["Forbes", logoForbes],
diff --git a/examples/swaps-sdk-nextjs/src/components/ui/NavLinks.tsx b/examples/swaps-sdk-nextjs/src/components/ui/NavLinks.tsx
index 5b9c5fb..ca8cad5 100644
--- a/examples/swaps-sdk-nextjs/src/components/ui/NavLinks.tsx
+++ b/examples/swaps-sdk-nextjs/src/components/ui/NavLinks.tsx
@@ -16,14 +16,14 @@ export function NavLinks() {
         <Link
           key={label}
           href={href!}
-          className="relative -my-2 -mx-3 rounded-lg px-3 py-2 text-sm text-gray-700 transition-colors delay-150 hover:text-gray-900 hover:delay-[0ms]"
+          className="relative -mx-3 -my-2 rounded-lg px-3 py-2 text-sm text-gray-700 transition-colors delay-150 hover:text-gray-900 hover:delay-[0ms]"
           onMouseEnter={() => setHoveredIndex(index)}
           onMouseLeave={() => setHoveredIndex(null)}
         >
           <AnimatePresence>
             {hoveredIndex === index && (
               <motion.span
-                className="absolute inset-0 bg-gray-100 rounded-lg"
+                className="absolute inset-0 rounded-lg bg-gray-100"
                 layoutId="hoverBackground"
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1, transition: { duration: 0.15 } }}
diff --git a/examples/swaps-sdk-nextjs/src/components/ui/PhoneFrame.tsx b/examples/swaps-sdk-nextjs/src/components/ui/PhoneFrame.tsx
index a6f5946..799c21f 100644
--- a/examples/swaps-sdk-nextjs/src/components/ui/PhoneFrame.tsx
+++ b/examples/swaps-sdk-nextjs/src/components/ui/PhoneFrame.tsx
@@ -28,8 +28,8 @@ export function PhoneFrame({
 }) {
   return (
     <div className={clsx("relative aspect-[366/729]", className)}>
-      <div className="absolute inset-y-[calc(1/729*100%)] right-[calc(5/729*100%)] left-[calc(7/729*100%)] rounded-[calc(58/366*100%)/calc(58/729*100%)] shadow-2xl" />
-      <div className="absolute top-[calc(23/729*100%)] left-[calc(23/366*100%)] grid h-[calc(686/729*100%)] w-[calc(318/366*100%)] transform grid-cols-1 overflow-hidden bg-gray-900 pt-[calc(23/318*100%)]">
+      <div className="absolute inset-y-[calc(1/729*100%)] left-[calc(7/729*100%)] right-[calc(5/729*100%)] rounded-[calc(58/366*100%)/calc(58/729*100%)] shadow-2xl" />
+      <div className="absolute left-[calc(23/366*100%)] top-[calc(23/729*100%)] grid h-[calc(686/729*100%)] w-[calc(318/366*100%)] transform grid-cols-1 overflow-hidden bg-gray-900 pt-[calc(23/318*100%)]">
         {children}
       </div>
       <PlaceholderFrame className="pointer-events-none absolute inset-0 h-full w-full fill-gray-100" />
diff --git a/examples/swaps-sdk-nextjs/src/components/ui/PrimaryFeatures.tsx b/examples/swaps-sdk-nextjs/src/components/ui/PrimaryFeatures.tsx
index fb0f29a..826d86e 100644
--- a/examples/swaps-sdk-nextjs/src/components/ui/PrimaryFeatures.tsx
+++ b/examples/swaps-sdk-nextjs/src/components/ui/PrimaryFeatures.tsx
@@ -201,13 +201,13 @@ function InviteScreen({
             ].map((field) => (
               <div key={field.label}>
                 <div className="text-sm text-gray-500">{field.label}</div>
-                <div className="pb-2 mt-2 text-sm text-gray-900 border-b border-gray-200">
+                <div className="mt-2 border-b border-gray-200 pb-2 text-sm text-gray-900">
                   {field.value}
                 </div>
               </div>
             ))}
           </div>
-          <div className="px-3 py-2 mt-6 text-sm font-semibold text-center text-white rounded-lg bg-cyan-500">
+          <div className="mt-6 rounded-lg bg-cyan-500 px-3 py-2 text-center text-sm font-semibold text-white">
             Invite person
           </div>
         </div>
@@ -294,7 +294,7 @@ function StocksScreen({
                 className="flex-none rounded-full"
                 style={{ backgroundColor: stock.color }}
               >
-                <stock.logo className="w-10 h-10" />
+                <stock.logo className="h-10 w-10" />
               </div>
               <div className="flex-auto text-sm text-gray-900">
                 {stock.name}
@@ -347,7 +347,7 @@ function InvestScreen({
                 value: (
                   <div className="flex">
                     $34.28
-                    <svg viewBox="0 0 24 24" fill="none" className="w-6 h-6">
+                    <svg viewBox="0 0 24 24" fill="none" className="h-6 w-6">
                       <path
                         d="M17 15V7H9M17 7 7 17"
                         stroke="#06B6D4"
@@ -363,7 +363,7 @@ function InvestScreen({
             ].map((item) => (
               <div
                 key={item.label}
-                className="flex justify-between pb-4 border-b border-gray-100"
+                className="flex justify-between border-b border-gray-100 pb-4"
               >
                 <div className="text-sm text-gray-500">{item.label}</div>
                 <div className="text-sm font-semibold text-gray-900">
@@ -371,7 +371,7 @@ function InvestScreen({
                 </div>
               </div>
             ))}
-            <div className="px-3 py-2 text-sm font-semibold text-center text-white rounded-lg bg-cyan-500">
+            <div className="rounded-lg bg-cyan-500 px-3 py-2 text-center text-sm font-semibold text-white">
               Buy shares
             </div>
           </div>
@@ -409,7 +409,7 @@ function FeaturesDesktop() {
   return (
     <Tab.Group
       as="div"
-      className="grid items-center grid-cols-12 gap-8 lg:gap-16 xl:gap-24"
+      className="grid grid-cols-12 items-center gap-8 lg:gap-16 xl:gap-24"
       selectedIndex={selectedIndex}
       onChange={onChange}
       vertical
@@ -418,7 +418,7 @@ function FeaturesDesktop() {
         {features.map((feature, featureIndex) => (
           <div
             key={feature.name}
-            className="relative transition-colors rounded-2xl hover:bg-gray-800/30"
+            className="relative rounded-2xl transition-colors hover:bg-gray-800/30"
           >
             {featureIndex === selectedIndex && (
               <motion.div
@@ -428,7 +428,7 @@ function FeaturesDesktop() {
               />
             )}
             <div className="relative z-10 p-8">
-              <feature.icon className="w-8 h-8" />
+              <feature.icon className="h-8 w-8" />
               <h3 className="mt-6 text-lg font-semibold text-white">
                 <Tab className="text-left [&:not(:focus-visible)]:focus:outline-none">
                   <span className="absolute inset-0 rounded-2xl" />
@@ -443,7 +443,7 @@ function FeaturesDesktop() {
         ))}
       </Tab.List>
       <div className="relative col-span-6">
-        <div className="absolute -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
+        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
           <CircleBackground color="#13B5C8" className="animate-spin-slower" />
         </div>
         <Tab.Panels as={Fragment}>
@@ -499,10 +499,10 @@ function FeaturesMobile() {
             key={featureIndex}
             // @ts-expect-error ignore
             ref={(ref) => (slideRefs.current[featureIndex] = ref)}
-            className="flex-none w-full px-4 snap-center sm:px-6"
+            className="w-full flex-none snap-center px-4 sm:px-6"
           >
-            <div className="relative px-5 py-6 overflow-hidden transform bg-gray-800 rounded-2xl">
-              <div className="absolute -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">
+            <div className="relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6">
+              <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
                 <CircleBackground
                   color="#13B5C8"
                   className={featureIndex % 2 === 1 ? "rotate-180" : undefined}
@@ -512,8 +512,8 @@ function FeaturesMobile() {
                 {/* @ts-expect-error ignore */}
                 <feature.screen />
               </PhoneFrame>
-              <div className="absolute inset-x-0 bottom-0 p-6 bg-gray-800/95 backdrop-blur sm:p-10">
-                <feature.icon className="w-8 h-8" />
+              <div className="absolute inset-x-0 bottom-0 bg-gray-800/95 p-6 backdrop-blur sm:p-10">
+                <feature.icon className="h-8 w-8" />
                 <h3 className="mt-6 text-sm font-semibold text-white sm:text-lg">
                   {feature.name}
                 </h3>
@@ -525,7 +525,7 @@ function FeaturesMobile() {
           </div>
         ))}
       </div>
-      <div className="flex justify-center gap-3 mt-6">
+      <div className="mt-6 flex justify-center gap-3">
         {features.map((_, featureIndex) => (
           <button
             type="button"
@@ -555,10 +555,10 @@ export function PrimaryFeatures() {
     <section
       id="features"
       aria-label="Features for investing all your money"
-      className="py-20 bg-gray-900 sm:py-32"
+      className="bg-gray-900 py-20 sm:py-32"
     >
       <Container>
-        <div className="max-w-2xl mx-auto lg:mx-0 lg:max-w-3xl">
+        <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl">
           <h2 className="text-3xl font-medium tracking-tight text-white">
             Everything you need. Buy it for yourself.
           </h2>
diff --git a/examples/swaps-sdk-nextjs/src/components/ui/Reviews.tsx b/examples/swaps-sdk-nextjs/src/components/ui/Reviews.tsx
index dc1b0f8..ff491f8 100644
--- a/examples/swaps-sdk-nextjs/src/components/ui/Reviews.tsx
+++ b/examples/swaps-sdk-nextjs/src/components/ui/Reviews.tsx
@@ -110,7 +110,7 @@ function StarRating({ rating }: { rating: number }) {
         <StarIcon
           key={index}
           className={clsx(
-            "w-5 h-5",
+            "h-5 w-5",
             rating > index ? "fill-cyan-500" : "fill-gray-300",
           )}
         />
@@ -150,7 +150,7 @@ function Review({
   return (
     <figure
       className={clsx(
-        "p-6 bg-white shadow-md opacity-0 animate-fade-in rounded-3xl shadow-gray-900/5",
+        "animate-fade-in rounded-3xl bg-white p-6 opacity-0 shadow-md shadow-gray-900/5",
         className,
       )}
       style={{ animationDelay }}
@@ -217,7 +217,7 @@ function ReviewColumn({
   return (
     <div
       ref={columnRef}
-      className={clsx("py-4 space-y-8 animate-marquee", className)}
+      className={clsx("animate-marquee space-y-8 py-4", className)}
       // @ts-expect-error allow custom properties
       style={{ "--marquee-duration": duration }}
     >
@@ -276,8 +276,8 @@ function ReviewGrid() {
           />
         </>
       )}
-      <div className="absolute inset-x-0 top-0 h-32 pointer-events-none bg-gradient-to-b from-gray-50" />
-      <div className="absolute inset-x-0 bottom-0 h-32 pointer-events-none bg-gradient-to-t from-gray-50" />
+      <div className="pointer-events-none absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-gray-50" />
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-gray-50" />
     </div>
   );
 }
@@ -287,7 +287,7 @@ export function Reviews() {
     <section
       id="reviews"
       aria-labelledby="reviews-title"
-      className="pt-20 pb-16 sm:pt-32 sm:pb-24"
+      className="pb-16 pt-20 sm:pb-24 sm:pt-32"
     >
       <Container>
         <h2
diff --git a/examples/swaps-sdk-nextjs/src/components/ui/SecondaryFeatures.tsx b/examples/swaps-sdk-nextjs/src/components/ui/SecondaryFeatures.tsx
index 0202ebc..808239b 100644
--- a/examples/swaps-sdk-nextjs/src/components/ui/SecondaryFeatures.tsx
+++ b/examples/swaps-sdk-nextjs/src/components/ui/SecondaryFeatures.tsx
@@ -206,7 +206,7 @@ export function SecondaryFeatures() {
       className="py-20 sm:py-32"
     >
       <Container>
-        <div className="max-w-2xl mx-auto sm:text-center">
+        <div className="mx-auto max-w-2xl sm:text-center">
           <h2 className="text-3xl font-medium tracking-tight text-gray-900">
             Now is the time to build your portfolio.
           </h2>
@@ -217,14 +217,14 @@ export function SecondaryFeatures() {
         </div>
         <ul
           role="list"
-          className="grid max-w-2xl grid-cols-1 gap-6 mx-auto mt-16 text-sm sm:mt-20 sm:grid-cols-2 md:gap-y-10 lg:max-w-none lg:grid-cols-3"
+          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 text-sm sm:mt-20 sm:grid-cols-2 md:gap-y-10 lg:max-w-none lg:grid-cols-3"
         >
           {features.map((feature) => (
             <li
               key={feature.name}
-              className="p-8 border border-gray-200 rounded-2xl"
+              className="rounded-2xl border border-gray-200 p-8"
             >
-              <feature.icon className="w-8 h-8" />
+              <feature.icon className="h-8 w-8" />
               <h3 className="mt-6 font-semibold text-gray-900">
                 {feature.name}
               </h3>
diff --git a/examples/swaps-widget-nextjs/src/app/layout.tsx b/examples/swaps-widget-nextjs/src/app/layout.tsx
index 13ad1ac..99375fe 100644
--- a/examples/swaps-widget-nextjs/src/app/layout.tsx
+++ b/examples/swaps-widget-nextjs/src/app/layout.tsx
@@ -11,10 +11,10 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     <html lang="en" suppressHydrationWarning>
       <head />
 
-      <body className="relative flex max-h-screen min-h-full text-white bg-slate-900">
+      <body className="relative flex max-h-screen min-h-full bg-slate-900 text-white">
         <Sidebar />
 
-        <main className="relative flex flex-col w-full min-h-screen overflow-y-auto">
+        <main className="relative flex min-h-screen w-full flex-col overflow-y-auto">
           <div className="flex justify-end p-6">
             <Button
               href="https://github.com/swing-xyz/examples/tree/main/examples/swaps-widget-nextjs"
diff --git a/examples/swaps-widget-nextjs/src/app/page.tsx b/examples/swaps-widget-nextjs/src/app/page.tsx
index 95caeb7..a0c35ad 100644
--- a/examples/swaps-widget-nextjs/src/app/page.tsx
+++ b/examples/swaps-widget-nextjs/src/app/page.tsx
@@ -3,7 +3,7 @@ import "@swing.xyz/ui/theme.css";
 
 export default function SwapPage() {
   return (
-    <div className="flex items-center justify-center h-full">
+    <div className="flex h-full items-center justify-center">
       <Swap
         title="Swap with MetaWallet"
         projectId="example-swaps-widget-nextjs"
diff --git a/examples/swaps-widget-nextjs/src/components/Sidebar.tsx b/examples/swaps-widget-nextjs/src/components/Sidebar.tsx
index 6bbab14..61b5873 100644
--- a/examples/swaps-widget-nextjs/src/components/Sidebar.tsx
+++ b/examples/swaps-widget-nextjs/src/components/Sidebar.tsx
@@ -15,13 +15,13 @@ import Link from "next/link";
 
 export default function Sidebar() {
   return (
-    <aside className="relative hidden h-screen py-5 pt-8 transition-all duration-700 ease-in-out group md:flex md:flex-col bg-slate-800 md:w-40 lg:w-52">
+    <aside className="group relative hidden h-screen bg-slate-800 py-5 pt-8 transition-all duration-700 ease-in-out md:flex md:w-40 md:flex-col lg:w-52">
       <Link
         id="sidebar-item-Home"
-        className="relative flex items-center px-4 py-2 text-orange-300 group hover:bg-slate-700"
+        className="group relative flex items-center px-4 py-2 text-orange-300 hover:bg-slate-700"
         href="/"
       >
-        <div className="flex items-center justify-center mr-2 text-orange-500">
+        <div className="mr-2 flex items-center justify-center text-orange-500">
           <FontAwesomeIcon icon={faOtter} />
         </div>
         <span className="truncate">MetaWallet</span>
@@ -32,10 +32,10 @@ export default function Sidebar() {
           <div className="space-y-3">
             <Link
               id="sidebar-item-Portfolio"
-              className="relative flex items-center px-4 py-2 text-white group hover:bg-slate-700"
+              className="group relative flex items-center px-4 py-2 text-white hover:bg-slate-700"
               href="/"
             >
-              <div className="flex items-center justify-center mr-2">
+              <div className="mr-2 flex items-center justify-center">
                 <FontAwesomeIcon icon={faLineChart} />
               </div>
               <span className="truncate">Portfolio</span>
@@ -43,12 +43,12 @@ export default function Sidebar() {
 
             <Link
               id="sidebar-item-Swap"
-              className="relative flex items-center px-4 py-2 font-semibold group bg-slate-700 text-midnight-primary dark:text-white"
+              className="text-midnight-primary group relative flex items-center bg-slate-700 px-4 py-2 font-semibold dark:text-white"
               href="/"
               aria-current="page"
             >
-              <div className="hidden md:inline-block h-6 w-0.5 bg-midnight-primary absolute right-0"></div>
-              <div className="flex items-center justify-center mr-2">
+              <div className="bg-midnight-primary absolute right-0 hidden h-6 w-0.5 md:inline-block"></div>
+              <div className="mr-2 flex items-center justify-center">
                 <FontAwesomeIcon icon={faRotate} />
               </div>
               <span className="truncate">Swaps</span>
@@ -56,10 +56,10 @@ export default function Sidebar() {
 
             <Link
               id="sidebar-item-Watchlist"
-              className="relative flex items-center px-4 py-2 text-white group hover:bg-slate-700"
+              className="group relative flex items-center px-4 py-2 text-white hover:bg-slate-700"
               href="/"
             >
-              <div className="flex items-center justify-center mr-2">
+              <div className="mr-2 flex items-center justify-center">
                 <FontAwesomeIcon icon={faStar} />
               </div>
               <span className="truncate">Watchlist</span>
@@ -68,14 +68,14 @@ export default function Sidebar() {
         </nav>
       </div>
 
-      <div className="flex flex-1 mt-3">
+      <div className="mt-3 flex flex-1">
         <div className="w-full">
           <Link
             id="sidebar-item-Settings"
-            className="relative flex items-center px-4 py-2 text-white group hover:bg-slate-700"
+            className="group relative flex items-center px-4 py-2 text-white hover:bg-slate-700"
             href="/"
           >
-            <div className="flex items-center justify-center mr-2">
+            <div className="mr-2 flex items-center justify-center">
               <FontAwesomeIcon icon={faGear} />
             </div>
             <span className="truncate">Settings</span>
@@ -85,12 +85,12 @@ export default function Sidebar() {
 
       <div className="mb-8 space-y-6">
         <div>
-          <div className="w-full mt-3">
+          <div className="mt-3 w-full">
             <Link
               href="/"
-              className="relative flex items-center px-4 py-2 text-white group hover:bg-slate-700"
+              className="group relative flex items-center px-4 py-2 text-white hover:bg-slate-700"
             >
-              <div className="flex items-center justify-center mr-2">
+              <div className="mr-2 flex items-center justify-center">
                 <FontAwesomeIcon icon={faQuestionCircle} />
               </div>
               <span className="truncate">FAQ</span>
@@ -99,9 +99,9 @@ export default function Sidebar() {
           <div className="mt-3">
             <Link
               href="/"
-              className="relative flex items-center px-4 py-2 text-white group hover:bg-slate-700"
+              className="group relative flex items-center px-4 py-2 text-white hover:bg-slate-700"
             >
-              <div className="flex items-center justify-center mr-2">
+              <div className="mr-2 flex items-center justify-center">
                 <FontAwesomeIcon icon={faMessage} />
               </div>
               <span className="truncate">Contact</span>
@@ -113,7 +113,7 @@ export default function Sidebar() {
       <Link
         id="fork-on-github"
         href="https://github.com/swing-xyz/examples"
-        className="flex items-center px-6 py-4 -mb-5 space-x-2 text-white border-t cursor-pointer border-slate-700 hover:bg-slate-700"
+        className="-mb-5 flex cursor-pointer items-center space-x-2 border-t border-slate-700 px-6 py-4 text-white hover:bg-slate-700"
         target={"_blank"}
       >
         <FontAwesomeIcon size="lg" icon={faGithub} />
diff --git a/examples/withdraw-widget-nextjs/src/app/layout.tsx b/examples/withdraw-widget-nextjs/src/app/layout.tsx
index 282c300..2d689a7 100644
--- a/examples/withdraw-widget-nextjs/src/app/layout.tsx
+++ b/examples/withdraw-widget-nextjs/src/app/layout.tsx
@@ -11,10 +11,10 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     <html lang="en" suppressHydrationWarning>
       <head />
 
-      <body className="relative flex max-h-screen min-h-full text-white bg-slate-900">
+      <body className="relative flex max-h-screen min-h-full bg-slate-900 text-white">
         <Sidebar />
 
-        <main className="relative flex flex-col w-full min-h-screen overflow-y-auto">
+        <main className="relative flex min-h-screen w-full flex-col overflow-y-auto">
           <div className="flex justify-end p-6">
             <Button
               href="https://github.com/swing-xyz/examples/tree/main/examples/withdraw-widget-nextjs"
diff --git a/examples/withdraw-widget-nextjs/src/app/page.tsx b/examples/withdraw-widget-nextjs/src/app/page.tsx
index 0a951dc..8a9d3be 100644
--- a/examples/withdraw-widget-nextjs/src/app/page.tsx
+++ b/examples/withdraw-widget-nextjs/src/app/page.tsx
@@ -3,7 +3,7 @@ import "@swing.xyz/ui/theme.css";
 
 export default function SwapPage() {
   return (
-    <div className="flex items-center justify-center h-full">
+    <div className="flex h-full items-center justify-center">
       <Withdraw
         title="Withdraw with MetaWallet"
         projectId="example-withdraw-widget-nextjs"
diff --git a/examples/withdraw-widget-nextjs/src/components/Sidebar.tsx b/examples/withdraw-widget-nextjs/src/components/Sidebar.tsx
index 9969d66..e6e2d6d 100644
--- a/examples/withdraw-widget-nextjs/src/components/Sidebar.tsx
+++ b/examples/withdraw-widget-nextjs/src/components/Sidebar.tsx
@@ -15,13 +15,13 @@ import Link from "next/link";
 
 export default function Sidebar() {
   return (
-    <aside className="relative hidden h-screen py-5 pt-8 transition-all duration-700 ease-in-out group md:flex md:flex-col bg-slate-800 md:w-40 lg:w-52">
+    <aside className="group relative hidden h-screen bg-slate-800 py-5 pt-8 transition-all duration-700 ease-in-out md:flex md:w-40 md:flex-col lg:w-52">
       <Link
         id="sidebar-item-Home"
-        className="relative flex items-center px-4 py-2 text-orange-300 group hover:bg-slate-700"
+        className="group relative flex items-center px-4 py-2 text-orange-300 hover:bg-slate-700"
         href="/"
       >
-        <div className="flex items-center justify-center mr-2 text-orange-500">
+        <div className="mr-2 flex items-center justify-center text-orange-500">
           <FontAwesomeIcon icon={faOtter} />
         </div>
         <span className="truncate">MetaWallet</span>
@@ -32,10 +32,10 @@ export default function Sidebar() {
           <div className="space-y-3">
             <Link
               id="sidebar-item-Portfolio"
-              className="relative flex items-center px-4 py-2 text-white group hover:bg-slate-700"
+              className="group relative flex items-center px-4 py-2 text-white hover:bg-slate-700"
               href="/"
             >
-              <div className="flex items-center justify-center mr-2">
+              <div className="mr-2 flex items-center justify-center">
                 <FontAwesomeIcon icon={faLineChart} />
               </div>
               <span className="truncate">Portfolio</span>
@@ -43,12 +43,12 @@ export default function Sidebar() {
 
             <Link
               id="sidebar-item-Swap"
-              className="relative flex items-center px-4 py-2 font-semibold group bg-slate-700 text-midnight-primary dark:text-white"
+              className="text-midnight-primary group relative flex items-center bg-slate-700 px-4 py-2 font-semibold dark:text-white"
               href="/"
               aria-current="page"
             >
-              <div className="hidden md:inline-block h-6 w-0.5 bg-midnight-primary absolute right-0"></div>
-              <div className="flex items-center justify-center mr-2">
+              <div className="bg-midnight-primary absolute right-0 hidden h-6 w-0.5 md:inline-block"></div>
+              <div className="mr-2 flex items-center justify-center">
                 <FontAwesomeIcon icon={faRotate} />
               </div>
               <span className="truncate">Staking</span>
@@ -56,10 +56,10 @@ export default function Sidebar() {
 
             <Link
               id="sidebar-item-Watchlist"
-              className="relative flex items-center px-4 py-2 text-white group hover:bg-slate-700"
+              className="group relative flex items-center px-4 py-2 text-white hover:bg-slate-700"
               href="/"
             >
-              <div className="flex items-center justify-center mr-2">
+              <div className="mr-2 flex items-center justify-center">
                 <FontAwesomeIcon icon={faStar} />
               </div>
               <span className="truncate">Watchlist</span>
@@ -68,14 +68,14 @@ export default function Sidebar() {
         </nav>
       </div>
 
-      <div className="flex flex-1 mt-3">
+      <div className="mt-3 flex flex-1">
         <div className="w-full">
           <Link
             id="sidebar-item-Settings"
-            className="relative flex items-center px-4 py-2 text-white group hover:bg-slate-700"
+            className="group relative flex items-center px-4 py-2 text-white hover:bg-slate-700"
             href="/"
           >
-            <div className="flex items-center justify-center mr-2">
+            <div className="mr-2 flex items-center justify-center">
               <FontAwesomeIcon icon={faGear} />
             </div>
             <span className="truncate">Settings</span>
@@ -85,12 +85,12 @@ export default function Sidebar() {
 
       <div className="mb-8 space-y-6">
         <div>
-          <div className="w-full mt-3">
+          <div className="mt-3 w-full">
             <Link
               href="/"
-              className="relative flex items-center px-4 py-2 text-white group hover:bg-slate-700"
+              className="group relative flex items-center px-4 py-2 text-white hover:bg-slate-700"
             >
-              <div className="flex items-center justify-center mr-2">
+              <div className="mr-2 flex items-center justify-center">
                 <FontAwesomeIcon icon={faQuestionCircle} />
               </div>
               <span className="truncate">FAQ</span>
@@ -99,9 +99,9 @@ export default function Sidebar() {
           <div className="mt-3">
             <Link
               href="/"
-              className="relative flex items-center px-4 py-2 text-white group hover:bg-slate-700"
+              className="group relative flex items-center px-4 py-2 text-white hover:bg-slate-700"
             >
-              <div className="flex items-center justify-center mr-2">
+              <div className="mr-2 flex items-center justify-center">
                 <FontAwesomeIcon icon={faMessage} />
               </div>
               <span className="truncate">Contact</span>
@@ -113,7 +113,7 @@ export default function Sidebar() {
       <Link
         id="fork-on-github"
         href="https://github.com/swing-xyz/examples"
-        className="flex items-center px-6 py-4 -mb-5 space-x-2 text-white border-t cursor-pointer border-slate-700 hover:bg-slate-700"
+        className="-mb-5 flex cursor-pointer items-center space-x-2 border-t border-slate-700 px-6 py-4 text-white hover:bg-slate-700"
         target={"_blank"}
       >
         <FontAwesomeIcon size="lg" icon={faGithub} />
diff --git a/package.json b/package.json
index 1fe1845..5748140 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
   },
   "devDependencies": {
     "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.14",
     "turbo": "^1.13.2"
   },
   "engines": {
diff --git a/prettier.config.mjs b/prettier.config.mjs
new file mode 100644
index 0000000..f074632
--- /dev/null
+++ b/prettier.config.mjs
@@ -0,0 +1,8 @@
+const prettierConfig = {
+  singleQuote: false,
+  semi: true,
+  plugins: ["prettier-plugin-tailwindcss"],
+  tailwindFunctions: ["clsx"],
+};
+
+export default prettierConfig;
diff --git a/yarn.lock b/yarn.lock
index 2935fa6..4abd98f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -26,6 +26,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@adraffy/ens-normalize@npm:1.9.0":
+  version: 1.9.0
+  resolution: "@adraffy/ens-normalize@npm:1.9.0"
+  checksum: 10/5257bbb45796720386a250ec2747f1c93b8fccd7063839ccda4aeb1b97ebec81caf5b435252dae1842c37175fe2e0ddcb89039f4ec1a4934fa4c6901a7f4992b
+  languageName: node
+  linkType: hard
+
 "@alloc/quick-lru@npm:^5.2.0":
   version: 5.2.0
   resolution: "@alloc/quick-lru@npm:5.2.0"
@@ -2239,6 +2246,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.25.0":
+  version: 7.25.4
+  resolution: "@babel/runtime@npm:7.25.4"
+  dependencies:
+    regenerator-runtime: "npm:^0.14.0"
+  checksum: 10/70d2a420c24a3289ea6c4addaf3a1c4186bc3d001c92445faa3cd7601d7d2fbdb32c63b3a26b9771e20ff2f511fa76b726bf256f823cdb95bc37b8eadbd02f70
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:7.20.7":
   version: 7.20.7
   resolution: "@babel/template@npm:7.20.7"
@@ -2290,6 +2306,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@bitget-wallet/web3-sdk@npm:0.0.8":
+  version: 0.0.8
+  resolution: "@bitget-wallet/web3-sdk@npm:0.0.8"
+  dependencies:
+    "@metamask/safe-event-emitter": "npm:^3.0.0"
+    "@solana/web3.js": "npm:^1.78.0"
+    eventemitter3: "npm:^5.0.1"
+  checksum: 10/5ffa6167734475281b76dec90a5ed3b0675f232f61a05deaea8fc4d92263cdec5c8c34e41406eae12fdaa34f79657a852876318a6b5e46898f6fadc4e7745888
+  languageName: node
+  linkType: hard
+
 "@blocto/sdk@npm:0.5.5":
   version: 0.5.5
   resolution: "@blocto/sdk@npm:0.5.5"
@@ -2327,7 +2354,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@coinbase/wallet-sdk@npm:^3.7.2":
+"@coinbase/wallet-sdk@npm:^3.6.6, @coinbase/wallet-sdk@npm:^3.7.2":
   version: 3.9.3
   resolution: "@coinbase/wallet-sdk@npm:3.9.3"
   dependencies:
@@ -2366,6 +2393,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@cosmjs/amino@npm:^0.32.4":
+  version: 0.32.4
+  resolution: "@cosmjs/amino@npm:0.32.4"
+  dependencies:
+    "@cosmjs/crypto": "npm:^0.32.4"
+    "@cosmjs/encoding": "npm:^0.32.4"
+    "@cosmjs/math": "npm:^0.32.4"
+    "@cosmjs/utils": "npm:^0.32.4"
+  checksum: 10/2644d268c10990ad3c6509f241c3b789064d1e38046ad80aed306c3cc17c70ffb7198f3fd19b515b5e22cea483062d0f5bf74bc1963a840534dfc495a3233827
+  languageName: node
+  linkType: hard
+
 "@cosmjs/cosmwasm-stargate@npm:^0.32.3":
   version: 0.32.3
   resolution: "@cosmjs/cosmwasm-stargate@npm:0.32.3"
@@ -2384,6 +2423,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@cosmjs/cosmwasm-stargate@npm:^0.32.4":
+  version: 0.32.4
+  resolution: "@cosmjs/cosmwasm-stargate@npm:0.32.4"
+  dependencies:
+    "@cosmjs/amino": "npm:^0.32.4"
+    "@cosmjs/crypto": "npm:^0.32.4"
+    "@cosmjs/encoding": "npm:^0.32.4"
+    "@cosmjs/math": "npm:^0.32.4"
+    "@cosmjs/proto-signing": "npm:^0.32.4"
+    "@cosmjs/stargate": "npm:^0.32.4"
+    "@cosmjs/tendermint-rpc": "npm:^0.32.4"
+    "@cosmjs/utils": "npm:^0.32.4"
+    cosmjs-types: "npm:^0.9.0"
+    pako: "npm:^2.0.2"
+  checksum: 10/d3c0f771409dc7079864e3357f9999cc85e2a2af825075910bb52d643024363ecbe19f516634fc9b8e3fac7a94e68eb96b32c362d000ff30369e7442778cc2d4
+  languageName: node
+  linkType: hard
+
 "@cosmjs/crypto@npm:^0.32.3":
   version: 0.32.3
   resolution: "@cosmjs/crypto@npm:0.32.3"
@@ -2399,6 +2456,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@cosmjs/crypto@npm:^0.32.4":
+  version: 0.32.4
+  resolution: "@cosmjs/crypto@npm:0.32.4"
+  dependencies:
+    "@cosmjs/encoding": "npm:^0.32.4"
+    "@cosmjs/math": "npm:^0.32.4"
+    "@cosmjs/utils": "npm:^0.32.4"
+    "@noble/hashes": "npm:^1"
+    bn.js: "npm:^5.2.0"
+    elliptic: "npm:^6.5.4"
+    libsodium-wrappers-sumo: "npm:^0.7.11"
+  checksum: 10/68b78aa5c91bdd81cefdd629d2574bdd2e41bcd27b38b18b86a38fa768b1096930313bcea5bb8479f32358ac4465d6e583f4cc253b942af428cf98cf4e84d4b1
+  languageName: node
+  linkType: hard
+
 "@cosmjs/encoding@npm:^0.32.3":
   version: 0.32.3
   resolution: "@cosmjs/encoding@npm:0.32.3"
@@ -2410,6 +2482,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@cosmjs/encoding@npm:^0.32.4":
+  version: 0.32.4
+  resolution: "@cosmjs/encoding@npm:0.32.4"
+  dependencies:
+    base64-js: "npm:^1.3.0"
+    bech32: "npm:^1.1.4"
+    readonly-date: "npm:^1.0.0"
+  checksum: 10/592f1ec81f9a4216fa047f65b6f8f5c00b3dc41f19f22e590d98954810f22b247137e7a8de62e7c93bcc7a557fd2c8d87cefee5b39a951a848790259b8e95db7
+  languageName: node
+  linkType: hard
+
 "@cosmjs/json-rpc@npm:^0.32.3":
   version: 0.32.3
   resolution: "@cosmjs/json-rpc@npm:0.32.3"
@@ -2420,6 +2503,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@cosmjs/json-rpc@npm:^0.32.4":
+  version: 0.32.4
+  resolution: "@cosmjs/json-rpc@npm:0.32.4"
+  dependencies:
+    "@cosmjs/stream": "npm:^0.32.4"
+    xstream: "npm:^11.14.0"
+  checksum: 10/a837c8954ed3f1457e8359233b3242915d822a2691b4ec7d194d9145bade39a7bf2f02c70c4785d106c0b27e2af40435f93da4a5b4462e31ce05fc341496e56f
+  languageName: node
+  linkType: hard
+
 "@cosmjs/math@npm:^0.32.3":
   version: 0.32.3
   resolution: "@cosmjs/math@npm:0.32.3"
@@ -2429,6 +2522,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@cosmjs/math@npm:^0.32.4":
+  version: 0.32.4
+  resolution: "@cosmjs/math@npm:0.32.4"
+  dependencies:
+    bn.js: "npm:^5.2.0"
+  checksum: 10/1b67f46cb8ace0dcd01bc4a63bc935d48624de5a342144944d1c45d7b49fa3f83f052dc70be20b39314611c6b31a6b6ad0ff1c7d655cf5f6a4dc28e22759588f
+  languageName: node
+  linkType: hard
+
 "@cosmjs/proto-signing@npm:^0.32.3":
   version: 0.32.3
   resolution: "@cosmjs/proto-signing@npm:0.32.3"
@@ -2443,6 +2545,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@cosmjs/proto-signing@npm:^0.32.4":
+  version: 0.32.4
+  resolution: "@cosmjs/proto-signing@npm:0.32.4"
+  dependencies:
+    "@cosmjs/amino": "npm:^0.32.4"
+    "@cosmjs/crypto": "npm:^0.32.4"
+    "@cosmjs/encoding": "npm:^0.32.4"
+    "@cosmjs/math": "npm:^0.32.4"
+    "@cosmjs/utils": "npm:^0.32.4"
+    cosmjs-types: "npm:^0.9.0"
+  checksum: 10/6369d26a2949236a525162358fdd78ffefc13710db279be764d22f79e103941f7681e86dd4a770b87c41b9bfb0fa162ccb629c70b6b7b8de49e7e7393f7353da
+  languageName: node
+  linkType: hard
+
 "@cosmjs/socket@npm:^0.32.3":
   version: 0.32.3
   resolution: "@cosmjs/socket@npm:0.32.3"
@@ -2455,6 +2571,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@cosmjs/socket@npm:^0.32.4":
+  version: 0.32.4
+  resolution: "@cosmjs/socket@npm:0.32.4"
+  dependencies:
+    "@cosmjs/stream": "npm:^0.32.4"
+    isomorphic-ws: "npm:^4.0.1"
+    ws: "npm:^7"
+    xstream: "npm:^11.14.0"
+  checksum: 10/37a4dfb6a03c4caa0227770933d933a5a7225ce9d1de3a78c66ff90299c7869779c17f039710938d6e9ffc819ee2f09c6413197ab6e95e7151635606b290c0cb
+  languageName: node
+  linkType: hard
+
 "@cosmjs/stargate@npm:^0.32.3":
   version: 0.32.3
   resolution: "@cosmjs/stargate@npm:0.32.3"
@@ -2473,6 +2601,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@cosmjs/stargate@npm:^0.32.4":
+  version: 0.32.4
+  resolution: "@cosmjs/stargate@npm:0.32.4"
+  dependencies:
+    "@confio/ics23": "npm:^0.6.8"
+    "@cosmjs/amino": "npm:^0.32.4"
+    "@cosmjs/encoding": "npm:^0.32.4"
+    "@cosmjs/math": "npm:^0.32.4"
+    "@cosmjs/proto-signing": "npm:^0.32.4"
+    "@cosmjs/stream": "npm:^0.32.4"
+    "@cosmjs/tendermint-rpc": "npm:^0.32.4"
+    "@cosmjs/utils": "npm:^0.32.4"
+    cosmjs-types: "npm:^0.9.0"
+    xstream: "npm:^11.14.0"
+  checksum: 10/fc65de1cbd8f381d804c4d8cd277eb089ec9239b3acbc008d83933dd8b61102481d5b69346e17e24f3296f08f27c06c34b7666462a704b75563b1e5974b7a258
+  languageName: node
+  linkType: hard
+
 "@cosmjs/stream@npm:^0.32.3":
   version: 0.32.3
   resolution: "@cosmjs/stream@npm:0.32.3"
@@ -2482,6 +2628,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@cosmjs/stream@npm:^0.32.4":
+  version: 0.32.4
+  resolution: "@cosmjs/stream@npm:0.32.4"
+  dependencies:
+    xstream: "npm:^11.14.0"
+  checksum: 10/fa55d3f29e8a7c56d5da4128989709f0b02fcee5319efa2504f62e4f2b0c64725ccb603d88f435f6fbe308dc6ef76b1fd3ea5aecfcb877a871c111366ddd3489
+  languageName: node
+  linkType: hard
+
 "@cosmjs/tendermint-rpc@npm:^0.32.3":
   version: 0.32.3
   resolution: "@cosmjs/tendermint-rpc@npm:0.32.3"
@@ -2500,6 +2655,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@cosmjs/tendermint-rpc@npm:^0.32.4":
+  version: 0.32.4
+  resolution: "@cosmjs/tendermint-rpc@npm:0.32.4"
+  dependencies:
+    "@cosmjs/crypto": "npm:^0.32.4"
+    "@cosmjs/encoding": "npm:^0.32.4"
+    "@cosmjs/json-rpc": "npm:^0.32.4"
+    "@cosmjs/math": "npm:^0.32.4"
+    "@cosmjs/socket": "npm:^0.32.4"
+    "@cosmjs/stream": "npm:^0.32.4"
+    "@cosmjs/utils": "npm:^0.32.4"
+    axios: "npm:^1.6.0"
+    readonly-date: "npm:^1.0.0"
+    xstream: "npm:^11.14.0"
+  checksum: 10/e82f4e340ad592bc9c957e6bd664d5ac18344baacdac9892fd05aa1e3701f947fbdbde9e0f57616b6c7e61cd1129cf29a3eb387f44169ff970a339793c22446c
+  languageName: node
+  linkType: hard
+
 "@cosmjs/utils@npm:^0.32.3":
   version: 0.32.3
   resolution: "@cosmjs/utils@npm:0.32.3"
@@ -2507,6 +2680,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@cosmjs/utils@npm:^0.32.4":
+  version: 0.32.4
+  resolution: "@cosmjs/utils@npm:0.32.4"
+  checksum: 10/92f4d0878bedda53d113894ebadd31a6d189fdd45f2f884049ee99c2d7f907703b6dc40c8bc9b88b912443c38f3dbf77a9474183f41b85dec1f9ef3bec9d86c4
+  languageName: node
+  linkType: hard
+
 "@cspotcode/source-map-support@npm:^0.8.0":
   version: 0.8.1
   resolution: "@cspotcode/source-map-support@npm:0.8.1"
@@ -4098,6 +4278,88 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@ledgerhq/devices@npm:^6.27.1":
+  version: 6.27.1
+  resolution: "@ledgerhq/devices@npm:6.27.1"
+  dependencies:
+    "@ledgerhq/errors": "npm:^6.10.0"
+    "@ledgerhq/logs": "npm:^6.10.0"
+    rxjs: "npm:6"
+    semver: "npm:^7.3.5"
+  checksum: 10/d5b1552e2f91b75ea36318b35089d1198c1ce68bb24d4beaef647826f4907d4073494a05b72548338ab18c6f82f8022cc012e3991fa0920e8257aa3399f06700
+  languageName: node
+  linkType: hard
+
+"@ledgerhq/devices@npm:^8.4.3":
+  version: 8.4.3
+  resolution: "@ledgerhq/devices@npm:8.4.3"
+  dependencies:
+    "@ledgerhq/errors": "npm:^6.19.0"
+    "@ledgerhq/logs": "npm:^6.12.0"
+    rxjs: "npm:^7.8.1"
+    semver: "npm:^7.3.5"
+  checksum: 10/fa8ce935393b89093a97b94976ccfa0895aaf4b70255f706f7cda2fdb30ff108736a8aeefd171da6c376269e1399a3f310b43c23e00eac2a35b46a94f902c3c0
+  languageName: node
+  linkType: hard
+
+"@ledgerhq/errors@npm:^6.10.0, @ledgerhq/errors@npm:^6.19.0":
+  version: 6.19.0
+  resolution: "@ledgerhq/errors@npm:6.19.0"
+  checksum: 10/944d7a86f4dedd3cac611d704a36667ff66294403ab6e552b8c14ce742574a2b50fa71de89c28827fc442233af68b88ae2971e73cdb03ea98ec4e65239d76d88
+  languageName: node
+  linkType: hard
+
+"@ledgerhq/hw-app-trx@npm:^6.27.8":
+  version: 6.29.3
+  resolution: "@ledgerhq/hw-app-trx@npm:6.29.3"
+  dependencies:
+    "@ledgerhq/hw-transport": "npm:^6.31.3"
+  checksum: 10/0509d90a158d8be6ec851514757f8f982c69e999fb1feeb5159620add25bea1bc9570b53563b09e7b8bc88bf9c3090c93d0d47566a96f8ee177576680873ecc4
+  languageName: node
+  linkType: hard
+
+"@ledgerhq/hw-transport-webhid@npm:6.27.1":
+  version: 6.27.1
+  resolution: "@ledgerhq/hw-transport-webhid@npm:6.27.1"
+  dependencies:
+    "@ledgerhq/devices": "npm:^6.27.1"
+    "@ledgerhq/errors": "npm:^6.10.0"
+    "@ledgerhq/hw-transport": "npm:^6.27.1"
+    "@ledgerhq/logs": "npm:^6.10.0"
+  checksum: 10/10110a46d7b463cc4ad714c6b710b293483c164be765c278f2839cf98ca577d055fcfe6307cb6dc715440e36ff0ff5d0220893920f372b682f7cae191f4412bf
+  languageName: node
+  linkType: hard
+
+"@ledgerhq/hw-transport@npm:6.27.1":
+  version: 6.27.1
+  resolution: "@ledgerhq/hw-transport@npm:6.27.1"
+  dependencies:
+    "@ledgerhq/devices": "npm:^6.27.1"
+    "@ledgerhq/errors": "npm:^6.10.0"
+    events: "npm:^3.3.0"
+  checksum: 10/57aeb7779a57ea5e2781e0d80f517db7a4dd68ea37c1f98c7c1262eeff16deb0babba6d29907c1cd733037a5b7aba2ff5876cbe5eefabcd7038a7932ace2836f
+  languageName: node
+  linkType: hard
+
+"@ledgerhq/hw-transport@npm:^6.27.1, @ledgerhq/hw-transport@npm:^6.31.3":
+  version: 6.31.3
+  resolution: "@ledgerhq/hw-transport@npm:6.31.3"
+  dependencies:
+    "@ledgerhq/devices": "npm:^8.4.3"
+    "@ledgerhq/errors": "npm:^6.19.0"
+    "@ledgerhq/logs": "npm:^6.12.0"
+    events: "npm:^3.3.0"
+  checksum: 10/24375ba43308c2327139f3009d33484c3352a503712bb8f5235d9fa578b90f402401f04844a66ea7e64693ff7ec8f6ed74ce324a33fb955ed3c9b9e76e4cdbbd
+  languageName: node
+  linkType: hard
+
+"@ledgerhq/logs@npm:^6.10.0, @ledgerhq/logs@npm:^6.12.0":
+  version: 6.12.0
+  resolution: "@ledgerhq/logs@npm:6.12.0"
+  checksum: 10/a0a01f5d6edb0c14e7a42d24ab67ce362219517f6a50d0572c917f4f7988a1e2e9363e3d0fb170fe267f054e1e30a111564de44276e01c538b258d902c546421
+  languageName: node
+  linkType: hard
+
 "@leichtgewicht/ip-codec@npm:^2.0.1":
   version: 2.0.4
   resolution: "@leichtgewicht/ip-codec@npm:2.0.4"
@@ -4854,6 +5116,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@noble/curves@npm:1.0.0, @noble/curves@npm:~1.0.0":
+  version: 1.0.0
+  resolution: "@noble/curves@npm:1.0.0"
+  dependencies:
+    "@noble/hashes": "npm:1.3.0"
+  checksum: 10/6db884e03b3f6c773317bcf4611bf1d9adb8084eab0bf6158407cc998c9c5dcb0560741bdd0aaca9c4393c9e8a3dcd7592b4148a6cfd561d0a00addb77a6129f
+  languageName: node
+  linkType: hard
+
 "@noble/curves@npm:1.1.0, @noble/curves@npm:~1.1.0":
   version: 1.1.0
   resolution: "@noble/curves@npm:1.1.0"
@@ -4872,7 +5143,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@noble/curves@npm:^1.4.0":
+"@noble/curves@npm:1.4.0, @noble/curves@npm:^1.4.0":
   version: 1.4.0
   resolution: "@noble/curves@npm:1.4.0"
   dependencies:
@@ -4881,6 +5152,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@noble/curves@npm:^1.4.2":
+  version: 1.5.0
+  resolution: "@noble/curves@npm:1.5.0"
+  dependencies:
+    "@noble/hashes": "npm:1.4.0"
+  checksum: 10/d7707d756a887a0daf9eba709526017ac6905d4be58760947e0f0652961926295ba62a5a699d9a9f0bf2a2e0c6803381373e14542be5ff3885b3434bb59be86c
+  languageName: node
+  linkType: hard
+
+"@noble/curves@npm:~1.4.0":
+  version: 1.4.2
+  resolution: "@noble/curves@npm:1.4.2"
+  dependencies:
+    "@noble/hashes": "npm:1.4.0"
+  checksum: 10/f433a2e8811ae345109388eadfa18ef2b0004c1f79417553241db4f0ad0d59550be6298a4f43d989c627e9f7551ffae6e402a4edf0173981e6da95fc7cab5123
+  languageName: node
+  linkType: hard
+
+"@noble/hashes@npm:1.3.0":
+  version: 1.3.0
+  resolution: "@noble/hashes@npm:1.3.0"
+  checksum: 10/4680a71941c06ac897cc9eab9d229717d5af1147cea5e8cd4942190c817426ad3173ded750d897f58d764b869f9347d4fc3f6b3c16574541ac81906efa9ddc36
+  languageName: node
+  linkType: hard
+
 "@noble/hashes@npm:1.3.1":
   version: 1.3.1
   resolution: "@noble/hashes@npm:1.3.1"
@@ -4895,7 +5191,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@noble/hashes@npm:1.4.0, @noble/hashes@npm:^1, @noble/hashes@npm:^1.0.0, @noble/hashes@npm:^1.3.1, @noble/hashes@npm:^1.4.0":
+"@noble/hashes@npm:1.4.0, @noble/hashes@npm:^1, @noble/hashes@npm:^1.0.0, @noble/hashes@npm:^1.3.1, @noble/hashes@npm:^1.4.0, @noble/hashes@npm:~1.4.0":
   version: 1.4.0
   resolution: "@noble/hashes@npm:1.4.0"
   checksum: 10/e156e65794c473794c52fa9d06baf1eb20903d0d96719530f523cc4450f6c721a957c544796e6efd0197b2296e7cd70efeb312f861465e17940a3e3c7e0febc6
@@ -4909,6 +5205,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@noble/hashes@npm:~1.5.0":
+  version: 1.5.0
+  resolution: "@noble/hashes@npm:1.5.0"
+  checksum: 10/da7fc7af52af7afcf59810a7eea6155075464ff462ffda2572dc6d57d53e2669b1ea2ec774e814f6273f1697e567f28d36823776c9bf7068cba2a2855140f26e
+  languageName: node
+  linkType: hard
+
 "@nodelib/fs.scandir@npm:2.1.5":
   version: 2.1.5
   resolution: "@nodelib/fs.scandir@npm:2.1.5"
@@ -6594,6 +6897,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@safe-global/safe-apps-provider@npm:^0.18.1":
+  version: 0.18.3
+  resolution: "@safe-global/safe-apps-provider@npm:0.18.3"
+  dependencies:
+    "@safe-global/safe-apps-sdk": "npm:^9.1.0"
+    events: "npm:^3.3.0"
+  checksum: 10/fb0bf260a224195923394c61265f421c655f096cce4c9f10643f5ff2787ca964269dbb539cfd08959ce88395af9c08f0cef60581cb06e14f1505b03bb7973bd1
+  languageName: node
+  linkType: hard
+
 "@safe-global/safe-apps-sdk@npm:8.1.0, @safe-global/safe-apps-sdk@npm:^8.1.0":
   version: 8.1.0
   resolution: "@safe-global/safe-apps-sdk@npm:8.1.0"
@@ -6604,6 +6917,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@safe-global/safe-apps-sdk@npm:^9.1.0":
+  version: 9.1.0
+  resolution: "@safe-global/safe-apps-sdk@npm:9.1.0"
+  dependencies:
+    "@safe-global/safe-gateway-typescript-sdk": "npm:^3.5.3"
+    viem: "npm:^2.1.1"
+  checksum: 10/b81e1a554509fc41f5b8ec3bcccaf477fd55824010774699dd2c00dee8431cfd351bf13893ff6acb1450028ce4de31a1316548a0e77a66d801ff9e0b4e08b9ff
+  languageName: node
+  linkType: hard
+
 "@safe-global/safe-core-sdk-types@npm:^1.9.1, @safe-global/safe-core-sdk-types@npm:^1.9.2":
   version: 1.10.1
   resolution: "@safe-global/safe-core-sdk-types@npm:1.10.1"
@@ -6706,6 +7029,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@scure/base@npm:~1.1.6":
+  version: 1.1.7
+  resolution: "@scure/base@npm:1.1.7"
+  checksum: 10/fc50ffaab36cb46ff9fa4dc5052a06089ab6a6707f63d596bb34aaaec76173c9a564ac312a0b981b5e7a5349d60097b8878673c75d6cbfc4da7012b63a82099b
+  languageName: node
+  linkType: hard
+
+"@scure/base@npm:~1.1.8":
+  version: 1.1.9
+  resolution: "@scure/base@npm:1.1.9"
+  checksum: 10/f0ab7f687bbcdee2a01377fe3cd808bf63977999672751295b6a92625d5322f4754a96d40f6bd579bc367aad48ecf8a4e6d0390e70296e6ded1076f52adb16bb
+  languageName: node
+  linkType: hard
+
+"@scure/bip32@npm:1.3.0":
+  version: 1.3.0
+  resolution: "@scure/bip32@npm:1.3.0"
+  dependencies:
+    "@noble/curves": "npm:~1.0.0"
+    "@noble/hashes": "npm:~1.3.0"
+    "@scure/base": "npm:~1.1.0"
+  checksum: 10/1fabcc7f2215910b35980bfc455c03fc4ae7f848efed066fe3867960a8dfceb6141c932496434fc2cfbf385d270ff9efdfce2571992e4584103f82e45ac2103f
+  languageName: node
+  linkType: hard
+
 "@scure/bip32@npm:1.3.1":
   version: 1.3.1
   resolution: "@scure/bip32@npm:1.3.1"
@@ -6728,6 +7076,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@scure/bip32@npm:1.4.0":
+  version: 1.4.0
+  resolution: "@scure/bip32@npm:1.4.0"
+  dependencies:
+    "@noble/curves": "npm:~1.4.0"
+    "@noble/hashes": "npm:~1.4.0"
+    "@scure/base": "npm:~1.1.6"
+  checksum: 10/6cd5062d902564d9e970597ec8b1adacb415b2eadfbb95aee1a1a0480a52eb0de4d294d3753aa8b48548064c9795ed108d348a31a8ce3fc88785377bb12c63b9
+  languageName: node
+  linkType: hard
+
+"@scure/bip39@npm:1.2.0":
+  version: 1.2.0
+  resolution: "@scure/bip39@npm:1.2.0"
+  dependencies:
+    "@noble/hashes": "npm:~1.3.0"
+    "@scure/base": "npm:~1.1.0"
+  checksum: 10/2a260eefea0b2658c5d3b2cb982479ef650552c3007e57f667b445943c79717eb923c1a104a664b4873bc210aeb59859bf890c3e7b47fb51ed5b94dc96f75105
+  languageName: node
+  linkType: hard
+
 "@scure/bip39@npm:1.2.1":
   version: 1.2.1
   resolution: "@scure/bip39@npm:1.2.1"
@@ -6738,6 +7107,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@scure/bip39@npm:1.4.0":
+  version: 1.4.0
+  resolution: "@scure/bip39@npm:1.4.0"
+  dependencies:
+    "@noble/hashes": "npm:~1.5.0"
+    "@scure/base": "npm:~1.1.8"
+  checksum: 10/f86e0e79768c95bc684ed6de92892b1a6f228db0f8fab836f091c0ec0f6d1e291b8c4391cfbeaa9ea83f41045613535b1940cd10e7d780a5b73db163b1e7f151
+  languageName: node
+  linkType: hard
+
 "@sentry-internal/feedback@npm:7.114.0":
   version: 7.114.0
   resolution: "@sentry-internal/feedback@npm:7.114.0"
@@ -6749,6 +7128,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sentry-internal/feedback@npm:7.119.0":
+  version: 7.119.0
+  resolution: "@sentry-internal/feedback@npm:7.119.0"
+  dependencies:
+    "@sentry/core": "npm:7.119.0"
+    "@sentry/types": "npm:7.119.0"
+    "@sentry/utils": "npm:7.119.0"
+  checksum: 10/9f3848f4d0cb7e2744f3a4d6b08070094a9cc04b9a604e03aee1c291e4b0f2d2b099aa50e7865847abf42db322e780a60b120d91f7ccfdde6c17e546a47a704c
+  languageName: node
+  linkType: hard
+
 "@sentry-internal/replay-canvas@npm:7.114.0":
   version: 7.114.0
   resolution: "@sentry-internal/replay-canvas@npm:7.114.0"
@@ -6761,6 +7151,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sentry-internal/replay-canvas@npm:7.119.0":
+  version: 7.119.0
+  resolution: "@sentry-internal/replay-canvas@npm:7.119.0"
+  dependencies:
+    "@sentry/core": "npm:7.119.0"
+    "@sentry/replay": "npm:7.119.0"
+    "@sentry/types": "npm:7.119.0"
+    "@sentry/utils": "npm:7.119.0"
+  checksum: 10/077ed5234b34b99d1c37fffd821fb5bea28bc0a63c923dd906c02ff3d1ddc4a70ce34e4c7ab093b697617666878a1d144f72ccdb1aefc75fa7d192dad88649f5
+  languageName: node
+  linkType: hard
+
 "@sentry-internal/tracing@npm:7.114.0":
   version: 7.114.0
   resolution: "@sentry-internal/tracing@npm:7.114.0"
@@ -6772,6 +7174,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sentry-internal/tracing@npm:7.119.0":
+  version: 7.119.0
+  resolution: "@sentry-internal/tracing@npm:7.119.0"
+  dependencies:
+    "@sentry/core": "npm:7.119.0"
+    "@sentry/types": "npm:7.119.0"
+    "@sentry/utils": "npm:7.119.0"
+  checksum: 10/dd1e58c7bd19671e094aaeea0fd3006668cb611b6029f98989a4cc72fb3d2df4f126e526f517fe9071c4eb6ec315e545403b2ae7bae0f0fdf1986c69ce8cf2cd
+  languageName: node
+  linkType: hard
+
 "@sentry/browser@npm:7.114.0":
   version: 7.114.0
   resolution: "@sentry/browser@npm:7.114.0"
@@ -6788,6 +7201,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sentry/browser@npm:7.119.0":
+  version: 7.119.0
+  resolution: "@sentry/browser@npm:7.119.0"
+  dependencies:
+    "@sentry-internal/feedback": "npm:7.119.0"
+    "@sentry-internal/replay-canvas": "npm:7.119.0"
+    "@sentry-internal/tracing": "npm:7.119.0"
+    "@sentry/core": "npm:7.119.0"
+    "@sentry/integrations": "npm:7.119.0"
+    "@sentry/replay": "npm:7.119.0"
+    "@sentry/types": "npm:7.119.0"
+    "@sentry/utils": "npm:7.119.0"
+  checksum: 10/88f82e2ef2647a19d8ad4c16c3a1ff462ee1f79ad3596c032aeb73b5b1dd20a01b6abebe88eadc40a36dec323f600f7ea77197a6b08a63f457a54c0ba09ed6da
+  languageName: node
+  linkType: hard
+
 "@sentry/core@npm:7.114.0":
   version: 7.114.0
   resolution: "@sentry/core@npm:7.114.0"
@@ -6798,6 +7227,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sentry/core@npm:7.119.0":
+  version: 7.119.0
+  resolution: "@sentry/core@npm:7.119.0"
+  dependencies:
+    "@sentry/types": "npm:7.119.0"
+    "@sentry/utils": "npm:7.119.0"
+  checksum: 10/d7416cef5126706887df2843a5dc890821b7fed2be40a0866b5dd5e185c4aae8944689818c75a1d2ce9ce0bd3fd0ca141b5b9f6b22d8a09b033150d2aa5e9fd2
+  languageName: node
+  linkType: hard
+
 "@sentry/integrations@npm:7.114.0":
   version: 7.114.0
   resolution: "@sentry/integrations@npm:7.114.0"
@@ -6810,6 +7249,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sentry/integrations@npm:7.119.0":
+  version: 7.119.0
+  resolution: "@sentry/integrations@npm:7.119.0"
+  dependencies:
+    "@sentry/core": "npm:7.119.0"
+    "@sentry/types": "npm:7.119.0"
+    "@sentry/utils": "npm:7.119.0"
+    localforage: "npm:^1.8.1"
+  checksum: 10/a4c3609d831be4b47753bd9ed5634e834f59749d25ea80df46df4a6644a83efd3d31c727dbb3cabc1952bf9907fb5a6ff104dde9bf5b2121aa3b43beb901e1fe
+  languageName: node
+  linkType: hard
+
 "@sentry/react@npm:7.114.0":
   version: 7.114.0
   resolution: "@sentry/react@npm:7.114.0"
@@ -6837,6 +7288,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sentry/replay@npm:7.119.0":
+  version: 7.119.0
+  resolution: "@sentry/replay@npm:7.119.0"
+  dependencies:
+    "@sentry-internal/tracing": "npm:7.119.0"
+    "@sentry/core": "npm:7.119.0"
+    "@sentry/types": "npm:7.119.0"
+    "@sentry/utils": "npm:7.119.0"
+  checksum: 10/aac68c3cfd4981dd73d7c15de04036cdef8e624ce62b8a76e1933956b02f54fcc939767b04803efd3bb397803ab0b6a67166a2edbad754ecf2a25394d7a1c740
+  languageName: node
+  linkType: hard
+
 "@sentry/types@npm:7.114.0":
   version: 7.114.0
   resolution: "@sentry/types@npm:7.114.0"
@@ -6844,6 +7307,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sentry/types@npm:7.119.0":
+  version: 7.119.0
+  resolution: "@sentry/types@npm:7.119.0"
+  checksum: 10/231c567f7717d1d0a49fdc8a627aa28931b2b41795b1faed3c3308874b7dfb8781846b8e8e4fa7ce197e254a566c773848d4c301200611cc8583dae2f9859e99
+  languageName: node
+  linkType: hard
+
 "@sentry/utils@npm:7.114.0":
   version: 7.114.0
   resolution: "@sentry/utils@npm:7.114.0"
@@ -6853,6 +7323,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sentry/utils@npm:7.119.0":
+  version: 7.119.0
+  resolution: "@sentry/utils@npm:7.119.0"
+  dependencies:
+    "@sentry/types": "npm:7.119.0"
+  checksum: 10/66eb9a5a6d3366d34821fff59af5e9a64f60eec54c3aeed9941acb81413e19512ded36be919bd5504b5b4720b3be28e4b9e80ea05a326474d87fe636759c6af1
+  languageName: node
+  linkType: hard
+
 "@sigstore/bundle@npm:^1.1.0":
   version: 1.1.0
   resolution: "@sigstore/bundle@npm:1.1.0"
@@ -6913,6 +7392,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@solana/web3.js@npm:^1.78.0, @solana/web3.js@npm:^1.95.3":
+  version: 1.95.3
+  resolution: "@solana/web3.js@npm:1.95.3"
+  dependencies:
+    "@babel/runtime": "npm:^7.25.0"
+    "@noble/curves": "npm:^1.4.2"
+    "@noble/hashes": "npm:^1.4.0"
+    "@solana/buffer-layout": "npm:^4.0.1"
+    agentkeepalive: "npm:^4.5.0"
+    bigint-buffer: "npm:^1.1.5"
+    bn.js: "npm:^5.2.1"
+    borsh: "npm:^0.7.0"
+    bs58: "npm:^4.0.1"
+    buffer: "npm:6.0.3"
+    fast-stable-stringify: "npm:^1.0.0"
+    jayson: "npm:^4.1.1"
+    node-fetch: "npm:^2.7.0"
+    rpc-websockets: "npm:^9.0.2"
+    superstruct: "npm:^2.0.2"
+  checksum: 10/25bdc5100faae6d3e48cbfac965b129060bec61669dcd75d0a525cea3ce8d23632ebea249a7b21616c89641bf7ea26d18826ce51246274b6aa1278d32180c870
+  languageName: node
+  linkType: hard
+
 "@solana/web3.js@npm:^1.91.8":
   version: 1.91.8
   resolution: "@solana/web3.js@npm:1.91.8"
@@ -7258,6 +7760,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@swc/helpers@npm:^0.5.11":
+  version: 0.5.12
+  resolution: "@swc/helpers@npm:0.5.12"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 10/f04a4728c38a6e75a85b077408e175e1abbc1650a76e4b78008d6380ca1422d9f7f4f9fe61b42f8fb889140f05ced6a5a9983037a8d5d8086bf6bc80a0b2118b
+  languageName: node
+  linkType: hard
+
 "@swing.xyz/cross-chain-api@npm:^0.2.0":
   version: 0.2.0
   resolution: "@swing.xyz/cross-chain-api@npm:0.2.0"
@@ -7265,6 +7776,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@swing.xyz/cross-chain-api@npm:^0.3.0":
+  version: 0.3.0
+  resolution: "@swing.xyz/cross-chain-api@npm:0.3.0"
+  checksum: 10/ec98256c09fe5b20166db8f3bc10f785228a0661f973c03229955636c73394bcd68a9ec05dde21894937831d304593ce023648a36acdf6fdbb12b476439719a1
+  languageName: node
+  linkType: hard
+
 "@swing.xyz/design-system@npm:0.53.2":
   version: 0.53.2
   resolution: "@swing.xyz/design-system@npm:0.53.2"
@@ -7290,6 +7808,7 @@ __metadata:
   resolution: "@swing.xyz/examples@workspace:."
   dependencies:
     prettier: "npm:^3.2.5"
+    prettier-plugin-tailwindcss: "npm:^0.5.14"
     turbo: "npm:^1.13.2"
   languageName: unknown
   linkType: soft
@@ -7301,10 +7820,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@swing.xyz/platform-api@npm:^0.7.0":
-  version: 0.7.0
-  resolution: "@swing.xyz/platform-api@npm:0.7.0"
-  checksum: 10/7f81d928aea5b614116b0c0f4c18b5ca60df3b67f04daee54ae35df0b9af0ec39294519ab7cc5c2832c45b8ee30068ad944c33cd6921518fc8b360e3bcf28dd9
+"@swing.xyz/platform-api@npm:^0.9.0":
+  version: 0.9.0
+  resolution: "@swing.xyz/platform-api@npm:0.9.0"
+  checksum: 10/50f88caabd058cbb9632f0b6f22a93674d2e067d7e97cc20f9426d12692004260088c466a4c2d8e55eed12499e05b07568ab13f8ac484ae422c937589a7e195e
   languageName: node
   linkType: hard
 
@@ -7336,31 +7855,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@swing.xyz/sdk@npm:^0.54.0":
-  version: 0.54.0
-  resolution: "@swing.xyz/sdk@npm:0.54.0"
+"@swing.xyz/sdk@npm:^0.60.0":
+  version: 0.60.0
+  resolution: "@swing.xyz/sdk@npm:0.60.0"
   dependencies:
-    "@cosmjs/cosmwasm-stargate": "npm:^0.32.3"
-    "@cosmjs/stargate": "npm:^0.32.3"
-    "@ethersproject/abi": "npm:^5.7.0"
+    "@cosmjs/cosmwasm-stargate": "npm:^0.32.4"
+    "@cosmjs/stargate": "npm:^0.32.4"
     "@ethersproject/bignumber": "npm:^5.7.0"
-    "@ethersproject/constants": "npm:^5.7.0"
-    "@ethersproject/contracts": "npm:^5.7.0"
-    "@ethersproject/hash": "npm:^5.7.0"
     "@ethersproject/providers": "npm:^5.7.2"
-    "@ethersproject/signing-key": "npm:^5.7.0"
     "@ethersproject/units": "npm:^5.7.0"
     "@multiversx/sdk-core": "npm:^11.6.0"
     "@multiversx/sdk-extension-provider": "npm:^2.0.7"
     "@multiversx/sdk-network-providers": "npm:^1.5.0"
-    "@sentry/browser": "npm:7.114.0"
-    "@solana/web3.js": "npm:^1.91.8"
-    "@swing.xyz/cross-chain-api": "npm:^0.2.0"
-    "@swing.xyz/platform-api": "npm:^0.7.0"
+    "@sentry/browser": "npm:7.119.0"
+    "@solana/web3.js": "npm:^1.95.3"
+    "@swing.xyz/cross-chain-api": "npm:^0.3.0"
+    "@swing.xyz/platform-api": "npm:^0.9.0"
+    "@ton/core": "npm:^0.58.1"
+    "@ton/crypto": "npm:^3.3.0"
+    "@ton/ton": "npm:^14.0.0"
     ethers: "npm:^5.7.2"
     eventemitter3: "npm:^4.0.7"
-    viem: "npm:^2.10.5"
-  checksum: 10/4f336258168869913c2805bb19915f5afba087ef04602e7df09dbed1e4fd9c1d79c998f0dbc20cafcf84f8f2def5001ce1bc83d9267dd3fbd2422f2d7595be5f
+    viem: "npm:^2.21.12"
+  checksum: 10/1e8c986c9691ca12468510a0030ebe1e6ce6902a412022e4d84b7ca8d2377c3c25e6fdbfe3baae9e949bc69f69ff752ce177b9e6bf7dfde4aa9b6b00fd2a6c9c
   languageName: node
   linkType: hard
 
@@ -8039,6 +8556,53 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@ton/core@npm:^0.58.1":
+  version: 0.58.1
+  resolution: "@ton/core@npm:0.58.1"
+  dependencies:
+    symbol.inspect: "npm:1.0.1"
+  peerDependencies:
+    "@ton/crypto": ">=3.2.0"
+  checksum: 10/9d774db62bc83f37d597ee14670e35e1b9765f3921316b1016b8b83234b28b796843a0cbda0540b04eabf5f1c0c37acba095b556ac9116226d04578ed11d0be7
+  languageName: node
+  linkType: hard
+
+"@ton/crypto-primitives@npm:2.1.0":
+  version: 2.1.0
+  resolution: "@ton/crypto-primitives@npm:2.1.0"
+  dependencies:
+    jssha: "npm:3.2.0"
+  checksum: 10/71119f74461ae17bf2cfe7e0a6fcea8d4e359665ea6878b0c935cfd83ca0d84f9c299df3467adb1b1b7ba50f7d446732f2c13b5ea5e26dc1703a6dc24063be3a
+  languageName: node
+  linkType: hard
+
+"@ton/crypto@npm:^3.3.0":
+  version: 3.3.0
+  resolution: "@ton/crypto@npm:3.3.0"
+  dependencies:
+    "@ton/crypto-primitives": "npm:2.1.0"
+    jssha: "npm:3.2.0"
+    tweetnacl: "npm:1.0.3"
+  checksum: 10/0561f2c95df7a53c47262393590bae8c5254ea5802cbecd2fea589073d926f60466292d594171aa3f3375ccaa2b763368fa1023bd5b6ebfe4da16297731cb379
+  languageName: node
+  linkType: hard
+
+"@ton/ton@npm:^14.0.0":
+  version: 14.0.0
+  resolution: "@ton/ton@npm:14.0.0"
+  dependencies:
+    axios: "npm:^1.6.7"
+    dataloader: "npm:^2.0.0"
+    symbol.inspect: "npm:1.0.1"
+    teslabot: "npm:^1.3.0"
+    zod: "npm:^3.21.4"
+  peerDependencies:
+    "@ton/core": ">=0.56.0"
+    "@ton/crypto": ">=3.2.0"
+  checksum: 10/2458391fb1acf46beab8425db2c075fd12fa20c2efbdc8ebc686bbaf0594941bb4555ccd97379debcecb48d6f994665c9cb4423bd2f7c7bcf2ee5cb83808e131
+  languageName: node
+  linkType: hard
+
 "@tootallnate/once@npm:2":
   version: 2.0.0
   resolution: "@tootallnate/once@npm:2.0.0"
@@ -8046,6 +8610,164 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tronweb3/tronwallet-abstract-adapter@npm:^1.1.6":
+  version: 1.1.6
+  resolution: "@tronweb3/tronwallet-abstract-adapter@npm:1.1.6"
+  dependencies:
+    eventemitter3: "npm:^4.0.0"
+  checksum: 10/2e07c41aac8d8439697546ae895c4e08a4f637bdf1eafc2edc1d50e3910d0034ae762521991e72e09c08335a0444cb89262c051ab7889d210b8c84f462a866b2
+  languageName: node
+  linkType: hard
+
+"@tronweb3/tronwallet-abstract-adapter@npm:^1.1.7":
+  version: 1.1.7
+  resolution: "@tronweb3/tronwallet-abstract-adapter@npm:1.1.7"
+  dependencies:
+    eventemitter3: "npm:^4.0.0"
+  checksum: 10/7631b3d803ba8fb6dcf9526dad58adf5f8b6c3eda6bc2bcca61b60046fbc56e9acfeda08d78d4f4a7f7400ec4112141f4753cb1f8e8d0b4fb1dac5b6c25ef563
+  languageName: node
+  linkType: hard
+
+"@tronweb3/tronwallet-adapter-bitkeep@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "@tronweb3/tronwallet-adapter-bitkeep@npm:1.1.2"
+  dependencies:
+    "@bitget-wallet/web3-sdk": "npm:0.0.8"
+    "@tronweb3/tronwallet-abstract-adapter": "npm:^1.1.7"
+    "@tronweb3/tronwallet-adapter-tronlink": "npm:^1.1.10"
+  checksum: 10/1f2d110138c0c336c3caf10ebe49e8956615f7dc7eaa6ba39dd95f8f7f6cd49b140fd9daa46f850270d32549b565bded70d971cd193edba4a3600b7ba95af833
+  languageName: node
+  linkType: hard
+
+"@tronweb3/tronwallet-adapter-imtoken@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@tronweb3/tronwallet-adapter-imtoken@npm:1.0.0"
+  dependencies:
+    "@tronweb3/tronwallet-abstract-adapter": "npm:^1.1.7"
+    "@tronweb3/tronwallet-adapter-tronlink": "npm:^1.1.10"
+  checksum: 10/de96feee1660c9bf4de4ce39479c8dab59d202358ae9d49117b486d7169c90d078ef8f47826ed3c23f2ef75af112259e761c61af2f1b59c1586977a6eb0a3994
+  languageName: node
+  linkType: hard
+
+"@tronweb3/tronwallet-adapter-ledger@npm:^1.1.9":
+  version: 1.1.9
+  resolution: "@tronweb3/tronwallet-adapter-ledger@npm:1.1.9"
+  dependencies:
+    "@ledgerhq/hw-app-trx": "npm:^6.27.8"
+    "@ledgerhq/hw-transport": "npm:6.27.1"
+    "@ledgerhq/hw-transport-webhid": "npm:6.27.1"
+    "@tronweb3/tronwallet-abstract-adapter": "npm:^1.1.7"
+    buffer: "npm:^6.0.3"
+    eventemitter3: "npm:^4.0.0"
+    preact: "npm:^10.11.3"
+  checksum: 10/97867fc6256856c01d1ed8dbe95cc140bbec538dd62387fce31835e85585fbafec0e6ec26c4522ae87a24322d0765a25a4db38ac52518bae921db7c537b61b9b
+  languageName: node
+  linkType: hard
+
+"@tronweb3/tronwallet-adapter-okxwallet@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "@tronweb3/tronwallet-adapter-okxwallet@npm:1.0.4"
+  dependencies:
+    "@tronweb3/tronwallet-abstract-adapter": "npm:^1.1.7"
+    "@tronweb3/tronwallet-adapter-tronlink": "npm:^1.1.10"
+  checksum: 10/2e8419eea3b78fe769e6558a21e009327485e8cd8ef3770988fb756583a4c6a21363dc48a1bf771e123543dd1739b384098342c982f6dd3be4030043befe6ae8
+  languageName: node
+  linkType: hard
+
+"@tronweb3/tronwallet-adapter-react-hooks@npm:^1.1.7":
+  version: 1.1.7
+  resolution: "@tronweb3/tronwallet-adapter-react-hooks@npm:1.1.7"
+  dependencies:
+    "@tronweb3/tronwallet-abstract-adapter": "npm:^1.1.6"
+    "@tronweb3/tronwallet-adapter-tronlink": "npm:^1.1.9"
+  peerDependencies:
+    react: "*"
+    react-dom: "*"
+  checksum: 10/b45b80302b6efee83038557f0a7eb88c1b6b62893ba908e58c8b3eb36b11a8a2ed70b7d088b20b9beb7c7ce37261ed53118a40514b23b659120409320ae861b1
+  languageName: node
+  linkType: hard
+
+"@tronweb3/tronwallet-adapter-react-ui@npm:^1.1.8":
+  version: 1.1.8
+  resolution: "@tronweb3/tronwallet-adapter-react-ui@npm:1.1.8"
+  dependencies:
+    "@tronweb3/tronwallet-abstract-adapter": "npm:^1.1.6"
+    "@tronweb3/tronwallet-adapter-react-hooks": "npm:^1.1.7"
+  peerDependencies:
+    react: "*"
+    react-dom: "*"
+  checksum: 10/520d3a2a95017757c159e64d42f59f9cb7a24c7757ecea1ff8199c1093e04870a09ca646e200671ec353503d5255e0558dd0ac930f9e3ea15fb84fb22bf17297
+  languageName: node
+  linkType: hard
+
+"@tronweb3/tronwallet-adapter-tokenpocket@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "@tronweb3/tronwallet-adapter-tokenpocket@npm:1.0.4"
+  dependencies:
+    "@tronweb3/tronwallet-abstract-adapter": "npm:^1.1.7"
+    "@tronweb3/tronwallet-adapter-tronlink": "npm:^1.1.10"
+  checksum: 10/fa0f62ec98683d35aa84d0693f8e3870fc1ffbfebdaf843d5288255a927f3515558617693a7ec682b34fc64e812e794677156ecfc887ff6003e27599feb84379
+  languageName: node
+  linkType: hard
+
+"@tronweb3/tronwallet-adapter-tronlink@npm:^1.1.10":
+  version: 1.1.10
+  resolution: "@tronweb3/tronwallet-adapter-tronlink@npm:1.1.10"
+  dependencies:
+    "@tronweb3/tronwallet-abstract-adapter": "npm:^1.1.7"
+  checksum: 10/b6699c6f004233c0e752685943f193fc048f1526416866df6c5e1c7224307ac53f85f071fd53721a4b86103f721d7e2cff1e52ef57399f174ab3485ac3a1f8f4
+  languageName: node
+  linkType: hard
+
+"@tronweb3/tronwallet-adapter-tronlink@npm:^1.1.9":
+  version: 1.1.9
+  resolution: "@tronweb3/tronwallet-adapter-tronlink@npm:1.1.9"
+  dependencies:
+    "@tronweb3/tronwallet-abstract-adapter": "npm:^1.1.6"
+  checksum: 10/333cbf2f21ca7d25dc4e2fd7c6fa9107ee5f89b2b184063df306dedff2eda598c70668311b8324e614f0da8d39730db13613e037e959211c01650769caad7f6c
+  languageName: node
+  linkType: hard
+
+"@tronweb3/tronwallet-adapter-walletconnect@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "@tronweb3/tronwallet-adapter-walletconnect@npm:2.0.1"
+  dependencies:
+    "@tronweb3/tronwallet-abstract-adapter": "npm:^1.1.7"
+    "@tronweb3/walletconnect-tron": "npm:^3.0.0"
+    "@wagmi/core": "npm:^1.1.0"
+    "@walletconnect/sign-client": "npm:^2.1.4"
+    "@walletconnect/types": "npm:^2.1.4"
+    viem: "npm:^0.3.50"
+  checksum: 10/bef70eef6248ef519f8aa79c5bd115cc980e04c642497f3870a7b41dd0668847c3a9399bbee92c385eb71cf34e05834daf2c219cbbf8c7120883152dcdfa673c
+  languageName: node
+  linkType: hard
+
+"@tronweb3/tronwallet-adapters@npm:^1.2.3":
+  version: 1.2.3
+  resolution: "@tronweb3/tronwallet-adapters@npm:1.2.3"
+  dependencies:
+    "@tronweb3/tronwallet-adapter-bitkeep": "npm:^1.1.2"
+    "@tronweb3/tronwallet-adapter-imtoken": "npm:^1.0.0"
+    "@tronweb3/tronwallet-adapter-ledger": "npm:^1.1.9"
+    "@tronweb3/tronwallet-adapter-okxwallet": "npm:^1.0.4"
+    "@tronweb3/tronwallet-adapter-tokenpocket": "npm:^1.0.4"
+    "@tronweb3/tronwallet-adapter-tronlink": "npm:^1.1.10"
+    "@tronweb3/tronwallet-adapter-walletconnect": "npm:^2.0.1"
+  checksum: 10/4937e70317095f34095958a13556594bf2890800f344891a4198f92028933f9026a1d46c80faacb879f067db387d042aec72f9d46089072df709b82ef5b15b96
+  languageName: node
+  linkType: hard
+
+"@tronweb3/walletconnect-tron@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "@tronweb3/walletconnect-tron@npm:3.0.0"
+  dependencies:
+    "@walletconnect/modal": "npm:^2.6.2"
+    "@walletconnect/sign-client": "npm:^2.1.3"
+    "@walletconnect/utils": "npm:^2.1.3"
+  checksum: 10/717169bc7a511a029562d6be5c0d0ae1b696a011f94c5c293d54f989f749cf79e36c6fb438d4806fda927b18c1222fcd55207c58b965bd7c18f5d609cc3dac11
+  languageName: node
+  linkType: hard
+
 "@trysound/sax@npm:0.2.0":
   version: 0.2.0
   resolution: "@trysound/sax@npm:0.2.0"
@@ -8660,6 +9382,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/uuid@npm:^8.3.4":
+  version: 8.3.4
+  resolution: "@types/uuid@npm:8.3.4"
+  checksum: 10/6f11f3ff70f30210edaa8071422d405e9c1d4e53abbe50fdce365150d3c698fe7bbff65c1e71ae080cbfb8fded860dbb5e174da96fdbbdfcaa3fb3daa474d20f
+  languageName: node
+  linkType: hard
+
 "@types/ws@npm:^7.4.4":
   version: 7.4.7
   resolution: "@types/ws@npm:7.4.7"
@@ -8669,6 +9398,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/ws@npm:^8.2.2":
+  version: 8.5.12
+  resolution: "@types/ws@npm:8.5.12"
+  dependencies:
+    "@types/node": "npm:*"
+  checksum: 10/d8a3ddfb5ff8fea992a043113579d61ac1ea21e8464415af9e2b01b205ed19d817821ad64ca1b3a90062d1df1c23b0f586d8351d25ca6728844df99a74e8f76d
+  languageName: node
+  linkType: hard
+
 "@types/ws@npm:^8.5.1, @types/ws@npm:^8.5.5":
   version: 8.5.9
   resolution: "@types/ws@npm:8.5.9"
@@ -8824,6 +9562,41 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@wagmi/chains@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@wagmi/chains@npm:1.0.0"
+  peerDependencies:
+    typescript: ">=5.0.4"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10/7f04dc35590ed8c8629c278c98563c99310ddb44df498397f1242dab3c45d8a6a7833d8dfd7a9fc8bb52984e79a72dabe7bda3c0650c59d5dd632e96af176cf2
+  languageName: node
+  linkType: hard
+
+"@wagmi/connectors@npm:3.1.11":
+  version: 3.1.11
+  resolution: "@wagmi/connectors@npm:3.1.11"
+  dependencies:
+    "@coinbase/wallet-sdk": "npm:^3.6.6"
+    "@safe-global/safe-apps-provider": "npm:^0.18.1"
+    "@safe-global/safe-apps-sdk": "npm:^8.1.0"
+    "@walletconnect/ethereum-provider": "npm:2.11.0"
+    "@walletconnect/legacy-provider": "npm:^2.0.0"
+    "@walletconnect/modal": "npm:2.6.2"
+    "@walletconnect/utils": "npm:2.11.0"
+    abitype: "npm:0.8.7"
+    eventemitter3: "npm:^4.0.7"
+  peerDependencies:
+    typescript: ">=5.0.4"
+    viem: ">=0.3.35"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10/78f7c756f73957b215b9baf295f9c6f849abec18abaf1db060d3ebd350a273cf885e58680faf49a8dbcfc83f113c694060ac9976ae0e0c85996b0351154d8362
+  languageName: node
+  linkType: hard
+
 "@wagmi/connectors@npm:4.1.25":
   version: 4.1.25
   resolution: "@wagmi/connectors@npm:4.1.25"
@@ -8906,6 +9679,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@wagmi/core@npm:^1.1.0":
+  version: 1.4.13
+  resolution: "@wagmi/core@npm:1.4.13"
+  dependencies:
+    "@wagmi/connectors": "npm:3.1.11"
+    abitype: "npm:0.8.7"
+    eventemitter3: "npm:^4.0.7"
+    zustand: "npm:^4.3.1"
+  peerDependencies:
+    typescript: ">=5.0.4"
+    viem: ">=0.3.35"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10/04cf03f80624a1c696289ad132b3d8b4889745ccddb4aedb9d84a6502a0b521adba528121a670da047e94b4eb3d9a6b2545b932201923c8eec17795d0f573cca
+  languageName: node
+  linkType: hard
+
 "@walletconnect/auth-client@npm:2.1.2":
   version: 2.1.2
   resolution: "@walletconnect/auth-client@npm:2.1.2"
@@ -8927,6 +9718,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@walletconnect/core@npm:2.11.0":
+  version: 2.11.0
+  resolution: "@walletconnect/core@npm:2.11.0"
+  dependencies:
+    "@walletconnect/heartbeat": "npm:1.2.1"
+    "@walletconnect/jsonrpc-provider": "npm:1.0.13"
+    "@walletconnect/jsonrpc-types": "npm:1.0.3"
+    "@walletconnect/jsonrpc-utils": "npm:1.0.8"
+    "@walletconnect/jsonrpc-ws-connection": "npm:1.0.14"
+    "@walletconnect/keyvaluestorage": "npm:^1.1.1"
+    "@walletconnect/logger": "npm:^2.0.1"
+    "@walletconnect/relay-api": "npm:^1.0.9"
+    "@walletconnect/relay-auth": "npm:^1.0.4"
+    "@walletconnect/safe-json": "npm:^1.0.2"
+    "@walletconnect/time": "npm:^1.0.2"
+    "@walletconnect/types": "npm:2.11.0"
+    "@walletconnect/utils": "npm:2.11.0"
+    events: "npm:^3.3.0"
+    isomorphic-unfetch: "npm:3.1.0"
+    lodash.isequal: "npm:4.5.0"
+    uint8arrays: "npm:^3.1.0"
+  checksum: 10/062b4b66eb4a961ee2044e8ba834f010f89d9c6ca62cc9bdaeb11150ee815ff833afdd47b8f9c1c0be9aae59ab7b10e517b2153bfa51e07ceb1efcbdaadd0ef0
+  languageName: node
+  linkType: hard
+
 "@walletconnect/core@npm:2.11.2":
   version: 2.11.2
   resolution: "@walletconnect/core@npm:2.11.2"
@@ -9002,6 +9818,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@walletconnect/core@npm:2.16.2":
+  version: 2.16.2
+  resolution: "@walletconnect/core@npm:2.16.2"
+  dependencies:
+    "@walletconnect/heartbeat": "npm:1.2.2"
+    "@walletconnect/jsonrpc-provider": "npm:1.0.14"
+    "@walletconnect/jsonrpc-types": "npm:1.0.4"
+    "@walletconnect/jsonrpc-utils": "npm:1.0.8"
+    "@walletconnect/jsonrpc-ws-connection": "npm:1.0.14"
+    "@walletconnect/keyvaluestorage": "npm:1.1.1"
+    "@walletconnect/logger": "npm:2.1.2"
+    "@walletconnect/relay-api": "npm:1.0.11"
+    "@walletconnect/relay-auth": "npm:1.0.4"
+    "@walletconnect/safe-json": "npm:1.0.2"
+    "@walletconnect/time": "npm:1.0.2"
+    "@walletconnect/types": "npm:2.16.2"
+    "@walletconnect/utils": "npm:2.16.2"
+    events: "npm:3.3.0"
+    lodash.isequal: "npm:4.5.0"
+    uint8arrays: "npm:3.1.0"
+  checksum: 10/b867127db13594276fcf107c09b94407858fcf7214771c7682ebf1f552b386d1a116332084ce06579466a5db3a19c2750882eb44606743c54ed902ef27c849a1
+  languageName: node
+  linkType: hard
+
 "@walletconnect/core@npm:^2.10.1, @walletconnect/core@npm:^2.11.3":
   version: 2.12.0
   resolution: "@walletconnect/core@npm:2.12.0"
@@ -9027,6 +9867,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@walletconnect/crypto@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "@walletconnect/crypto@npm:1.0.3"
+  dependencies:
+    "@walletconnect/encoding": "npm:^1.0.2"
+    "@walletconnect/environment": "npm:^1.0.1"
+    "@walletconnect/randombytes": "npm:^1.0.3"
+    aes-js: "npm:^3.1.2"
+    hash.js: "npm:^1.1.7"
+    tslib: "npm:1.14.1"
+  checksum: 10/6749da7f6b1e03a8aa2aa750bff0827ff59c70be6d58f7170e287d18507744fee507cba0f2a67b7ec3e50a4843420dc1f58a01f73735f90a4e75e47c7d39d5ab
+  languageName: node
+  linkType: hard
+
+"@walletconnect/encoding@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "@walletconnect/encoding@npm:1.0.2"
+  dependencies:
+    is-typedarray: "npm:1.0.0"
+    tslib: "npm:1.14.1"
+    typedarray-to-buffer: "npm:3.1.5"
+  checksum: 10/046a7725864aba319a284fe5e8cebb45bb9d3cb81f15dd6a82f12c4a01aafaadf6b8b0239172948eacbbee87bfde4f47c22148a0f760f15f0161a39534e41e41
+  languageName: node
+  linkType: hard
+
 "@walletconnect/environment@npm:^1.0.1":
   version: 1.0.1
   resolution: "@walletconnect/environment@npm:1.0.1"
@@ -9036,6 +9901,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@walletconnect/ethereum-provider@npm:2.11.0":
+  version: 2.11.0
+  resolution: "@walletconnect/ethereum-provider@npm:2.11.0"
+  dependencies:
+    "@walletconnect/jsonrpc-http-connection": "npm:^1.0.7"
+    "@walletconnect/jsonrpc-provider": "npm:^1.0.13"
+    "@walletconnect/jsonrpc-types": "npm:^1.0.3"
+    "@walletconnect/jsonrpc-utils": "npm:^1.0.8"
+    "@walletconnect/modal": "npm:^2.6.2"
+    "@walletconnect/sign-client": "npm:2.11.0"
+    "@walletconnect/types": "npm:2.11.0"
+    "@walletconnect/universal-provider": "npm:2.11.0"
+    "@walletconnect/utils": "npm:2.11.0"
+    events: "npm:^3.3.0"
+  checksum: 10/d17aac8f8e89f428ad401f37ea3ef4efb75c50e4a956afe4f43ee589b248dcae5b3d20ef67152067168d3e56e0cb577dc7087d78d5db44bf591a6335a0942b71
+  languageName: node
+  linkType: hard
+
 "@walletconnect/ethereum-provider@npm:2.11.2":
   version: 2.11.2
   resolution: "@walletconnect/ethereum-provider@npm:2.11.2"
@@ -9122,7 +10005,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@walletconnect/jsonrpc-http-connection@npm:1.0.8":
+"@walletconnect/jsonrpc-http-connection@npm:1.0.8, @walletconnect/jsonrpc-http-connection@npm:^1.0.4":
   version: 1.0.8
   resolution: "@walletconnect/jsonrpc-http-connection@npm:1.0.8"
   dependencies:
@@ -9157,7 +10040,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@walletconnect/jsonrpc-provider@npm:1.0.14":
+"@walletconnect/jsonrpc-provider@npm:1.0.14, @walletconnect/jsonrpc-provider@npm:^1.0.6":
   version: 1.0.14
   resolution: "@walletconnect/jsonrpc-provider@npm:1.0.14"
   dependencies:
@@ -9188,7 +10071,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@walletconnect/jsonrpc-utils@npm:1.0.8, @walletconnect/jsonrpc-utils@npm:^1.0.6, @walletconnect/jsonrpc-utils@npm:^1.0.7, @walletconnect/jsonrpc-utils@npm:^1.0.8":
+"@walletconnect/jsonrpc-utils@npm:1.0.8, @walletconnect/jsonrpc-utils@npm:^1.0.4, @walletconnect/jsonrpc-utils@npm:^1.0.6, @walletconnect/jsonrpc-utils@npm:^1.0.7, @walletconnect/jsonrpc-utils@npm:^1.0.8":
   version: 1.0.8
   resolution: "@walletconnect/jsonrpc-utils@npm:1.0.8"
   dependencies:
@@ -9227,6 +10110,76 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@walletconnect/legacy-client@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "@walletconnect/legacy-client@npm:2.0.0"
+  dependencies:
+    "@walletconnect/crypto": "npm:^1.0.3"
+    "@walletconnect/encoding": "npm:^1.0.2"
+    "@walletconnect/jsonrpc-utils": "npm:^1.0.4"
+    "@walletconnect/legacy-types": "npm:^2.0.0"
+    "@walletconnect/legacy-utils": "npm:^2.0.0"
+    "@walletconnect/safe-json": "npm:^1.0.1"
+    "@walletconnect/window-getters": "npm:^1.0.1"
+    "@walletconnect/window-metadata": "npm:^1.0.1"
+    detect-browser: "npm:^5.3.0"
+    query-string: "npm:^6.13.5"
+  checksum: 10/ae70c9f8a251a4f2eee97a4c6cd24ed64f30fbd38cfc9b4ed9e329e3817a2439bdc2b460515677511c551c2cbbaf23aafff512eb427b77ee61843eb4754430eb
+  languageName: node
+  linkType: hard
+
+"@walletconnect/legacy-modal@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "@walletconnect/legacy-modal@npm:2.0.0"
+  dependencies:
+    "@walletconnect/legacy-types": "npm:^2.0.0"
+    "@walletconnect/legacy-utils": "npm:^2.0.0"
+    copy-to-clipboard: "npm:^3.3.3"
+    preact: "npm:^10.12.0"
+    qrcode: "npm:^1.5.1"
+  checksum: 10/3b9c741b781c2bff9c104134f1a17585c8c879ee8c1c2218a06f7a5f5f385a9b0f039d57df55bdc28f9f7d45b8a02e221ce7df025c9182001dad33f5efca18b5
+  languageName: node
+  linkType: hard
+
+"@walletconnect/legacy-provider@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "@walletconnect/legacy-provider@npm:2.0.0"
+  dependencies:
+    "@walletconnect/jsonrpc-http-connection": "npm:^1.0.4"
+    "@walletconnect/jsonrpc-provider": "npm:^1.0.6"
+    "@walletconnect/legacy-client": "npm:^2.0.0"
+    "@walletconnect/legacy-modal": "npm:^2.0.0"
+    "@walletconnect/legacy-types": "npm:^2.0.0"
+    "@walletconnect/legacy-utils": "npm:^2.0.0"
+  checksum: 10/49b18d2ef7652d71a66ace75957e49b8a38e80cd5af43b8786276b8179cf1281d7158716f0605b6c15189e0c48736bd3779ec23fd46ebbb83d7b770f85d53eab
+  languageName: node
+  linkType: hard
+
+"@walletconnect/legacy-types@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "@walletconnect/legacy-types@npm:2.0.0"
+  dependencies:
+    "@walletconnect/jsonrpc-types": "npm:^1.0.2"
+  checksum: 10/6d89021d1735a4a3f182aee78421bd8e783fdb1c51c93059f7b4727d66072afdc889b07be8e791919e7c1f52b93735f57b72fc1bfd5b890e17d9037fbb06fec7
+  languageName: node
+  linkType: hard
+
+"@walletconnect/legacy-utils@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "@walletconnect/legacy-utils@npm:2.0.0"
+  dependencies:
+    "@walletconnect/encoding": "npm:^1.0.2"
+    "@walletconnect/jsonrpc-utils": "npm:^1.0.4"
+    "@walletconnect/legacy-types": "npm:^2.0.0"
+    "@walletconnect/safe-json": "npm:^1.0.1"
+    "@walletconnect/window-getters": "npm:^1.0.1"
+    "@walletconnect/window-metadata": "npm:^1.0.1"
+    detect-browser: "npm:^5.3.0"
+    query-string: "npm:^6.13.5"
+  checksum: 10/6dd7738b0b7c11eb8f06f639a37527759440453f350d616e7116e89dbec03f381a462102be2c2175ed02b886f1b420a80a144b623f1a63cf9e02cebe82bcdefe
+  languageName: node
+  linkType: hard
+
 "@walletconnect/logger@npm:2.0.1":
   version: 2.0.1
   resolution: "@walletconnect/logger@npm:2.0.1"
@@ -9288,6 +10241,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@walletconnect/randombytes@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "@walletconnect/randombytes@npm:1.0.3"
+  dependencies:
+    "@walletconnect/encoding": "npm:^1.0.2"
+    "@walletconnect/environment": "npm:^1.0.1"
+    randombytes: "npm:^2.1.0"
+    tslib: "npm:1.14.1"
+  checksum: 10/3069e58d3735af15895cade98665a50339275cbf98b20e638ae9266556183b01b8cb286739de6adfd733a86c51fd6322aff034c05dc464d7581f35c33eacb25b
+  languageName: node
+  linkType: hard
+
 "@walletconnect/relay-api@npm:1.0.10":
   version: 1.0.10
   resolution: "@walletconnect/relay-api@npm:1.0.10"
@@ -9297,6 +10262,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@walletconnect/relay-api@npm:1.0.11":
+  version: 1.0.11
+  resolution: "@walletconnect/relay-api@npm:1.0.11"
+  dependencies:
+    "@walletconnect/jsonrpc-types": "npm:^1.0.2"
+  checksum: 10/d85f88b9744917ee5b36d2df23bf4012819b14b73229f9bdca942bee11dd3b3428808c7528c2b1f6b3d91fa1d34a22b1e20b46533e402301318cbd4ab59b9c17
+  languageName: node
+  linkType: hard
+
 "@walletconnect/relay-api@npm:^1.0.9":
   version: 1.0.9
   resolution: "@walletconnect/relay-api@npm:1.0.9"
@@ -9330,6 +10304,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@walletconnect/sign-client@npm:2.11.0":
+  version: 2.11.0
+  resolution: "@walletconnect/sign-client@npm:2.11.0"
+  dependencies:
+    "@walletconnect/core": "npm:2.11.0"
+    "@walletconnect/events": "npm:^1.0.1"
+    "@walletconnect/heartbeat": "npm:1.2.1"
+    "@walletconnect/jsonrpc-utils": "npm:1.0.8"
+    "@walletconnect/logger": "npm:^2.0.1"
+    "@walletconnect/time": "npm:^1.0.2"
+    "@walletconnect/types": "npm:2.11.0"
+    "@walletconnect/utils": "npm:2.11.0"
+    events: "npm:^3.3.0"
+  checksum: 10/dfce7c223cd12d478f42410e7cc0d15b0e2cefaa29bb860eed1826627efb34513cbe2bb37b301c42a93bae9d9c677407ec9439e7f3de0b76eac581f92adc099e
+  languageName: node
+  linkType: hard
+
 "@walletconnect/sign-client@npm:2.11.2":
   version: 2.11.2
   resolution: "@walletconnect/sign-client@npm:2.11.2"
@@ -9381,6 +10372,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@walletconnect/sign-client@npm:^2.1.3, @walletconnect/sign-client@npm:^2.1.4":
+  version: 2.16.2
+  resolution: "@walletconnect/sign-client@npm:2.16.2"
+  dependencies:
+    "@walletconnect/core": "npm:2.16.2"
+    "@walletconnect/events": "npm:1.0.1"
+    "@walletconnect/heartbeat": "npm:1.2.2"
+    "@walletconnect/jsonrpc-utils": "npm:1.0.8"
+    "@walletconnect/logger": "npm:2.1.2"
+    "@walletconnect/time": "npm:1.0.2"
+    "@walletconnect/types": "npm:2.16.2"
+    "@walletconnect/utils": "npm:2.16.2"
+    events: "npm:3.3.0"
+  checksum: 10/4b07c859c2d66b53bcef825b5d9374471e711b1f057c523c546d093ee66112e2884ad26dda3c3e2696b1f5abb05a88bab8bf767030e6122e5d2cb460e51a4e7a
+  languageName: node
+  linkType: hard
+
 "@walletconnect/time@npm:1.0.2, @walletconnect/time@npm:^1.0.2":
   version: 1.0.2
   resolution: "@walletconnect/time@npm:1.0.2"
@@ -9390,6 +10398,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@walletconnect/types@npm:2.11.0":
+  version: 2.11.0
+  resolution: "@walletconnect/types@npm:2.11.0"
+  dependencies:
+    "@walletconnect/events": "npm:^1.0.1"
+    "@walletconnect/heartbeat": "npm:1.2.1"
+    "@walletconnect/jsonrpc-types": "npm:1.0.3"
+    "@walletconnect/keyvaluestorage": "npm:^1.1.1"
+    "@walletconnect/logger": "npm:^2.0.1"
+    events: "npm:^3.3.0"
+  checksum: 10/72602e3a38dbc8db789467cbf40fad5500c2fdf736277dde11990b8d11d989c3c075cb3ab8a6e88dc7f1a6b559cd791a2aa5da843239c34a0ee726d1f73fd723
+  languageName: node
+  linkType: hard
+
 "@walletconnect/types@npm:2.11.2":
   version: 2.11.2
   resolution: "@walletconnect/types@npm:2.11.2"
@@ -9446,6 +10468,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@walletconnect/types@npm:2.16.2, @walletconnect/types@npm:^2.1.4":
+  version: 2.16.2
+  resolution: "@walletconnect/types@npm:2.16.2"
+  dependencies:
+    "@walletconnect/events": "npm:1.0.1"
+    "@walletconnect/heartbeat": "npm:1.2.2"
+    "@walletconnect/jsonrpc-types": "npm:1.0.4"
+    "@walletconnect/keyvaluestorage": "npm:1.1.1"
+    "@walletconnect/logger": "npm:2.1.2"
+    events: "npm:3.3.0"
+  checksum: 10/bad714e4681aee92d9aeb112dc1e3df6336a17bb082d67e573c84c935dcee8976c3276d7b38f63d688281fe6d5ab6239528025749324cf9c36bd6e0d6d810a11
+  languageName: node
+  linkType: hard
+
+"@walletconnect/universal-provider@npm:2.11.0":
+  version: 2.11.0
+  resolution: "@walletconnect/universal-provider@npm:2.11.0"
+  dependencies:
+    "@walletconnect/jsonrpc-http-connection": "npm:^1.0.7"
+    "@walletconnect/jsonrpc-provider": "npm:1.0.13"
+    "@walletconnect/jsonrpc-types": "npm:^1.0.2"
+    "@walletconnect/jsonrpc-utils": "npm:^1.0.7"
+    "@walletconnect/logger": "npm:^2.0.1"
+    "@walletconnect/sign-client": "npm:2.11.0"
+    "@walletconnect/types": "npm:2.11.0"
+    "@walletconnect/utils": "npm:2.11.0"
+    events: "npm:^3.3.0"
+  checksum: 10/8e04a6530f285f7c6e3a125f0b3707959436fe181d33e6a7bad6e400cc9552c97158065bda518a29b9764e62bb8ae31a2be992aa3606d1de24f92300ae8e3585
+  languageName: node
+  linkType: hard
+
 "@walletconnect/universal-provider@npm:2.11.2":
   version: 2.11.2
   resolution: "@walletconnect/universal-provider@npm:2.11.2"
@@ -9497,6 +10550,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@walletconnect/utils@npm:2.11.0":
+  version: 2.11.0
+  resolution: "@walletconnect/utils@npm:2.11.0"
+  dependencies:
+    "@stablelib/chacha20poly1305": "npm:1.0.1"
+    "@stablelib/hkdf": "npm:1.0.1"
+    "@stablelib/random": "npm:^1.0.2"
+    "@stablelib/sha256": "npm:1.0.1"
+    "@stablelib/x25519": "npm:^1.0.3"
+    "@walletconnect/relay-api": "npm:^1.0.9"
+    "@walletconnect/safe-json": "npm:^1.0.2"
+    "@walletconnect/time": "npm:^1.0.2"
+    "@walletconnect/types": "npm:2.11.0"
+    "@walletconnect/window-getters": "npm:^1.0.1"
+    "@walletconnect/window-metadata": "npm:^1.0.1"
+    detect-browser: "npm:5.3.0"
+    query-string: "npm:7.1.3"
+    uint8arrays: "npm:^3.1.0"
+  checksum: 10/d58f001ba989f8c798b7d51004bf9441175c1e6b199523adc3688cb509fc883160cd537873f2f233d1ff1bf523dbf80f42c4159ba820d5db22222ed8cdbd551d
+  languageName: node
+  linkType: hard
+
 "@walletconnect/utils@npm:2.11.2":
   version: 2.11.2
   resolution: "@walletconnect/utils@npm:2.11.2"
@@ -9585,6 +10660,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@walletconnect/utils@npm:2.16.2, @walletconnect/utils@npm:^2.1.3":
+  version: 2.16.2
+  resolution: "@walletconnect/utils@npm:2.16.2"
+  dependencies:
+    "@stablelib/chacha20poly1305": "npm:1.0.1"
+    "@stablelib/hkdf": "npm:1.0.1"
+    "@stablelib/random": "npm:1.0.2"
+    "@stablelib/sha256": "npm:1.0.1"
+    "@stablelib/x25519": "npm:1.0.3"
+    "@walletconnect/relay-api": "npm:1.0.11"
+    "@walletconnect/relay-auth": "npm:1.0.4"
+    "@walletconnect/safe-json": "npm:1.0.2"
+    "@walletconnect/time": "npm:1.0.2"
+    "@walletconnect/types": "npm:2.16.2"
+    "@walletconnect/window-getters": "npm:1.0.1"
+    "@walletconnect/window-metadata": "npm:1.0.1"
+    detect-browser: "npm:5.3.0"
+    elliptic: "npm:^6.5.7"
+    query-string: "npm:7.1.3"
+    uint8arrays: "npm:3.1.0"
+  checksum: 10/21bbfcdb170a661399f6a63be9338bf31492d6f2e62a58589930ad6aca639b7ea691c73ec89e97d8cb95555eaf13b0a4f5746bd20549560244d4348d34f552f1
+  languageName: node
+  linkType: hard
+
 "@walletconnect/web3wallet@npm:^1.10.3":
   version: 1.10.3
   resolution: "@walletconnect/web3wallet@npm:1.10.3"
@@ -10055,6 +11154,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"abitype@npm:0.8.7":
+  version: 0.8.7
+  resolution: "abitype@npm:0.8.7"
+  peerDependencies:
+    typescript: ">=5.0.4"
+    zod: ^3 >=3.19.1
+  peerDependenciesMeta:
+    zod:
+      optional: true
+  checksum: 10/2ea02b160753f3a35ab407bc2abcd356982a13128a5a2d5de206d18ab88d2d69116b58428b0369c5d22338fec059d452a1900d95dc98d19b0b532308c80c4b4d
+  languageName: node
+  linkType: hard
+
 "abitype@npm:0.9.8":
   version: 0.9.8
   resolution: "abitype@npm:0.9.8"
@@ -10085,6 +11197,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"abitype@npm:1.0.5":
+  version: 1.0.5
+  resolution: "abitype@npm:1.0.5"
+  peerDependencies:
+    typescript: ">=5.0.4"
+    zod: ^3 >=3.22.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+    zod:
+      optional: true
+  checksum: 10/1acd0d9687945dd78442b71bd84ff3b9dceae27d15f0d8b14b16554a0c8c9518eeb971ff8e94d507f4d9f05a8a8b91eb8fafd735eaecebac37d5c5a4aac06d8e
+  languageName: node
+  linkType: hard
+
 "abort-controller@npm:^3.0.0":
   version: 3.0.0
   resolution: "abort-controller@npm:3.0.0"
@@ -10176,6 +11303,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"aes-js@npm:^3.1.2":
+  version: 3.1.2
+  resolution: "aes-js@npm:3.1.2"
+  checksum: 10/b65916767034a51375a3ac5aad62af452d89a386c1ae7b607bb9145d0bb8b8823bf2f3eba85bdfa52d61c65d5aed90ba90f677b8c826bfa1a8b7ae2fa3b54d91
+  languageName: node
+  linkType: hard
+
 "agent-base@npm:6, agent-base@npm:^6.0.2":
   version: 6.0.2
   resolution: "agent-base@npm:6.0.2"
@@ -10829,10 +11963,21 @@ __metadata:
   version: 1.6.2
   resolution: "axios@npm:1.6.2"
   dependencies:
-    follow-redirects: "npm:^1.15.0"
+    follow-redirects: "npm:^1.15.0"
+    form-data: "npm:^4.0.0"
+    proxy-from-env: "npm:^1.1.0"
+  checksum: 10/612bc93f8f738a518e7c5f9de9cc782bcd36aac6bae279160ef6a10260378e21c1786520eab3336898e3d66e0839ebdf739f327fb6d0431baa4d3235703a7652
+  languageName: node
+  linkType: hard
+
+"axios@npm:^1.6.7":
+  version: 1.7.5
+  resolution: "axios@npm:1.7.5"
+  dependencies:
+    follow-redirects: "npm:^1.15.6"
     form-data: "npm:^4.0.0"
     proxy-from-env: "npm:^1.1.0"
-  checksum: 10/612bc93f8f738a518e7c5f9de9cc782bcd36aac6bae279160ef6a10260378e21c1786520eab3336898e3d66e0839ebdf739f327fb6d0431baa4d3235703a7652
+  checksum: 10/6cbcfe943a84089f420a900a3a3aeb54ee94dcc9c2b81b150434896357be5d1079eff0b1bbb628597371e79f896b1bc5776df04184756ba99656ff31df9a75bf
   languageName: node
   linkType: hard
 
@@ -12795,6 +13940,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dataloader@npm:^2.0.0":
+  version: 2.2.2
+  resolution: "dataloader@npm:2.2.2"
+  checksum: 10/9c7a1f02cfa6391ab8bc21ebd0ef60b03832bd3beafdfecf48b111fba14090f98d33965f8e268045ba3c289f801b6a9000a9e61a41188363bdee2344811f64f1
+  languageName: node
+  linkType: hard
+
 "date-fns@npm:^2.29.3":
   version: 2.30.0
   resolution: "date-fns@npm:2.30.0"
@@ -13398,6 +14550,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"elliptic@npm:^6.5.7":
+  version: 6.5.7
+  resolution: "elliptic@npm:6.5.7"
+  dependencies:
+    bn.js: "npm:^4.11.9"
+    brorand: "npm:^1.1.0"
+    hash.js: "npm:^1.0.0"
+    hmac-drbg: "npm:^1.0.1"
+    inherits: "npm:^2.0.4"
+    minimalistic-assert: "npm:^1.0.1"
+    minimalistic-crypto-utils: "npm:^1.0.1"
+  checksum: 10/fbad1fad0a5cc07df83f80cc1f7a784247ef59075194d3e340eaeb2f4dd594825ee24c7e9b0cf279c9f1982efe610503bb3139737926428c4821d4fca1bcf348
+  languageName: node
+  linkType: hard
+
 "emoji-regex@npm:^8.0.0":
   version: 8.0.0
   resolution: "emoji-regex@npm:8.0.0"
@@ -14982,6 +16149,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"follow-redirects@npm:^1.15.6":
+  version: 1.15.6
+  resolution: "follow-redirects@npm:1.15.6"
+  peerDependenciesMeta:
+    debug:
+      optional: true
+  checksum: 10/70c7612c4cab18e546e36b991bbf8009a1a41cf85354afe04b113d1117569abf760269409cb3eb842d9f7b03d62826687086b081c566ea7b1e6613cf29030bf7
+  languageName: node
+  linkType: hard
+
 "for-each@npm:^0.3.3":
   version: 0.3.3
   resolution: "for-each@npm:0.3.3"
@@ -16861,7 +18038,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-typedarray@npm:^1.0.0, is-typedarray@npm:~1.0.0":
+"is-typedarray@npm:1.0.0, is-typedarray@npm:^1.0.0, is-typedarray@npm:~1.0.0":
   version: 1.0.0
   resolution: "is-typedarray@npm:1.0.0"
   checksum: 10/4b433bfb0f9026f079f4eb3fbaa4ed2de17c9995c3a0b5c800bec40799b4b2a8b4e051b1ada77749deb9ded4ae52fe2096973f3a93ff83df1a5a7184a669478c
@@ -16969,6 +18146,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"isomorphic-ws@npm:5.0.0":
+  version: 5.0.0
+  resolution: "isomorphic-ws@npm:5.0.0"
+  peerDependencies:
+    ws: "*"
+  checksum: 10/e20eb2aee09ba96247465fda40c6d22c1153394c0144fa34fe6609f341af4c8c564f60ea3ba762335a7a9c306809349f9b863c8beedf2beea09b299834ad5398
+  languageName: node
+  linkType: hard
+
 "isomorphic-ws@npm:^4.0.1":
   version: 4.0.1
   resolution: "isomorphic-ws@npm:4.0.1"
@@ -17112,6 +18298,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jayson@npm:^4.1.1":
+  version: 4.1.2
+  resolution: "jayson@npm:4.1.2"
+  dependencies:
+    "@types/connect": "npm:^3.4.33"
+    "@types/node": "npm:^12.12.54"
+    "@types/ws": "npm:^7.4.4"
+    JSONStream: "npm:^1.3.5"
+    commander: "npm:^2.20.3"
+    delay: "npm:^5.0.0"
+    es6-promisify: "npm:^5.0.0"
+    eyes: "npm:^0.1.8"
+    isomorphic-ws: "npm:^4.0.1"
+    json-stringify-safe: "npm:^5.0.1"
+    uuid: "npm:^8.3.2"
+    ws: "npm:^7.5.10"
+  bin:
+    jayson: bin/jayson.js
+  checksum: 10/7ad5e80e11ef39b7382509d046546883d2595998aa245768b342bcc0a63843e011e16f02a023d5a78fb74df788b5f97c1e850568fc1b90c138fa4772cc55572c
+  languageName: node
+  linkType: hard
+
 "jest-util@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest-util@npm:29.7.0"
@@ -17473,6 +18681,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jssha@npm:3.2.0":
+  version: 3.2.0
+  resolution: "jssha@npm:3.2.0"
+  checksum: 10/6d01e8fa96a05534f19f81f7311f3f925d456007fd772085acada24f6013573c2854650d6b23c193afe18ba06efb40b93ce3ea6c45797ae4f79c0afcfaf6def0
+  languageName: node
+  linkType: hard
+
 "jsx-ast-utils@npm:^2.4.1 || ^3.0.0, jsx-ast-utils@npm:^3.3.5":
   version: 3.3.5
   resolution: "jsx-ast-utils@npm:3.3.5"
@@ -21000,6 +22215,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"preact@npm:^10.11.3, preact@npm:^10.12.0":
+  version: 10.24.0
+  resolution: "preact@npm:10.24.0"
+  checksum: 10/855506eedfc6b348059fefc3573b061113f7dc52c6275cb3553835956a180d8f473b5fda1825dd1f1900b1ef08723b5c22f3edd17c4553a6da9e97e27ae84590
+  languageName: node
+  linkType: hard
+
 "preact@npm:^10.16.0":
   version: 10.19.3
   resolution: "preact@npm:10.19.3"
@@ -21021,6 +22243,61 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prettier-plugin-tailwindcss@npm:^0.5.14":
+  version: 0.5.14
+  resolution: "prettier-plugin-tailwindcss@npm:0.5.14"
+  peerDependencies:
+    "@ianvs/prettier-plugin-sort-imports": "*"
+    "@prettier/plugin-pug": "*"
+    "@shopify/prettier-plugin-liquid": "*"
+    "@trivago/prettier-plugin-sort-imports": "*"
+    "@zackad/prettier-plugin-twig-melody": "*"
+    prettier: ^3.0
+    prettier-plugin-astro: "*"
+    prettier-plugin-css-order: "*"
+    prettier-plugin-import-sort: "*"
+    prettier-plugin-jsdoc: "*"
+    prettier-plugin-marko: "*"
+    prettier-plugin-organize-attributes: "*"
+    prettier-plugin-organize-imports: "*"
+    prettier-plugin-sort-imports: "*"
+    prettier-plugin-style-order: "*"
+    prettier-plugin-svelte: "*"
+  peerDependenciesMeta:
+    "@ianvs/prettier-plugin-sort-imports":
+      optional: true
+    "@prettier/plugin-pug":
+      optional: true
+    "@shopify/prettier-plugin-liquid":
+      optional: true
+    "@trivago/prettier-plugin-sort-imports":
+      optional: true
+    "@zackad/prettier-plugin-twig-melody":
+      optional: true
+    prettier-plugin-astro:
+      optional: true
+    prettier-plugin-css-order:
+      optional: true
+    prettier-plugin-import-sort:
+      optional: true
+    prettier-plugin-jsdoc:
+      optional: true
+    prettier-plugin-marko:
+      optional: true
+    prettier-plugin-organize-attributes:
+      optional: true
+    prettier-plugin-organize-imports:
+      optional: true
+    prettier-plugin-sort-imports:
+      optional: true
+    prettier-plugin-style-order:
+      optional: true
+    prettier-plugin-svelte:
+      optional: true
+  checksum: 10/8cb1e9d914012bfe42b23ba8d31fb3fe17abbbb18ad8ba33e6b81c05a92f7e1dd46836179cde7cf036a628081c9e4bbdf971b17f45844a139781e807b81229a9
+  languageName: node
+  linkType: hard
+
 "prettier@npm:^3.2.5":
   version: 3.2.5
   resolution: "prettier@npm:3.2.5"
@@ -21403,6 +22680,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"qrcode@npm:^1.5.1":
+  version: 1.5.4
+  resolution: "qrcode@npm:1.5.4"
+  dependencies:
+    dijkstrajs: "npm:^1.0.1"
+    pngjs: "npm:^5.0.0"
+    yargs: "npm:^15.3.1"
+  bin:
+    qrcode: bin/qrcode
+  checksum: 10/9a1b61760e4ea334545a0f54bbc11c537aba0a17cf52cab9fa1b07f8a1337eed0bc6f7fde41b197f2c82c249bc48728983bfaf861bb7ecb29dc597b2ae33c424
+  languageName: node
+  linkType: hard
+
 "qs@npm:6.11.0":
   version: 6.11.0
   resolution: "qs@npm:6.11.0"
@@ -21442,6 +22732,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"query-string@npm:^6.13.5":
+  version: 6.14.1
+  resolution: "query-string@npm:6.14.1"
+  dependencies:
+    decode-uri-component: "npm:^0.2.0"
+    filter-obj: "npm:^1.1.0"
+    split-on-first: "npm:^1.0.0"
+    strict-uri-encode: "npm:^2.0.0"
+  checksum: 10/95f5a372f777b4fb5bdae5a2d85961cf3894d466cfc3a0cc799320d5ed633af935c0d96ee5d2b1652c02888e749831409ca5dd5eb388ce1014a9074024a22840
+  languageName: node
+  linkType: hard
+
 "queue-microtask@npm:^1.2.2":
   version: 1.2.3
   resolution: "queue-microtask@npm:1.2.3"
@@ -22325,6 +23627,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rpc-websockets@npm:^9.0.2":
+  version: 9.0.2
+  resolution: "rpc-websockets@npm:9.0.2"
+  dependencies:
+    "@swc/helpers": "npm:^0.5.11"
+    "@types/uuid": "npm:^8.3.4"
+    "@types/ws": "npm:^8.2.2"
+    buffer: "npm:^6.0.3"
+    bufferutil: "npm:^4.0.1"
+    eventemitter3: "npm:^5.0.1"
+    utf-8-validate: "npm:^5.0.2"
+    uuid: "npm:^8.3.2"
+    ws: "npm:^8.5.0"
+  dependenciesMeta:
+    bufferutil:
+      optional: true
+    utf-8-validate:
+      optional: true
+  checksum: 10/d558958888cd3469fb8560840305352e59c9ffcd71c7a443c0c5710995ecc3c130b1473f5d4a9d316dbd408fa7473e0de720b875cf8c6ada2668cf8fac072859
+  languageName: node
+  linkType: hard
+
 "run-async@npm:^2.4.0":
   version: 2.4.1
   resolution: "run-async@npm:2.4.1"
@@ -22341,7 +23665,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rxjs@npm:6.6.7":
+"rxjs@npm:6, rxjs@npm:6.6.7":
   version: 6.6.7
   resolution: "rxjs@npm:6.6.7"
   dependencies:
@@ -22350,7 +23674,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rxjs@npm:^7.5.5, rxjs@npm:~7.8.1":
+"rxjs@npm:^7.5.5, rxjs@npm:^7.8.1, rxjs@npm:~7.8.1":
   version: 7.8.1
   resolution: "rxjs@npm:7.8.1"
   dependencies:
@@ -23663,6 +24987,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"superstruct@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "superstruct@npm:2.0.2"
+  checksum: 10/10e1944a9da4baee187fbaa6c5d97d7af266b55786dfe50bce67f0f1e7d93f1a5a42dd51e245a2e16404f8336d07c21c67f1c1fbc4ad0a252d3d2601d6c926da
+  languageName: node
+  linkType: hard
+
 "supports-color@npm:^2.0.0":
   version: 2.0.0
   resolution: "supports-color@npm:2.0.0"
@@ -23804,10 +25135,54 @@ __metadata:
     "@radix-ui/react-popover": "npm:^1.0.7"
     "@radix-ui/react-toast": "npm:^1.1.5"
     "@solana/web3.js": "npm:^1.91.8"
-    "@swing.xyz/sdk": "npm:^0.54.0"
+    "@swing.xyz/sdk": "npm:^0.60.0"
+    "@tailwindcss/forms": "npm:^0.5.7"
+    "@thirdweb-dev/react": "npm:^4.4.17"
+    "@thirdweb-dev/sdk": "npm:^4.0.44"
+    "@types/node": "npm:20.11.26"
+    "@types/react": "npm:18.2.65"
+    "@types/react-dom": "npm:18.2.22"
+    autoprefixer: "npm:^10.4.18"
+    axios: "npm:^1.6.0"
+    class-variance-authority: "npm:^0.7.0"
+    clsx: "npm:^2.1.0"
+    eslint: "npm:^8.57.0"
+    eslint-config-examples: "workspace:*"
+    framer-motion: "npm:^6.5.1"
+    lucide-react: "npm:^0.368.0"
+    next: "npm:14.1.3"
+    pino-pretty: "npm:^10.3.1"
+    postcss: "npm:^8.4.35"
+    react: "npm:18.2.0"
+    react-dom: "npm:18.2.0"
+    tailwind-merge: "npm:^2.2.2"
+    tailwindcss: "npm:^3.4.1"
+    tailwindcss-animate: "npm:^1.0.7"
+    typescript: "npm:^5.4.2"
+    typescript-config: "workspace:*"
+    use-debounce: "npm:^10.0.0"
+  languageName: unknown
+  linkType: soft
+
+"swaps-api-nextjs-tron@workspace:examples/swaps-api-nextjs-tron":
+  version: 0.0.0-use.local
+  resolution: "swaps-api-nextjs-tron@workspace:examples/swaps-api-nextjs-tron"
+  dependencies:
+    "@fortawesome/fontawesome-svg-core": "npm:^6.5.1"
+    "@fortawesome/free-brands-svg-icons": "npm:^6.5.1"
+    "@fortawesome/free-solid-svg-icons": "npm:^6.5.1"
+    "@fortawesome/react-fontawesome": "npm:^0.2.0"
+    "@headlessui/react": "npm:^1.7.18"
+    "@radix-ui/react-label": "npm:^2.0.2"
+    "@radix-ui/react-popover": "npm:^1.0.7"
+    "@radix-ui/react-toast": "npm:^1.1.5"
+    "@swing.xyz/sdk": "npm:^0.60.0"
     "@tailwindcss/forms": "npm:^0.5.7"
     "@thirdweb-dev/react": "npm:^4.4.17"
     "@thirdweb-dev/sdk": "npm:^4.0.44"
+    "@tronweb3/tronwallet-adapter-react-hooks": "npm:^1.1.7"
+    "@tronweb3/tronwallet-adapter-react-ui": "npm:^1.1.8"
+    "@tronweb3/tronwallet-adapters": "npm:^1.2.3"
     "@types/node": "npm:20.11.26"
     "@types/react": "npm:18.2.65"
     "@types/react-dom": "npm:18.2.22"
@@ -24106,6 +25481,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"symbol.inspect@npm:1.0.1":
+  version: 1.0.1
+  resolution: "symbol.inspect@npm:1.0.1"
+  checksum: 10/47fa8d38d0bc5d04c06df2f71bba1a723ee0e015ca042c47b29c11f107877dd1a2e2d2154c9ef5eec11e92e4165d126c844f06d05da80e477581c8f284f05fdf
+  languageName: node
+  linkType: hard
+
 "tailwind-merge@npm:^2.2.2":
   version: 2.2.2
   resolution: "tailwind-merge@npm:2.2.2"
@@ -24318,6 +25700,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"teslabot@npm:^1.3.0":
+  version: 1.5.0
+  resolution: "teslabot@npm:1.5.0"
+  checksum: 10/714ab9a3eadf17efdbcc78c140246c6cf02b0fceff2fd3b9e37de7c86ad05af816037145a258b4b115327bc88219d782f64047812483169037d6956f46bb1450
+  languageName: node
+  linkType: hard
+
 "test-exclude@npm:^6.0.0":
   version: 6.0.0
   resolution: "test-exclude@npm:6.0.0"
@@ -24706,6 +26095,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tweetnacl@npm:1.0.3, tweetnacl@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "tweetnacl@npm:1.0.3"
+  checksum: 10/ca122c2f86631f3c0f6d28efb44af2a301d4a557a62a3e2460286b08e97567b258c2212e4ad1cfa22bd6a57edcdc54ba76ebe946847450ab0999e6d48ccae332
+  languageName: node
+  linkType: hard
+
 "tweetnacl@npm:^0.14.3, tweetnacl@npm:~0.14.0":
   version: 0.14.5
   resolution: "tweetnacl@npm:0.14.5"
@@ -24713,13 +26109,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tweetnacl@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "tweetnacl@npm:1.0.3"
-  checksum: 10/ca122c2f86631f3c0f6d28efb44af2a301d4a557a62a3e2460286b08e97567b258c2212e4ad1cfa22bd6a57edcdc54ba76ebe946847450ab0999e6d48ccae332
-  languageName: node
-  linkType: hard
-
 "type-check@npm:^0.4.0, type-check@npm:~0.4.0":
   version: 0.4.0
   resolution: "type-check@npm:0.4.0"
@@ -24849,7 +26238,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typedarray-to-buffer@npm:^3.1.5":
+"typedarray-to-buffer@npm:3.1.5, typedarray-to-buffer@npm:^3.1.5":
   version: 3.1.5
   resolution: "typedarray-to-buffer@npm:3.1.5"
   dependencies:
@@ -25293,6 +26682,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-sync-external-store@npm:1.2.2":
+  version: 1.2.2
+  resolution: "use-sync-external-store@npm:1.2.2"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 10/671e9c190aab9a8374a5d468c6ba17f52c38b6fae970110bc196fc1e2b57204149aea9619be49a1bb5207fb6e51d8afd19c3bcb94afe61813fed039821461dc0
+  languageName: node
+  linkType: hard
+
 "utf-8-validate@npm:^5.0.2":
   version: 5.0.10
   resolution: "utf-8-validate@npm:5.0.10"
@@ -25505,6 +26903,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"viem@npm:^0.3.50":
+  version: 0.3.50
+  resolution: "viem@npm:0.3.50"
+  dependencies:
+    "@adraffy/ens-normalize": "npm:1.9.0"
+    "@noble/curves": "npm:1.0.0"
+    "@noble/hashes": "npm:1.3.0"
+    "@scure/bip32": "npm:1.3.0"
+    "@scure/bip39": "npm:1.2.0"
+    "@wagmi/chains": "npm:1.0.0"
+    abitype: "npm:0.8.7"
+    isomorphic-ws: "npm:5.0.0"
+    ws: "npm:8.12.0"
+  checksum: 10/2ca23fe013018246ee4d02fe338f824779722a917841eb6a089c493473de12d6b1ae67a4638764c69ab77d35c0270d0e9b45da3e27af2e3cff47aa2fed9799c2
+  languageName: node
+  linkType: hard
+
 "viem@npm:^1.0.0, viem@npm:^1.1.4":
   version: 1.21.4
   resolution: "viem@npm:1.21.4"
@@ -25526,6 +26941,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"viem@npm:^2.1.1":
+  version: 2.21.14
+  resolution: "viem@npm:2.21.14"
+  dependencies:
+    "@adraffy/ens-normalize": "npm:1.10.0"
+    "@noble/curves": "npm:1.4.0"
+    "@noble/hashes": "npm:1.4.0"
+    "@scure/bip32": "npm:1.4.0"
+    "@scure/bip39": "npm:1.4.0"
+    abitype: "npm:1.0.5"
+    isows: "npm:1.0.4"
+    webauthn-p256: "npm:0.0.5"
+    ws: "npm:8.17.1"
+  peerDependencies:
+    typescript: ">=5.0.4"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10/0de5a87604ff8397ab12da3a05212b999cb86fc9d7ac601ae3c49a0ed039246299e401dbdb0b41b4bbb4006b2bff8a358ec2f44d01268f625666a6ad159e0514
+  languageName: node
+  linkType: hard
+
 "viem@npm:^2.10.3":
   version: 2.10.5
   resolution: "viem@npm:2.10.5"
@@ -25547,24 +26984,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"viem@npm:^2.10.5":
-  version: 2.10.11
-  resolution: "viem@npm:2.10.11"
+"viem@npm:^2.21.12":
+  version: 2.21.16
+  resolution: "viem@npm:2.21.16"
   dependencies:
     "@adraffy/ens-normalize": "npm:1.10.0"
-    "@noble/curves": "npm:1.2.0"
-    "@noble/hashes": "npm:1.3.2"
-    "@scure/bip32": "npm:1.3.2"
-    "@scure/bip39": "npm:1.2.1"
-    abitype: "npm:1.0.0"
+    "@noble/curves": "npm:1.4.0"
+    "@noble/hashes": "npm:1.4.0"
+    "@scure/bip32": "npm:1.4.0"
+    "@scure/bip39": "npm:1.4.0"
+    abitype: "npm:1.0.5"
     isows: "npm:1.0.4"
-    ws: "npm:8.13.0"
+    webauthn-p256: "npm:0.0.5"
+    ws: "npm:8.17.1"
   peerDependencies:
     typescript: ">=5.0.4"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10/ccf473d1f1d9a85974800547e21b5fe2fd31235233ab1bec7b3293ed8e990bf5967c7cb9ad77a573be580a9aed34fcaf84727a6dc80bca85ed494a19167893ad
+  checksum: 10/45d877a3507131872ea23f3766ce1c95e4504a642007d5298f69b52a3d153c1494568dc9901480f16f6a50489d5ec401c828101c27cbb0d9304f8d5d49f7c628
   languageName: node
   linkType: hard
 
@@ -25934,6 +27372,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"webauthn-p256@npm:0.0.5":
+  version: 0.0.5
+  resolution: "webauthn-p256@npm:0.0.5"
+  dependencies:
+    "@noble/curves": "npm:^1.4.0"
+    "@noble/hashes": "npm:^1.4.0"
+  checksum: 10/6bf5d1857dfb99ecb3b318af06eddea874c10135e6ebb9f046270f5cbb162933bc6caf77aedb033e14c09971dda544a5fb367ac545e4ec8001b309ba517555cf
+  languageName: node
+  linkType: hard
+
 "webdriver-js-extender@npm:2.1.0":
   version: 2.1.0
   resolution: "webdriver-js-extender@npm:2.1.0"
@@ -26733,6 +28181,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ws@npm:8.12.0":
+  version: 8.12.0
+  resolution: "ws@npm:8.12.0"
+  peerDependencies:
+    bufferutil: ^4.0.1
+    utf-8-validate: ">=5.0.2"
+  peerDependenciesMeta:
+    bufferutil:
+      optional: true
+    utf-8-validate:
+      optional: true
+  checksum: 10/325fbcf6bbed07350b82d7a5bdb43e8a4e81512973241c656c2119a37883a74fe49e7cac09646f9bfc28c517cd63f4111c78f5898bcdd25a3ec2cc4e59375331
+  languageName: node
+  linkType: hard
+
 "ws@npm:8.13.0":
   version: 8.13.0
   resolution: "ws@npm:8.13.0"
@@ -26748,6 +28211,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ws@npm:8.17.1":
+  version: 8.17.1
+  resolution: "ws@npm:8.17.1"
+  peerDependencies:
+    bufferutil: ^4.0.1
+    utf-8-validate: ">=5.0.2"
+  peerDependenciesMeta:
+    bufferutil:
+      optional: true
+    utf-8-validate:
+      optional: true
+  checksum: 10/4264ae92c0b3e59c7e309001e93079b26937aab181835fb7af79f906b22cd33b6196d96556dafb4e985742dd401e99139572242e9847661fdbc96556b9e6902d
+  languageName: node
+  linkType: hard
+
 "ws@npm:8.9.0":
   version: 8.9.0
   resolution: "ws@npm:8.9.0"
@@ -26778,6 +28256,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ws@npm:^7.5.10":
+  version: 7.5.10
+  resolution: "ws@npm:7.5.10"
+  peerDependencies:
+    bufferutil: ^4.0.1
+    utf-8-validate: ^5.0.2
+  peerDependenciesMeta:
+    bufferutil:
+      optional: true
+    utf-8-validate:
+      optional: true
+  checksum: 10/9c796b84ba80ffc2c2adcdfc9c8e9a219ba99caa435c9a8d45f9ac593bba325563b3f83edc5eb067cc6d21b9a6bf2c930adf76dd40af5f58a5ca6859e81858f0
+  languageName: node
+  linkType: hard
+
 "ws@npm:^8.13.0, ws@npm:^8.4.2, ws@npm:^8.5.0":
   version: 8.16.0
   resolution: "ws@npm:8.16.0"
@@ -27072,6 +28565,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"zod@npm:^3.21.4":
+  version: 3.23.8
+  resolution: "zod@npm:3.23.8"
+  checksum: 10/846fd73e1af0def79c19d510ea9e4a795544a67d5b34b7e1c4d0425bf6bfd1c719446d94cdfa1721c1987d891321d61f779e8236fde517dc0e524aa851a6eff1
+  languageName: node
+  linkType: hard
+
 "zod@npm:^3.22.4":
   version: 3.22.4
   resolution: "zod@npm:3.22.4"
@@ -27127,3 +28627,23 @@ __metadata:
   checksum: 10/e6e21cbb7200bd9eca35c8f385d8b4c06949581f4e19a11c473fe2df5b756997e7d4747eb9f54ee918b9a378c62e3f2f6eadba9d24f9eb4351cc50ad27832c13
   languageName: node
   linkType: hard
+
+"zustand@npm:^4.3.1":
+  version: 4.5.5
+  resolution: "zustand@npm:4.5.5"
+  dependencies:
+    use-sync-external-store: "npm:1.2.2"
+  peerDependencies:
+    "@types/react": ">=16.8"
+    immer: ">=9.0.6"
+    react: ">=16.8"
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    immer:
+      optional: true
+    react:
+      optional: true
+  checksum: 10/481b8210187b69678074a1ca51107654c2379688e90407bfcb7961e0803a259742bfd0d77171c3f07e290896ad55fe9659b3863f30d34cb2572650ead1249f25
+  languageName: node
+  linkType: hard
