create-openfort 0.1.10 → 1.0.1

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

@@ -0,0 +1,167 @@
+import { CheckCircleIcon } from '@heroicons/react/24/outline'
+import { RecoveryMethod } from '@openfort/react'
+import type { EmbeddedAccount } from '@openfort/react'
+import {
+  type ConnectedEmbeddedSolanaWallet,
+  useSolanaEmbeddedWallet,
+} from '@openfort/react/solana'
+import { useState } from 'react'
+import { Sheet } from './ui/Sheet'
+
+type CreateWalletPasswordSheetProps = {
+  open: boolean
+  onClose: () => void
+  onCreateWallet?: () => void
+  create: (options: {
+    recoveryMethod: RecoveryMethod
+    password?: string
+  }) => Promise<EmbeddedAccount>
+  status: string
+}
+
+export const CreateWalletPasswordSheet = ({
+  open,
+  onClose,
+  onCreateWallet,
+  create,
+  status,
+}: CreateWalletPasswordSheetProps) => {
+  const [error, setError] = useState<string | null>(null)
+  const isCreating = status === 'creating'
+
+  return (
+    <Sheet
+      open={open}
+      onClose={() => {
+        onClose()
+        setError(null)
+      }}
+      title="Enter Password"
+      description="Please enter the password of your wallet."
+    >
+      <form
+        className="flex-1 w-full flex flex-col justify-center max-w-md mx-auto"
+        onSubmit={async (e) => {
+          e.preventDefault()
+          const formData = new FormData(e.target as HTMLFormElement)
+          const password = formData.get('password') as string
+
+          try {
+            await create({
+              recoveryMethod: RecoveryMethod.PASSWORD,
+              password,
+            })
+            onCreateWallet?.()
+            onClose()
+          } catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to create wallet')
+          }
+        }}
+      >
+        <div className="flex flex-col gap-2 mr-4 mb-4">
+          <div className="flex items-center gap-2">
+            <CheckCircleIcon className="h-5 w-5 text-primary my-4 shrink-0" />
+            <span>This password will be used to secure your account.</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <CheckCircleIcon className="h-5 w-5 text-primary my-4 shrink-0" />
+            <span>
+              If you lose this password, you will not be able to access your
+              wallet.
+            </span>
+          </div>
+        </div>
+        <input
+          type="password"
+          name="password"
+          autoComplete="new-password"
+          placeholder="Enter your wallet's password"
+          className="w-full mt-2 p-2 border border-gray-300 rounded"
+        />
+        {error && (
+          <span className="text-red-500 text-sm mt-2">{error}</span>
+        )}
+        <button
+          className="mt-4 w-full bg-zinc-700 text-white p-2 rounded cursor-pointer"
+          type="submit"
+          disabled={isCreating}
+        >
+          {isCreating ? 'Creating wallet...' : 'Create Wallet'}
+        </button>
+      </form>
+    </Sheet>
+  )
+}
+
+type WalletRecoverPasswordProps = {
+  open: boolean
+  onClose: () => void
+  wallet: ConnectedEmbeddedSolanaWallet | null
+}
+
+export const WalletRecoverPasswordSheet = ({
+  open,
+  onClose,
+  wallet,
+}: WalletRecoverPasswordProps) => {
+  const { setActive, status } = useSolanaEmbeddedWallet()
+  const [error, setError] = useState<string | null>(null)
+  const isConnecting = status === 'connecting'
+
+  return (
+    <Sheet
+      open={open}
+      onClose={() => {
+        onClose()
+        setError(null)
+      }}
+      title="Enter Password"
+      description="Please enter the password of your wallet."
+    >
+      <form
+        className="w-full flex-1 flex flex-col justify-center"
+        onSubmit={async (e) => {
+          e.preventDefault()
+          const formData = new FormData(e.target as HTMLFormElement)
+          const password = formData.get('password') as string
+          if (!wallet) throw new Error('No wallet to recover')
+
+          try {
+            await setActive({
+              address: wallet.address,
+              recoveryMethod: RecoveryMethod.PASSWORD,
+              password,
+            })
+            onClose()
+          } catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to recover wallet')
+          }
+        }}
+      >
+        {wallet && (
+          <p>
+            Recover wallet {wallet.address.slice(0, 6)}...
+            {wallet.address.slice(-4)} with password
+          </p>
+        )}
+        <input
+          type="password"
+          name="password"
+          autoComplete="current-password"
+          placeholder="Enter your wallet's password"
+          className="w-full mt-2 p-2 border border-gray-300 rounded"
+        />
+        {error && (
+          <span className="text-red-500 text-sm mt-2">{error}</span>
+        )}
+        <button
+          className="mt-4 w-full bg-zinc-700 text-white p-2 rounded cursor-pointer"
+          type="submit"
+          disabled={isConnecting}
+        >
+          {isConnecting ? 'Recovering...' : 'Recover Wallet'}
+        </button>
+      </form>
+    </Sheet>
+  )
+}

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

