npm - create-openfort - Versions diffs - 0.1.8 → 0.1.10 - Mend

create-openfort 0.1.8 → 0.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (50) hide show

package/template/openfort-templates/firebase/src/components/cards/main.tsx CHANGED Viewed

@@ -1,23 +1,39 @@
-import { HomeIcon, PencilIcon, PlayIcon, WalletIcon } from "@heroicons/react/24/outline";
-import { useState } from "react";
-import { DesktopTabGroup, MobileTabGroup, type TabType } from "../ui/Tabs";
-import { FirebaseAuthCard } from "../../integrations/firebase";
-import { ActionsCard, SignCard, UserProfileCard, WalletListCard } from "../../ui/openfort";
-import { Head } from "./head";
-import { useUser } from "@openfort/react";
-import { useAccount } from "wagmi";
+import {
+  HomeIcon,
+  PencilIcon,
+  PlayIcon,
+  WalletIcon,
+} from '@heroicons/react/24/outline'
+import { useUser } from '@openfort/react'
+import { useState } from 'react'
+import { useAccount } from 'wagmi'
+import { FirebaseAuthCard } from '../../integrations/firebase'
+import {
+  ActionsCard,
+  SignCard,
+  UserProfileCard,
+  WalletListCard,
+} from '../../ui/openfort'
+import { DesktopTabGroup, MobileTabGroup, type TabType } from '../ui/Tabs'
+import { Head } from './head'
 interface LayoutProps {
-  children: React.ReactNode;
-  step: number;
-  tabs?: TabType[];
-  currentTab?: TabType;
-  setCurrentTab?: (tab: TabType) => void;
-  showTabs?: boolean;
+  children: React.ReactNode
+  step: number
+  tabs?: TabType[]
+  currentTab?: TabType
+  setCurrentTab?: (tab: TabType) => void
+  showTabs?: boolean
 }
