nit: adjust chain icon position

Author: gregfromstl

packages/thirdweb/src/react/core/hooks/usePaymentMethods.ts

@@ -3,7 +3,6 @@ import { routes } from "../../../bridge/Routes.js";
 import type { Token } from "../../../bridge/types/Token.js";
 import { getCachedChain } from "../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../client/client.js";
-import { NATIVE_TOKEN_ADDRESS } from "../../../constants/addresses.js";
 import { isInsightEnabled } from "../../../insight/common.js";
 import { getOwnedTokens } from "../../../insight/get-tokens.js";
 import { toTokens } from "../../../utils/units.js";
@@ -199,36 +198,3 @@ export function usePaymentMethods(options: {
     refetch: routesQuery.refetch,
   };
 }
-
-function sortOwnedTokens(
-  owned: OwnedTokenWithQuote[],
-  destinationToken: Token,
-) {
-  return [
-    ...owned.filter((t) => t.originToken.chainId === destinationToken.chainId),
-    ...owned.filter(
-      (t) =>
-        t.originToken.chainId !== destinationToken.chainId &&
-        t.originToken.address.toLowerCase() ===
-          NATIVE_TOKEN_ADDRESS.toLowerCase(),
-    ),
-    ...owned.filter(
-      (t) =>
-        t.originToken.chainId !== destinationToken.chainId &&
-        t.originToken.symbol === "USDC",
-    ),
-    ...owned.filter(
-      (t) =>
-        t.originToken.chainId !== destinationToken.chainId &&
-        t.originToken.symbol === "USDT",
-    ),
-    ...owned.filter(
-      (t) =>
-        t.originToken.chainId !== destinationToken.chainId &&
-        t.originToken.address.toLowerCase() !==
-          NATIVE_TOKEN_ADDRESS.toLowerCase() &&
-        t.originToken.symbol !== "USDC" &&
-        t.originToken.symbol !== "USDT",
-    ),
-  ];
-}

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

@@ -56,7 +56,7 @@ export function TokenAndChain({
             style={{
               position: "absolute",
               bottom: "-2px",
-              right: "-2px",
+              right: "-6px",
               width: size === "lg" || size === "xl" ? iconSize.sm : iconSize.xs,
               height:
                 size === "lg" || size === "xl" ? iconSize.sm : iconSize.xs,

packages/thirdweb/src/stories/Bridge/RoutePreview.stories.tsx

@@ -10,6 +10,7 @@ import {
   STORY_MOCK_WALLET,
   buyWithApprovalQuote,
   complexBuyQuote,
+  longTokenNameBuyQuote,
   onrampWithSwapsQuote,
   simpleBuyQuote,
   simpleOnrampQuote,
@@ -219,6 +220,23 @@ export const BuySimpleLight: Story = {
   },
 };
 
+export const BuyWithLongTokenName: Story = {
+  args: {
+    theme: "dark",
+    preparedQuote: longTokenNameBuyQuote,
+    paymentMethod: ethCryptoPaymentMethod,
+    client: storyClient,
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+    docs: {
+      description: {
+        story: "Simple buy quote with a single transaction (light theme).",
+      },
+    },
+  },
+};
+
 export const BuyWithApproval: Story = {
   args: {
     theme: "dark",

packages/thirdweb/src/stories/Bridge/fixtures.ts

@@ -273,6 +273,64 @@ export const simpleBuyQuote: BridgePrepareResult = JSON.parse(
   }),
 );
 
+export const longTokenNameBuyQuote: BridgePrepareResult = JSON.parse(
+  stringify({
+    type: "buy",
+    originAmount: 1000000000000000000n, // 1 ETH
+    destinationAmount: 100000000n, // 100 USDC
+    timestamp: Date.now(),
+    estimatedExecutionTimeMs: 60000,
+    steps: [
+      {
+        originToken: {
+          chainId: 1,
+          address: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
+          name: "Ethereum",
+          symbol: "ETH",
+          decimals: 18,
+          priceUsd: 2500.0,
+          iconUri:
+            "https://assets.coingecko.com/coins/images/6319/large/USD_Coin_icon.png",
+        },
+        destinationToken: {
+          chainId: 42793,
+          address: "0x796Ea11Fa2dD751eD01b53C372fFDB4AAa8f00F9",
+          name: "USD Coin (USDC.e on Etherlink)",
+          symbol: "USDC.e",
+          decimals: 6,
+          priceUsd: 1.0,
+          iconUri:
+            "https://assets.coingecko.com/coins/images/6319/large/USD_Coin_icon.png",
+        },
+        originAmount: 1000000000000000000n,
+        destinationAmount: 100000000n,
+        estimatedExecutionTimeMs: 60000,
+        transactions: [
+          {
+            action: "buy",
+            id: "0xsingle123",
+            to: "0x68b3465833fb72A70ecDF485E0e4C7bD8665Fc45",
+            data: "0x472b43f3",
+            value: 1000000000000000000n,
+            chainId: 1,
+            client: storyClient,
+            chain: defineChain(1),
+          },
+        ],
+      },
+    ],
+    intent: {
+      originChainId: 1,
+      originTokenAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
+      destinationChainId: 1,
+      destinationTokenAddress: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
+      amount: 100000000n,
+      sender: "0xa3841994009B4fEabb01ebcC62062F9E56F701CD",
+      receiver: "0xa3841994009B4fEabb01ebcC62062F9E56F701CD",
+    },
+  }),
+);
+
 // Buy quote with approval + buy in single step
 export const buyWithApprovalQuote: BridgePrepareResult = JSON.parse(
   stringify({