0xtrails 0.0.1 → 0.0.2

package/src/types.d.ts

@@ -0,0 +1,11 @@
+declare global {
+  interface Window {
+    Buffer: typeof import("buffer").Buffer
+    ethereum?: any
+  }
+}
+
+declare module "*.svg" {
+  const content: string
+  export default content
+}

package/src/umd.tsx

@@ -0,0 +1,49 @@
+import React from "react"
+import { createRoot } from "react-dom/client"
+import type { RelayerEnv } from "./relayer.js"
+import type { Theme } from "./theme.js"
+import { TrailsWidget } from "./widget/widget.js"
+
+interface TrailsGlobal {
+  render: (
+    element: HTMLElement,
+    options: {
+      appId: string
+      indexerUrl?: string
+      apiUrl?: string
+      env?: RelayerEnv
+      toRecipient?: string
+      toAmount?: string
+      toChainId?: number | string
+      toToken?: string
+      toCalldata?: string
+      theme?: Theme
+    },
+  ) => void
+}
+
+const TrailsGlobal: TrailsGlobal = {
+  render: (element, options) => {
+    const root = createRoot(element)
+    root.render(
+      <React.StrictMode>
+        <TrailsWidget {...options} />
+      </React.StrictMode>,
+    )
+  },
+}
+
+// Export for both UMD and ESM/CJS
+export default TrailsGlobal
+
+// Explicitly set the global for UMD
+if (typeof window !== "undefined") {
+  window.TrailsWidget = TrailsGlobal
+}
+
+// Add type declaration for window object
+declare global {
+  interface Window {
+    TrailsWidget: TrailsGlobal
+  }
+}

package/src/utils.ts

@@ -0,0 +1,16 @@
+export async function requestWithTimeout<T>(
+  client: { request: (...args: any[]) => Promise<T> },
+  args: Parameters<typeof client.request>,
+  timeoutMs: number,
+): Promise<T> {
+  return Promise.race([
+    client.request(...args),
+    new Promise<never>((_, reject) =>
+      setTimeout(() => reject(new Error("Request timed out")), timeoutMs),
+    ),
+  ])
+}
+
+export function bigintToString(n: bigint): string {
+  return n.toString()
+}

package/src/vite-env.d.ts

@@ -0,0 +1,4 @@
+declare module "*.css?inline" {
+  const content: string
+  export default content
+}

package/src/widget/assets/MetaMask-icon-fox-with-margins.svg

@@ -0,0 +1,31 @@
+<svg width="1025" height="1025" viewBox="0 0 1025 1025" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_542_3186)">
+<path d="M862.005 871.546L689.114 820.065L558.73 898.006L467.763 897.968L337.303 820.065L164.488 871.546L111.92 694.087L164.488 497.133L111.92 330.613L164.488 124.233L434.526 285.567H591.967L862.005 124.233L914.573 330.613L862.005 497.133L914.573 694.087L862.005 871.546Z" fill="#FF5C16"/>
+<path d="M164.527 124.233L434.566 285.68L423.826 396.479L164.527 124.233Z" fill="#FF5C16"/>
+<path d="M337.34 694.163L456.155 784.672L337.34 820.065V694.163Z" fill="#FF5C16"/>
+<path d="M446.659 544.525L423.823 396.554L277.65 497.169L277.574 497.132V497.207L278.026 600.776L337.302 544.525H337.34H446.659Z" fill="#FF5C16"/>
+<path d="M862.005 124.233L591.967 285.68L602.669 396.479L862.005 124.233Z" fill="#FF5C16"/>
+<path d="M689.19 694.163L570.375 784.672L689.19 820.065V694.163Z" fill="#FF5C16"/>
+<path d="M748.922 497.207H748.96H748.922V497.132L748.884 497.169L602.711 396.554L579.875 544.525H689.194L748.508 600.776L748.922 497.207Z" fill="#FF5C16"/>
+<path d="M337.303 820.062L164.488 871.544L111.92 694.16H337.303V820.062Z" fill="#E34807"/>
+<path d="M446.623 544.487L479.634 758.4L433.886 639.463L277.953 600.776L337.267 544.487H446.586H446.623Z" fill="#E34807"/>
+<path d="M689.188 820.062L862.003 871.544L914.571 694.16H689.188V820.062Z" fill="#E34807"/>
+<path d="M579.87 544.487L546.859 758.4L592.607 639.463L748.54 600.776L689.189 544.487H579.87Z" fill="#E34807"/>
+<path d="M111.92 694.085L164.488 497.131H277.538L277.952 600.737L433.886 639.424L479.633 758.361L456.119 784.556L337.304 694.047H111.92V694.085Z" fill="#FF8D5D"/>
+<path d="M914.573 694.085L862.004 497.131H748.955L748.54 600.737L592.607 639.424L546.859 758.361L570.374 784.556L689.189 694.047H914.573V694.085Z" fill="#FF8D5D"/>
+<path d="M591.969 285.567H513.249H434.528L423.826 396.366L479.635 758.25H546.862L602.709 396.366L591.969 285.567Z" fill="#FF8D5D"/>
+<path d="M164.488 124.233L111.92 330.613L164.488 497.133H277.538L423.787 396.479L164.488 124.233Z" fill="#661800"/>
+<path d="M413.951 587.451H362.739L334.854 614.781L433.923 639.349L413.951 587.413V587.451Z" fill="#661800"/>
+<path d="M862.006 124.233L914.574 330.613L862.006 497.133H748.956L602.707 396.479L862.006 124.233Z" fill="#661800"/>
+<path d="M612.617 587.451H663.904L691.79 614.819L592.607 639.424L612.617 587.413V587.451Z" fill="#661800"/>
+<path d="M558.692 827.41L570.373 784.635L546.859 758.44H479.594L456.08 784.635L467.762 827.41" fill="#661800"/>
+<path d="M558.689 827.407V898.043H467.76V827.407H558.689Z" fill="#C0C4CD"/>
+<path d="M337.34 819.99L467.837 898.007V827.372L456.155 784.597L337.34 819.99Z" fill="#E7EBF6"/>
+<path d="M689.19 819.99L558.693 898.007V827.372L570.375 784.597L689.19 819.99Z" fill="#E7EBF6"/>
+</g>
+<defs>
+<clipPath id="clip0_542_3186">
+<rect width="1024" height="1024" fill="white" transform="translate(0.986328 0.5)"/>
+</clipPath>
+</defs>
+</svg>

