Add SwapWidget in SDK, add in dashboard, BuyWidget UI improvements

packages/thirdweb/package.json

@@ -341,6 +341,7 @@
     "test:ui": "NODE_OPTIONS=--max-old-space-size=8192 vitest dev -c ./test/vitest.config.ts --coverage --ui",
     "test:watch": "vitest -c ./test/vitest.config.ts dev",
     "typedoc": "node scripts/typedoc.mjs && node scripts/parse.mjs",
+    "typecheck": "tsc --project ./tsconfig.build.json --module nodenext --moduleResolution nodenext --noEmit",
     "update-version": "node scripts/version.mjs"
   },
   "sideEffects": false,

packages/thirdweb/src/bridge/types/Chain.ts

@@ -38,3 +38,5 @@ export interface Chain {
     decimals: number;
   };
 }
+
+export type BridgeChain = Chain;

packages/thirdweb/src/pay/convert/type.ts

@@ -27,22 +27,34 @@
 export type SupportedFiatCurrency = (typeof CURRENCIES)[number] | (string & {});
 
 export function getFiatSymbol(showBalanceInFiat: SupportedFiatCurrency) {
-  switch (showBalanceInFiat) {
-    case "USD":
-      return "$";
-    case "CAD":
-      return "$";
-    case "GBP":
-      return "£";
-    case "EUR":
-      return "€";
-    case "JPY":
-      return "¥";
-    case "AUD":
-      return "$";
-    case "NZD":
-      return "$";
-    default:
-      return "$";
+  if (currencySymbol[showBalanceInFiat]) {
+    return currencySymbol[showBalanceInFiat];
   }
+  return "$";
 }
+
+const currencySymbol: Record<SupportedFiatCurrency, string> = {
+  USD: "$",
+  EUR: "€",
+  GBP: "£",
+  JPY: "¥",
+  KRW: "₩",
+  CNY: "¥",
+  INR: "₹",
+  NOK: "kr",
+  SEK: "kr",
+  CHF: "CHF",
+  AUD: "$",
+  CAD: "$",
+  NZD: "$",
+  MXN: "$",
+  BRL: "R$",
+  CLP: "$",
+  CZK: "Kč",
+  DKK: "kr",
+  HKD: "$",
+  HUF: "Ft",
+  IDR: "Rp",
+  ILS: "₪",
+  ISK: "kr",
+};

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

@@ -136,7 +136,7 @@ function createThemeObj(type: "dark" | "light", colors: ThemeColors): Theme {
       selectedTextColor: colors.base1,
 
       separatorLine: colors.base4,
-      skeletonBg: colors.base3,
+      skeletonBg: colors.base4,
       success: colors.success,
       tertiaryBg: colors.base2,
 
@@ -191,6 +191,7 @@ export const radius = {
   xl: "20px",
   xs: "4px",
   xxl: "32px",
+  full: "9999px",
 };
 
 export const iconSize = {

packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx

@@ -374,7 +374,7 @@
         </Container>
 
         <Spacer y="md" />
-        <Text center color="secondaryText" size="xs">
+        <Text center color="secondaryText" size="xs" multiline>
           Keep this window open until all
           <br /> transactions are complete.
         </Text>

packages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx

@@ -64,7 +64,7 @@ export function UnsupportedTokenScreen(props: UnsupportedTokenScreenProps) {
           size="sm"
           style={{ lineHeight: 1.5, maxWidth: "280px" }}
         >
-          The Universal Bridge does not support testnets at this time.
+          Bridge does not support testnets at this time.
         </Text>
       </Container>
     );
@@ -94,7 +94,7 @@ export function UnsupportedTokenScreen(props: UnsupportedTokenScreenProps) {
         size="sm"
         style={{ lineHeight: 1.5, maxWidth: "280px" }}
       >
-        This token or chain is not supported by the Universal Bridge.
+        This token or chain is not supported by the Bridge
       </Text>
     </Container>
   );

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

@@ -0,0 +1,41 @@
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { iconSize, spacing } from "../../../../core/design-system/index.js";
+import { Container } from "../../components/basic.js";
+import { Input } from "../../components/formElements.js";
+
+export function SearchInput(props: {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+}) {
+  return (
+    <div
+      style={{
+        position: "relative",
+      }}
+    >
+      <Container color="secondaryText">
+        <MagnifyingGlassIcon
+          width={iconSize.md}
+          height={iconSize.md}
+          style={{
+            position: "absolute",
+            left: spacing.sm,
+            top: "50%",
+            transform: "translateY(-50%)",
+          }}
+        />
+      </Container>
+
+      <Input
+        variant="outline"
+        placeholder={props.placeholder}
+        value={props.value}
+        style={{
+          paddingLeft: "44px",
+        }}
+        onChange={(e) => props.onChange(e.target.value)}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,47 @@
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import type { BridgeChain } from "../../../../../bridge/types/Chain.js";
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import {
+  fontSize,
+  iconSize,
+  spacing,
+} from "../../../../core/design-system/index.js";
+import { Button } from "../../components/buttons.js";
+import { Img } from "../../components/Img.js";
+import { cleanedChainName } from "./utils.js";
+
+export function SelectChainButton(props: {
+  selectedChain: BridgeChain;
+  client: ThirdwebClient;
+  onClick: () => void;
+}) {
+  return (
+    <Button
+      variant="secondary"
+      fullWidth
+      style={{
+        justifyContent: "flex-start",
+        fontWeight: 500,
+        fontSize: fontSize.md,
+        padding: `${spacing.sm} ${spacing.sm}`,
+        minHeight: "48px",
+      }}
+      gap="sm"
+      onClick={props.onClick}
+    >
+      <Img
+        src={props.selectedChain.icon}
+        client={props.client}
+        width={iconSize.lg}
+        height={iconSize.lg}
+      />
+      <span> {cleanedChainName(props.selectedChain.name)} </span>
+
+      <ChevronDownIcon
+        width={iconSize.sm}
+        height={iconSize.sm}
+        style={{ marginLeft: "auto" }}
+      />
+    </Button>
+  );
+}