@@ -0,0 +1,23 @@
+import { ChainTypeEnum, OpenfortProvider } from '@openfort/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import type { ReactNode } from 'react'
+
+const queryClient = new QueryClient()
+
+export function Providers({ children }: { children: ReactNode }) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <OpenfortProvider
+        publishableKey={import.meta.env.VITE_OPENFORT_PUBLISHABLE_KEY}
+        walletConfig={{
+          shieldPublishableKey: import.meta.env.VITE_SHIELD_PUBLISHABLE_KEY,
+          chainType: ChainTypeEnum.SVM,
+          createEncryptedSessionEndpoint: import.meta.env.VITE_CREATE_ENCRYPTED_SESSION_ENDPOINT,
+          connectOnLogin: true,
+        }}
+      >
+        {children}
+      </OpenfortProvider>
+    </QueryClientProvider>
+  )
+}

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

@@ -0,0 +1,47 @@
+import { ChevronLeftIcon } from '@heroicons/react/24/outline'
+import { useEffect, useState } from 'react'
+
+type SheetProps = {
+  open: boolean
+  onClose: () => void
+  title: string
+  description: string
+  children: React.ReactNode
+}
+
+const SheetInner = ({ onClose, title, description, children }: SheetProps) => {
+  const [isClosing, setIsClosing] = useState(false)
+  useEffect(() => {
+    if (isClosing) {
+      const timer = setTimeout(onClose, 300)
+      return () => clearTimeout(timer)
+    }
+  }, [isClosing, onClose])
+
+  return (
+    <div
+      className="flex flex-col m-0 p-4 absolute inset-0 bg-zinc-800 data-[closing=false]:animate-sheet-in data-[closing=true]:animate-sheet-out outline-l outline-1 outline-zinc-700"
+      data-closing={isClosing}
+    >
+      <div className="flex items-center gap-2 mb-4">
+        <button
+          className="rounded p-2 hover:text-white transition-colors cursor-pointer"
+          onClick={() => setIsClosing(true)}
+        >
+          <ChevronLeftIcon className="h-5 w-5" />
+        </button>
+        <div>
+          <h2 className="mb-0">{title}</h2>
+          <p className="text-sm text-zinc-400">{description}</p>
+        </div>
+      </div>
+      {children}
+    </div>
+  )
+}
+
+export const Sheet = (props: SheetProps) => {
+  if (!props.open) return null
+
+  return <SheetInner {...props} />
+}

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