package/src/widget/assets/MetaMask-icon-fox.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 29.4.0, SVG Export Plug-In . SVG Version: 9.03 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 142 136.878" style="enable-background:new 0 0 142 136.878;" xml:space="preserve">
+<path style="fill:#FF5C16;" d="M132.682,132.192l-30.583-9.106l-23.063,13.787l-16.092-0.007l-23.077-13.78l-30.569,9.106L0,100.801
+	l9.299-34.839L0,36.507L9.299,0l47.766,28.538h27.85L132.682,0l9.299,36.507l-9.299,29.455l9.299,34.839L132.682,132.192
+	L132.682,132.192z"/>
+<path style="fill:#FF5C16;" d="M9.305,0l47.767,28.558l-1.899,19.599L9.305,0z M39.875,100.814l21.017,16.01l-21.017,6.261
+	C39.875,123.085,39.875,100.814,39.875,100.814z M59.212,74.345l-4.039-26.174L29.317,65.97l-0.014-0.007v0.013l0.08,18.321
+	l10.485-9.951L59.212,74.345L59.212,74.345z M132.682,0L84.915,28.558l1.893,19.599L132.682,0z M102.113,100.814l-21.018,16.01
+	l21.018,6.261V100.814z M112.678,65.975h0.007H112.678v-0.013l-0.006,0.007L86.815,48.171l-4.039,26.174h19.336l10.492,9.95
+	C112.604,84.295,112.678,65.975,112.678,65.975z"/>
+<path style="fill:#E34807;" d="M39.868,123.085l-30.569,9.106L0,100.814h39.868C39.868,100.814,39.868,123.085,39.868,123.085z
+	 M59.205,74.338l5.839,37.84l-8.093-21.04L29.37,84.295l10.491-9.956h19.344L59.205,74.338z M102.112,123.085l30.57,9.106
+	l9.299-31.378h-39.869C102.112,100.814,102.112,123.085,102.112,123.085z M82.776,74.338l-5.839,37.84l8.092-21.04l27.583-6.843
+	l-10.498-9.956H82.776V74.338z"/>
+<path style="fill:#FF8D5D;" d="M0,100.801l9.299-34.839h19.997l0.073,18.327l27.584,6.843l8.092,21.039l-4.16,4.633l-21.017-16.01H0
+	V100.801z M141.981,100.801l-9.299-34.839h-19.998l-0.073,18.327l-27.582,6.843l-8.093,21.039l4.159,4.633l21.018-16.01h39.868
+	V100.801z M84.915,28.538h-27.85l-1.891,19.599l9.872,64.013h11.891l9.878-64.013L84.915,28.538z"/>
+<path style="fill:#661800;" d="M9.299,0L0,36.507l9.299,29.455h19.997l25.87-17.804L9.299,0z M53.426,81.938h-9.059l-4.932,4.835
+	l17.524,4.344l-3.533-9.186V81.938z M132.682,0l9.299,36.507l-9.299,29.455h-19.998L86.815,48.158L132.682,0z M88.568,81.938h9.072
+	l4.932,4.841l-17.544,4.353l3.54-9.201V81.938z M79.029,124.385l2.067-7.567l-4.16-4.633h-11.9l-4.159,4.633l2.066,7.567"/>
+<path style="fill:#C0C4CD;" d="M79.029,124.384v12.495H62.945v-12.495L79.029,124.384L79.029,124.384z"/>
+<path style="fill:#E7EBF6;" d="M39.875,123.072l23.083,13.8v-12.495l-2.067-7.566C60.891,116.811,39.875,123.072,39.875,123.072z
+	 M102.113,123.072l-23.084,13.8v-12.495l2.067-7.566C81.096,116.811,102.113,123.072,102.113,123.072z"/>
+</svg>

