0xtrails 0.1.2 → 0.1.4

package/src/widget/components/YellowWarningAnimation.tsx

@@ -0,0 +1,146 @@
+import { type CSSProperties, useEffect, useState } from "react"
+
+export function YellowWarningAnimation() {
+  const [animate, setAnimate] = useState(false)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setAnimate(true)
+    }, 100)
+
+    return () => clearTimeout(timer)
+  }, [])
+
+  const styles: Record<string, CSSProperties> = {
+    container: {
+      width: "80px",
+      height: "80px",
+      position: "relative" as const,
+    },
+    circleContainer: {
+      position: "relative" as const,
+      width: "100%",
+      height: "100%",
+    },
+    circleFill: {
+      position: "absolute" as const,
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      borderRadius: "50%",
+      backgroundColor: "#f59e0b",
+      transform: animate ? "scale(1)" : "scale(0)",
+      opacity: animate ? 1 : 0,
+      transition: "transform 0.15s ease-out 0.3s, opacity 0.15s ease-out 0.3s",
+    },
+    progressRing: {
+      position: "absolute" as const,
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      transform: "rotate(-90deg)",
+    },
+    circle: {
+      fill: "none",
+      stroke: "url(#yellowGradient)",
+      strokeWidth: 4,
+      strokeLinecap: "round" as const,
+      strokeDasharray: 226,
+      strokeDashoffset: animate ? 0 : 226,
+      transition: "stroke-dashoffset 0.3s ease-out",
+    },
+    iconContainer: {
+      position: "absolute" as const,
+      top: "50%",
+      left: "50%",
+      transform: animate
+        ? "translate(-50%, -50%) scale(1)"
+        : "translate(-50%, -50%) scale(0)",
+      opacity: animate ? 1 : 0,
+      zIndex: 10,
+      transition: "transform 0.1s ease-out 0.4s, opacity 0.1s ease-out 0.4s",
+    },
+    trianglePath: {
+      fill: "none",
+      stroke: "white",
+      strokeWidth: 2.5,
+      strokeLinecap: "round" as const,
+      strokeLinejoin: "round" as const,
+      // Approx perimeter; animate drawing
+      strokeDasharray: 120,
+      strokeDashoffset: animate ? 0 : 120,
+      transition: "stroke-dashoffset 0.2s ease-out 0.45s",
+    },
+    exclamationPath: {
+      fill: "none",
+      stroke: "white",
+      strokeWidth: 2.5,
+      strokeLinecap: "round" as const,
+      strokeLinejoin: "round" as const,
+      strokeDasharray: 20,
+      strokeDashoffset: animate ? 0 : 20,
+      transition: "stroke-dashoffset 0.15s ease-out 0.55s",
+    },
+    dot: {
+      fill: "white",
+      opacity: animate ? 1 : 0,
+      transition: "opacity 0.1s ease-out 0.65s",
+    },
+  }
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.circleContainer}>
+        {/* Circle fill */}
+        <div style={styles.circleFill} />
+
+        {/* Progress ring */}
+        <svg style={styles.progressRing}>
+          <defs>
+            <radialGradient
+              id="yellowGradient"
+              cx="50%"
+              cy="50%"
+              r="50%"
+              gradientUnits="objectBoundingBox"
+            >
+              <stop
+                offset="0%"
+                style={{ stopColor: "#f59e0b", stopOpacity: 0 }}
+              />
+              <stop
+                offset="70%"
+                style={{ stopColor: "#f59e0b", stopOpacity: 0.3 }}
+              />
+              <stop
+                offset="100%"
+                style={{ stopColor: "#f59e0b", stopOpacity: 1 }}
+              />
+            </radialGradient>
+          </defs>
+          <circle cx="40" cy="40" r="36" style={styles.circle} />
+        </svg>
+
+        {/* Warning icon */}
+        <div style={styles.iconContainer}>
+          <svg
+            width="48"
+            height="48"
+            viewBox="0 0 24 24"
+            role="img"
+            aria-labelledby="warning-icon-title"
+          >
+            <title id="warning-icon-title">Warning icon</title>
+            {/* Triangle outline */}
+            <path d="M12 3 L22 20 H2 Z" style={styles.trianglePath} />
+            {/* Exclamation mark */}
+            <path d="M12 9 L12 14" style={styles.exclamationPath} />
+            <circle cx="12" cy="17" r="1.5" style={styles.dot} />
+          </svg>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/widget/hooks/useAmountUsd.ts

@@ -1,25 +1,20 @@
-import type { SequenceAPIClient } from "@0xsequence/api"
 import { useQuery } from "@tanstack/react-query"
 import { useTokenPrice } from "../../prices.js"
 import { formatUsdAmountDisplay } from "../../tokenBalances.js"
 import { useTokenAddress } from "../../tokens.js"
+import { useAPIClient } from "../../apiClient.js"
 
 type UseAmountUsdProps = {
   amount?: string | null
   token?: string | null
   chainId?: number | null
-  apiClient: SequenceAPIClient
 }
 
-export function useAmountUsd({
-  amount,
-  token,
-  chainId,
-  apiClient,
-}: UseAmountUsdProps): {
+export function useAmountUsd({ amount, token, chainId }: UseAmountUsdProps): {
   amountUsd: number | null
   amountUsdFormatted: string
 } {
+  const apiClient = useAPIClient()
   const isTokenAddress = token?.startsWith("0x")
   const resolvedTokenAddress = useTokenAddress({
     chainId,

package/src/widget/hooks/useCheckout.ts

@@ -1,4 +1,5 @@
 import { useCallback, useRef } from "react"
+import { getSessionId } from "../../analytics.js"
 
 export type CheckoutCallbacks = {
   onCheckoutStart?: (data: { sessionId: string }) => void
@@ -38,10 +39,10 @@ export function useCheckout({
   onCheckoutError,
   onCheckoutStatusUpdate,
 }: UseCheckoutProps): UseCheckoutReturn {
-  const sessionIdRef = useRef<string>(Date.now().toString())
+  const sessionIdRef = useRef<string>(getSessionId())
 
   const startCheckout = useCallback(() => {
-    sessionIdRef.current = Date.now().toString()
+    sessionIdRef.current = getSessionId()
   }, [])
 
   const triggerCheckoutStart = useCallback(() => {