thirdweb 5.92.3 → 5.93.0

package/src/bridge/Status.ts

@@ -0,0 +1,163 @@
+import type { Hex as ox__Hex } from "ox";
+import type { ThirdwebClient } from "../client/client.js";
+import { getClientFetch } from "../utils/fetch.js";
+import { UNIVERSAL_BRIDGE_URL } from "./constants.js";
+import type { Status } from "./types/Status.js";
+
+/**
+ * Retrieves a Universal Bridge quote for the provided sell intent. The quote will specify the expected `destinationAmount` that will be received in exchange for the specified `originAmount`, which is specified with the `sellAmountWei` option.
+ *
++ * The returned status will include both the origin and destination transactions and any finalized amounts for the route.
+ *
+ * @example
+ * ```typescript
+ * import { Bridge } from "thirdweb";
+ *
+ * const status = await Bridge.status({
+ *   transactionHash: "0xe199ef82a0b6215221536e18ec512813c1aa10b4f5ed0d4dfdfcd703578da56d",
+ *   chainId: 8453,
+ *   client: thirdwebClient,
+ * });
+ * ```
+ *
+ * If the transaction is complete, a response might look like:
+ * ```typescript
+ * {
+ *   status: 'COMPLETED',
+ *   originAmount: 200000000000000n,
+ *   destinationAmount: 188625148000000n,
+ *   originChainId: 8453,
+ *   destinationChainId: 2741,
+ *   originTokenAddress: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
+ *   destinationTokenAddress: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
+ *   transactions: [
+ *     {
+ *       chainId: 8453,
+ *       transactionHash: '0xe199ef82a0b6215221536e18ec512813c1aa10b4f5ed0d4dfdfcd703578da56d'
+ *     },
+ *     {
+ *       chainId: 2741,
+ *       transactionHash: '0xa70a82f42330f54be95a542e1fcfe6ed2dd9f07fb8c82ae67afb4342319f7433'
+ *     }
+ *   ]
+ * }
+ * ```
+ *
+ * If the origin transaction hasn't been mined yet, a response might look like:
+ * ```typescript
+ * {
+ *   status: "NOT_FOUND",
+ * }
+ * ```
+ * This is to allow you to poll for the status without catching an error. Be sure your transaction hash and chain are correct though, as this could also represent a legitimate 404 if the transaction doesn't exist.
+ *
+ * If the transaction is still pending, a response might look like:
+ * ```typescript
+ * {
+ *   status: "PENDING",
+ *   originAmount: 1000000000000000000n,
+ *   originChainId: 466,
+ *   destinationChainId: 1,
+ *   originTokenAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
+ *   destinationTokenAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
+ *   transactions: [
+ *     {
+ *       transactionHash: "0xe199ef82a0b6215221536e18ec512813c1aa10b4f5ed0d4dfdfcd703578da56d",
+ *       chainId: 466,
+ *     }
+ *   ]
+ * }
+ * ```
+ *
+ * If the transaction failed, a response might look like:
+ * ```typescript
+ * {
+ *   status: "FAILED",
+ *   transactions: [
+ *     {
+ *       transactionHash: "0xe199ef82a0b6215221536e18ec512813c1aa10b4f5ed0d4dfdfcd703578da56d",
+ *       chainId: 466,
+ *     }
+ *   ]
+ * }
+ * ```
+ *
+ * This status is for a **single origin transaction only**. If your route involves multiple transactions, you'll need to get the status for each of them individually.
+ *
+ * If sending multiple dependent sequential transactions, wait until `status` returns `COMPLETED` before sending the next transaction.
+ *
+ * You can access this function's input and output types with `status.Options` and `status.Result`, respectively.
+ *
+ * @param options - The options for the quote.
+ * @param options.transactionHash - The hash of the origin transaction to get the bridge status for.
+ * @param options.chainId - The chain ID of the origin token.
+ * @param options.client - Your thirdweb client.
+ *
+ * @returns A promise that resolves to a status object for the transaction.
+ *
+ * @throws Will throw an error if there is an issue fetching the status.
+ * @bridge
+ * @beta
+ */
+export async function status(options: status.Options): Promise<status.Result> {
+  const { transactionHash, chainId, client } = options;
+
+  const clientFetch = getClientFetch(client);
+  const url = new URL(`${UNIVERSAL_BRIDGE_URL}/status`);
+  url.searchParams.set("transactionHash", transactionHash);
+  url.searchParams.set("chainId", chainId.toString());
+
+  const response = await clientFetch(url.toString());
+  if (!response.ok) {
+    const errorJson = await response.json();
+    throw new Error(`${errorJson.code}: ${errorJson.message}`);
+  }
+
+  const { data }: { data: Status } = await response.json();
+  if (data.status === "FAILED") {
+    return {
+      status: "FAILED",
+      transactions: data.transactions,
+    };
+  }
+
+  if (data.status === "PENDING") {
+    return {
+      status: "PENDING",
+      originAmount: BigInt(data.originAmount),
+      originChainId: data.originChainId,
+      destinationChainId: data.destinationChainId,
+      originTokenAddress: data.originTokenAddress,
+      destinationTokenAddress: data.destinationTokenAddress,
+      transactions: data.transactions,
+    };
+  }
+
+  if (data.status === "NOT_FOUND") {
+    return {
+      status: "NOT_FOUND",
+      transactions: [],
+    };
+  }
+
+  return {
+    status: "COMPLETED",
+    originAmount: BigInt(data.originAmount),
+    destinationAmount: BigInt(data.destinationAmount),
+    originChainId: data.originChainId,
+    destinationChainId: data.destinationChainId,
+    originTokenAddress: data.originTokenAddress,
+    destinationTokenAddress: data.destinationTokenAddress,
+    transactions: data.transactions,
+  };
+}
+
+export declare namespace status {
+  type Options = {
+    transactionHash: ox__Hex.Hex;
+    chainId: number;
+    client: ThirdwebClient;
+  };
+
+  type Result = Status;
+}