package/src/widget/assets/MetaMask-logo-black.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 127 63">
+  <path fill="currentColor" d="M71.554 48.607v13.81h-7.072v-9.568l-8.059.945c-1.77.205-2.548.79-2.548 1.864 0 1.575 1.478 2.239 4.648 2.239 1.932 0 4.073-.29 5.963-.79l-3.66 5.225c-1.479.332-2.92.496-4.44.496-6.414 0-10.074-2.57-10.074-7.132 0-4.023 2.877-6.136 9.416-6.884l8.638-1.012c-.467-2.532-2.362-3.633-6.13-3.633-3.537 0-7.443.912-10.937 2.613l1.111-6.18c3.248-1.369 6.95-2.074 10.69-2.074 8.226 0 12.461 3.444 12.461 10.075l-.008.005ZM7.938 31.315.208 62.416h7.73l3.836-15.628 6.65 8.039h8.06l6.65-8.039 3.836 15.628h7.73l-7.73-31.105-14.518 17.388L7.934 31.311l.004.004ZM36.97.21 22.452 17.598 7.938.21.208 31.315h7.73l3.836-15.628 6.65 8.039h8.06l6.65-8.039 3.836 15.628h7.73L36.97.21Zm53.17 48.107-6.25-.912c-1.562-.247-2.178-.747-2.178-1.617 0-1.41 1.52-2.032 4.647-2.032 3.62 0 6.868.747 10.283 2.364l-.862-6.094c-2.757-.995-5.922-1.491-9.212-1.491-7.688 0-11.886 2.696-11.886 7.547 0 3.776 2.303 5.889 7.196 6.636l6.335.954c1.603.248 2.261.87 2.261 1.865 0 1.41-1.478 2.074-4.481 2.074-3.948 0-8.225-.953-11.72-2.654l.7 6.094c3.003 1.122 6.91 1.785 10.57 1.785 7.896 0 12.007-2.78 12.007-7.715 0-3.94-2.303-6.057-7.4-6.8l-.01-.004ZM100.3 34.09v28.325h7.071V34.091H100.3Zm15.334 15.595 9.833-10.744h-8.8l-9.296 11.114 9.912 12.356h8.925l-10.574-12.73v.004Zm-16.321-25.09c0 4.56 3.66 7.13 10.074 7.13 1.52 0 2.961-.167 4.44-.495l3.66-5.225c-1.89.496-4.031.79-5.963.79-3.166 0-4.648-.664-4.648-2.239 0-1.079.783-1.659 2.549-1.864l8.058-.945v9.567h7.072v-13.81c0-6.635-4.236-10.075-12.461-10.075-3.744 0-7.442.705-10.691 2.075l-1.112 6.178c3.495-1.701 7.401-2.613 10.937-2.613 3.769 0 5.664 1.1 6.13 3.633l-8.637 1.013c-6.539.747-9.417 2.86-9.417 6.883l.009-.004Zm-19.779-1.492c0 5.725 3.29 8.627 9.787 8.627 2.59 0 4.732-.416 6.785-1.37l.903-6.261c-1.974 1.2-3.99 1.822-6.005 1.822-3.044 0-4.402-1.243-4.402-4.023v-8.295h10.732V7.84H86.601V2.948l-13.448 7.174v3.482h6.372V23.1l.008.004Zm-6.95-2.612v1.411H53.47c.862 2.873 3.423 4.187 7.97 4.187 3.62 0 6.993-.747 9.992-2.196l-.862 6.056c-2.757 1.16-6.251 1.785-9.829 1.785-9.5 0-14.68-4.23-14.68-12.066 0-7.838 5.264-12.235 13.406-12.235s13.119 4.771 13.119 13.062l-.005-.004ZM53.378 17.09h12.086c-.637-2.751-2.732-4.188-6.08-4.188-3.349 0-5.335 1.399-6.006 4.188Z"/>
+</svg>

package/src/widget/assets/MetaMask-logo-white.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 127 63">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.7.1, SVG Export Plug-In . SVG Version: 1.2.0 Build 142)  -->
+  <g>
+    <g id="Layer_1">
+      <path class="cls-1" d="M71.6,48.6v13.8h-7.1v-9.6l-8.1.9c-1.8.2-2.5.8-2.5,1.9,0,1.6,1.5,2.2,4.6,2.2s4.1-.3,6-.8l-3.7,5.2c-1.5.3-2.9.5-4.4.5-6.4,0-10.1-2.6-10.1-7.1s2.9-6.1,9.4-6.9l8.6-1c-.5-2.5-2.4-3.6-6.1-3.6s-7.4.9-10.9,2.6l1.1-6.2c3.2-1.4,7-2.1,10.7-2.1,8.2,0,12.5,3.4,12.5,10.1h0s0,0,0,0ZM7.9,31.3L.2,62.4h7.7l3.8-15.6,6.6,8h8.1l6.7-8,3.8,15.6h7.7l-7.7-31.1-14.5,17.4L7.9,31.3h0ZM37,.2l-14.5,17.4L7.9.2.2,31.3h7.7l3.8-15.6,6.6,8h8.1l6.7-8,3.8,15.6h7.7L37,.2ZM90.1,48.3l-6.2-.9c-1.6-.2-2.2-.7-2.2-1.6,0-1.4,1.5-2,4.6-2s6.9.7,10.3,2.4l-.9-6.1c-2.8-1-5.9-1.5-9.2-1.5-7.7,0-11.9,2.7-11.9,7.5s2.3,5.9,7.2,6.6l6.3,1c1.6.2,2.3.9,2.3,1.9,0,1.4-1.5,2.1-4.5,2.1s-8.2-1-11.7-2.7l.7,6.1c3,1.1,6.9,1.8,10.6,1.8,7.9,0,12-2.8,12-7.7s-2.3-6.1-7.4-6.8h0s0,0,0,0ZM100.3,34.1v28.3h7.1v-28.3h-7.1ZM115.6,49.7l9.8-10.7h-8.8l-9.3,11.1,9.9,12.4h8.9l-10.6-12.7s0,0,0,0ZM99.3,24.6c0,4.6,3.7,7.1,10.1,7.1s3-.2,4.4-.5l3.7-5.2c-1.9.5-4,.8-6,.8-3.2,0-4.6-.7-4.6-2.2s.8-1.7,2.5-1.9l8.1-.9v9.6h7.1v-13.8c0-6.6-4.2-10.1-12.5-10.1s-7.4.7-10.7,2.1l-1.1,6.2c3.5-1.7,7.4-2.6,10.9-2.6s5.7,1.1,6.1,3.6l-8.6,1c-6.5.7-9.4,2.9-9.4,6.9h0s0,0,0,0ZM79.5,23.1c0,5.7,3.3,8.6,9.8,8.6s4.7-.4,6.8-1.4l.9-6.3c-2,1.2-4,1.8-6,1.8-3,0-4.4-1.2-4.4-4v-8.3h10.7v-5.8h-10.7V2.9l-13.4,7.2v3.5h6.4v9.5h0s0,0,0,0ZM72.6,20.5v1.4h-19.1c.9,2.9,3.4,4.2,8,4.2s7-.7,10-2.2l-.9,6.1c-2.8,1.2-6.3,1.8-9.8,1.8-9.5,0-14.7-4.2-14.7-12.1s5.3-12.2,13.4-12.2,13.1,4.8,13.1,13.1h0s0,0,0,0ZM53.4,17.1h12.1c-.6-2.8-2.7-4.2-6.1-4.2s-5.3,1.4-6,4.2Z"/>
+    </g>
+  </g>
+</svg>

