[MNY-189] SDK: SwapWidget UI improvements

Author: MananTank

.changeset/nine-otters-pay.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+SwapWidget UI improvements

apps/dashboard/src/@/utils/sdk-component-theme.ts

@@ -31,9 +31,9 @@ export function getSDKTheme(theme: "light" | "dark"): Theme {
       selectedTextBg: "hsl(var(--inverted))",
       selectedTextColor: "hsl(var(--inverted-foreground))",
       separatorLine: "hsl(var(--border))",
-      skeletonBg: "hsl(var(--muted))",
+      skeletonBg: "hsl(var(--secondary-foreground)/15%)",
       success: "hsl(var(--success-text))",
-      tertiaryBg: "hsl(var(--muted)/50%)",
+      tertiaryBg: "hsl(var(--muted)/30%)",
       tooltipBg: "hsl(var(--popover))",
       tooltipText: "hsl(var(--popover-foreground))",
     },

packages/thirdweb/src/react/core/design-system/index.ts

@@ -200,6 +200,7 @@ export const iconSize = {
   "4xl": "128",
   lg: "32",
   md: "24",
+  "sm+": "20",
   sm: "16",
   xl: "48",
   xs: "12",

packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx

@@ -162,6 +162,7 @@ export type SwapWidgetProps = {
    * @default true
    */
   persistTokenSelections?: boolean;
+  onDisconnect?: () => void;
 };
 
 /**
@@ -393,6 +394,7 @@ function SwapWidgetContent(props: SwapWidgetProps) {
   if (screen.id === "1:swap-ui" || !activeWalletInfo) {
     return (
       <SwapUI
+        onDisconnect={props.onDisconnect}
         showThirdwebBranding={
           props.showThirdwebBranding === undefined
             ? true

packages/thirdweb/src/react/web/ui/Bridge/swap-widget/common.tsx

@@ -1,9 +1,9 @@
-import { DiscIcon } from "@radix-ui/react-icons";
 import { useMemo, useState } from "react";
 import type { Token } from "../../../../../bridge/index.js";
 import type { BridgeChain } from "../../../../../bridge/types/Chain.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import { toTokens } from "../../../../../utils/units.js";
+import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import {
   fontSize,
   iconSize,
@@ -12,15 +12,13 @@ import {
 } from "../../../../core/design-system/index.js";
 import { CoinsIcon } from "../../ConnectWallet/icons/CoinsIcon.js";
 import { WalletDotIcon } from "../../ConnectWallet/icons/WalletDotIcon.js";
-import { formatTokenAmount } from "../../ConnectWallet/screens/formatTokenBalance.js";
 import { Container, Line, ModalHeader } from "../../components/basic.js";
 import { Button } from "../../components/buttons.js";
 import { Img } from "../../components/Img.js";
 import { Skeleton } from "../../components/Skeleton.js";
 import { Spacer } from "../../components/Spacer.js";
 import { Spinner } from "../../components/Spinner.js";
 import { Text } from "../../components/text.js";
-import { DecimalRenderer } from "./common.js";
 import { SearchInput } from "./SearchInput.js";
 import { SelectChainButton } from "./SelectChainButton.js";
 import { SelectBridgeChain } from "./select-chain.js";
@@ -31,6 +29,7 @@ import {
   useTokenBalances,
   useTokens,
 } from "./use-tokens.js";
+import { tokenAmountFormatter } from "./utils.js";
 
 /**
  * @internal
@@ -398,6 +397,7 @@ function TokenButton(props: {
   onSelect: (tokenWithPrices: TokenSelection) => void;
   isSelected: boolean;
 }) {
+  const theme = useCustomTheme();
   const tokenBalanceInUnits =
     "balance" in props.token
       ? toTokens(BigInt(props.token.balance), props.token.decimals)
@@ -451,7 +451,14 @@ function TokenButton(props: {
         }}
         fallback={
           <Container color="secondaryText">
-            <DiscIcon width={iconSize.lg} height={iconSize.lg} />
+            <Container
+              style={{
+                background: `linear-gradient(45deg, white, ${theme.colors.accentText})`,
+                borderRadius: radius.full,
+                width: `${iconSize.lg}px`,
+                height: `${iconSize.lg}px`,
+              }}
+            />
           </Container>
         }
       />
@@ -470,21 +477,18 @@ function TokenButton(props: {
             width: "100%",
           }}
         >
-          <Text size="md" color="primaryText" weight={500}>
+          <Text size="md" color="primaryText">
             {props.token.symbol}
           </Text>
+
           {"balance" in props.token && (
-            <DecimalRenderer
-              integerSize="md"
-              fractionSize="sm"
-              value={formatTokenAmount(
-                BigInt(props.token.balance),
-                props.token.decimals,
-                3,
+            <Text size="md" color="primaryText">
+              {tokenAmountFormatter.format(
+                Number(
+                  toTokens(BigInt(props.token.balance), props.token.decimals),
+                ),
               )}
-              color="primaryText"
-              weight={500}
-            />
+            </Text>
           )}
         </Container>
         <Container
@@ -495,9 +499,8 @@ function TokenButton(props: {
           }}
         >
           <Text
-            size="sm"
+            size="xs"
             color="secondaryText"
-            weight={400}
             style={{
               overflow: "hidden",
               textOverflow: "ellipsis",
@@ -509,16 +512,9 @@ function TokenButton(props: {
           </Text>
           {usdValue && (
             <Container flex="row">
-              <Text size="sm" color="secondaryText" weight={400}>
-                $
+              <Text size="xs" color="secondaryText" weight={400}>
+                ${usdValue.toFixed(2)}
               </Text>
-              <DecimalRenderer
-                value={usdValue.toFixed(2)}
-                color="secondaryText"
-                weight={500}
-                integerSize="sm"
-                fractionSize="xs"
-              />
             </Container>
           )}
         </Container>