@d13co/liquid-ui 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 TxnLab, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@d13co/liquid-ui",
+  "version": "0.0.1",
+  "description": "Shared UI components for use-wallet-ui and Liquid Wallet Companion extensions",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": ">=5",
+    "react": "^18 || ^19"
+  },
+  "devDependencies": {
+    "@tanstack/react-query": "5.90.21",
+    "@types/react": "19.2.14",
+    "react": "19.2.4",
+    "typescript": "5.9.3"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/components/AlgoSymbol.tsx

@@ -0,0 +1,26 @@
+interface AlgoSymbolProps {
+  className?: string
+  /**
+   * Size relative to current font size (1em = 100%)
+   * @default 0.85
+   */
+  scale?: number
+}
+
+export function AlgoSymbol({ className, scale = 0.85 }: AlgoSymbolProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      className={`inline-block align-baseline ${className ?? ''}`}
+      style={{
+        width: `${scale}em`,
+        height: `${scale}em`,
+      }}
+      aria-label="Algorand"
+      fill="currentColor"
+    >
+      <path d="M23.98 23.99h-3.75l-2.44-9.07-5.25 9.07H8.34l8.1-14.04-1.3-4.88L4.22 24H.02L13.88 0h3.67l1.61 5.96h3.79l-2.59 4.5 3.62 13.53z" />
+    </svg>
+  )
+}

package/src/components/ManagePanel.tsx

@@ -0,0 +1,203 @@
+import { useState } from 'react'
+import { AlgoSymbol } from './AlgoSymbol'
+import { OptInPanel, type OptInPanelProps } from './OptInPanel'
+import { SendPanel, type SendPanelProps } from './SendPanel'
+
+export interface ManagePanelProps {
+  displayBalance: number | null
+  showAvailableBalance: boolean
+  onToggleBalance: () => void
+  onBack: () => void
+  send?: Omit<SendPanelProps, 'onBack'>
+  optIn?: Omit<OptInPanelProps, 'onBack'>
+  onBridge?: () => void
+  onExplore?: () => void
+}
+
+const balanceFormatter = new Intl.NumberFormat(undefined, {
+  minimumFractionDigits: 4,
+  maximumFractionDigits: 4,
+})
+
+export function ManagePanel({
+  displayBalance,
+  showAvailableBalance,
+  onToggleBalance,
+  onBack,
+  send,
+  optIn,
+  onBridge,
+  onExplore,
+}: ManagePanelProps) {
+  const [mode, setMode] = useState<'main' | 'send' | 'opt-in'>('main')
+
+  const backToMain = (resetFn?: () => void) => {
+    setMode('main')
+    resetFn?.()
+  }
+
+  if (mode === 'send' && send) {
+    return <SendPanel {...send} onBack={() => backToMain(send.reset)} />
+  }
+
+  if (mode === 'opt-in' && optIn) {
+    return <OptInPanel {...optIn} onBack={() => backToMain(optIn.reset)} />
+  }
+
+  return (
+    <>
+      {/* Header with back arrow */}
+      <div className="flex items-center gap-2 mb-4">
+        <button
+          onClick={onBack}
+          className="-ml-1 p-1 rounded-lg hover:bg-[var(--wui-color-bg-secondary)] transition-colors text-[var(--wui-color-text-secondary)] flex items-center justify-center"
+          title="Back"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="m15 18-6-6 6-6" />
+          </svg>
+        </button>
+        <h3 className="text-lg font-bold leading-none text-[var(--wui-color-text)] wallet-custom-font">
+          Manage Liquid Account
+        </h3>
+      </div>
+
+      {/* Balance display */}
+      <div className="mb-4 bg-[var(--wui-color-bg-secondary)] rounded-lg p-3">
+        <div className="flex justify-between items-center">
+          {displayBalance !== null && (
+            <span className="text-base font-medium text-[var(--wui-color-text)] flex items-center gap-1">
+              {balanceFormatter.format(displayBalance)}
+              <AlgoSymbol />
+            </span>
+          )}
+          <button
+            onClick={onToggleBalance}
+            className="flex items-center gap-1 text-sm text-[var(--wui-color-text-secondary)] bg-[var(--wui-color-bg-tertiary)] py-1 pl-2.5 pr-2 rounded-md hover:brightness-90 transition-all focus:outline-none"
+            title={showAvailableBalance ? 'Show total balance' : 'Show available balance'}
+          >
+            {showAvailableBalance ? 'Available' : 'Total'}
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="10"
+              height="10"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="ml-0.5 opacity-80"
+            >
+              <path d="m17 10-5-5-5 5" />
+              <path d="m17 14-5 5-5-5" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* Divider */}
+      <div className="border-t border-[var(--wui-color-border)] mb-3" />
+
+      {/* Action buttons grid */}
+      <div className="grid grid-cols-2 gap-2">
+        <button
+          onClick={() => setMode('send')}
+          disabled={!send}
+          className="py-2.5 px-4 bg-[var(--wui-color-bg-tertiary)] text-[var(--wui-color-text)] font-medium rounded-xl hover:brightness-90 transition-all text-sm flex items-center justify-center disabled:opacity-40 disabled:pointer-events-none"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-4 w-4 mr-1.5"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M5 12h14" />
+            <path d="m12 5 7 7-7 7" />
+          </svg>
+          Send
+        </button>
+        <button
+          onClick={() => setMode('opt-in')}
+          disabled={!optIn}
+          className="py-2.5 px-4 bg-[var(--wui-color-bg-tertiary)] text-[var(--wui-color-text)] font-medium rounded-xl hover:brightness-90 transition-all text-sm flex items-center justify-center disabled:opacity-40 disabled:pointer-events-none"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-4 w-4 mr-1.5"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M12 5v14" />
+            <path d="M5 12h14" />
+          </svg>
+          Opt In
+        </button>
+        <button
+          onClick={onBridge}
+          disabled={!onBridge}
+          className="py-2.5 px-4 bg-[var(--wui-color-bg-tertiary)] text-[var(--wui-color-text)] font-medium rounded-xl hover:brightness-90 transition-all text-sm flex items-center justify-center disabled:opacity-40 disabled:pointer-events-none"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-4 w-4 mr-1.5"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M8 3l4 4-4 4" />
+            <path d="M16 3l-4 4 4 4" />
+            <path d="M12 7H4" />
+            <path d="M12 7h8" />
+            <path d="M8 21l4-4-4-4" />
+            <path d="M16 21l-4-4 4-4" />
+            <path d="M12 17H4" />
+            <path d="M12 17h8" />
+          </svg>
+          Bridge
+        </button>
+        <button
+          onClick={onExplore}
+          disabled={!onExplore}
+          className="py-2.5 px-4 bg-[var(--wui-color-bg-tertiary)] text-[var(--wui-color-text)] font-medium rounded-xl hover:brightness-90 transition-all text-sm flex items-center justify-center disabled:opacity-40 disabled:pointer-events-none"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-4 w-4 mr-1.5"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <circle cx="11" cy="11" r="8" />
+            <path d="m21 21-4.3-4.3" />
+          </svg>
+          Explore
+        </button>
+      </div>
+    </>
+  )
+}

