create-openfort 0.1.10 → 1.0.1

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

@@ -0,0 +1,359 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+type RoutePoint = {
+  x: number
+  y: number
+  delay: number
+}
+
+type Route = {
+  start: RoutePoint
+  end: RoutePoint
+  color: string
+  outDelay?: number
+}
+
+function withOpacity(color: string, opacity: number) {
+  if (color.startsWith('rgb')) {
+    const nums = color.match(/[\d.]+/g)?.map(Number)
+    if (!nums || nums.length < 3) throw new Error('Invalid rgb format')
+    const [r, g, b] = nums
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`
+  }
+
+  throw new Error(`Unsupported color format: ${color}`)
+}
+
+const GlowCanvas = ({
+  accentColor,
+  backgroundColor,
+}: {
+  accentColor: string
+  backgroundColor: string
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null)
+  const mousePosRef = useRef<{ x: number; y: number } | null>(null)
+  const animationRef = useRef<number | null>(null)
+
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
+
+  const color = useMemo(() => withOpacity(accentColor, 0.7), [accentColor])
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      const { width, height } = entries[0].contentRect
+      setDimensions({ width, height })
+      canvas.width = width
+      canvas.height = height
+    })
+
+    resizeObserver.observe(canvas.parentElement as Element)
+    return () => resizeObserver.disconnect()
+  }, [])
+
+  useEffect(() => {
+    if (!dimensions.width || !dimensions.height) return
+
+    let startTime = Date.now()
+
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return
+
+    const gap = 14
+    const dotRadius = 1.5
+
+    const generateDots = (width: number, height: number) => {
+      const dots: { x: number; y: number; radius: number; opacity: number }[] =
+        []
+
+      for (let x = 0; x < width; x += gap) {
+        for (let y = 0; y < height; y += gap) {
+          if (Math.random() > 0.4) {
+            dots.push({
+              x,
+              y,
+              radius: dotRadius,
+              opacity: Math.random() * 0.4 + 0.1,
+            })
+          }
+        }
+      }
+      return dots
+    }
+    const dots = generateDots(dimensions.width, dimensions.height)
+
+    const draw = () => {
+      ctx.clearRect(0, 0, dimensions.width, dimensions.height)
+
+      if (mousePosRef.current) {
+        const { x, y } = mousePosRef.current
+
+        ctx.shadowBlur = 25
+        ctx.shadowColor = backgroundColor
+
+        dots.forEach((dot) => {
+          const dx = dot.x - x
+          const dy = dot.y - y
+          const distance = Math.sqrt(dx * dx + dy * dy)
+
+          ctx.beginPath()
+          ctx.arc(dot.x, dot.y, dot.radius, 0, Math.PI * 2)
+
+          const opacityFactor = 1 - distance / 100
+
+          ctx.fillStyle = withOpacity(accentColor, opacityFactor)
+          ctx.fill()
+        })
+      }
+
+      // Draw the dots
+      dots.forEach((dot) => {
+        ctx.beginPath()
+        ctx.arc(dot.x, dot.y, dot.radius, 0, Math.PI * 2)
+        ctx.fillStyle = withOpacity(backgroundColor, dot.opacity)
+        ctx.fill()
+      })
+
+      drawRoutes()
+      // If all routes are complete, restart the animation
+      const currentTime = (Date.now() - startTime) / 1000
+      if (currentTime > 25) {
+        // Reset after 15 seconds
+        startTime = Date.now()
+      }
+
+      animationRef.current = requestAnimationFrame(draw)
+    }
+
+    // Set up routes that will animate across the map
+    const yOffset = 50
+    const scale = 12
+    const h = 11 * scale
+    const w = 18 * scale
+    const xOffset = (dimensions.width - w) / 2
+
+    const routes: Route[] = [
+      {
+        start: { x: xOffset, y: yOffset + h, delay: 0 },
+        end: { x: xOffset, y: yOffset, delay: 2 },
+        color,
+        outDelay: 10,
+      },
+      {
+        start: { x: xOffset, y: yOffset, delay: 2 },
+        end: { x: xOffset + w, y: yOffset, delay: 4 },
+        color,
+        outDelay: 10,
+      },
+      {
+        start: { x: xOffset + w, y: yOffset, delay: 4 },
+        end: { x: xOffset + w, y: yOffset + h, delay: 6 },
+        color,
+        outDelay: 10,
+      },
+
+      {
+        start: { x: xOffset + w / 4, y: yOffset + h / 3, delay: 4 },
+        end: { x: xOffset + w / 4, y: yOffset + h, delay: 6 },
+        color,
+        outDelay: 10,
+      },
+      {
+        start: { x: xOffset + (3 * w) / 4, y: yOffset + h / 3, delay: 2 },
+        end: { x: xOffset + w / 4, y: yOffset + h / 3, delay: 4 },
+        color,
+        outDelay: 10,
+      },
+      {
+        start: { x: xOffset + (3 * w) / 4, y: yOffset + h, delay: 0 },
+        end: { x: xOffset + (3 * w) / 4, y: yOffset + h / 3, delay: 2 },
+        color,
+        outDelay: 10,
+      },
+
+      {
+        start: { x: xOffset + (2 * w) / 4, y: yOffset + h, delay: 6 },
+        end: { x: xOffset + (2 * w) / 4, y: yOffset + (2 * h) / 3, delay: 7 },
+        color,
+        outDelay: 10,
+      },
+
+      {
+        start: { x: 200, y: 280, delay: 2 },
+        end: { x: 260, y: 420, delay: 4 },
+        color,
+      },
+      {
+        start: { x: 50, y: 550, delay: 2 },
+        end: { x: 150, y: 380, delay: 7 },
+        outDelay: 4,
+        color,
+      },
+      {
+        start: { x: 280, y: 260, delay: 7.5 },
+        end: { x: 80, y: 280, delay: 12.5 },
+        color,
+      },
+
+      {
+        start: { x: 380, y: 460, delay: 15 },
+        end: { x: 180, y: 520, delay: 20 },
+        color,
+      },
+    ]
+
+    function drawRoutes() {
+      if (!ctx) return
+
+      const debug = false
+
+      const currentTime = (Date.now() - startTime) / 1000 // Time in seconds
+      routes.forEach((route) => {
+        const elapsed = debug ? 100 : currentTime - route.start.delay
+        if (elapsed <= 0) return
+
+        const duration = route.end.delay - route.start.delay // animation duration
+        const progress = Math.min(elapsed / duration, 1) // normal progress
+
+        // Fade from end to start after the line is fully drawn
+        let startProgress = 0 // the starting point along the line
+        const outDelay = route.outDelay || 0
+        if (elapsed > duration + outDelay) {
+          const fadeProgress = Math.min(
+            (elapsed - (duration + outDelay)) / duration,
+            1,
+          )
+          startProgress = fadeProgress // move the start point forward
+        }
+
+        // Line vector
+        const dx = route.end.x - route.start.x
+        const dy = route.end.y - route.start.y
+
+        for (let x = 0; x < dimensions.width; x += gap) {
+          for (let y = 0; y < dimensions.height; y += gap) {
+            const t =
+              ((x - route.start.x) * dx + (y - route.start.y) * dy) /
+              (dx * dx + dy * dy)
+            if (t < startProgress || t > progress) continue // only show dots in the visible segment
+
+            const closestX = route.start.x + dx * t
+            const closestY = route.start.y + dy * t
+            const distance = Math.hypot(x - closestX, y - closestY)
+
+            if (distance < gap) {
+              ctx.beginPath()
+              ctx.arc(x, y, dotRadius, 0, Math.PI * 2)
+
+              // Fade in: opacity goes from 0 → 1 as `progress` grows
+              const opacity = Math.min(
+                1,
+                Math.max(0, Math.min(t - startProgress, progress - t) * 5),
+              )
+              ctx.fillStyle = withOpacity(route.color, opacity)
+
+              ctx.fill()
+            }
+          }
+        }
+
+        if (debug) {
+          const xStart = route.start.x
+          const yStart = route.start.y
+          const xEnd = route.start.x + dx * progress
+          const yEnd = route.start.y + dy * progress
+
+          ctx.beginPath()
+          ctx.moveTo(xStart, yStart)
+          ctx.lineTo(xEnd, yEnd)
+          ctx.strokeStyle = route.color
+          ctx.lineWidth = 1.5
+          ctx.stroke()
+
+          ctx.beginPath()
+          ctx.arc(xEnd, yEnd, 3, 0, Math.PI * 2)
+          ctx.fillStyle = route.color
+          ctx.fill()
+        }
+      })
+    }
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const rect = canvas.getBoundingClientRect()
+      mousePosRef.current = {
+        x: e.x - rect.left,
+        y: e.y - rect.top,
+      }
+    }
+
+    document.addEventListener('mousemove', handleMouseMove)
+
+    draw()
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove)
+      if (animationRef.current) cancelAnimationFrame(animationRef.current)
+    }
+  }, [dimensions, accentColor, backgroundColor, color])
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className="absolute inset-0 w-full h-full pointer-events-none"
+    />
+  )
+}
+
+export const Head = ({
+  onStart,
+  sample,
+  color,
+  backgroundColor = color,
+  logo,
+  href,
+  subtitle,
+}: {
+  onStart: () => void
+  sample: string
+  color: string
+  backgroundColor?: string
+  logo: string
+  href: string
+  subtitle?: string
+}) => {
+  return (
+    <div
+      className="bg-zinc-900 w-(--card-width) flex flex-col items-center justify-center text-center relative"
+      style={{ '--color-sample': color } as React.CSSProperties}
+    >
+      <div className='z-10'>
+        <a href="https://openfort.io/" target="_blank" rel="noopener">
+          <img src="/openfort.svg" className="logo" alt="Openfort logo" />
+        </a>
+        <a href={href} target="_blank">
+          <img src={logo} className="logo sample-logo" alt={`${sample} logo`} />
+        </a>
+      </div>
+      <h1 className="relative z-10 text-4xl font-bold mb-4">
+        <span style={{ color: '#FC3627' }}>Openfort</span> +{' '}
+        <span style={{ color }}>{sample}</span>
+      </h1>
+      {subtitle && <p className="relative z-10 mb-6 text-sm max-w-2/3">{subtitle}</p>}
+      <button
+        className="relative z-10 lg:hidden mt-4 px-6 py-2 border border-zinc-500 rounded hover:bg-zinc-500/10 transition-colors cursor-pointer"
+        onClick={onStart}
+      >
+        Click here to Start
+      </button>
+      <p className="absolute z-10 text-zinc-400 mb-6 text-sm bottom-0">
+        Sign in to explore openfort capabilities.
+      </p>
+      <GlowCanvas accentColor={color} backgroundColor={backgroundColor} />
+    </div>
+  )
+}

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

@@ -0,0 +1,134 @@
+import { useSolanaEmbeddedWallet } from '@openfort/react/solana'
+import { useEffect, useState } from 'react'
+import { getTransactionHistory } from '../../lib/solana'
+import { TruncateData } from '../ui/TruncateData'
+
+interface TransactionHistoryItem {
+  signature: string
+  slot: number
+  blockTime: number | null
+  err: unknown | null
+  memo: string | null
+}
+
+function getSolanaExplorerUrl(signature: string, cluster: string): string {
+  const clusterParam = cluster === 'mainnet-beta' ? '' : `?cluster=${cluster}`
+  return `https://explorer.solana.com/tx/${signature}${clusterParam}`
+}
+
+const COLLAPSED_COUNT = 4
+
+export const History = () => {
+  const { address, cluster, rpcUrl } = useSolanaEmbeddedWallet()
+  const [transactions, setTransactions] = useState<TransactionHistoryItem[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [showAll, setShowAll] = useState(false)
+
+  const rpc = rpcUrl ?? 'https://api.devnet.solana.com'
+
+  const fetchHistory = () => {
+    if (!address) return
+    setIsLoading(true)
+    setError(null)
+    getTransactionHistory(address, 20, rpc)
+      .then(setTransactions)
+      .catch((err) => setError(err instanceof Error ? err.message : 'Failed to load history'))
+      .finally(() => setIsLoading(false))
+  }
+
+  useEffect(() => {
+    fetchHistory()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [address, rpc])
+
+  const visible = showAll ? transactions : transactions.slice(0, COLLAPSED_COUNT)
+  const hasMore = transactions.length > COLLAPSED_COUNT
+
+  const formatTime = (blockTime: number | null) => {
+    if (!blockTime) return '--'
+    return new Date(blockTime * 1000).toLocaleString()
+  }
+
+  return (
+    <div className="flex flex-col w-full">
+      <div className="flex items-center justify-between mb-4">
+        <div>
+          <h1>Transaction History</h1>
+          <p className="text-sm text-zinc-400">Recent transactions for your Solana wallet.</p>
+        </div>
+        <button
+          type="button"
+          onClick={fetchHistory}
+          disabled={isLoading}
+          className="p-2 border border-zinc-700 rounded hover:bg-zinc-700/20 hover:border-zinc-300 transition-colors cursor-pointer text-xs"
+        >
+          {isLoading ? '...' : 'Refresh'}
+        </button>
+      </div>
+
+      {error && <TruncateData data={error} className="text-red-500" />}
+
+      {isLoading ? (
+        <p className="text-sm text-zinc-400">Loading...</p>
+      ) : transactions.length === 0 ? (
+        <p className="text-sm text-zinc-400">No transactions found.</p>
+      ) : (
+        <div className="space-y-2">
+          {visible.map((tx) => {
+            const explorerUrl = cluster
+              ? getSolanaExplorerUrl(tx.signature, cluster)
+              : null
+            const isError = tx.err != null
+
+            return (
+              <div
+                key={tx.signature}
+                className="flex items-center justify-between text-sm border-b border-zinc-700 pb-2 last:border-0"
+              >
+                <div className="flex flex-col gap-0.5 min-w-0 flex-1 mr-2">
+                  <span className="font-mono text-xs truncate">
+                    {explorerUrl ? (
+                      <a
+                        href={explorerUrl}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="text-primary hover:underline"
+                      >
+                        {tx.signature.slice(0, 20)}...
+                      </a>
+                    ) : (
+                      `${tx.signature.slice(0, 20)}...`
+                    )}
+                  </span>
+                  <span className="text-xs text-zinc-400">{formatTime(tx.blockTime)}</span>
+                </div>
+                <span
+                  className={`text-xs font-medium px-2 py-0.5 rounded-full shrink-0 ${
+                    isError
+                      ? 'bg-red-900/30 text-red-400'
+                      : 'bg-green-900/30 text-green-400'
+                  }`}
+                >
+                  {isError ? 'Failed' : 'Success'}
+                </span>
+              </div>
+            )
+          })}
+
+          {hasMore && (
+            <button
+              type="button"
+              onClick={() => setShowAll((v) => !v)}
+              className="text-sm text-primary hover:underline w-full text-center pt-1 cursor-pointer"
+            >
+              {showAll
+                ? 'Show less'
+                : `Show more (${transactions.length - COLLAPSED_COUNT})`}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,140 @@
+import {
+  ClockIcon,
+  HomeIcon,
+  PaperAirplaneIcon,
+  PencilSquareIcon,
+  WalletIcon,
+} from '@heroicons/react/24/outline'
+import { useUser } from '@openfort/react'
+import { useState } from 'react'
+import { DesktopTabGroup, MobileTabGroup, type TabType } from '../ui/Tabs'
+import { Auth } from './auth'
+import { Head } from './head'
+import { History } from './history'
+import { Profile } from './profile'
+import { Send } from './send'
+import { Sign } from './sign'
+import { Wallets } from './wallets'
+
+interface LayoutProps {
+  children: React.ReactNode
+  step: number
+  tabs?: TabType[]
+  currentTab?: TabType
+  setCurrentTab?: (tab: TabType) => void
+  showTabs?: boolean
+}
+
+const Layout = ({
+  children,
+  step,
+  tabs,
+  currentTab,
+  setCurrentTab,
+  showTabs,
+}: LayoutProps) => {
+  return (
+    <div className="min-h-screen min-w-screen bg-zinc-900 flex flex-col items-center justify-center">
+      <div className="relative">
+        <DesktopTabGroup
+          tabs={tabs || []}
+          currentTab={currentTab}
+          setCurrentTab={setCurrentTab}
+          showTabs={showTabs}
+        />
+        <div className="w-(--card-group-width) layout-card-group">
+          <div
+            className="h-(--card-group-height) grid grid-flow-col auto-cols-max transition-transform duration-500"
+            style={{
+              transform: `translateX(calc(-${step} * var(--card-width)))`,
+            }}
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const Main = () => {
+  const { isAuthenticated } = useUser()
+  const [step, setStep] = useState(0)
+
+  const tabs: TabType[] = [
+    {
+      name: 'Home',
+      component: (
+        <Profile
+          sampleGithubUrl="https://github.com/openfort-xyz/openfort-react/tree/main/examples/quickstarts/solana-headless"
+          description="This is a demo app using Headless Wallet with Solana and Openfort."
+        />
+      ),
+      icon: HomeIcon,
+    },
+    {
+      name: 'Sign',
+      component: <Sign />,
+      icon: PencilSquareIcon,
+    },
+    {
+      name: 'Send',
+      component: <Send />,
+      icon: PaperAirplaneIcon,
+    },
+    {
+      name: 'History',
+      component: <History />,
+      icon: ClockIcon,
+    },
+    {
+      name: 'Wallets',
+      component: <Wallets />,
+      icon: WalletIcon,
+    },
+  ]
+  const [currentTab, setCurrentTab] = useState<TabType>(tabs[0])
+
+  return (
+    <Layout
+      step={step}
+      showTabs={!!isAuthenticated}
+      tabs={tabs}
+      currentTab={currentTab}
+      setCurrentTab={setCurrentTab}
+    >
+      <Head
+        onStart={() => setStep(1)}
+        sample="Solana"
+        color="rgba(153,69,255,1)"
+        logo="/solanaLogo.svg"
+        href="https://solana.com/"
+        subtitle="Get started with headless Solana wallet integration using Openfort Authentication"
+      />
+      {!isAuthenticated ? (
+        <Auth />
+      ) : (
+        <div className="block relative overflow-y-auto overflow-x-hidden">
+          <div className="card flex-col min-h-full">
+            <div className="w-full flex-1 relative">
+              {tabs.map((tab) => (
+                <div
+                  key={tab.name}
+                  className={`w-full flex-1 flex${currentTab.name === tab.name ? '' : ' hidden'}`}
+                >
+                  {tab.component}
+                </div>
+              ))}
+            </div>
+            <MobileTabGroup
+              tabs={tabs}
+              currentTab={currentTab}
+              setCurrentTab={setCurrentTab}
+            />
+          </div>
+        </div>
+      )}
+      <div className="card relative" />
+    </Layout>
+  )
+}

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

@@ -0,0 +1,80 @@
+import { BookOpenIcon } from '@heroicons/react/24/outline'
+import { useSignOut, useUser } from '@openfort/react'
+import { useSolanaEmbeddedWallet } from '@openfort/react/solana'
+import { Wallets } from './wallets'
+
+export const Profile = ({
+  sampleGithubUrl,
+  description,
+}: {
+  sampleGithubUrl: string
+  description: string
+}) => {
+  const { user } = useUser()
+  const isLocal = window.location.hostname === 'localhost'
+  const { signOut } = useSignOut()
+  const { status } = useSolanaEmbeddedWallet()
+
+  if (status !== 'connected' && status !== 'connecting') {
+    return <Wallets />
+  }
+
+  return (
+    <div className="flex flex-col flex-1 gap-4">
+      <h1 className="truncate">Welcome, {user?.name || user?.email}</h1>
+      <p className="text-zinc-400 text-sm">
+        {description}
+        <br />
+        You can sign messages and send SOL transactions.
+      </p>
+      <div className="border border-zinc-700 rounded p-4">
+        <h2 className="mb-2">Get started</h2>
+        <p className="mb-2 text-zinc-400 text-sm">
+          Start by creating a wallet, signing messages and sending SOL.
+        </p>
+        {isLocal ? (
+          <p className="mb-2 text-sm">
+            Edit <code>src/components/main.tsx</code> to customize the app.
+          </p>
+        ) : (
+          <p className="mb-2 text-sm">
+            Clone this project and test it yourself, it is open source!
+          </p>
+        )}
+        <div className="flex gap-4 mt-4">
+          <a
+            href={sampleGithubUrl}
+            className="btn bg-inherit border border-zinc-600 hover:border-zinc-400 text-zinc-400 hover:text-white"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <img
+              src="/githubLogo.svg"
+              className="w-5 h-5 mr-2"
+              alt="GitHub logo"
+            />
+            View on github
+          </a>
+          <a
+            href="https://www.openfort.io/docs/products/embedded-wallet/react"
+            target="_blank"
+            rel="noreferrer"
+            className="btn"
+          >
+            <BookOpenIcon className="h-5 w-5 mr-2" />
+            View docs
+          </a>
+        </div>
+      </div>
+
+      <button
+        onClick={() => {
+          signOut()
+        }}
+        className="btn mt-auto"
+      >
+        Sign Out
+      </button>
+    </div>
+  )
+}