-const Layout = ({ children, step, tabs, currentTab, setCurrentTab, showTabs }: LayoutProps) => {
+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">
@@ -27,12 +43,12 @@ const Layout = ({ children, step, tabs, currentTab, setCurrentTab, showTabs }: L
           setCurrentTab={setCurrentTab}
           showTabs={showTabs}
         />
-        <div
-          className="w-(--card-group-width) layout-card-group"
-        >
+        <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)))` }}
+            style={{
+              transform: `translateX(calc(-${step} * var(--card-width)))`,
+            }}
           >
             {children}
           </div>
@@ -42,15 +58,14 @@ const Layout = ({ children, step, tabs, currentTab, setCurrentTab, showTabs }: L
   )
 }
 export const Main = () => {
-  const {isConnected} = useAccount();
-  const { isAuthenticated } = useUser();
-  const [step, setStep] = useState(0);
+  const { isConnected } = useAccount()
+  const { isAuthenticated } = useUser()
+  const [step, setStep] = useState(0)
   const tabs: TabType[] = [
     {
-      name: "Home",
+      name: 'Home',
       component: (
         <UserProfileCard
           sampleGithubUrl="https://github.com/openfort-xyz/quickstarts/tree/main/react/firebase"
@@ -60,22 +75,22 @@ export const Main = () => {
       icon: HomeIcon,
     },
     {
-      name: "Signatures",
+      name: 'Signatures',
       component: <SignCard />,
-      icon: PencilIcon
+      icon: PencilIcon,
     },
     {
-      name: "Actions",
+      name: 'Actions',
       component: <ActionsCard />,
       icon: PlayIcon,
     },
     {
-      name: "Wallets",
+      name: 'Wallets',
       component: <WalletListCard />,
       icon: WalletIcon,
     },
-  ];
-  const [currentTab, setCurrentTab] = useState<TabType>(tabs[0]);
+  ]
+  const [currentTab, setCurrentTab] = useState<TabType>(tabs[0])
   return (
     <Layout
@@ -88,31 +103,27 @@ export const Main = () => {
       <Head
         onStart={() => setStep(1)}
         sample="Firebase"
-        color='rgb(255, 50, 0)'
-        backgroundColor='rgb(255, 145, 0)'
+        color="rgb(255, 50, 0)"
+        backgroundColor="rgb(255, 145, 0)"
         logo="/firebase.svg"
         href="https://firebase.google.com/"
         subtitle="Example of integration of Openfort with Firebase Authentication"
       />
-      {
-        !isAuthenticated ? (
-          <FirebaseAuthCard />
-        ) : (
-          <div className="block relative overflow-y-auto overflow-x-hidden">
-            <div className="card flex-col min-h-full">
-              <div className="w-full flex-1 flex">
-                {currentTab.component}
-              </div>
-              <MobileTabGroup
-                tabs={tabs}
-                currentTab={currentTab}
-                setCurrentTab={setCurrentTab}
-              />
-            </div>
+      {!isAuthenticated ? (
+        <FirebaseAuthCard />
+      ) : (
+        <div className="block relative overflow-y-auto overflow-x-hidden">
+          <div className="card flex-col min-h-full">
+            <div className="w-full flex-1 flex">{currentTab.component}</div>
+            <MobileTabGroup
+              tabs={tabs}
+              currentTab={currentTab}
+              setCurrentTab={setCurrentTab}
+            />
           </div>
-        )
-      }
+        </div>
+      )}
       <div className="card relative" />
     </Layout>
-  );
-};
+  )
+}

package/template/openfort-templates/firebase/src/components/ui/Sheet.tsx CHANGED Viewed

@@ -1,22 +1,22 @@
-import { ChevronLeftIcon } from "@heroicons/react/24/outline";
-import { useEffect, useState } from "react";
+import { ChevronLeftIcon } from '@heroicons/react/24/outline'
+import { useEffect, useState } from 'react'
 type SheetProps = {
-  open: boolean,
-  onClose: () => void,
-  title: string,
-  description: string,
+  open: boolean
+  onClose: () => void
+  title: string
+  description: string
   children: React.ReactNode
-};
+}
 const SheetInner = ({ onClose, title, description, children }: SheetProps) => {
-  const [isClosing, setIsClosing] = useState(false);
+  const [isClosing, setIsClosing] = useState(false)
   useEffect(() => {
     if (isClosing) {
-      const timer = setTimeout(onClose, 300);
-      return () => clearTimeout(timer);
+      const timer = setTimeout(onClose, 300)
+      return () => clearTimeout(timer)
     }
-  }, [isClosing, onClose]);
+  }, [isClosing, onClose])
   return (
     <div
@@ -41,9 +41,7 @@ const SheetInner = ({ onClose, title, description, children }: SheetProps) => {
 }
 export const Sheet = (props: SheetProps) => {
-  if (!props.open) return null;
+  if (!props.open) return null
-  return (
-    <SheetInner {...props} />
-  )
-}
+  return <SheetInner {...props} />
+}

package/template/openfort-templates/firebase/src/components/ui/Tabs.tsx CHANGED Viewed

@@ -1,22 +1,26 @@
 export type TabType = {
-  name: string;
-  component: React.ReactNode;
-  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
-};
+  name: string
+  component: React.ReactNode
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>
+}
 type TabProps = {
-  onClick?: () => void;
-  isActive?: boolean;
-} & TabType;
+  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}
+      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" />
@@ -24,7 +28,7 @@ const DesktopTab = ({ name, isActive, ...buttonProps }: TabProps) => {
       <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`}
+        className={`${isActive ? 'text-white' : 'text-zinc-400'} whitespace-nowrap bg-(--tab-bg-color) z-10 relative mx-2 pb-4`}
       >
         {name}
       </span>
@@ -33,25 +37,30 @@ const DesktopTab = ({ name, isActive, ...buttonProps }: TabProps) => {
 }
 type TabGroupProps = {
-  tabs: TabType[],
-  currentTab?: TabType,
+  tabs: TabType[]
+  currentTab?: TabType
   setCurrentTab?: (tab: TabType) => void
   showTabs?: boolean
 }
