@multiplatform.one/web3 5.0.27

package/src/components/TransactionStatus.tsx

@@ -0,0 +1,270 @@
+import type { Hash, TransactionReceipt } from "viem";
+import { XStack, YStack, Text, Spinner, Button } from "tamagui";
+import { openUrl } from "@multiplatform.one/platform";
+import type { TransactionStatus as TxStatusType } from "../hooks/useContractWrite";
+
+export interface TransactionStatusProps {
+  status: TxStatusType;
+  hash?: Hash;
+  receipt?: TransactionReceipt;
+  error?: Error | null;
+  onRetry?: () => void;
+  onDismiss?: () => void;
+  explorerUrl?: string;
+  showDetails?: boolean;
+}
+
+/**
+ * Component for displaying transaction status with confirmation UI.
+ *
+ * @example
+ * ```tsx
+ * const { write, status, hash, receipt, error, reset } = useContractWrite({...});
+ *
+ * return (
+ *   <TransactionStatus
+ *     status={status}
+ *     hash={hash}
+ *     receipt={receipt}
+ *     error={error}
+ *     onRetry={reset}
+ *     onDismiss={reset}
+ *     explorerUrl="https://etherscan.io"
+ *   />
+ * );
+ * ```
+ */
+export function TransactionStatus({
+  status,
+  hash,
+  receipt,
+  error,
+  onRetry,
+  onDismiss,
+  explorerUrl,
+  showDetails = true,
+}: TransactionStatusProps) {
+  if (status === "idle") {
+    return null;
+  }
+
+  const statusConfig = getStatusConfig(status);
+  const truncatedHash = hash ? `${hash.slice(0, 10)}...${hash.slice(-8)}` : undefined;
+
+  return (
+    <YStack
+      gap="$3"
+      padding="$4"
+      backgroundColor={statusConfig.backgroundColor}
+      borderRadius="$4"
+      borderWidth={1}
+      borderColor={statusConfig.borderColor}
+    >
+      {/* Status Header */}
+      <XStack alignItems="center" gap="$3">
+        {statusConfig.showSpinner && <Spinner size="small" color={statusConfig.color} />}
+        {statusConfig.icon && (
+          <Text fontSize="$5" color={statusConfig.color}>
+            {statusConfig.icon}
+          </Text>
+        )}
+        <YStack flex={1}>
+          <Text fontWeight="600" fontSize="$4" color={statusConfig.color}>
+            {statusConfig.title}
+          </Text>
+          <Text fontSize="$2" color="$gray10">
+            {statusConfig.description}
+          </Text>
+        </YStack>
+      </XStack>
+
+      {/* Transaction Hash */}
+      {showDetails && hash && (
+        <YStack gap="$1">
+          <Text fontSize="$2" color="$gray11">
+            Transaction Hash
+          </Text>
+          <XStack alignItems="center" gap="$2">
+            <Text fontSize="$3" fontFamily="$mono" color="$gray12">
+              {truncatedHash}
+            </Text>
+            {explorerUrl && (
+              <Button
+                size="$2"
+                chromeless
+                onPress={() => {
+                  openUrl(`${explorerUrl}/tx/${hash}`);
+                }}
+              >
+                <Text fontSize="$2" color="$blue10">
+                  View
+                </Text>
+              </Button>
+            )}
+          </XStack>
+        </YStack>
+      )}
+
+      {/* Receipt Details */}
+      {showDetails && receipt && status === "success" && (
+        <YStack gap="$2" paddingTop="$2" borderTopWidth={1} borderTopColor="$gray5">
+          <XStack justifyContent="space-between">
+            <Text fontSize="$2" color="$gray11">
+              Block Number
+            </Text>
+            <Text fontSize="$2" color="$gray12">
+              {receipt.blockNumber.toString()}
+            </Text>
+          </XStack>
+          <XStack justifyContent="space-between">
+            <Text fontSize="$2" color="$gray11">
+              Gas Used
+            </Text>
+            <Text fontSize="$2" color="$gray12">
+              {receipt.gasUsed.toString()}
+            </Text>
+          </XStack>
+          {receipt.effectiveGasPrice && (
+            <XStack justifyContent="space-between">
+              <Text fontSize="$2" color="$gray11">
+                Effective Gas Price
+              </Text>
+              <Text fontSize="$2" color="$gray12">
+                {(Number(receipt.effectiveGasPrice) / 1e9).toFixed(2)} Gwei
+              </Text>
+            </XStack>
+          )}
+        </YStack>
+      )}
+
+      {/* Error Details */}
+      {error && (
+        <YStack gap="$1" paddingTop="$2" borderTopWidth={1} borderTopColor="$red5">
+          <Text fontSize="$2" color="$red11" fontWeight="500">
+            Error Details
+          </Text>
+          <Text fontSize="$2" color="$red10" numberOfLines={3}>
+            {getErrorMessage(error)}
+          </Text>
+        </YStack>
+      )}
+
+      {/* Action Buttons */}
+      {(status === "error" || status === "success") && (onRetry || onDismiss) && (
+        <XStack gap="$3" paddingTop="$2">
+          {status === "error" && onRetry && (
+            <Button size="$3" theme="active" flex={1} onPress={onRetry}>
+              <Text>Retry</Text>
+            </Button>
+          )}
+          {onDismiss && (
+            <Button size="$3" chromeless flex={1} onPress={onDismiss}>
+              <Text>Dismiss</Text>
+            </Button>
+          )}
+        </XStack>
+      )}
+    </YStack>
+  );
+}
+
+interface StatusConfig {
+  title: string;
+  description: string;
+  color: string;
+  backgroundColor: string;
+  borderColor: string;
+  icon?: string;
+  showSpinner?: boolean;
+}
+
+function getStatusConfig(status: TxStatusType): StatusConfig {
+  switch (status) {
+    case "simulating":
+      return {
+        title: "Simulating Transaction",
+        description: "Verifying the transaction will succeed...",
+        color: "$blue10",
+        backgroundColor: "$blue2",
+        borderColor: "$blue5",
+        showSpinner: true,
+      };
+    case "pending-signature":
+      return {
+        title: "Awaiting Signature",
+        description: "Please confirm the transaction in your wallet",
+        color: "$yellow10",
+        backgroundColor: "$yellow2",
+        borderColor: "$yellow5",
+        showSpinner: true,
+      };
+    case "pending-confirmation":
+      return {
+        title: "Transaction Pending",
+        description: "Waiting for blockchain confirmation...",
+        color: "$orange10",
+        backgroundColor: "$orange2",
+        borderColor: "$orange5",
+        showSpinner: true,
+      };
+    case "success":
+      return {
+        title: "Transaction Confirmed",
+        description: "Your transaction has been confirmed on the blockchain",
+        color: "$green10",
+        backgroundColor: "$green2",
+        borderColor: "$green5",
+        icon: "\u2714", // Checkmark
+      };
+    case "error":
+      return {
+        title: "Transaction Failed",
+        description: "The transaction could not be completed",
+        color: "$red10",
+        backgroundColor: "$red2",
+        borderColor: "$red5",
+        icon: "\u2716", // X mark
+      };
+    default:
+      return {
+        title: "Unknown Status",
+        description: "",
+        color: "$gray10",
+        backgroundColor: "$gray2",
+        borderColor: "$gray5",
+      };
+  }
+}
+
+function getErrorMessage(error: Error): string {
+  const message = error.message || "Unknown error occurred";
+
+  // Common error message patterns
+  if (message.includes("User rejected")) {
+    return "Transaction was rejected by the user";
+  }
+  if (message.includes("insufficient funds")) {
+    return "Insufficient funds to complete this transaction";
+  }
+  if (message.includes("execution reverted")) {
+    // Try to extract the revert reason
+    const revertMatch = message.match(/execution reverted: (.*?)(?:"|$)/);
+    if (revertMatch) {
+      return revertMatch[1];
+    }
+    return "Transaction would fail. Check contract conditions.";
+  }
+  if (message.includes("nonce")) {
+    return "Transaction nonce error. Try resetting your wallet.";
+  }
+  if (message.includes("gas")) {
+    return "Gas estimation failed. The transaction may fail.";
+  }
+
+  // Truncate long messages
+  if (message.length > 150) {
+    return message.slice(0, 147) + "...";
+  }
+
+  return message;
+}

package/src/components/WalletButton.native.tsx

@@ -0,0 +1,93 @@
+import type { ReactNode } from "react";
+import { Button, Text, XStack, type ButtonProps } from "tamagui";
+import { useAccount, useConnect, useDisconnect } from "wagmi";
+
+/**
+ * Native WalletButton/Avatar/Status. Same API as the web (connectkit) versions,
+ * but driven by wagmi hooks over the bridge connector — pressing connect makes
+ * the WebView show the real ConnectKit modal. No ENS-avatar image / inline SVG
+ * (web-only); addresses are shown truncated.
+ */
+export interface WalletButtonProps extends Omit<ButtonProps, "children"> {
+  showBalance?: boolean;
+  showAvatar?: boolean;
+  label?: string;
+  mode?: "default" | "custom";
+}
+
+function truncate(address?: string): string {
+  return address ? `${address.slice(0, 6)}…${address.slice(-4)}` : "";
+}
+
+function useConnectAction() {
+  const { address, isConnected } = useAccount();
+  const { connect, connectors, isPending } = useConnect();
+  const { disconnect } = useDisconnect();
+  const show = () => {
+    if (isConnected) disconnect();
+    else if (connectors[0]) connect({ connector: connectors[0] });
+  };
+  return { address, isConnected, isConnecting: isPending, show };
+}
+
+export function WalletButton({
+  showBalance: _showBalance = false,
+  showAvatar: _showAvatar = true,
+  label = "Connect Wallet",
+  mode: _mode = "default",
+  ...buttonProps
+}: WalletButtonProps) {
+  const { address, isConnected, isConnecting, show } = useConnectAction();
+  return (
+    <Button onPress={show} disabled={isConnecting} {...buttonProps}>
+      <XStack alignItems="center" gap="$2">
+        <Text>{isConnecting ? "Connecting…" : isConnected ? truncate(address) : label}</Text>
+      </XStack>
+    </Button>
+  );
+}
+
+export interface WalletAvatarProps {
+  size?: number;
+}
+
+export function WalletAvatar({ size = 24 }: WalletAvatarProps) {
+  const { isConnected, show } = useConnectAction();
+  if (!isConnected) return null;
+  return <Button onPress={show} size="$2" circular padding={0} width={size} height={size} />;
+}
+
+export interface WalletStatusProps {
+  showBalance?: boolean;
+  renderConnected?: (props: { address: string; ensName?: string; balance?: string }) => ReactNode;
+  renderDisconnected?: () => ReactNode;
+}
+
+export function WalletStatus({
+  showBalance: _showBalance = true,
+  renderConnected,
+  renderDisconnected,
+}: WalletStatusProps) {
+  const { address, isConnected, show } = useConnectAction();
+
+  if (isConnected && address) {
+    if (renderConnected) return <>{renderConnected({ address })}</>;
+    return (
+      <XStack alignItems="center" gap="$2">
+        <Text fontSize="$2" color="$gray11">
+          {truncate(address)}
+        </Text>
+        <Button size="$2" onPress={show}>
+          <Text>Manage</Text>
+        </Button>
+      </XStack>
+    );
+  }
+
+  if (renderDisconnected) return <>{renderDisconnected()}</>;
+  return (
+    <Button onPress={show}>
+      <Text>Connect Wallet</Text>
+    </Button>
+  );
+}

package/src/components/WalletButton.tsx

@@ -0,0 +1,126 @@
+import { ConnectKitButton } from "../connectkit";
+import { Button, Text, XStack, type ButtonProps } from "tamagui";
+import type { ReactNode } from "react";
+
+export interface WalletButtonProps extends Omit<ButtonProps, "children"> {
+  showBalance?: boolean;
+  showAvatar?: boolean;
+  label?: string;
+  mode?: "default" | "custom";
+}
+
+export function WalletButton({
+  showBalance = false,
+  showAvatar = true,
+  label = "Connect Wallet",
+  mode = "default",
+  ...buttonProps
+}: WalletButtonProps) {
+  if (mode === "default") {
+    return <ConnectKitButton showBalance={showBalance} showAvatar={showAvatar} label={label} />;
+  }
+
+  return (
+    <ConnectKitButton.Custom>
+      {({ isConnected, isConnecting, show, address, ensName }) => (
+        <Button onPress={show} disabled={isConnecting} {...buttonProps}>
+          <XStack alignItems="center" gap="$2">
+            <WalletIcon />
+            <Text>
+              {isConnecting
+                ? "Connecting..."
+                : isConnected
+                  ? ensName || `${address?.slice(0, 6)}...${address?.slice(-4)}`
+                  : label}
+            </Text>
+          </XStack>
+        </Button>
+      )}
+    </ConnectKitButton.Custom>
+  );
+}
+
+export interface WalletAvatarProps {
+  size?: number;
+}
+
+export function WalletAvatar({ size = 24 }: WalletAvatarProps) {
+  return (
+    <ConnectKitButton.Custom>
+      {({ show, isConnected }) =>
+        isConnected ? (
+          <Button onPress={show} size="$2" circular padding={0} width={size} height={size}>
+            <ConnectKitButton showAvatar />
+          </Button>
+        ) : null
+      }
+    </ConnectKitButton.Custom>
+  );
+}
+
+export interface WalletStatusProps {
+  showBalance?: boolean;
+  renderConnected?: (props: { address: string; ensName?: string; balance?: string }) => ReactNode;
+  renderDisconnected?: () => ReactNode;
+}
+
+export function WalletStatus({
+  showBalance: _showBalance = true,
+  renderConnected,
+  renderDisconnected,
+}: WalletStatusProps) {
+  return (
+    <ConnectKitButton.Custom>
+      {({ isConnected, address, ensName, show }) => {
+        if (isConnected && address) {
+          if (renderConnected) {
+            return renderConnected({ address, ensName });
+          }
+          return (
+            <XStack alignItems="center" gap="$2">
+              <Text fontSize="$2" color="$gray11">
+                {ensName || `${address.slice(0, 6)}...${address.slice(-4)}`}
+              </Text>
+              <Button size="$2" onPress={show}>
+                <Text>Manage</Text>
+              </Button>
+            </XStack>
+          );
+        }
+
+        if (renderDisconnected) {
+          return renderDisconnected();
+        }
+
+        return (
+          <Button onPress={show}>
+            <XStack alignItems="center" gap="$2">
+              <WalletIcon />
+              <Text>Connect Wallet</Text>
+            </XStack>
+          </Button>
+        );
+      }}
+    </ConnectKitButton.Custom>
+  );
+}
+
+function WalletIcon() {
+  return (
+    <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="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0-2 2v0a2 2 0 0 0 2 2h13a1 1 0 0 1 1 1v4" />
+      <path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4" />
+      <rect width="7" height="5" x="14" y="10" rx="1" />
+    </svg>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,16 @@
+export {
+  WalletButton,
+  WalletAvatar,
+  WalletStatus,
+  type WalletButtonProps,
+  type WalletAvatarProps,
+  type WalletStatusProps,
+} from "./WalletButton";
+
+export { NetworkSwitcher, type NetworkSwitcherProps } from "./NetworkSwitcher";
+
+export { TransactionStatus, type TransactionStatusProps } from "./TransactionStatus";
+
+// Re-export ConnectKitButton for advanced customization (platform-split: the bare
+// connectkit import lives in ConnectKitButton.tsx; native uses a bridge-backed one).
+export { ConnectKitButton } from "./ConnectKitButton";