@@ -0,0 +1,111 @@
+export type TabType = {
+  name: string
+  component: React.ReactNode
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>
+}
+
+type TabProps = {
+  onClick?: () => void
+  isActive?: boolean
+} & TabType
+
+const DesktopTab = ({ name, isActive, ...buttonProps }: TabProps) => {
+  return (
+    <button
+      className="relative h-8 mx-2.5 transition-colors cursor-pointer"
+      style={
+        {
+          '--tab-bg-color': isActive
+            ? 'var(--color-zinc-800)'
+            : 'var(--color-zinc-700)',
+          opacity: isActive ? 1 : 0.6,
+        } as React.CSSProperties
+      }
+      {...buttonProps}
+    >
+      <div className="absolute w-5 h-8 bg-(--tab-bg-color) rotate-20 transform origin-top-left top-1" />
+      <div className="absolute w-5 h-8 bg-(--tab-bg-color) -rotate-20 transform origin-top-right right-0 top-1" />
+      <div className="absolute inset-0 rounded-md bg-(--tab-bg-color)" />
+
+      <span
+        className={`${isActive ? 'text-white' : 'text-zinc-400'} whitespace-nowrap bg-(--tab-bg-color) z-10 relative mx-2 pb-4`}
+      >
+        {name}
+      </span>
+    </button>
+  )
+}
+
+type TabGroupProps = {
+  tabs: TabType[]
+  currentTab?: TabType
+  setCurrentTab?: (tab: TabType) => void
+  showTabs?: boolean
+}
+
+export const DesktopTabGroup = ({
+  tabs,
+  currentTab,
+  setCurrentTab,
+  showTabs,
+}: TabGroupProps) => {
+  return (
+    <div className="absolute left-[100%] top-2 rotate-90 transform origin-top-left hidden xs:block">
+      <div
+        className="flex gap-2 transition-transform duration-500"
+        style={{
+          transform: showTabs ? 'translateY(-100%)' : 'translateY(10px)',
+        }}
+      >
+        {tabs?.map((tab) => (
+          <DesktopTab
+            key={tab.name}
+            onClick={() => setCurrentTab?.(tab)}
+            isActive={currentTab?.name === tab.name}
+            {...tab}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+const MobileTab = ({
+  name,
+  isActive,
+  icon: Icon,
+  ...buttonProps
+}: TabProps) => {
+  return (
+    <button
+      className="relative h-8 mx-2.5 transition-colors cursor-pointer"
+      {...buttonProps}
+    >
+      <Icon className="h-5 w-5 mx-auto mb-1" />
+      <span
+        className={`${isActive ? 'text-white' : 'text-zinc-400'} whitespace-nowrap`}
+      >
+        {name}
+      </span>
+    </button>
+  )
+}
+
+export const MobileTabGroup = ({
+  tabs,
+  currentTab,
+  setCurrentTab,
+}: TabGroupProps) => {
+  return (
+    <div className="mt-auto xs:hidden flex pt-6 pb-2 items-end justify-between text-zinc-400 text-sm">
+      {tabs?.map((tab) => (
+        <MobileTab
+          key={tab.name}
+          onClick={() => setCurrentTab?.(tab)}
+          isActive={currentTab?.name === tab.name}
+          {...tab}
+        />
+      ))}
+    </div>
+  )
+}

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

@@ -0,0 +1,31 @@
+import { useState } from 'react'
+
+export const TruncateData = ({
+  className,
+  data,
+}: {
+  className?: string
+  data?: string
+}) => {
+  const [viewMore, setViewMore] = useState(false)
+  if (!data) return null
+
+  return (
+    <div
+      className={`mt-4 p-2 border border-zinc-700 rounded bg-zinc-900 ${className}`}
+    >
+      <pre className="break-words whitespace-normal text-sm">
+        {viewMore ? data : data.length > 90 ? `${data.slice(0, 90)}...` : data}
+      </pre>
+      {data.length > 90 && (
+        <button
+          className="text-primary hover:text-primary-hover transition-colors hover:underline text-sm cursor-pointer"
+          onClick={() => setViewMore(!viewMore)}
+          type="button"
+        >
+          {viewMore ? 'View less' : 'View more'}
+        </button>
+      )}
+    </div>
+  )
+}

package/template/openfort-templates/solana-headless/src/hooks/useSolanaMessageSigner.ts

@@ -0,0 +1,37 @@
+/**
+ * Sign messages with Openfort Solana embedded wallet.
+ * Returns { data, signMessage, isPending, error }.
+ */
+
+import { useSolanaEmbeddedWallet } from '@openfort/react/solana'
+import { useCallback, useState } from 'react'
+import { toError } from '../lib/errors'
+
+export function useSolanaMessageSigner() {
+  const solana = useSolanaEmbeddedWallet()
+  const [data, setData] = useState<string | null>(null)
+  const [error, setError] = useState<Error | null>(null)
+  const [isPending, setIsPending] = useState(false)
+
+  const signMessage = useCallback(
+    async (params: { message: string }) => {
+      if (solana.status !== 'connected') {
+        setError(new Error('Wallet not connected'))
+        return
+      }
+      setError(null)
+      setIsPending(true)
+      try {
+        const signature = await solana.provider.signMessage(params.message)
+        setData(signature)
+      } catch (err) {
+        setError(toError(err))
+      } finally {
+        setIsPending(false)
+      }
+    },
+    [solana.status, solana.provider]
+  )
+
+  return { data: data ?? undefined, signMessage, isPending, error: error ?? null }
+}

package/template/openfort-templates/solana-headless/src/index.css

@@ -0,0 +1,180 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-primary: var(--color-primary);
+  --color-primary-hover: var(--color-primary-hover);
+  --breakpoint-xs: 34rem;
+
+  --animate-sheet-in: sheet-in 0.3s ease forwards;
+  --animate-sheet-out: sheet-out 0.3s ease forwards;
+
+  @keyframes sheet-in {
+    from {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes sheet-out {
+    to {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+
+    from {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+}
+
+@layer base {
+  .layout-card-group {
+    @media (min-width: 34rem) {
+      @apply border border-zinc-700 rounded-lg shadow-lg shadow-white/10;
+    }
+
+    /* @media (max-width: 64rem) { */
+    @apply overflow-hidden;
+    /* } */
+  }
+
+  h1 {
+    @apply text-2xl font-bold
+  }
+
+  h2 {
+    @apply text-xl font-bold
+  }
+
+  .card {
+    @apply p-6 w-(--card-width) bg-zinc-800 flex justify-center flex-col;
+  }
+
+  .btn {
+    @apply flex items-center justify-center w-full py-2 px-4 bg-primary text-white rounded cursor-pointer hover:bg-primary-hover transition-colors;
+  }
+
+  input {
+    @apply px-4 py-2 rounded-md bg-zinc-700 border-none outline-none w-full;
+  }
+}
+
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  --color-primary: rgba(153, 69, 255, 1);
+  --color-primary-foreground: #fff;
+  --color-primary-hover: rgba(133, 49, 235, 1);
+
+  --card-group-width: 58rem;
+  --card-width: 29rem;
+  --card-group-height: 600px;
+
+  @media (max-width: calc(64rem - 1px)) {
+    --card-group-width: 29rem;
+  }
+
+  @media (max-width: calc(34rem - 1px)) {
+    --card-width: 100vw;
+    --card-group-width: 100vw;
+    --card-group-height: 100dvh;
+  }
+}
+
+.logo {
+  display: inline;
+  height: 7rem;
+  width: 7rem;
+  padding: 1em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+
+.logo:hover {
+  filter: drop-shadow(0 0 3em rgba(153, 69, 255, 0.8));
+}
+
+
+
+.logo.sample-logo:hover {
+  filter: drop-shadow(0 0 3em var(--color-sample));
+}
+
+.wallet-option-group:hover .wallet-option {
+  color: var(--color-zinc-700);
+  border-color: var(--color-zinc-700);
+  background-color: var(--color-zinc-900);
+}
+
+.wallet-option-group:hover .wallet-option:hover {
+  color: var(--color-zinc-100);
+  border-color: var(--color-zinc-100);
+  background-color: var(--color-zinc-800);
+  filter: drop-shadow(0 0 1em #ffffff33);
+}
+
+.wallet-option {
+  padding: 1em;
+  text-decoration: none;
+  border-radius: 10px;
+  flex: 1;
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  color: var(--color-zinc-100);
+  border: 1px solid var(--color-zinc-100);
+  background-color: var(--color-zinc-800);
+  transition:
+    border-color 300ms,
+    background-color 300ms,
+    color 300ms,
+    filter 300ms;
+
+  overflow: hidden;
+
+  width: 100%;
+  min-height: 2rem;
+
+  .hover-description {
+    transition:
+      transform 300ms,
+      max-height 500ms,
+      opacity 300ms;
+
+    max-height: 2.5rem;
+  }
+
+  h4 {
+    font-size: 1.25rem;
+    margin: 0;
+    margin-right: 1rem;
+  }
+
+  svg {
+    height: 50px;
+  }
+}
+
+.wallet-option:not(:hover) .hover-description {
+  max-height: 0;
+  opacity: 0;
+}

package/template/openfort-templates/solana-headless/src/lib/errors.ts

@@ -0,0 +1,4 @@
+export function toError(err: unknown): Error {
+  if (err instanceof Error) return err
+  return new Error(String(err))
+}

package/template/openfort-templates/solana-headless/src/lib/solana/balance.ts

@@ -0,0 +1,17 @@
+const DEFAULT_RPC = 'https://api.devnet.solana.com'
+
+export async function fetchSolanaBalance(rpcUrl: string | undefined, address: string): Promise<number> {
+  const rpc = rpcUrl ?? DEFAULT_RPC
+  const res = await fetch(rpc, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      jsonrpc: '2.0',
+      id: 1,
+      method: 'getBalance',
+      params: [address, { commitment: 'confirmed' }],
+    }),
+  })
+  const data = await res.json()
+  return data.result?.value ?? 0
+}

package/template/openfort-templates/solana-headless/src/lib/solana/index.ts

@@ -0,0 +1,4 @@
+export { fetchSolanaBalance } from './balance'
+export { sendGaslessSolTransaction } from './kora'
+export { sendSolTransaction } from './transaction'
+export { getTransactionHistory } from './transactionHistory'