-export const DesktopTabGroup = ({ tabs, currentTab, setCurrentTab, showTabs }: TabGroupProps) => {
+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="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)" }}
+        style={{
+          transform: showTabs ? 'translateY(-100%)' : 'translateY(10px)',
+        }}
       >
         {tabs?.map((tab) => (
           <DesktopTab
             key={tab.name}
-            onClick={() => setCurrentTab && setCurrentTab(tab)}
+            onClick={() => setCurrentTab?.(tab)}
             isActive={currentTab?.name === tab.name}
             {...tab}
           />
@@ -61,9 +70,12 @@ export const DesktopTabGroup = ({ tabs, currentTab, setCurrentTab, showTabs }: T
   )
 }
-const MobileTab = ({ name, isActive, icon: Icon, ...buttonProps }: TabProps) => {
+const MobileTab = ({
+  name,
+  isActive,
+  icon: Icon,
+  ...buttonProps
+}: TabProps) => {
   return (
     <button
       className="relative h-8 mx-2.5 transition-colors cursor-pointer"
@@ -71,7 +83,7 @@ const MobileTab = ({ name, isActive, icon: Icon, ...buttonProps }: TabProps) =>
     >
       <Icon className="h-5 w-5 mx-auto mb-1" />
       <span
-        className={`${isActive ? "text-white" : "text-zinc-400"} whitespace-nowrap`}
+        className={`${isActive ? 'text-white' : 'text-zinc-400'} whitespace-nowrap`}
       >
         {name}
       </span>
@@ -82,20 +94,18 @@ const MobileTab = ({ name, isActive, icon: Icon, ...buttonProps }: TabProps) =>
 export const MobileTabGroup = ({
   tabs,
   currentTab,
-  setCurrentTab
+  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 && setCurrentTab(tab)}
-            isActive={currentTab?.name === tab.name}
-            {...tab}
-          />
-        ))
-      }
+      {tabs?.map((tab) => (
+        <MobileTab
+          key={tab.name}
+          onClick={() => setCurrentTab?.(tab)}
+          isActive={currentTab?.name === tab.name}
+          {...tab}
+        />
+      ))}
     </div>
   )
-}
+}

package/template/openfort-templates/firebase/src/components/ui/TruncateData.tsx CHANGED Viewed

@@ -1,14 +1,20 @@
-import { useState } from "react"
+import { useState } from 'react'
-export const TruncateData = ({ className, data }: { className?: string; data?: string }) => {
+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"
-      >
+    <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 && (
@@ -17,9 +23,9 @@ export const TruncateData = ({ className, data }: { className?: string; data?: s
           onClick={() => setViewMore(!viewMore)}
           type="button"
         >
-          {viewMore ? "View less" : "View more"}
+          {viewMore ? 'View less' : 'View more'}
         </button>
       )}
     </div>
   )
-}
+}

package/template/openfort-templates/firebase/src/integrations/firebase/client.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import { initializeApp } from "firebase/app";
-import { getAuth } from "firebase/auth";
+import { initializeApp } from 'firebase/app'
+import { getAuth } from 'firebase/auth'
 const firebaseConfig = {
   apiKey: import.meta.env.VITE_apiKey,
@@ -8,13 +8,13 @@ const firebaseConfig = {
   storageBucket: import.meta.env.VITE_storageBucket,
   messagingSenderId: import.meta.env.VITE_messagingSenderId,
   appId: import.meta.env.VITE_appId,
-};
+}
 // Initialize Firebase
-const app = initializeApp(firebaseConfig);
+const app = initializeApp(firebaseConfig)
 // Initialize Firebase Authentication and get a reference to the service
-const auth = getAuth(app);
+const auth = getAuth(app)
 // Export the Firebase auth object and any other services you initialize
-export { auth,  };
+export { auth }

package/template/openfort-templates/firebase/src/integrations/firebase/components/FirebaseAuthCard.tsx CHANGED Viewed