package/src/widget/assets/Privy_Brandmark_Black.svg

@@ -0,0 +1,9 @@
+<svg width="346" height="78" viewBox="0 0 346 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M253.808 41.4359H252.758L239.096 1.81787H223.094V3.45587L242.366 58.7819H263.618L282.896 3.45587V1.81787H267.59L253.802 41.4359H253.808Z" fill="#010110"/>
+<path d="M218.834 1.81787H202.922V58.7759H218.834V1.81787Z" fill="#010110"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M330.164 1.81215H330.176L316.388 41.4422H315.338L301.676 1.81815H285.674V3.46815L306.608 63.5762H286.784V76.7702H306.158C314.432 76.7702 320.876 73.9802 324.002 65.0762C324.422 63.8882 345.47 3.45615 345.47 3.45615V1.80615H330.164V1.81215Z" fill="#010110"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M121.832 0.27002C114.596 0.27002 107.834 3.95402 103.616 10.878H102.638V1.87802H87.47V76.752H103.586V51.528H104.576C104.684 51.678 104.792 51.834 104.9 51.96C107.618 55.266 113.966 60.306 121.862 60.306C136.232 60.306 146.06 47.886 146.06 30.294C146.06 12.702 135.746 0.27002 121.832 0.27002ZM117.02 47.958C109.52 47.958 104.342 42.114 104.342 30.3C104.342 18.486 109.52 12.642 117.02 12.642C124.52 12.642 129.95 18.612 129.95 30.3C129.95 41.988 124.646 47.958 117.02 47.958Z" fill="#010110"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M186.032 1.81201C178.562 1.81201 173.768 3.06001 170.966 10.878H170.006V1.81801H146.936V14.898H152.084C153.782 14.898 154.616 15.498 154.832 16.89V27.762H154.892V58.782H171.008V28.566C171.008 20.742 173.132 15.948 180.956 15.948H197.84V1.81201H186.038H186.032Z" fill="#010110"/>
+<path d="M30.53 60.2881C47.096 60.2881 60.53 46.8541 60.53 30.2881C60.53 13.7221 47.096 0.288086 30.53 0.288086C13.964 0.288086 0.530029 13.7221 0.530029 30.2881C0.530029 46.8541 13.964 60.2881 30.53 60.2881Z" fill="#010110"/>
+<path d="M30.53 77.73C41.852 77.73 51.032 75.798 51.032 73.428C51.032 71.058 41.858 69.126 30.53 69.126C19.202 69.126 10.028 71.058 10.028 73.428C10.028 75.798 19.202 77.73 30.53 77.73Z" fill="#010110"/>
+</svg>

package/src/widget/assets/Privy_Brandmark_White.svg

@@ -0,0 +1,9 @@
+<svg width="346" height="78" viewBox="0 0 346 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M253.808 41.4361H252.758L239.096 1.81812H223.094V3.45612L242.366 58.7821H263.618L282.896 3.45612V1.81812H267.59L253.802 41.4361H253.808Z" fill="white"/>
+<path d="M218.834 1.81812H202.922V58.7761H218.834V1.81812Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M330.164 1.81215H330.176L316.388 41.4422H315.338L301.676 1.81815H285.674V3.46815L306.608 63.5762H286.784V76.7702H306.158C314.432 76.7702 320.876 73.9802 324.002 65.0762C324.422 63.8882 345.47 3.45615 345.47 3.45615V1.80615H330.164V1.81215Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M121.832 0.27002C114.596 0.27002 107.834 3.95402 103.616 10.878H102.638V1.87802H87.47V76.752H103.586V51.528H104.576C104.684 51.678 104.792 51.834 104.9 51.96C107.618 55.266 113.966 60.306 121.862 60.306C136.232 60.306 146.06 47.886 146.06 30.294C146.06 12.702 135.746 0.27002 121.832 0.27002ZM117.02 47.958C109.52 47.958 104.342 42.114 104.342 30.3C104.342 18.486 109.52 12.642 117.02 12.642C124.52 12.642 129.95 18.612 129.95 30.3C129.95 41.988 124.646 47.958 117.02 47.958Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M186.032 1.81201C178.562 1.81201 173.768 3.06001 170.966 10.878H170.006V1.81801H146.936V14.898H152.084C153.782 14.898 154.616 15.498 154.832 16.89V27.762H154.892V58.782H171.008V28.566C171.008 20.742 173.132 15.948 180.956 15.948H197.84V1.81201H186.038H186.032Z" fill="white"/>
+<path d="M30.53 60.2881C47.096 60.2881 60.53 46.8541 60.53 30.2881C60.53 13.7221 47.096 0.288086 30.53 0.288086C13.964 0.288086 0.530029 13.7221 0.530029 30.2881C0.530029 46.8541 13.964 60.2881 30.53 60.2881Z" fill="white"/>
+<path d="M30.53 77.73C41.852 77.73 51.032 75.798 51.032 73.428C51.032 71.058 41.858 69.126 30.53 69.126C19.202 69.126 10.028 71.058 10.028 73.428C10.028 75.798 19.202 77.73 30.53 77.73Z" fill="white"/>
+</svg>

package/src/widget/assets/Trails-logo-black.svg