package/src/bridge/constants.ts

@@ -0,0 +1 @@
+export const UNIVERSAL_BRIDGE_URL = "https://bridge.thirdweb.com/v1";

package/src/bridge/index.ts

@@ -0,0 +1,8 @@
+export * as Buy from "./Buy.js";
+export * as Sell from "./Sell.js";
+export { status } from "./Status.js";
+export { routes } from "./Routes.js";
+
+export type { Status } from "./types/Status.js";
+export type { Route } from "./types/Route.js";
+export type { Quote, PreparedQuote } from "./types/Quote.js";

package/src/bridge/types/Quote.ts

@@ -0,0 +1,42 @@
+import type { TransactionEnvelopeEip1559 as ox__TransactionEnvelopeEip1559 } from "ox";
+
+export type Quote = {
+  /**
+   * The input amount (in wei) including fees to be paid.
+   */
+  originAmount: bigint;
+  /**
+   * The output amount (in wei) to be received.
+   */
+  destinationAmount: bigint;
+  /**
+   * The blocknumber this quote was generated at.
+   */
+  blockNumber?: bigint;
+  /**
+   * The timestamp this quote was generated at.
+   */
+  timestamp: number;
+  /**
+   * The estimated execution time in milliseconds.
+   */
+  estimatedExecutionTimeMs?: number | undefined;
+};
+
+export type PreparedQuote = Quote & {
+  /**
+   * The expiration timestamp for the quote. All transactions must be executed before this timestamp to guarantee successful execution at the specified price.
+   */
+  expiration?: number | undefined;
+  /**
+   * A series of [ox](https://oxlib.sh) EIP-1559 transactions that must be executed in sequential order to fulfill the complete route.
+   */
+  transactions: Array<
+    ox__TransactionEnvelopeEip1559.TransactionEnvelopeEip1559<
+      false,
+      bigint,
+      number,
+      "eip1559"
+    >
+  >;
+};

package/src/bridge/types/Route.ts

@@ -0,0 +1,20 @@
+import type { Address as ox__Address } from "ox";
+
+export type Route = {
+  originToken: {
+    chainId: number;
+    address: ox__Address.Address;
+    decimals: number;
+    symbol: string;
+    name: string;
+    iconUri?: string;
+  };
+  destinationToken: {
+    chainId: number;
+    address: string;
+    decimals: number;
+    symbol: string;
+    name: string;
+    iconUri?: string;
+  };
+};

package/src/bridge/types/Status.ts

@@ -0,0 +1,39 @@
+import type { Address as ox__Address, Hex as ox__Hex } from "ox";
+
+export type Status =
+  | {
+      status: "COMPLETED";
+      originAmount: bigint;
+      destinationAmount: bigint;
+      originChainId: number;
+      destinationChainId: number;
+      originTokenAddress: ox__Address.Address;
+      destinationTokenAddress: ox__Address.Address;
+      transactions: Array<{
+        chainId: number;
+        transactionHash: ox__Hex.Hex;
+      }>;
+    }
+  | {
+      status: "PENDING";
+      originAmount: bigint;
+      originChainId: number;
+      destinationChainId: number;
+      originTokenAddress: ox__Address.Address;
+      destinationTokenAddress: ox__Address.Address;
+      transactions: Array<{
+        chainId: number;
+        transactionHash: ox__Hex.Hex;
+      }>;
+    }
+  | {
+      status: "FAILED";
+      transactions: Array<{
+        chainId: number;
+        transactionHash: ox__Hex.Hex;
+      }>;
+    }
+  | {
+      status: "NOT_FOUND";
+      transactions: [];
+    };