@@ -1,24 +1,29 @@
-import { createUserWithEmailAndPassword, GoogleAuthProvider, signInWithEmailAndPassword, signInWithPopup } from "firebase/auth";
-import { useState } from "react";
+import {
+  createUserWithEmailAndPassword,
+  GoogleAuthProvider,
+  signInWithEmailAndPassword,
+  signInWithPopup,
+} from 'firebase/auth'
+import { useState } from 'react'
-import { auth } from "../client";
-import { getFirebaseErrorMessage, logFirebaseError } from "../errors";
+import { auth } from '../client'
+import { getFirebaseErrorMessage, logFirebaseError } from '../errors'
 function GoogleSignInButton({ onError }: { onError: (error: string) => void }) {
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(false)
   const signInWithGoogle = async () => {
     try {
-      setLoading(true);
-      const provider = new GoogleAuthProvider();
-      await signInWithPopup(auth, provider);
+      setLoading(true)
+      const provider = new GoogleAuthProvider()
+      await signInWithPopup(auth, provider)
     } catch (error) {
-      logFirebaseError(error, "Google Sign-In");
-      onError(getFirebaseErrorMessage(error));
+      logFirebaseError(error, 'Google Sign-In')
+      onError(getFirebaseErrorMessage(error))
     } finally {
-      setLoading(false);
+      setLoading(false)
     }
-  };
+  }
   return (
     <button
@@ -26,77 +31,97 @@ function GoogleSignInButton({ onError }: { onError: (error: string) => void }) {
       disabled={loading}
       className="w-full py-2 px-4 border border-zinc-700 text-white rounded cursor-pointer transition-colors hover:bg-zinc-900/60 disabled:opacity-50 disabled:cursor-not-allowed"
     >
-      {loading ? "Signing in..." : "Continue with Google"}
+      {loading ? 'Signing in...' : 'Continue with Google'}
     </button>
-  );
+  )
 }
 function EmailPasswordForm({
   isLogin,
   onError,
 }: {
-  isLogin: boolean;
-  onError: (error: string) => void;
+  isLogin: boolean
+  onError: (error: string) => void
 }) {
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(false)
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    const form = event.target as HTMLFormElement;
-    const email = (form.elements[0] as HTMLInputElement).value;
-    const password = (form.elements[1] as HTMLInputElement).value;
+    event.preventDefault()
+    const form = event.target as HTMLFormElement
+    const email = (form.elements[0] as HTMLInputElement).value
+    const password = (form.elements[1] as HTMLInputElement).value
     try {
-      setLoading(true);
-      onError("");
+      setLoading(true)
+      onError('')
       if (isLogin) {
-        await signInWithEmailAndPassword(auth, email, password);
+        await signInWithEmailAndPassword(auth, email, password)
       } else {
-        await createUserWithEmailAndPassword(auth, email, password);
+        await createUserWithEmailAndPassword(auth, email, password)
       }
     } catch (error) {
-      logFirebaseError(error, isLogin ? "Email Sign-In" : "Email Sign-Up");
-      onError(getFirebaseErrorMessage(error));
+      logFirebaseError(error, isLogin ? 'Email Sign-In' : 'Email Sign-Up')
+      onError(getFirebaseErrorMessage(error))
     } finally {
-      setLoading(false);
+      setLoading(false)
     }
-  };
+  }
   return (
     <form onSubmit={handleSubmit} className="space-y-4 mb-4">
-      <label className="block text-left text-sm font-medium mb-1" htmlFor="email">
+      <label
+        className="block text-left text-sm font-medium mb-1"
+        htmlFor="email"
+      >
         Email
       </label>
-      <input id="email" type="email" placeholder="Enter your email address" required />
+      <input
+        id="email"
+        type="email"
+        placeholder="Enter your email address"
+        required
+      />
       <div>
-        <label className="block text-left text-sm font-medium mb-1" htmlFor="password">
+        <label
+          className="block text-left text-sm font-medium mb-1"
+          htmlFor="password"
+        >
           Password
         </label>
-        <input id="password" type="password" placeholder="Enter your password" required />
+        <input
+          id="password"
+          type="password"
+          placeholder="Enter your password"
+          required
+        />
       </div>
-      <button type="submit" disabled={loading} className="btn mt-2 disabled:opacity-50 disabled:cursor-not-allowed">
-        {loading ? "Loading..." : isLogin ? "Sign In" : "Sign Up"}
+      <button
+        type="submit"
+        disabled={loading}
+        className="btn mt-2 disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        {loading ? 'Loading...' : isLogin ? 'Sign In' : 'Sign Up'}
       </button>
     </form>
-  );
+  )
 }
 export function FirebaseAuthCard() {
-  const [isLogin, setIsLogin] = useState(true);
-  const [error, setError] = useState<string>("");
+  const [isLogin, setIsLogin] = useState(true)
+  const [error, setError] = useState<string>('')
   const handleToggleMode = () => {
-    setIsLogin((previous) => !previous);
-    setError("");
-  };
+    setIsLogin((previous) => !previous)
+    setError('')
+  }
   return (
     <div className="card relative space-y-6">
       <div className="relative">
         <h1 className="text-left text-2xl font-semibold tracking-tight">
-          {isLogin ? "Sign in to account" : "Create an account"}
+          {isLogin ? 'Sign in to account' : 'Create an account'}
         </h1>
       </div>
@@ -120,11 +145,14 @@ export function FirebaseAuthCard() {
       <GoogleSignInButton onError={setError} />
       <div className="text-left text-sm">
-        {isLogin ? "Already have an account? " : "Don't have an account? "}
-        <button onClick={handleToggleMode} className="text-primary hover:underline cursor-pointer font-medium">
-          {isLogin ? "Sign Up" : "Sign In"}
+        {isLogin ? 'Already have an account? ' : "Don't have an account? "}
+        <button
+          onClick={handleToggleMode}
+          className="text-primary hover:underline cursor-pointer font-medium"
+        >
+          {isLogin ? 'Sign Up' : 'Sign In'}
         </button>
       </div>
     </div>
-  );
+  )
 }