@@ -0,0 +1,11 @@
+<svg width="88" height="34" viewBox="0 0 88 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.6446 28.5C37.5577 28.5 36.5651 28.3035 35.6667 27.9104C34.7794 27.5066 34.0752 26.9223 33.5539 26.1574C33.0326 25.3924 32.772 24.4575 32.772 23.3526C32.772 21.5571 33.4929 20.176 34.9347 19.2092C36.3765 18.2424 38.6391 17.7536 41.7224 17.743L43.4692 17.7271V16.8825C43.4692 16.2344 43.2751 15.751 42.8869 15.4323C42.5098 15.1029 41.9164 14.9436 41.1068 14.9542C40.5301 14.9648 39.9478 15.0976 39.36 15.3526C38.7722 15.5969 38.3563 16.0538 38.1123 16.7231H33.4707C33.5372 15.4801 33.9199 14.4655 34.6186 13.6793C35.3173 12.8931 36.249 12.3141 37.4135 11.9422C38.5892 11.5704 39.9034 11.3845 41.3564 11.3845C43.2418 11.3845 44.7335 11.6023 45.8315 12.0378C46.9296 12.4628 47.7115 13.0631 48.1773 13.8386C48.6542 14.6036 48.8926 15.5066 48.8926 16.5478V28.1813H44.1845L43.7021 25.4562C43.1586 26.6142 42.4765 27.411 41.6558 27.8466C40.8351 28.2822 39.8314 28.5 38.6446 28.5ZM40.5911 25.01C40.9682 25.01 41.3286 24.9462 41.6724 24.8187C42.0163 24.6912 42.3213 24.5159 42.5874 24.2928C42.8536 24.0591 43.0644 23.8041 43.2196 23.5279C43.3749 23.2517 43.4581 22.9542 43.4692 22.6355V20.3884L42.0717 20.4044C41.495 20.4044 40.8961 20.4788 40.275 20.6275C39.665 20.7762 39.1493 21.0259 38.7278 21.3765C38.3064 21.7165 38.0956 22.1892 38.0956 22.7948C38.0956 23.4854 38.3452 24.0272 38.8443 24.4203C39.3434 24.8134 39.9256 25.01 40.5911 25.01Z" fill="black"/>
+<path d="M19.5117 28.1813V11.7032H24.9685V15.9263C25.2346 15.0657 25.6173 14.2955 26.1164 13.6155C26.6266 12.925 27.2532 12.3831 27.9963 11.99C28.7394 11.5863 29.5989 11.3845 30.5749 11.3845C30.6969 11.3845 30.8023 11.3898 30.891 11.4004C30.9908 11.4004 31.0518 11.411 31.074 11.4323V16.5797C31.0186 16.5584 30.9465 16.5425 30.8577 16.5319C30.7801 16.5212 30.6969 16.5159 30.6082 16.5159C29.5213 16.4097 28.6229 16.4256 27.9131 16.5637C27.2144 16.7019 26.6598 16.925 26.2495 17.2331C25.8502 17.5412 25.5674 17.9077 25.401 18.3327C25.2457 18.7576 25.1681 19.2198 25.1681 19.7191V28.1813H19.5117Z" fill="black"/>
+<path d="M11.3461 28.3884C9.69352 28.3884 8.41251 28.1919 7.50306 27.7988C6.60469 27.3951 5.97805 26.8479 5.62314 26.1574C5.27933 25.4562 5.10742 24.6647 5.10742 23.7829V15.4163H2.3125V11.7032H5.30705L6.75442 6.6514H10.7638V11.6713H14.5403V15.4163H10.7638L10.7804 23.5438C10.7804 23.8732 10.8303 24.1175 10.9302 24.2769C11.0411 24.4363 11.1908 24.5425 11.3793 24.5956C11.5679 24.6487 11.7952 24.6753 12.0614 24.6753H14.5735V27.9422C14.3406 28.0379 13.9802 28.1335 13.4922 28.2291C13.0042 28.3353 12.2888 28.3884 11.3461 28.3884Z" fill="black"/>
+<path d="M66.5682 28.5C65.1375 28.5 64.0118 28.3459 63.1911 28.0378C62.3814 27.7297 61.788 27.3313 61.411 26.8426C61.0339 26.3433 60.7954 25.7908 60.6956 25.1853C60.6069 24.5797 60.5625 23.9794 60.5625 23.3845V4.5H66.1024V22.6833C66.1024 23.1826 66.1794 23.7863 66.4234 24.1582C66.6674 24.5194 67.1942 24.7478 68.0038 24.8434L68.7525 24.8912L68.7975 28.0538C68.4426 28.1706 68.0766 28.2716 67.6995 28.3566C67.3224 28.4522 66.9453 28.5 66.5682 28.5Z" fill="black"/>
+<path d="M51.9839 28.1813V11.7032H57.3741V28.1813H51.9839ZM51.9673 9.85458V5.13745H57.4074V9.85458H51.9673Z" fill="black"/>
+<rect x="66.1875" y="24.875" width="9.54688" height="3.625" fill="black"/>
+<path d="M76.3006 11.3848C78.5409 11.3848 80.3216 11.8522 81.6414 12.7871C82.961 13.722 83.6264 15.0127 83.6375 16.6592H78.9793C78.8573 16.0963 78.5411 15.6716 78.0311 15.3848C77.532 15.0873 76.9329 14.9385 76.2342 14.9385C75.5244 14.9385 74.9253 15.0554 74.4373 15.2891C73.9607 15.5121 73.7225 15.8519 73.7225 16.3086C73.7225 16.6592 73.9329 16.9408 74.3543 17.1533C74.7757 17.3658 75.4466 17.5576 76.367 17.7275L78.8797 18.2207C79.911 18.465 80.7482 18.7947 81.3914 19.209C82.0347 19.6127 82.5281 20.0542 82.8719 20.5322C83.2267 21.0102 83.4657 21.4879 83.5877 21.9658C83.7208 22.4332 83.7869 22.8478 83.7869 23.209C83.7869 24.3458 83.4598 25.3076 82.8055 26.0938C82.1622 26.8798 81.269 27.4802 80.1268 27.8945C78.9956 28.2981 77.709 28.5 76.2674 28.5C75.0698 28.5 73.8998 28.3091 72.7576 27.9268C71.6153 27.5443 70.6386 26.933 69.8289 26.0938C69.4823 25.7344 69.1889 25.3279 68.9481 24.875H76.2244C76.227 24.875 76.2297 24.875 76.2322 24.875C77.0527 24.875 77.7202 24.7552 78.2303 24.5322C78.7404 24.3091 78.9959 23.9685 78.9959 23.5117C78.9959 23.1294 78.835 22.8316 78.5135 22.6191C78.2029 22.3961 77.6533 22.2212 76.866 22.0938L74.0877 21.5996C72.5019 21.3127 71.2264 20.7863 70.2615 20.0215C69.2969 19.246 68.8088 18.152 68.7977 16.7393C68.7866 15.73 69.0696 14.8211 69.6463 14.0137C70.223 13.2064 71.0713 12.569 72.1912 12.1016C73.3114 11.6235 74.6815 11.3848 76.3006 11.3848Z" fill="black"/>
+<rect x="12.3125" y="11.6797" width="10.1875" height="3.74219" fill="black"/>
+<rect x="1.31738" y="11.6797" width="10.1875" height="3.74219" fill="black"/>
+</svg>

