create-openfort 0.1.10 → 1.0.1

package/template/openfort-templates/solana-headless/src/components/cards/send.tsx

@@ -0,0 +1,242 @@
+import { useSolanaEmbeddedWallet } from '@openfort/react/solana'
+import type { Address } from '@solana/kit'
+import { useEffect, useState } from 'react'
+import { fetchSolanaBalance, sendGaslessSolTransaction, sendSolTransaction } from '../../lib/solana'
+import { TruncateData } from '../ui/TruncateData'
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false)
+  const handleCopy = () => {
+    navigator.clipboard.writeText(text)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1500)
+  }
+  return (
+    <button
+      type="button"
+      onClick={handleCopy}
+      className="text-xs text-zinc-400 hover:text-zinc-200 transition-colors cursor-pointer shrink-0"
+    >
+      {copied ? 'Copied!' : 'Copy'}
+    </button>
+  )
+}
+
+function getSolanaExplorerUrl(signature: string, cluster: string): string {
+  const clusterParam = cluster === 'mainnet-beta' ? '' : `?cluster=${cluster}`
+  return `https://explorer.solana.com/tx/${signature}${clusterParam}`
+}
+
+export const Send = () => {
+  const solana = useSolanaEmbeddedWallet()
+  const { address, cluster, rpcUrl } = solana
+  const [isPending, setIsPending] = useState(false)
+  const [txSignature, setTxSignature] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [balance, setBalance] = useState<number | null>(null)
+  const [isLoadingBalance, setIsLoadingBalance] = useState(false)
+
+  const rpc = rpcUrl ?? 'https://api.devnet.solana.com'
+
+  useEffect(() => {
+    if (!address) return
+    setIsLoadingBalance(true)
+    fetchSolanaBalance(rpc, address)
+      .then(setBalance)
+      .catch(() => setBalance(null))
+      .finally(() => setIsLoadingBalance(false))
+  }, [address, rpc])
+
+  const balanceSol = balance != null ? balance / 1e9 : null
+  const balanceFormatted =
+    balanceSol != null
+      ? balanceSol < 0.001
+        ? balanceSol.toExponential(2)
+        : balanceSol.toFixed(4)
+      : null
+
+  const handleSend = async (gasless: boolean) => {
+    if (solana.status !== 'connected' || !address) return
+    const form = document.getElementById('send-sol-form') as HTMLFormElement
+    const recipient = (form.elements.namedItem('recipient') as HTMLInputElement)?.value?.trim()
+    const amountStr = (form.elements.namedItem('amount') as HTMLInputElement)?.value
+    if (!recipient || !amountStr) return
+    const amountInSol = Number.parseFloat(amountStr)
+    if (!Number.isFinite(amountInSol) || amountInSol <= 0) return
+
+    setIsPending(true)
+    setError(null)
+    setTxSignature(null)
+
+    try {
+      const provider = solana.provider
+      if (gasless) {
+        const projectKey = import.meta.env.VITE_OPENFORT_PUBLISHABLE_KEY
+        if (!projectKey) {
+          setError('VITE_OPENFORT_PUBLISHABLE_KEY is not set')
+          return
+        }
+        const { signature } = await sendGaslessSolTransaction({
+          from: address as Address,
+          to: recipient as Address,
+          amountInSol,
+          provider,
+          koraConfig: {
+            rpcUrl: 'https://api.openfort.io/rpc/solana/devnet',
+            apiKey: `Bearer ${projectKey}`,
+          },
+        })
+        setTxSignature(signature)
+      } else {
+        const { signature } = await sendSolTransaction({
+          from: address as Address,
+          to: recipient as Address,
+          amountInSol,
+          provider,
+          rpcUrl: rpc,
+        })
+        setTxSignature(signature)
+      }
+      // Refresh balance after transaction
+      if (address) {
+        fetchSolanaBalance(rpc, address).then(setBalance).catch(() => null)
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Transaction failed')
+    } finally {
+      setIsPending(false)
+    }
+  }
+
+  const explorerUrl =
+    txSignature && cluster
+      ? getSolanaExplorerUrl(txSignature, cluster)
+      : null
+
+  const isConnected = solana.status === 'connected'
+  const otherWallets = solana.wallets.filter((w) => w.address !== address)
+
+  return (
+    <div className="flex flex-col w-full">
+      <h1>Send SOL</h1>
+      <p className="mb-4 text-sm text-zinc-400">
+        Transfer SOL to another address. Supports regular and gasless (Kora) transfers.
+      </p>
+
+      {address && (
+        <div className="mb-4 p-3 border border-zinc-700 rounded bg-zinc-900 text-sm space-y-1">
+          <div className="flex items-center justify-between">
+            <p className="text-zinc-400">
+              Address:{' '}
+              <span className="font-mono text-zinc-200">
+                {address.slice(0, 8)}...{address.slice(-6)}
+              </span>
+            </p>
+            <CopyButton text={address} />
+          </div>
+          <div className="flex items-center justify-between">
+            <p className="text-zinc-400">
+              Balance:{' '}
+              <span className="text-zinc-200">
+                {isLoadingBalance ? '...' : balanceFormatted != null ? `${balanceFormatted} SOL` : '--'}
+              </span>
+            </p>
+            {cluster !== 'mainnet-beta' && (
+              <a
+                href="https://faucet.solana.com/"
+                target="_blank"
+                rel="noreferrer"
+                className="text-xs text-primary hover:underline shrink-0"
+              >
+                Airdrop ↗
+              </a>
+            )}
+          </div>
+        </div>
+      )}
+
+      {otherWallets.length > 0 && (
+        <div className="mb-4 p-3 border border-zinc-700 rounded bg-zinc-900 text-sm space-y-1">
+          <p className="text-zinc-500 text-xs mb-2">Other wallets — Fill to set as recipient</p>
+          {otherWallets.map((w) => (
+            <div key={w.address} className="flex items-center justify-between gap-2">
+              <span className="font-mono text-zinc-300 text-xs truncate">
+                {w.address.slice(0, 10)}...{w.address.slice(-6)}
+              </span>
+              <button
+                type="button"
+                onClick={() => {
+                  const form = document.getElementById('send-sol-form') as HTMLFormElement
+                  const input = form?.elements.namedItem('recipient') as HTMLInputElement
+                  if (input) input.value = w.address
+                }}
+                className="text-xs text-zinc-400 hover:text-zinc-200 transition-colors cursor-pointer shrink-0"
+              >
+                Fill
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <form
+        id="send-sol-form"
+        className="space-y-3"
+        onSubmit={(e) => e.preventDefault()}
+      >
+        <input
+          type="text"
+          name="recipient"
+          placeholder="Recipient address"
+        />
+        <input
+          type="number"
+          name="amount"
+          placeholder="Amount (SOL)"
+          step="0.001"
+          min="0.001"
+          defaultValue="0.001"
+        />
+        <div className="flex gap-2">
+          <button
+            type="button"
+            className="btn flex-1"
+            disabled={isPending || !isConnected}
+            onClick={() => handleSend(false)}
+          >
+            {isPending ? 'Sending...' : 'Send SOL'}
+          </button>
+          <button
+            type="button"
+            className="btn flex-1 bg-zinc-700 hover:bg-zinc-600"
+            disabled={isPending || !isConnected}
+            onClick={() => handleSend(true)}
+          >
+            {isPending ? 'Sending...' : 'Gasless (Kora)'}
+          </button>
+        </div>
+      </form>
+
+      {txSignature && (
+        <div className="mt-4 space-y-2">
+          <p className="text-green-400 text-sm">Transaction sent!</p>
+          <TruncateData data={txSignature} />
+          {explorerUrl && (
+            <a
+              href={explorerUrl}
+              target="_blank"
+              rel="noreferrer"
+              className="text-sm text-primary hover:underline"
+            >
+              View on Solana Explorer
+            </a>
+          )}
+        </div>
+      )}
+
+      {error && (
+        <TruncateData data={error} className="text-red-500" />
+      )}
+    </div>
+  )
+}

package/template/openfort-templates/solana-headless/src/components/cards/sign.tsx

@@ -0,0 +1,48 @@
+import { useSolanaMessageSigner } from '../../hooks/useSolanaMessageSigner'
+import { TruncateData } from '../ui/TruncateData'
+
+function SignMessage() {
+  const { data, signMessage, isPending, error } = useSolanaMessageSigner()
+
+  return (
+    <div>
+      <h2 className="mb-3">Sign Message</h2>
+      <form
+        className="space-y-2"
+        onSubmit={(event) => {
+          event.preventDefault()
+          const formData = new FormData(event.target as HTMLFormElement)
+          signMessage({ message: formData.get('message') as string })
+        }}
+      >
+        <textarea
+          name="message"
+          placeholder="Message to sign"
+          rows={3}
+          className="px-4 py-2 rounded-md bg-zinc-700 border-none outline-none w-full resize-none"
+        />
+        <button type="submit" className="btn" disabled={isPending}>
+          {isPending ? 'Signing...' : 'Sign Message'}
+        </button>
+      </form>
+      {error && (
+        <TruncateData data={error.message} className="text-red-500" />
+      )}
+      <TruncateData data={data} />
+    </div>
+  )
+}
+
+export const Sign = () => {
+  return (
+    <div className="flex flex-col w-full">
+      <h1>Sign Message</h1>
+      <p className="mb-4 text-sm text-zinc-400">
+        Sign messages with your Solana embedded wallet using Ed25519.
+      </p>
+      <div className="space-y-6">
+        <SignMessage />
+      </div>
+    </div>
+  )
+}

package/template/openfort-templates/solana-headless/src/components/cards/wallets.tsx

@@ -0,0 +1,199 @@
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  FingerPrintIcon,
+  KeyIcon,
+  LockClosedIcon,
+} from '@heroicons/react/24/outline'
+import {
+  RecoveryMethod,
+  useSignOut,
+  useUser,
+} from '@openfort/react'
+import {
+  type ConnectedEmbeddedSolanaWallet,
+  useSolanaEmbeddedWallet,
+} from '@openfort/react/solana'
+import { useState } from 'react'
+import { CreateWallet, CreateWalletSheet } from '../createWallet'
+import { WalletRecoverPasswordSheet } from '../passwordRecovery'
+
+const VISIBLE_WALLET_COUNT = 4
+
+const WalletRecoveryBadge = ({ wallet }: { wallet: ConnectedEmbeddedSolanaWallet }) => {
+  let Icon = LockClosedIcon
+  let text = 'Unknown'
+
+  switch (wallet.recoveryMethod) {
+    case RecoveryMethod.PASSWORD:
+      Icon = KeyIcon
+      text = 'Password'
+      break
+    case RecoveryMethod.AUTOMATIC:
+      Icon = LockClosedIcon
+      text = 'Automatic'
+      break
+    case RecoveryMethod.PASSKEY:
+      Icon = FingerPrintIcon
+      text = 'Passkey'
+      break
+  }
+
+  return (
+    <div className="flex items-center text-xs">
+      <span>{text}</span>
+      <Icon className="h-5 w-5 ml-2" />
+    </div>
+  )
+}
+
+const WalletItem = ({
+  wallet,
+  isActive,
+  isConnecting,
+  onClick,
+}: {
+  wallet: ConnectedEmbeddedSolanaWallet
+  isActive: boolean
+  isConnecting: boolean
+  onClick: () => void
+}) => (
+  <button
+    key={wallet.id + wallet.address}
+    className="px-4 py-3 border data-[active=true]:border-zinc-300 border-zinc-700 rounded data-[active=false]:cursor-pointer data-[active=false]:hover:bg-zinc-700/20 hover:border-zinc-300 transition-colors flex-1 text-sm w-full"
+    onClick={onClick}
+    data-active={isActive}
+    disabled={isActive || isConnecting}
+    type="button"
+  >
+    {isConnecting && isActive ? (
+      <p>Connecting...</p>
+    ) : (
+      <div className="flex justify-between items-center">
+        <p className="font-medium mr-2 font-mono">
+          {`${wallet.address.substring(0, 6)}...${wallet.address.substring(wallet.address.length - 4)}`}
+        </p>
+        <WalletRecoveryBadge wallet={wallet} />
+      </div>
+    )}
+  </button>
+)
+
+export const Wallets = () => {
+  const {
+    wallets,
+    status,
+    activeWallet,
+    setActive,
+  } = useSolanaEmbeddedWallet()
+  const isLoadingWallets = status === 'fetching-wallets'
+  const isConnecting = status === 'connecting'
+  const { user, isAuthenticated } = useUser()
+  const { signOut } = useSignOut()
+  const [createWalletSheetOpen, setCreateWalletSheetOpen] = useState(false)
+  const [walletToRecover, setWalletToRecover] =
+    useState<ConnectedEmbeddedSolanaWallet | null>(null)
+  const [showAllWallets, setShowAllWallets] = useState(false)
+
+  const handleWalletClick = (wallet: ConnectedEmbeddedSolanaWallet) => {
+    const isActive = activeWallet?.address.toLowerCase() === wallet.address.toLowerCase()
+    if (isActive || isConnecting) return
+    if (wallet.recoveryMethod === RecoveryMethod.PASSWORD) {
+      setWalletToRecover(wallet)
+    } else {
+      setActive({ address: wallet.address })
+    }
+  }
+
+  if (!activeWallet && isConnecting) return <div>recovering ...</div>
+  if (isLoadingWallets || (!user && isAuthenticated)) {
+    return <div>Loading wallets...</div>
+  }
+  if (wallets.length === 0) {
+    return (
+      <div className="flex gap-2 flex-col w-full">
+        <h1>Create a wallet</h1>
+        <p>You do not have any wallet yet.</p>
+        <CreateWallet />
+      </div>
+    )
+  }
+
+  const visibleWallets = showAllWallets
+    ? wallets
+    : wallets.slice(0, VISIBLE_WALLET_COUNT)
+
+  return (
+    <div className="flex flex-col w-full">
+      <h1>Wallets</h1>
+      <p className="mb-4 text-sm text-zinc-400">
+        Select a wallet to connect to your account.
+      </p>
+      <div className="space-y-4 pb-4">
+        <h2>Your Wallets</h2>
+        <div className="flex flex-col space-y-2">
+          {visibleWallets.map((wallet) => {
+            const isActive =
+              activeWallet?.address.toLowerCase() === wallet.address.toLowerCase()
+
+            return (
+              <WalletItem
+                key={wallet.id}
+                wallet={wallet}
+                isActive={isActive}
+                isConnecting={isConnecting}
+                onClick={() => handleWalletClick(wallet)}
+              />
+            )
+          })}
+
+          {wallets.length > VISIBLE_WALLET_COUNT && (
+            <button
+              type="button"
+              className="flex items-center justify-center gap-1 text-xs text-zinc-400 hover:text-zinc-200 cursor-pointer transition-colors py-1"
+              onClick={() => setShowAllWallets((prev) => !prev)}
+            >
+              {showAllWallets ? (
+                <>
+                  Show less <ChevronUpIcon className="h-4 w-4" />
+                </>
+              ) : (
+                <>
+                  Show {wallets.length - VISIBLE_WALLET_COUNT} more{' '}
+                  <ChevronDownIcon className="h-4 w-4" />
+                </>
+              )}
+            </button>
+          )}
+
+          <button
+            className="p-3 border border-zinc-700 rounded cursor-pointer hover:bg-zinc-700/20 hover:border-zinc-300 transition-colors flex-1"
+            onClick={() => setCreateWalletSheetOpen(true)}
+            type="button"
+          >
+            + Create Wallet
+          </button>
+        </div>
+      </div>
+
+      <WalletRecoverPasswordSheet
+        wallet={walletToRecover}
+        open={!!walletToRecover}
+        onClose={() => setWalletToRecover(null)}
+      />
+      <CreateWalletSheet
+        open={createWalletSheetOpen}
+        onClose={() => setCreateWalletSheetOpen(false)}
+      />
+
+      <button
+        onClick={() => {
+          signOut()
+        }}
+        className="mt-auto btn"
+      >
+        Sign Out
+      </button>
+    </div>
+  )
+}

package/template/openfort-templates/solana-headless/src/components/createWallet.tsx

@@ -0,0 +1,117 @@
+import {
+  FingerPrintIcon,
+  KeyIcon,
+  LockClosedIcon,
+} from '@heroicons/react/24/outline'
+import { RecoveryMethod } from '@openfort/react'
+import { useSolanaEmbeddedWallet } from '@openfort/react/solana'
+import { useState } from 'react'
+import { CreateWalletPasswordSheet } from './passwordRecovery'
+import { Sheet } from './ui/Sheet'
+
+type CreateWalletSheetProps = {
+  open: boolean
+  onClose: () => void
+  onWalletCreated?: () => void
+}
+
+export const CreateWalletSheet = ({ open, onClose, onWalletCreated }: CreateWalletSheetProps) => {
+  return (
+    <Sheet
+      open={open}
+      onClose={onClose}
+      title="Create Wallet"
+      description="Please choose a recovery method for your new wallet."
+    >
+      <CreateWallet
+        onWalletCreated={() => {
+          onClose()
+          onWalletCreated?.()
+        }}
+      />
+    </Sheet>
+  )
+}
+
+export const CreateWallet = ({ onWalletCreated }: { onWalletCreated?: () => void }) => {
+  const { create, status } = useSolanaEmbeddedWallet()
+  const [error, setError] = useState<string | null>(null)
+  const [passwordSheetOpen, setPasswordSheetOpen] = useState(false)
+
+  const isCreating = status === 'creating'
+
+  if (isCreating) {
+    return <div>Creating wallet...</div>
+  }
+
+  const handleCreate = async (recoveryMethod: RecoveryMethod, password?: string) => {
+    try {
+      await create({ recoveryMethod, ...(password && { password }) })
+      onWalletCreated?.()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create wallet')
+    }
+  }
+
+  return (
+    <>
+      <div className="flex flex-col gap-4 wallet-option-group mb-4">
+        <p className="text-sm text-zinc-400">Select recovery method:</p>
+        <button
+          type="button"
+          className="wallet-option cursor-pointer"
+          onClick={() => handleCreate(RecoveryMethod.PASSKEY)}
+        >
+          <FingerPrintIcon />
+          <div className="flex flex-col text-start">
+            <h4>Passkey</h4>
+            <p className="text-sm hover-description">
+              Secure your wallet with biometric authentication.
+            </p>
+          </div>
+        </button>
+        <button
+          type="button"
+          className="wallet-option cursor-pointer"
+          onClick={() => handleCreate(RecoveryMethod.AUTOMATIC)}
+        >
+          <LockClosedIcon />
+          <div className="flex flex-col text-start">
+            <h4>Automatic recovery</h4>
+            <p className="text-sm hover-description">
+              Uses encryption session to recover your wallet.
+            </p>
+          </div>
+        </button>
+        <button
+          type="button"
+          className="wallet-option cursor-pointer"
+          onClick={() => setPasswordSheetOpen(true)}
+        >
+          <KeyIcon />
+          <div className="flex flex-col text-start">
+            <h4>Password</h4>
+            <p className="text-sm hover-description">
+              Create a strong password to secure your wallet.
+            </p>
+          </div>
+        </button>
+      </div>
+
+      {error && <p className="text-red-500 text-sm mb-2">Error: {error}</p>}
+
+      <p className="mb-4 text-xs text-zinc-400">
+        Disclaimer: This is a demo of Openfort recovery methods. In production,
+        it's best to choose one method for a smoother user experience.
+      </p>
+
+      <CreateWalletPasswordSheet
+        open={passwordSheetOpen}
+        onClose={() => setPasswordSheetOpen(false)}
+        create={create}
+        status={status}
+        onCreateWallet={onWalletCreated}
+      />
+    </>
+  )
+}