package/src/exports/bridge.ts

@@ -0,0 +1 @@
+export * from "../bridge/index.js";

package/src/exports/thirdweb.ts

@@ -71,6 +71,11 @@ export {
   type ThirdwebContract,
 } from "../contract/contract.js";
 
+/**
+ * UNIVERSAL BRIDGE
+ */
+export * as Bridge from "../bridge/index.js";
+
 /**
  * WALLETS
  */

package/src/react/web/ui/ConnectWallet/WalletSelector.tsx

@@ -183,6 +183,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
         props.selectWallet(localWalletConfig);
       }}
       data-test="continue-as-guest-button"
+      disabled={props.meta.requireApproval && !approvedTOS}
     >
       {props.connectLocale.continueAsGuest}
     </Button>
@@ -227,6 +228,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
     <WalletTypeRowButton
       client={props.client}
       icon={OutlineWalletIcon}
+      disabled={props.meta.requireApproval && !approvedTOS}
       onClick={() => {
         setIsWalletGroupExpanded(true);
       }}

package/src/react/web/ui/ConnectWallet/screens/Buy/fiat/OnRampScreen.tsx

@@ -90,9 +90,6 @@ export function OnRampScreen(props: {
     isAutoMode,
   });
   const firstStepChainId = state.steps[0]?.step.token.chainId;
-  const currentStepIndex = state.steps.findIndex(
-    (step) => step.status === "pending" || step.status === "actionRequired",
-  );
   return (
     <Container p="lg">
       <ModalHeader title={props.title} onBack={props.onBack} />
@@ -131,9 +128,7 @@ export function OnRampScreen(props: {
                 index={index}
               />
             </StepContainer>
-            {index < state.steps.length - 1 && (
-              <StepConnectorArrow active={index === currentStepIndex} />
-            )}
+            {index < state.steps.length - 1 && <StepConnectorArrow />}
           </Container>
         ))}
       </Container>

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/StepConnector.tsx

@@ -1,9 +1,8 @@
+import { ChevronDownIcon } from "@radix-ui/react-icons";
 import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
 import { Container } from "../../../../components/basic.js";
 
-export function StepConnectorArrow(props: {
-  active: boolean;
-}) {
+export function StepConnectorArrow() {
   const theme = useCustomTheme();
   return (
     <Container
@@ -11,45 +10,25 @@ export function StepConnectorArrow(props: {
       center="both"
       style={{
         width: "100%",
-        height: "12px",
         position: "relative",
-        marginTop: "-1px",
+        marginTop: "-10px",
+        marginBottom: "-10px",
         zIndex: 1000,
       }}
     >
-      <svg
-        role="presentation"
-        width="32"
-        height="16"
-        viewBox="0 0 32 16"
-        fill="none"
+      <Container
+        flex="row"
+        center="both"
         style={{
-          display: "block",
+          borderRadius: "100%",
+          width: "30px",
+          height: "30px",
+          backgroundColor: theme.colors.modalBg,
+          border: `1px solid ${theme.colors.borderColor}`,
         }}
       >
-        <path
-          d="M1 0L16 15L31 0"
-          fill={theme.colors.tertiaryBg}
-          stroke={
-            props.active ? theme.colors.accentText : theme.colors.borderColor
-          }
-          strokeWidth="1"
-          strokeLinecap="square"
-          strokeLinejoin="miter"
-        />
-        <path
-          d="M8 0L16 7.5L24 0"
-          fill="none"
-          stroke={
-            props.active
-              ? theme.colors.accentText
-              : theme.colors.secondaryIconColor
-          }
-          strokeWidth="1"
-          strokeLinecap="square"
-          strokeLinejoin="miter"
-        />
-      </svg>
+        <ChevronDownIcon width={16} height={16} />
+      </Container>
     </Container>
   );
 }

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapSummary.tsx

@@ -64,7 +64,7 @@ export function SwapSummary(props: {
         />
       </Container>
       {/* Connector Icon */}
-      <StepConnectorArrow active={false} />
+      <StepConnectorArrow />
       {/* Buy */}
       <Container
         flex="column"

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.92.3";
+export const version = "5.93.0";