package/src/widget/assets/Trails-logo-white.svg

@@ -0,0 +1,11 @@
+<svg width="88" height="34" viewBox="0 0 88 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.6446 28.5C37.5577 28.5 36.5651 28.3035 35.6667 27.9104C34.7794 27.5066 34.0752 26.9223 33.5539 26.1574C33.0326 25.3924 32.772 24.4575 32.772 23.3526C32.772 21.5571 33.4929 20.176 34.9347 19.2092C36.3765 18.2424 38.6391 17.7536 41.7224 17.743L43.4692 17.7271V16.8825C43.4692 16.2344 43.2751 15.751 42.8869 15.4323C42.5098 15.1029 41.9164 14.9436 41.1068 14.9542C40.5301 14.9648 39.9478 15.0976 39.36 15.3526C38.7722 15.5969 38.3563 16.0538 38.1123 16.7231H33.4707C33.5372 15.4801 33.9199 14.4655 34.6186 13.6793C35.3173 12.8931 36.249 12.3141 37.4135 11.9422C38.5892 11.5704 39.9034 11.3845 41.3564 11.3845C43.2418 11.3845 44.7335 11.6023 45.8315 12.0378C46.9296 12.4628 47.7115 13.0631 48.1773 13.8386C48.6542 14.6036 48.8926 15.5066 48.8926 16.5478V28.1813H44.1845L43.7021 25.4562C43.1586 26.6142 42.4765 27.411 41.6558 27.8466C40.8351 28.2822 39.8314 28.5 38.6446 28.5ZM40.5911 25.01C40.9682 25.01 41.3286 24.9462 41.6724 24.8187C42.0163 24.6912 42.3213 24.5159 42.5874 24.2928C42.8536 24.0591 43.0644 23.8041 43.2196 23.5279C43.3749 23.2517 43.4581 22.9542 43.4692 22.6355V20.3884L42.0717 20.4044C41.495 20.4044 40.8961 20.4788 40.275 20.6275C39.665 20.7762 39.1493 21.0259 38.7278 21.3765C38.3064 21.7165 38.0956 22.1892 38.0956 22.7948C38.0956 23.4854 38.3452 24.0272 38.8443 24.4203C39.3434 24.8134 39.9256 25.01 40.5911 25.01Z" fill="white"/>
+<path d="M19.5117 28.1813V11.7032H24.9685V15.9263C25.2346 15.0657 25.6173 14.2955 26.1164 13.6155C26.6266 12.925 27.2532 12.3831 27.9963 11.99C28.7394 11.5863 29.5989 11.3845 30.5749 11.3845C30.6969 11.3845 30.8023 11.3898 30.891 11.4004C30.9908 11.4004 31.0518 11.411 31.074 11.4323V16.5797C31.0186 16.5584 30.9465 16.5425 30.8577 16.5319C30.7801 16.5212 30.6969 16.5159 30.6082 16.5159C29.5213 16.4097 28.6229 16.4256 27.9131 16.5637C27.2144 16.7019 26.6598 16.925 26.2495 17.2331C25.8502 17.5412 25.5674 17.9077 25.401 18.3327C25.2457 18.7576 25.1681 19.2198 25.1681 19.7191V28.1813H19.5117Z" fill="white"/>
+<path d="M11.3461 28.3884C9.69352 28.3884 8.41251 28.1919 7.50306 27.7988C6.60469 27.3951 5.97805 26.8479 5.62314 26.1574C5.27933 25.4562 5.10742 24.6647 5.10742 23.7829V15.4163H2.3125V11.7032H5.30705L6.75442 6.6514H10.7638V11.6713H14.5403V15.4163H10.7638L10.7804 23.5438C10.7804 23.8732 10.8303 24.1175 10.9302 24.2769C11.0411 24.4363 11.1908 24.5425 11.3793 24.5956C11.5679 24.6487 11.7952 24.6753 12.0614 24.6753H14.5735V27.9422C14.3406 28.0379 13.9802 28.1335 13.4922 28.2291C13.0042 28.3353 12.2888 28.3884 11.3461 28.3884Z" fill="white"/>
+<path d="M66.5682 28.5C65.1375 28.5 64.0118 28.3459 63.1911 28.0378C62.3814 27.7297 61.788 27.3313 61.411 26.8426C61.0339 26.3433 60.7954 25.7908 60.6956 25.1853C60.6069 24.5797 60.5625 23.9794 60.5625 23.3845V4.5H66.1024V22.6833C66.1024 23.1826 66.1794 23.7863 66.4234 24.1582C66.6674 24.5194 67.1942 24.7478 68.0038 24.8434L68.7525 24.8912L68.7975 28.0538C68.4426 28.1706 68.0766 28.2716 67.6995 28.3566C67.3224 28.4522 66.9453 28.5 66.5682 28.5Z" fill="white"/>
+<path d="M51.9839 28.1813V11.7032H57.3741V28.1813H51.9839ZM51.9673 9.85458V5.13745H57.4074V9.85458H51.9673Z" fill="white"/>
+<rect x="66.1875" y="24.875" width="9.54688" height="3.625" fill="white"/>
+<path d="M76.3006 11.3848C78.5409 11.3848 80.3216 11.8522 81.6414 12.7871C82.961 13.722 83.6264 15.0127 83.6375 16.6592H78.9793C78.8573 16.0963 78.5411 15.6716 78.0311 15.3848C77.532 15.0873 76.9329 14.9385 76.2342 14.9385C75.5244 14.9385 74.9253 15.0554 74.4373 15.2891C73.9607 15.5121 73.7225 15.8519 73.7225 16.3086C73.7225 16.6592 73.9329 16.9408 74.3543 17.1533C74.7757 17.3658 75.4466 17.5576 76.367 17.7275L78.8797 18.2207C79.911 18.465 80.7482 18.7947 81.3914 19.209C82.0347 19.6127 82.5281 20.0542 82.8719 20.5322C83.2267 21.0102 83.4657 21.4879 83.5877 21.9658C83.7208 22.4332 83.7869 22.8478 83.7869 23.209C83.7869 24.3458 83.4598 25.3076 82.8055 26.0938C82.1622 26.8798 81.269 27.4802 80.1268 27.8945C78.9956 28.2981 77.709 28.5 76.2674 28.5C75.0698 28.5 73.8998 28.3091 72.7576 27.9268C71.6153 27.5443 70.6386 26.933 69.8289 26.0938C69.4823 25.7344 69.1889 25.3279 68.9481 24.875H76.2244C76.227 24.875 76.2297 24.875 76.2322 24.875C77.0527 24.875 77.7202 24.7552 78.2303 24.5322C78.7404 24.3091 78.9959 23.9685 78.9959 23.5117C78.9959 23.1294 78.835 22.8316 78.5135 22.6191C78.2029 22.3961 77.6533 22.2212 76.866 22.0938L74.0877 21.5996C72.5019 21.3127 71.2264 20.7863 70.2615 20.0215C69.2969 19.246 68.8088 18.152 68.7977 16.7393C68.7866 15.73 69.0696 14.8211 69.6463 14.0137C70.223 13.2064 71.0713 12.569 72.1912 12.1016C73.3114 11.6235 74.6815 11.3848 76.3006 11.3848Z" fill="white"/>
+<rect x="12.3125" y="11.6797" width="10.1875" height="3.74219" fill="white"/>
+<rect x="1.31738" y="11.6797" width="10.1875" height="3.74219" fill="white"/>
+</svg>