package/src/components/OptInPanel.tsx

@@ -0,0 +1,112 @@
+import { Spinner } from './Spinner'
+import { TransactionStatus, type TransactionStatusValue } from './TransactionStatus'
+
+export interface OptInPanelProps {
+  assetIdInput: string
+  setAssetIdInput: (v: string) => void
+  assetInfo: { name: string; unitName: string; index: number } | null
+  assetLookupLoading: boolean
+  assetLookupError: string | null
+  status: TransactionStatusValue
+  error: string | null
+  handleOptIn: () => void
+  reset: () => void
+  retry: () => void
+  onBack: () => void
+}
+
+export function OptInPanel({
+  assetIdInput,
+  setAssetIdInput,
+  assetInfo,
+  assetLookupLoading,
+  assetLookupError,
+  status,
+  error,
+  handleOptIn,
+  reset: _reset,
+  retry,
+  onBack,
+}: OptInPanelProps) {
+  return (
+    <>
+      {/* Header */}
+      <div className="flex items-center gap-2 mb-4">
+        <button
+          onClick={onBack}
+          className="-ml-1 p-1 rounded-lg hover:bg-[var(--wui-color-bg-secondary)] transition-colors text-[var(--wui-color-text-secondary)] flex items-center justify-center"
+          title="Back"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="m15 18-6-6 6-6" />
+          </svg>
+        </button>
+        <h3 className="text-lg font-bold leading-none text-[var(--wui-color-text)] wallet-custom-font">Opt In Asset</h3>
+      </div>
+
+      {/* Asset ID input */}
+      <div className="mb-4">
+        <input
+          type="text"
+          inputMode="numeric"
+          pattern="[0-9]*"
+          placeholder="Enter Asset ID"
+          value={assetIdInput}
+          onChange={(e) => setAssetIdInput(e.target.value.replace(/[^0-9]/g, ''))}
+          className="w-full rounded-lg border border-[var(--wui-color-border)] bg-[var(--wui-color-bg-secondary)] py-2.5 px-3 text-sm text-[var(--wui-color-text)] placeholder:text-[var(--wui-color-text-tertiary)] focus:outline-none focus:ring-2 focus:ring-[var(--wui-color-primary)] focus:border-transparent"
+        />
+      </div>
+
+      {/* Loading */}
+      {assetLookupLoading && (
+        <div className="flex items-center justify-center py-4 text-sm text-[var(--wui-color-text-secondary)]">
+          <Spinner className="h-4 w-4 mr-2" />
+          Looking up asset...
+        </div>
+      )}
+
+      {/* Lookup error */}
+      {assetLookupError && (
+        <div className="py-3 text-center text-sm text-[var(--wui-color-danger-text)]">{assetLookupError}</div>
+      )}
+
+      {/* Asset result */}
+      {assetInfo && status === 'idle' && (
+        <div className="bg-[var(--wui-color-bg-secondary)] rounded-lg p-3">
+          <div className="flex justify-between items-start mb-3">
+            <div>
+              <p className="text-sm font-medium text-[var(--wui-color-text)]">{assetInfo.name}</p>
+              {assetInfo.unitName && (
+                <p className="text-xs text-[var(--wui-color-text-secondary)]">{assetInfo.unitName}</p>
+              )}
+            </div>
+            <span className="text-xs text-[var(--wui-color-text-tertiary)]">ID: {assetInfo.index}</span>
+          </div>
+          <button
+            onClick={handleOptIn}
+            className="w-full py-2 px-4 bg-[var(--wui-color-primary)] text-white font-medium rounded-xl hover:brightness-90 transition-all text-sm"
+          >
+            Opt In
+          </button>
+        </div>
+      )}
+
+      <TransactionStatus
+        status={status}
+        error={error}
+        successMessage="Opted in successfully!"
+        onRetry={retry}
+      />
+    </>
+  )
+}

package/src/components/SendPanel.tsx

@@ -0,0 +1,171 @@
+import { Spinner } from './Spinner'
+import { TransactionStatus, type TransactionStatusValue } from './TransactionStatus'
+
+export interface SendPanelProps {
+  sendType: 'algo' | 'asa'
+  setSendType: (type: 'algo' | 'asa') => void
+  receiver: string
+  setReceiver: (v: string) => void
+  amount: string
+  setAmount: (v: string) => void
+  assetIdInput: string
+  setAssetIdInput: (v: string) => void
+  assetInfo: { name: string; unitName: string; index: number } | null
+  assetLookupLoading: boolean
+  assetLookupError: string | null
+  status: TransactionStatusValue
+  error: string | null
+  handleSend: () => void
+  reset: () => void
+  retry: () => void
+  onBack: () => void
+}
+
+export function SendPanel({
+  sendType,
+  setSendType,
+  receiver,
+  setReceiver,
+  amount,
+  setAmount,
+  assetIdInput,
+  setAssetIdInput,
+  assetInfo,
+  assetLookupLoading,
+  assetLookupError,
+  status,
+  error,
+  handleSend,
+  reset: _reset,
+  retry,
+  onBack,
+}: SendPanelProps) {
+  return (
+    <>
+      {/* Header */}
+      <div className="flex items-center gap-2 mb-4">
+        <button
+          onClick={onBack}
+          className="-ml-1 p-1 rounded-lg hover:bg-[var(--wui-color-bg-secondary)] transition-colors text-[var(--wui-color-text-secondary)] flex items-center justify-center"
+          title="Back"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="m15 18-6-6 6-6" />
+          </svg>
+        </button>
+        <h3 className="text-lg font-bold leading-none text-[var(--wui-color-text)] wallet-custom-font">Send</h3>
+      </div>
+
+      {/* ALGO / Asset toggle */}
+      <div className="flex mb-4 bg-[var(--wui-color-bg-secondary)] rounded-lg p-1">
+        <button
+          onClick={() => setSendType('algo')}
+          className={`flex-1 py-1.5 text-sm font-medium rounded-md transition-all ${
+            sendType === 'algo'
+              ? 'bg-[var(--wui-color-bg)] text-[var(--wui-color-text)] shadow-sm'
+              : 'text-[var(--wui-color-text-secondary)] hover:text-[var(--wui-color-text)]'
+          }`}
+        >
+          ALGO
+        </button>
+        <button
+          onClick={() => setSendType('asa')}
+          className={`flex-1 py-1.5 text-sm font-medium rounded-md transition-all ${
+            sendType === 'asa'
+              ? 'bg-[var(--wui-color-bg)] text-[var(--wui-color-text)] shadow-sm'
+              : 'text-[var(--wui-color-text-secondary)] hover:text-[var(--wui-color-text)]'
+          }`}
+        >
+          Asset
+        </button>
+      </div>
+
+      {/* Asset ID input (ASA mode only) */}
+      {sendType === 'asa' && (
+        <div className="mb-3">
+          <input
+            type="text"
+            inputMode="numeric"
+            pattern="[0-9]*"
+            placeholder="Asset ID"
+            value={assetIdInput}
+            onChange={(e) => setAssetIdInput(e.target.value.replace(/[^0-9]/g, ''))}
+            className="w-full rounded-lg border border-[var(--wui-color-border)] bg-[var(--wui-color-bg-secondary)] py-2.5 px-3 text-sm text-[var(--wui-color-text)] placeholder:text-[var(--wui-color-text-tertiary)] focus:outline-none focus:ring-2 focus:ring-[var(--wui-color-primary)] focus:border-transparent"
+          />
+          {assetLookupLoading && (
+            <div className="flex items-center mt-2 text-xs text-[var(--wui-color-text-secondary)]">
+              <Spinner className="h-3 w-3 mr-1.5" />
+              Looking up asset...
+            </div>
+          )}
+          {assetLookupError && (
+            <p className="mt-2 text-xs text-[var(--wui-color-danger-text)]">{assetLookupError}</p>
+          )}
+          {assetInfo && (
+            <div className="mt-2 flex items-center justify-between text-xs text-[var(--wui-color-text-secondary)] bg-[var(--wui-color-bg-secondary)] rounded-md px-2 py-1.5">
+              <span className="font-medium text-[var(--wui-color-text)]">{assetInfo.name}</span>
+              {assetInfo.unitName && <span>{assetInfo.unitName}</span>}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Receiver address */}
+      <div className="mb-3">
+        <input
+          type="text"
+          placeholder="Receiver address"
+          value={receiver}
+          onChange={(e) => setReceiver(e.target.value)}
+          className="w-full rounded-lg border border-[var(--wui-color-border)] bg-[var(--wui-color-bg-secondary)] py-2.5 px-3 text-sm text-[var(--wui-color-text)] placeholder:text-[var(--wui-color-text-tertiary)] focus:outline-none focus:ring-2 focus:ring-[var(--wui-color-primary)] focus:border-transparent"
+        />
+      </div>
+
+      {/* Amount */}
+      <div className="mb-4">
+        <input
+          type="text"
+          inputMode="decimal"
+          placeholder={
+            sendType === 'algo'
+              ? 'Amount (ALGO)'
+              : assetInfo
+                ? `Amount (${assetInfo.unitName || assetInfo.name})`
+                : 'Amount'
+          }
+          value={amount}
+          onChange={(e) => setAmount(e.target.value.replace(/[^0-9.]/g, ''))}
+          className="w-full rounded-lg border border-[var(--wui-color-border)] bg-[var(--wui-color-bg-secondary)] py-2.5 px-3 text-sm text-[var(--wui-color-text)] placeholder:text-[var(--wui-color-text-tertiary)] focus:outline-none focus:ring-2 focus:ring-[var(--wui-color-primary)] focus:border-transparent"
+        />
+      </div>
+
+      {/* Send button */}
+      {status === 'idle' && (
+        <button
+          onClick={handleSend}
+          disabled={!receiver || !amount || (sendType === 'asa' && !assetInfo)}
+          className="w-full py-2.5 px-4 bg-[var(--wui-color-primary)] text-white font-medium rounded-xl hover:brightness-90 transition-all text-sm disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          Send {sendType === 'algo' ? 'ALGO' : assetInfo?.unitName || 'Asset'}
+        </button>
+      )}
+
+      <TransactionStatus
+        status={status}
+        error={error}
+        successMessage="Sent successfully!"
+        onRetry={retry}
+      />
+    </>
+  )
+}

package/src/components/Spinner.tsx

@@ -0,0 +1,21 @@
+interface SpinnerProps {
+  className?: string
+}
+
+export function Spinner({ className }: SpinnerProps) {
+  return (
+    <svg
+      className={`animate-spin h-4 w-4 ${className ?? ''}`}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  )
+}

package/src/components/TransactionFlow.tsx

@@ -0,0 +1,124 @@
+import type { TransactionData, AssetInfo } from '../types'
+import { formatAssetAmount, assetLabel } from '../formatters'
+
+export interface TransactionFlowProps {
+  txn: TransactionData
+  assetInfo?: AssetInfo
+  appEscrows?: Record<string, string>
+}
+
+export function TransactionFlow({ txn, assetInfo, appEscrows = {} }: TransactionFlowProps) {
+  const resolveAddr = (full: string | undefined, short: string): string =>
+    (full && appEscrows[full]) || short
+
+  const renderFlowLine = (
+    from: string,
+    label: string,
+    to: string,
+    isDanger: boolean = false,
+    isSecondary: boolean = false,
+  ) => (
+    <div className={`grid grid-cols-[1fr_auto_1fr] w-full items-center font-mono text-xs ${isSecondary ? 'mt-1' : ''}`}>
+      <span className="text-[var(--wui-color-text-secondary)] text-left">{from}</span>
+      <span className="flex items-center justify-center gap-1 px-1">
+        <span className="text-[var(--wui-color-text-tertiary)]">--[</span>
+        <span className={isDanger ? 'text-[var(--wui-color-danger-text)] font-bold' : 'text-[var(--wui-color-primary)] font-medium'}>
+          {label}
+        </span>
+        <span className="text-[var(--wui-color-text-tertiary)]">]--&gt;</span>
+      </span>
+      <span className={`text-right ${isDanger ? 'text-[var(--wui-color-danger-text)] font-bold' : 'text-[var(--wui-color-text-secondary)]'}`}>{to}</span>
+    </div>
+  )
+
+  const renderRemainderLine = (to: string) => (
+    <div className="grid grid-cols-[1fr_auto_1fr] w-full items-center font-mono text-xs mt-1">
+      <span />
+      <span className="flex items-center justify-center gap-1 px-1">
+        <span className="text-[var(--wui-color-text-tertiary)]">--[</span>
+        <span className="text-[var(--wui-color-danger-text)] font-bold">remainder</span>
+        <span className="text-[var(--wui-color-text-tertiary)]">]--&gt;</span>
+      </span>
+      <span className="text-[var(--wui-color-danger-text)] font-bold text-right">{to}</span>
+    </div>
+  )
+
+  const renderRekeyLine = (from: string, to: string) => (
+    <div className="grid grid-cols-[1fr_auto_1fr] w-full items-center font-mono text-xs mt-1">
+      <span className="text-[var(--wui-color-text-secondary)] text-left">{from}</span>
+      <span className="flex items-center justify-center gap-1 px-1">
+        <span className="text-[var(--wui-color-text-tertiary)]">--[</span>
+        <span className="text-[var(--wui-color-danger-text)] font-bold">REKEY</span>
+        <span className="text-[var(--wui-color-text-tertiary)]">]--&gt;</span>
+      </span>
+      <span className="text-[var(--wui-color-danger-text)] font-bold text-right">{to}</span>
+    </div>
+  )
+
+  return (
+    <div className="space-y-0">
+      {/* Payment transaction */}
+      {txn.type === 'pay' && txn.receiverShort && (
+        <>
+          {renderFlowLine(txn.senderShort, txn.amount || '0 ALGO', resolveAddr(txn.receiver, txn.receiverShort))}
+          {txn.closeRemainderToShort && renderRemainderLine(txn.closeRemainderToShort)}
+        </>
+      )}
+
+      {/* Asset transfer */}
+      {txn.type === 'axfer' && txn.receiverShort && (
+        <>
+          {renderFlowLine(
+            txn.senderShort,
+            assetInfo ? formatAssetAmount(txn.rawAmount, assetInfo) : `${txn.amount || '0'} ${assetLabel(txn)}`,
+            resolveAddr(txn.receiver, txn.receiverShort),
+          )}
+          {txn.closeRemainderToShort && renderRemainderLine(txn.closeRemainderToShort)}
+        </>
+      )}
+
+      {/* Asset freeze */}
+      {txn.type === 'afrz' && txn.freezeTargetShort && (
+        <>
+          {renderFlowLine(
+            txn.senderShort,
+            `${txn.isFreezing ? 'Freeze' : 'Unfreeze'} ${assetLabel(txn, assetInfo)}`,
+            txn.freezeTargetShort,
+          )}
+        </>
+      )}
+
+      {/* Asset config */}
+      {txn.type === 'acfg' && (
+        <>
+          {renderFlowLine(
+            txn.senderShort,
+            `Configure ${txn.assetIndex ? assetLabel(txn, assetInfo) : 'NEW'}`,
+            txn.senderShort,
+          )}
+        </>
+      )}
+
+      {/* Application call */}
+      {txn.type === 'appl' && (
+        <>
+          {renderFlowLine(
+            txn.senderShort,
+            'APP CALL',
+            `App ${txn.appIndex || 'NEW'}`,
+          )}
+        </>
+      )}
+
+      {/* Key registration */}
+      {txn.type === 'keyreg' && (
+        <>
+          {renderFlowLine(txn.senderShort, 'KEY REG', txn.senderShort)}
+        </>
+      )}
+
+      {/* Rekey (applies to any transaction type) */}
+      {txn.rekeyToShort && renderRekeyLine(txn.senderShort, txn.rekeyToShort)}
+    </div>
+  )
+}

package/src/components/TransactionReview.tsx

@@ -0,0 +1,159 @@
+import type { ReactNode } from 'react'
+import { TransactionFlow } from './TransactionFlow'
+import { useTransactionData } from '../hooks/useTransactionData'
+import type { TransactionData, TransactionDanger, AssetLookupClient } from '../types'
+
+export interface TransactionReviewProps {
+  transactions: TransactionData[]
+  message: string
+  dangerous: TransactionDanger
+  algodClient?: AssetLookupClient
+  getApplicationAddress?: (appId: number) => { toString(): string }
+  onApprove: () => void
+  onReject: () => void
+  signing?: boolean
+  walletName?: string
+  origin?: string
+  headerAction?: ReactNode
+  payloadVerified?: boolean | null
+}
+
+export function TransactionReview({
+  transactions,
+  message,
+  dangerous,
+  algodClient,
+  getApplicationAddress,
+  onApprove,
+  onReject,
+  signing,
+  walletName,
+  origin,
+  headerAction,
+  payloadVerified,
+}: TransactionReviewProps) {
+  const { loading, assets, appEscrows } = useTransactionData(transactions, {
+    algodClient,
+    getApplicationAddress,
+  })
+
+  return (
+    <div className="flex flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between px-6 pt-5 pb-1">
+        <h2 className={`text-lg font-bold ${dangerous ? 'text-[var(--wui-color-danger-text)]' : 'text-[var(--wui-color-text)]'}`}>
+          {dangerous ? 'Review Dangerous ' : 'Review '}
+          Transaction{transactions.length > 1 ? 's' : ''}
+        </h2>
+        {headerAction}
+      </div>
+
+      {/* Origin (extension shows request origin) */}
+      {origin && (
+        <div className="px-6 text-xs text-[var(--wui-color-text-tertiary)] truncate">
+          {origin}
+        </div>
+      )}
+
+      {/* Danger description */}
+      {dangerous ? (
+        <div className="px-6 pb-3 text-sm font-bold text-[var(--wui-color-danger-text)]">
+          {dangerous === 'rekey'
+            ? 'This transaction will rekey your account, transferring signing authority to a different address. You will no longer be able to sign transactions with your current key.'
+            : 'This transaction will close your account and transfer all remaining funds to another address. This action is irreversible.'}
+        </div>
+      ) : (
+        <div className="px-6 pb-3 text-sm text-[var(--wui-color-text-secondary)]">
+          {transactions.length === 1
+            ? 'You are about to sign the following transaction:'
+            : `You are about to sign ${transactions.length} transactions:`}
+        </div>
+      )}
+
+      {/* Transaction list */}
+      <div className="px-4 pb-4 max-h-80 overflow-y-auto">
+        {loading ? (
+          <div className="flex items-center justify-center py-6 text-sm text-[var(--wui-color-text-secondary)]">
+            <svg className="animate-spin h-4 w-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+            Loading asset info...
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {transactions.map((txn) => (
+              <div
+                key={txn.index}
+                className="rounded-sm border p-3 border-[var(--wui-color-primary)] bg-[var(--wui-color-bg-secondary)]"
+              >
+                <TransactionFlow txn={txn} assetInfo={txn.assetIndex ? assets[txn.assetIndex.toString()] : undefined} appEscrows={appEscrows} />
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Payload verification warning */}
+      {payloadVerified === false && (
+        <div className="px-4 pb-4">
+          <div className="text-sm font-bold text-[var(--wui-color-danger-text)] border border-[var(--wui-color-danger-text)] rounded-xl p-3 bg-[var(--wui-color-danger-bg)]">
+            Payload verification failed. The provided payload was invalid and has been recalculated from the raw transactions.
+          </div>
+        </div>
+      )}
+
+      {/* Sign payload */}
+      <div className="px-4 pb-4">
+        <div className="text-sm flex flex-col gap-2 border border-[var(--wui-color-border)] rounded-xl p-3">
+          <div className="flex items-center gap-2">
+            <span>Transaction ID to sign:</span>
+            {payloadVerified === true && (
+              <span className="text-xs text-green-600 font-medium">Verified</span>
+            )}
+          </div>
+          <div className="font-mono break-all text-[var(--wui-color-danger-text)]">{message}</div>
+          <div>Ensure the transaction ID is correct before approving.</div>
+        </div>
+      </div>
+
+      {/* Footer */}
+      {signing ? (
+        <div className="px-6 py-4 border-t border-[var(--wui-color-border)]">
+          <div className="flex items-center gap-2 text-sm text-[var(--wui-color-text-secondary)]">
+            <svg className="animate-spin h-4 w-4 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+            Signing...
+          </div>
+        </div>
+      ) : dangerous ? (
+        <div className="px-6 py-4 border-t border-[var(--wui-color-border)] flex gap-3">
+          <button
+            onClick={onReject}
+            className="flex-1 py-2.5 px-4 bg-[var(--wui-color-bg-tertiary)] text-[var(--wui-color-text-secondary)] font-medium rounded-xl hover:brightness-90 transition-all text-sm"
+          >
+            Reject
+          </button>
+          <button
+            onClick={onApprove}
+            className="flex-1 py-2.5 px-4 bg-[var(--wui-color-danger-text)] text-white font-medium rounded-xl hover:brightness-90 transition-all text-sm"
+          >
+            Sign (Dangerous)
+          </button>
+        </div>
+      ) : (
+        <div className="px-6 py-4 border-t border-[var(--wui-color-border)]">
+          <div className="flex items-center gap-2 text-sm text-[var(--wui-color-text-secondary)]">
+            <svg className="animate-spin h-4 w-4 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+            Review in {walletName || 'wallet'}...
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/TransactionStatus.tsx

@@ -0,0 +1,61 @@
+import { Spinner } from './Spinner'
+
+export type TransactionStatusValue = 'idle' | 'signing' | 'sending' | 'success' | 'error'
+
+interface TransactionStatusProps {
+  status: TransactionStatusValue
+  error: string | null
+  successMessage: string
+  onRetry: () => void
+}
+
+export function TransactionStatus({ status, error, successMessage, onRetry }: TransactionStatusProps) {
+  if (status === 'idle') return null
+
+  if (status === 'signing') {
+    return (
+      <div className="flex items-center justify-center py-4 text-sm text-[var(--wui-color-text-secondary)]">
+        <Spinner className="h-4 w-4 mr-2" />
+        Waiting for signature...
+      </div>
+    )
+  }
+
+  if (status === 'sending') {
+    return (
+      <div className="flex items-center justify-center py-4 text-sm text-[var(--wui-color-text-secondary)]">
+        <Spinner className="h-4 w-4 mr-2" />
+        Sending transaction...
+      </div>
+    )
+  }
+
+  if (status === 'success') {
+    return (
+      <div className="text-center py-4">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-8 w-8 mx-auto mb-2 text-green-500"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fillRule="evenodd"
+            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+            clipRule="evenodd"
+          />
+        </svg>
+        <p className="text-sm font-medium text-[var(--wui-color-text)]">{successMessage}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="text-center py-3">
+      <p className="text-sm text-[var(--wui-color-danger-text)] mb-2">{error}</p>
+      <button onClick={onRetry} className="text-sm text-[var(--wui-color-primary)] hover:underline">
+        Try again
+      </button>
+    </div>
+  )
+}

package/src/components/WelcomeContent.tsx

@@ -0,0 +1,171 @@
+import { useCallback, useState } from 'react'
+
+export interface WelcomeContentProps {
+  algorandAddress: string
+  evmAddress: string
+  onClose: () => void
+  labelId?: string
+  descriptionId?: string
+}
+
+function shortAddress(address: string) {
+  return `${address.slice(0, 6)}...${address.slice(-6)}`
+}
+
+export function WelcomeContent({
+  algorandAddress,
+  evmAddress,
+  onClose,
+  labelId,
+  descriptionId,
+}: WelcomeContentProps) {
+  const [copiedField, setCopiedField] = useState<'evm' | 'algorand' | null>(null)
+
+  const handleCopy = useCallback((address: string, field: 'evm' | 'algorand') => {
+    navigator.clipboard.writeText(address)
+    setCopiedField(field)
+    setTimeout(() => setCopiedField(null), 1500)
+  }, [])
+
+  const shortAlgorandAddress = shortAddress(algorandAddress)
+  const shortEvmAddress = shortAddress(evmAddress)
+
+  return (
+    <>
+      {/* Header */}
+      <div className="relative flex items-center px-6 pt-5 pb-4">
+        <h2 id={labelId} className="text-xl font-bold text-[var(--wui-color-text)] wallet-custom-font">
+          Welcome to Algorand
+        </h2>
+        <button
+          onClick={onClose}
+          className="absolute right-4 top-5 w-9 h-9 flex items-center justify-center rounded-full bg-[var(--wui-color-bg-tertiary)] text-[var(--wui-color-text-secondary)] hover:brightness-90 transition-all"
+          aria-label="Close dialog"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path
+              fillRule="evenodd"
+              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
+
+      {/* Content */}
+      <div id={descriptionId} className="px-6 pb-4 space-y-4">
+        <p className="text-sm text-[var(--wui-color-text-secondary)]">
+          You can use Algorand with your very own Liquid EVM account, which wraps your EVM private key, preserving full
+          self-custodial control.{' '}
+          <a
+            className="text-[var(--wui-color-link)] hover:text-[var(--wui-color-link-hover)]"
+            rel="noopener noreferrer"
+            href="#"
+            onClick={() => {
+              alert('Soon')
+              return false
+            }}
+          >
+            Learn more.
+          </a>
+        </p>
+
+        <div className="!my-4 rounded-xl border border-[var(--wui-color-border)] bg-[var(--wui-color-bg-secondary)] p-3 space-y-2">
+          <div className="flex justify-between items-center text-xs">
+            <span className="text-[var(--wui-color-text-tertiary)]">Your EVM Address</span>
+            <span className="flex items-center gap-1.5">
+              <span className="text-[var(--wui-color-text-secondary)] font-mono">{shortEvmAddress}</span>
+              <button
+                onClick={() => handleCopy(evmAddress, 'evm')}
+                className="text-[var(--wui-color-text-tertiary)] hover:text-[var(--wui-color-text-secondary)] transition-colors"
+                aria-label="Copy EVM address"
+              >
+                {copiedField === 'evm' ? (
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-3.5 w-3.5 text-green-500"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                ) : (
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
+                    <path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
+                    <path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
+                  </svg>
+                )}
+              </button>
+            </span>
+          </div>
+          <div className="flex justify-between items-center text-xs">
+            <span className="text-[var(--wui-color-text-tertiary)]">Your Algorand Address</span>
+            <span className="flex items-center gap-1.5">
+              <span className="text-[var(--wui-color-text-secondary)] font-mono">{shortAlgorandAddress}</span>
+              <button
+                onClick={() => handleCopy(algorandAddress, 'algorand')}
+                className="text-[var(--wui-color-text-tertiary)] hover:text-[var(--wui-color-text-secondary)] transition-colors"
+                aria-label="Copy Algorand address"
+              >
+                {copiedField === 'algorand' ? (
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-3.5 w-3.5 text-green-500"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                ) : (
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
+                    <path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
+                    <path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
+                  </svg>
+                )}
+              </button>
+            </span>
+          </div>
+        </div>
+
+        <p className="text-sm text-[var(--wui-color-text-secondary)]">
+          To get started,{' '}
+          <a className="text-[var(--wui-color-link)] hover:text-[var(--wui-color-link-hover)]" rel="noopener noreferrer" target="_blank" href="https://algorand.co/ecosystem/directory?tags=CEX">
+            fund
+          </a>{' '}
+          your new Algorand account via CEX, Card onramp, or{' '}
+          <a className="text-[var(--wui-color-link)] hover:text-[var(--wui-color-link-hover)]" rel="noopener noreferrer" target="_blank" href="https://core.allbridge.io/?ft=USDC&tt=USDC&f=BAS&t=ALG">
+            bridge USDC
+          </a>{' '}
+          in 2 minutes.
+        </p>
+      </div>
+
+      {/* Action buttons */}
+      <div className="px-6 py-4 border-t border-[var(--wui-color-border)] flex flex gap-2">
+        <button
+          onClick={() => {
+            onClose()
+            window.open('https://algorand.co/algorand-start-here#hs_cos_wrapper_widget_1769533007886')
+          }}
+          className="w-full py-2.5 px-4 bg-[var(--wui-color-primary)] text-[var(--wui-color-primary-text)] font-medium rounded-xl hover:brightness-90 transition-all text-sm"
+        >
+          Get Started
+        </button>
+        <button
+          onClick={onClose}
+          className="w-full py-2.5 px-4 bg-[var(--wui-color-bg-tertiary)] text-[var(--wui-color-text-secondary)] font-medium rounded-xl hover:brightness-90 transition-all text-sm"
+        >
+          Close
+        </button>
+      </div>
+    </>
+  )
+}

package/src/formatters.ts

@@ -0,0 +1,19 @@
+import type { TransactionData, AssetInfo } from './types'
+
+export function formatAssetAmount(rawAmount: bigint | string | undefined, info: AssetInfo): string {
+  if (rawAmount === undefined) return `0 ${info.unitName}`
+  const amount = typeof rawAmount === 'bigint' ? rawAmount : BigInt(rawAmount)
+  if (info.decimals === 0) return `${amount} ${info.unitName}`
+  const divisor = 10n ** BigInt(info.decimals)
+  const whole = amount / divisor
+  const remainder = amount % divisor
+  if (remainder === 0n) return `${whole} ${info.unitName}`
+  const frac = remainder.toString().padStart(info.decimals, '0').replace(/0+$/, '')
+  return `${whole}.${frac} ${info.unitName}`
+}
+
+export function assetLabel(txn: TransactionData, info?: AssetInfo): string {
+  if (info?.unitName) return info.unitName
+  if (!txn.assetIndex) return 'ASA'
+  return `ASA#${txn.assetIndex}`
+}

package/src/hooks/useAssets.ts

@@ -0,0 +1,43 @@
+import { useQueries } from '@tanstack/react-query'
+import { useMemo } from 'react'
+import type { AssetInfo, AssetLookupClient } from '../types'
+
+export function useAssets(
+  assetIds: string[],
+  algodClient: AssetLookupClient | undefined,
+): {
+  loading: boolean
+  assets: Record<string, AssetInfo>
+} {
+  const results = useQueries({
+    queries: assetIds.map((id) => ({
+      queryKey: ['asset', id],
+      queryFn: async (): Promise<AssetInfo> => {
+        const result = await algodClient!.getAssetByID(Number(id)).do()
+        return {
+          decimals: result.params.decimals,
+          unitName: result.params.unitName || '',
+        }
+      },
+      retries: 0,
+      enabled: !!algodClient,
+      staleTime: Infinity,
+      gcTime: Infinity,
+    })),
+  })
+
+  const loading = results.some((r) => r.isLoading)
+
+  const assets = useMemo(() => {
+    const map: Record<string, AssetInfo> = {}
+    for (let i = 0; i < assetIds.length; i++) {
+      const data = results[i]?.data
+      if (data) {
+        map[assetIds[i]] = data
+      }
+    }
+    return map
+  }, [assetIds, results])
+
+  return { loading, assets }
+}

package/src/hooks/useTransactionData.ts

@@ -0,0 +1,40 @@
+import { useMemo } from 'react'
+import { useAssets } from './useAssets'
+import type { TransactionData, AssetInfo, AssetLookupClient } from '../types'
+
+export function useTransactionData(
+  transactions: TransactionData[],
+  options?: {
+    algodClient?: AssetLookupClient
+    getApplicationAddress?: (appId: number) => { toString(): string }
+  },
+): { loading: boolean; assets: Record<string, AssetInfo>; appEscrows: Record<string, string> } {
+  const algodClient = options?.algodClient
+  const getApplicationAddress = options?.getApplicationAddress
+
+  const assetIds = useMemo(() => {
+    const ids = new Set<string>()
+    for (const txn of transactions) {
+      if (txn.assetIndex) {
+        ids.add(txn.assetIndex.toString())
+      }
+    }
+    return Array.from(ids)
+  }, [transactions])
+
+  const { loading, assets } = useAssets(assetIds, algodClient)
+
+  const appEscrows = useMemo(() => {
+    if (!getApplicationAddress) return {}
+    const escrows: Record<string, string> = {}
+    for (const txn of transactions) {
+      if (txn.type === 'appl' && txn.appIndex) {
+        const escrowAddr = getApplicationAddress(txn.appIndex)
+        escrows[escrowAddr.toString()] = `App ${txn.appIndex}`
+      }
+    }
+    return escrows
+  }, [transactions, getApplicationAddress])
+
+  return { loading, assets, appEscrows }
+}

package/src/index.ts

@@ -0,0 +1,29 @@
+// Types
+export type { TransactionData, TransactionDanger, AssetInfo, AssetLookupClient } from './types'
+
+// Formatters
+export { formatAssetAmount, assetLabel } from './formatters'
+
+// Components
+export { TransactionFlow } from './components/TransactionFlow'
+export type { TransactionFlowProps } from './components/TransactionFlow'
+export { TransactionReview } from './components/TransactionReview'
+export type { TransactionReviewProps } from './components/TransactionReview'
+
+// Shared UI
+export { AlgoSymbol } from './components/AlgoSymbol'
+export { Spinner } from './components/Spinner'
+export { TransactionStatus } from './components/TransactionStatus'
+export type { TransactionStatusValue } from './components/TransactionStatus'
+export { OptInPanel } from './components/OptInPanel'
+export type { OptInPanelProps } from './components/OptInPanel'
+export { SendPanel } from './components/SendPanel'
+export type { SendPanelProps } from './components/SendPanel'
+export { ManagePanel } from './components/ManagePanel'
+export type { ManagePanelProps } from './components/ManagePanel'
+export { WelcomeContent } from './components/WelcomeContent'
+export type { WelcomeContentProps } from './components/WelcomeContent'
+
+// Hooks
+export { useAssets } from './hooks/useAssets'
+export { useTransactionData } from './hooks/useTransactionData'

package/src/types.ts

@@ -0,0 +1,42 @@
+/**
+ * Unified transaction data type used by shared UI components.
+ *
+ * Both `DecodedTransaction` (bigint rawAmount) from the React package
+ * and `SerializableDecodedTransaction` (string rawAmount) from the extension
+ * are structurally compatible with this type.
+ */
+export interface TransactionData {
+  index: number
+  type: string
+  typeLabel: string
+  sender: string
+  senderShort: string
+  receiver?: string
+  receiverShort?: string
+  amount?: string
+  rawAmount?: bigint | string
+  assetIndex?: number
+  appIndex?: number
+  rekeyTo?: string
+  rekeyToShort?: string
+  closeRemainderTo?: string
+  closeRemainderToShort?: string
+  freezeTarget?: string
+  freezeTargetShort?: string
+  isFreezing?: boolean
+}
+
+export type TransactionDanger = 'rekey' | 'closeTo' | false
+
+export interface AssetInfo {
+  decimals: number
+  unitName: string
+}
+
+/**
+ * Minimal interface for algod client asset lookup.
+ * Avoids requiring algosdk as a dependency.
+ */
+export interface AssetLookupClient {
+  getAssetByID(id: number): { do(): Promise<{ params: { decimals: number; unitName?: string } }> }
+}

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}