package/src/widget/components/ChainImage.tsx

@@ -0,0 +1,28 @@
+import { NetworkImage } from "@0xsequence/design-system"
+import type React from "react"
+
+interface TokenImageProps {
+  chainId?: number
+  size?: number
+}
+
+export const ChainImage: React.FC<TokenImageProps> = ({
+  chainId,
+  size = 24,
+}) => {
+  return (
+    <div
+      className={`rounded-full flex items-center justify-center text-sm relative bg-black-100 bg-opacity-90`}
+      style={{ width: size, height: size }}
+    >
+      <NetworkImage
+        chainId={chainId ?? 0}
+        size="xl"
+        className="absolute w-full h-full text-white"
+        disableAnimation={true}
+      />
+    </div>
+  )
+}
+
+export default ChainImage

package/src/widget/components/ConnectWallet.tsx

@@ -0,0 +1,206 @@
+// biome-ignore lint/style/useImportType: Need to use React
+import React, { useEffect, useState } from "react"
+import { useAccount, useDisconnect } from "wagmi"
+import type { ActiveTheme } from "../../theme.js"
+import MetaMaskFox from "../assets/MetaMask-icon-fox.svg"
+import MetaMaskLogoWhite from "../assets/MetaMask-logo-white.svg"
+import PrivyLogoBlack from "../assets/Privy_Brandmark_Black.svg"
+import PrivyLogoWhite from "../assets/Privy_Brandmark_White.svg"
+
+export interface WalletOption {
+  id: string
+  name: string
+  connector: () => void
+}
+
+export interface ConnectWalletProps {
+  onConnect: (walletId: string) => void
+  onDisconnect: () => void
+  onContinue: () => void
+  onError: (error: Error) => void
+  theme?: ActiveTheme
+  walletOptions: WalletOption[]
+}
+
+export const ConnectWallet: React.FC<ConnectWalletProps> = ({
+  onConnect,
+  onDisconnect,
+  onContinue,
+  onError,
+  theme = "light",
+  walletOptions,
+}) => {
+  const { isConnected, address, connector } = useAccount()
+  const { disconnect } = useDisconnect()
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (error) {
+      if (onError) {
+        onError(new Error(error))
+      }
+    }
+  }, [error, onError])
+
+  const handleDisconnect = () => {
+    try {
+      setError(null)
+      disconnect()
+      onDisconnect()
+    } catch (error) {
+      console.error("[trails-sdk] Failed to disconnect:", error)
+      setError(
+        error instanceof Error ? error.message : "Failed to disconnect wallet",
+      )
+    }
+  }
+
+  const getWalletButtonStyle = (walletId: string) => {
+    let isMetaMask = false
+    try {
+      if (walletId === "injected") {
+        isMetaMask =
+          typeof window !== "undefined" && !!window.ethereum?.isMetaMask
+      }
+    } catch (error) {
+      console.error(
+        "[trails-sdk] Failed to check if MetaMask is installed:",
+        error,
+      )
+    }
+
+    if (isMetaMask) {
+      return "bg-[#FF5C16] hover:bg-[#FF5C16]/90 text-white"
+    }
+
+    switch (walletId) {
+      case "privy":
+        return theme === "dark"
+          ? "bg-white hover:bg-white/90 text-black"
+          : "bg-black hover:bg-black/90 text-white"
+      default:
+        return theme === "dark"
+          ? "bg-blue-600 hover:bg-blue-700"
+          : "bg-blue-500 hover:bg-blue-600"
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center relative">
+        <h2
+          className={`text-lg font-semibold w-full text-center ${theme === "dark" ? "text-white" : "text-gray-900"}`}
+        >
+          Connect a Wallet
+        </h2>
+      </div>
+
+      {isConnected ? (
+        <div className="space-y-4">
+          <div
+            className={`p-4 rounded-2xl ${theme === "dark" ? "bg-gray-800" : "bg-gray-50"}`}
+          >
+            <p className={theme === "dark" ? "text-gray-400" : "text-gray-500"}>
+              Connected with {connector?.name || ""}
+            </p>
+            <p
+              className={theme === "dark" ? "text-white" : "text-gray-900"}
+              style={{ wordBreak: "break-all" }}
+            >
+              {address}
+            </p>
+          </div>
+          <div className="flex flex-col gap-3">
+            {error && (
+              <div
+                className={`border rounded-lg p-4 ${
+                  theme === "dark"
+                    ? "bg-red-900/20 border-red-800"
+                    : "bg-red-50 border-red-200"
+                }`}
+              >
+                <p
+                  className={`text-sm break-words ${theme === "dark" ? "text-red-200" : "text-red-600"}`}
+                >
+                  {error}
+                </p>
+              </div>
+            )}
+            <button
+              type="button"
+              onClick={onContinue}
+              className={`w-full cursor-pointer font-semibold py-3 px-4 rounded-[24px] transition-colors ${
+                theme === "dark"
+                  ? "bg-blue-600 hover:bg-blue-700 text-white"
+                  : "bg-blue-500 hover:bg-blue-600 text-white"
+              }`}
+            >
+              Continue
+            </button>
+            <button
+              type="button"
+              onClick={handleDisconnect}
+              className={`w-full cursor-pointer font-semibold py-3 px-4 rounded-[24px] transition-colors border ${
+                theme === "dark"
+                  ? "bg-gray-800 hover:bg-gray-700 text-white border-gray-700"
+                  : "bg-white hover:bg-gray-50 text-gray-900 border-gray-200"
+              }`}
+            >
+              Disconnect
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-3">
+          {walletOptions.length > 0 ? (
+            walletOptions.map((wallet) => (
+              <button
+                type="button"
+                key={wallet.id}
+                onClick={() => onConnect(wallet.id)}
+                className={`w-full flex items-center justify-center space-x-2 cursor-pointer font-semibold py-3 px-4 rounded-[24px] transition-colors ${getWalletButtonStyle(wallet.id)}`}
+              >
+                {wallet.id === "privy" ? (
+                  <img
+                    src={theme === "dark" ? PrivyLogoBlack : PrivyLogoWhite}
+                    alt="Privy"
+                    className="h-6"
+                  />
+                ) : wallet.id === "injected" && window.ethereum?.isMetaMask ? (
+                  <div className="flex items-center space-x-2">
+                    <img
+                      src={MetaMaskFox}
+                      alt="MetaMask Fox"
+                      className="h-6 w-6"
+                    />
+                    <img
+                      src={MetaMaskLogoWhite}
+                      alt="MetaMask"
+                      className="h-6"
+                    />
+                  </div>
+                ) : (
+                  <span>{wallet.name}</span>
+                )}
+              </button>
+            ))
+          ) : (
+            <div className="space-y-6">
+              <div
+                className={`text-center p-4 rounded-lg ${
+                  theme === "dark"
+                    ? "text-gray-300 bg-gray-800"
+                    : "text-gray-600 bg-gray-50"
+                }`}
+              >
+                Please connect wallet in dapp
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ConnectWallet

package/src/widget/components/DebugScreensDropdown.tsx

@@ -0,0 +1,88 @@
+import { ChevronDown } from "lucide-react"
+import type React from "react"
+import { useRef, useState } from "react"
+import { useQueryParams } from "../../queryParams.js"
+import type { ActiveTheme } from "../../theme.js"
+
+interface DebugScreensDropdownProps {
+  onScreenSelect: (screen: string) => void
+  theme?: ActiveTheme
+}
+
+const SCREENS = [
+  "Connect",
+  "Tokens",
+  "Send",
+  "Wallet Confirmation",
+  "Pending 1-item-0-confirmed",
+  "Pending 1-item-1-confirmed",
+  "Pending 2-item-0-confirmed",
+  "Pending 2-item-1-confirmed",
+  "Pending 2-item-2-confirmed",
+  "Pending 3-item-0-confirmed",
+  "Pending 3-item-1-confirmed",
+  "Pending 3-item-2-confirmed",
+  "Pending 3-item-3-confirmed",
+  "Receipt",
+] as const
+
+export const DebugScreensDropdown: React.FC<DebugScreensDropdownProps> = ({
+  onScreenSelect,
+  theme = "light",
+}) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  const { hasParam } = useQueryParams()
+
+  const shouldShow = hasParam("debug", "true")
+
+  if (!shouldShow) {
+    return null
+  }
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className={`p-1 rounded-full hover:bg-opacity-10 ${
+          theme === "dark"
+            ? "hover:bg-gray-800 text-gray-200"
+            : "hover:bg-gray-100 text-gray-700"
+        }`}
+      >
+        <ChevronDown className="w-4 h-4" />
+      </button>
+
+      {isOpen && (
+        <div
+          className={`absolute bottom-full right-0 mb-1 w-40 border rounded-lg shadow-lg overflow-hidden max-h-[300px] overflow-y-auto ${
+            theme === "dark"
+              ? "bg-gray-800 border-gray-700 text-gray-200"
+              : "bg-white border-gray-200 text-gray-700"
+          }`}
+        >
+          {SCREENS.map((screen) => (
+            <button
+              key={screen}
+              type="button"
+              onClick={() => {
+                onScreenSelect(screen)
+                setIsOpen(false)
+              }}
+              className={`w-full text-left px-3 py-2 text-sm ${
+                theme === "dark"
+                  ? "text-gray-200 hover:bg-gray-700"
+                  : "text-gray-700 hover:bg-gray-50"
+              }`}
+            >
+              {screen}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default DebugScreensDropdown