Merge branch 'dev'

frak-id · Oct 30, 2024 · 5101797 · 5101797
2 parents d93c4a9 + f2a6a27
commit 5101797
Show file tree

Hide file tree

Showing 66 changed files with 1,752 additions and 545 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/example/news-interactions/app/module/common/component/Lottie/index.client.tsx b/example/news-interactions/app/module/common/component/Lottie/index.client.tsx
@@ -18,7 +18,7 @@ export function Lottie({ className }: { className?: string }) {
         <div
             className={`${className} ${playerState === "complete" ? styles.lottie__complete : ""}`}
         >
-            <Link to={window?.ENV?.FRAK_WALLET_URL as string} target={"_blank"}>
+            <Link to={process.env.FRAK_WALLET_URL as string} target={"_blank"}>
                 <Player
                     src={lottie}
                     autoplay

diff --git a/example/news-interactions/app/module/common/provider/FrakProvider.client.tsx b/example/news-interactions/app/module/common/provider/FrakProvider.client.tsx
@@ -6,7 +6,7 @@ import type { PropsWithChildren } from "react";
 
 export function FrakProvider({ children }: PropsWithChildren) {
     const frakWalletSdkConfig = {
-        walletUrl: window?.ENV?.FRAK_WALLET_URL as string,
+        walletUrl: process.env.FRAK_WALLET_URL as string,
         metadata: {
             name: "Good Vibes",
         },

diff --git a/example/news-interactions/app/root.tsx b/example/news-interactions/app/root.tsx
@@ -6,8 +6,6 @@ import {
     Outlet,
     Scripts,
     ScrollRestoration,
-    json,
-    useRouteLoaderData,
 } from "@remix-run/react";
 import type { ReactNode } from "react";
 import { MainLayout } from "./module/common/component/MainLayout";
@@ -96,17 +94,7 @@ export const links: LinksFunction = () => [
     },
 ];
 
-export async function loader() {
-    return json({
-        ENV: {
-            FRAK_WALLET_URL: process.env.FRAK_WALLET_URL,
-            BACKEND_URL: process.env.BACKEND_URL,
-        },
-    });
-}
-
 export function Layout({ children }: { children: ReactNode }) {
-    const data = useRouteLoaderData<typeof loader>("root");
     return (
         <html lang="en">
             <head>
@@ -123,14 +111,6 @@ export function Layout({ children }: { children: ReactNode }) {
                     <MainLayout>{children}</MainLayout>
                 </RootProvider>
                 <ScrollRestoration />
-                {data?.ENV && (
-                    <script
-                        // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
-                        dangerouslySetInnerHTML={{
-                            __html: `window.ENV = ${JSON.stringify(data.ENV)}`,
-                        }}
-                    />
-                )}
                 <Scripts />
             </body>
         </html>

diff --git a/example/news-interactions/vite.config.ts b/example/news-interactions/vite.config.ts
@@ -3,6 +3,13 @@ import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
+    define: {
+        "process.env.STAGE": JSON.stringify(process.env.STAGE),
+        "process.env.FRAK_WALLET_URL": JSON.stringify(
+            process.env.FRAK_WALLET_URL
+        ),
+        "process.env.BACKEND_URL": JSON.stringify(process.env.BACKEND_URL),
+    },
     server: {
         port: 3011,
     },

diff --git a/...mon/component/MainLayout/index.module.css → ...mon/component/MainLayout/index.module.css b/...mon/component/MainLayout/index.module.css → ...mon/component/MainLayout/index.module.css
diff --git a/...ule/common/component/MainLayout/index.tsx → ...ule/common/component/MainLayout/index.tsx b/...ule/common/component/MainLayout/index.tsx → ...ule/common/component/MainLayout/index.tsx
diff --git a/...e/common/component/Panel/index.module.css → ...e/common/component/Panel/index.module.css b/...e/common/component/Panel/index.module.css → ...e/common/component/Panel/index.module.css
diff --git a/...c/module/common/component/Panel/index.tsx → ...p/module/common/component/Panel/index.tsx b/...c/module/common/component/Panel/index.tsx → ...p/module/common/component/Panel/index.tsx
diff --git a/example/wallet-ethcc/app/module/common/provider/FrakProvider.client.tsx b/example/wallet-ethcc/app/module/common/provider/FrakProvider.client.tsx
@@ -0,0 +1,21 @@
+import {
+    NexusConfigProvider,
+    NexusIFrameClientProvider,
+} from "@frak-labs/nexus-sdk/react";
+import type { PropsWithChildren } from "react";
+
+export function FrakProvider({ children }: PropsWithChildren) {
+    const frakWalletSdkConfig = {
+        walletUrl: process.env.FRAK_WALLET_URL as string,
+        metadata: {
+            name: "Demo - EthCC",
+        },
+        domain: "ethcc.news-paper.xyz",
+    };
+
+    return (
+        <NexusConfigProvider config={frakWalletSdkConfig}>
+            <NexusIFrameClientProvider>{children}</NexusIFrameClientProvider>
+        </NexusConfigProvider>
+    );
+}
diff --git a/...c/module/common/provider/RootProvider.tsx → ...p/module/common/provider/RootProvider.tsx b/...c/module/common/provider/RootProvider.tsx → ...p/module/common/provider/RootProvider.tsx
@@ -1,29 +1,14 @@
-"use client";
-
-import {
-    NexusConfigProvider,
-    NexusIFrameClientProvider,
-} from "@frak-labs/nexus-sdk/react";
+import { FrakProvider } from "@/module/common/provider/FrakProvider.client";
 import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
-import { QueryClient } from "@tanstack/react-query";
+import { HydrationBoundary, QueryClient } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import {
     PersistQueryClientProvider,
     type PersistQueryClientProviderProps,
 } from "@tanstack/react-query-persist-client";
-import type { PropsWithChildren } from "react";
-
-/**
- * The query client that will be used by tanstack/react-query
- */
-const queryClient = new QueryClient({
-    defaultOptions: {
-        queries: {
-            gcTime: Number.POSITIVE_INFINITY,
-            staleTime: 60 * 1000, // 1 minute
-        },
-    },
-});
+import { type PropsWithChildren, useState } from "react";
+import { useHydrated } from "remix-utils/use-hydrated";
+import { useDehydratedState } from "use-dehydrated-state";
 
 /**
  * The storage persister to cache our query data's
@@ -45,26 +30,37 @@ const persistOptions: PersistQueryClientProviderProps["persistOptions"] = {
     },
 };
 
-const frakWalletSdkConfig = {
-    walletUrl: process.env.FRAK_WALLET_URL as string,
-    metadata: {
-        name: "Demo - EthCC",
-    },
-    domain: "ethcc.news-paper.xyz",
-};
-
 export function RootProvider({ children }: PropsWithChildren) {
+    const isHydrated = useHydrated();
+
+    /**
+     * The query client that will be used by tanstack/react-query
+     */
+    const [queryClient] = useState(
+        () =>
+            new QueryClient({
+                defaultOptions: {
+                    queries: {
+                        gcTime: Number.POSITIVE_INFINITY,
+                        staleTime: 60 * 1000, // 1 minute
+                    },
+                },
+            })
+    );
+    const dehydratedState = useDehydratedState();
     return (
         <PersistQueryClientProvider
             client={queryClient}
             persistOptions={persistOptions}
         >
-            <NexusConfigProvider config={frakWalletSdkConfig}>
-                <NexusIFrameClientProvider>
-                    <ReactQueryDevtools initialIsOpen={false} />
-                    {children}
-                </NexusIFrameClientProvider>
-            </NexusConfigProvider>
+            <HydrationBoundary state={dehydratedState}>
+                {isHydrated ? (
+                    <FrakProvider>{children}</FrakProvider>
+                ) : (
+                    children
+                )}
+                <ReactQueryDevtools initialIsOpen={false} />
+            </HydrationBoundary>
         </PersistQueryClientProvider>
     );
 }
diff --git a/.../src/module/full/component/FullDialog.tsx → .../app/module/full/component/FullDialog.tsx b/.../src/module/full/component/FullDialog.tsx → .../app/module/full/component/FullDialog.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { Panel } from "@/module/common/component/Panel";
 import {
     addresses,

diff --git a/...interaction/component/SendInteraction.tsx → ...interaction/component/SendInteraction.tsx b/...interaction/component/SendInteraction.tsx → ...interaction/component/SendInteraction.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { Panel } from "@/module/common/component/Panel";
 import type { SendInteractionReturnType } from "@frak-labs/nexus-sdk/core";
 import { PressInteractionEncoder } from "@frak-labs/nexus-sdk/interactions";

diff --git a/...ion/component/SendReferralInteraction.tsx → ...ion/component/SendReferralInteraction.tsx b/...ion/component/SendReferralInteraction.tsx → ...ion/component/SendReferralInteraction.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { Panel } from "@/module/common/component/Panel";
 import type { SendInteractionReturnType } from "@frak-labs/nexus-sdk/core";
 import { ReferralInteractionEncoder } from "@frak-labs/nexus-sdk/interactions";

diff --git a/...c/module/transaction/component/SendTx.tsx → ...p/module/transaction/component/SendTx.tsx b/...c/module/transaction/component/SendTx.tsx → ...p/module/transaction/component/SendTx.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { Panel } from "@/module/common/component/Panel";
 import {
     addresses,
@@ -11,8 +9,8 @@ import type {
 } from "@frak-labs/nexus-sdk/core";
 import { useDisplayModal } from "@frak-labs/nexus-sdk/react";
 import { Button } from "@module/component/Button";
+import { Link } from "@remix-run/react";
 import { BadgeCheck } from "lucide-react";
-import Link from "next/link";
 import { encodeFunctionData } from "viem";
 
 export function SendTransaction() {
@@ -91,7 +89,7 @@ function SendTxResult({
 
             <p>TxHash: {data.sendTransaction.hash}</p>
             <Link
-                href={`https://sepolia.arbiscan.io/tx/${data.sendTransaction.hash}`}
+                to={`https://sepolia.arbiscan.io/tx/${data.sendTransaction.hash}`}
                 target={"_blank"}
             >
                 View on arbiscan

diff --git a/...c/module/wallet/component/WalletLogin.tsx → ...p/module/wallet/component/WalletLogin.tsx b/...c/module/wallet/component/WalletLogin.tsx → ...p/module/wallet/component/WalletLogin.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { Panel } from "@/module/common/component/Panel";
 import type {
     LoginModalStepType,

diff --git a/.../module/wallet/component/WalletStatus.tsx → .../module/wallet/component/WalletStatus.tsx b/.../module/wallet/component/WalletStatus.tsx → .../module/wallet/component/WalletStatus.tsx
@@ -1,9 +1,7 @@
-"use client";
-
 import { Panel } from "@/module/common/component/Panel";
 import type { WalletStatusReturnType } from "@frak-labs/nexus-sdk/core";
 import { useWalletStatus } from "@frak-labs/nexus-sdk/react";
-import Link from "next/link";
+import { Link } from "@remix-run/react";
 
 export function WalletStatus() {
     const { data: walletStatus } = useWalletStatus();
@@ -12,7 +10,7 @@ export function WalletStatus() {
         <Panel variant={"primary"}>
             <h2>Wallet Status</h2>
             <InnerStatus status={walletStatus} />
-            <Link href={process.env.FRAK_WALLET_URL ?? ""}>
+            <Link to={process.env.FRAK_WALLET_URL ?? ""}>
                 Check on Frak Wallet
             </Link>
         </Panel>

diff --git a/example/wallet-ethcc/app/root.tsx b/example/wallet-ethcc/app/root.tsx
@@ -0,0 +1,127 @@
+import allCssUrl from "@/styles/all.css?url";
+import type { LinksFunction, MetaFunction } from "@remix-run/node";
+import {
+    Links,
+    Meta,
+    Outlet,
+    Scripts,
+    ScrollRestoration,
+} from "@remix-run/react";
+import type { ReactNode } from "react";
+import { MainLayout } from "./module/common/component/MainLayout";
+import { RootProvider } from "./module/common/provider/RootProvider";
+
+export const meta: MetaFunction = () => {
+    return [
+        { title: "Frak Wallet Demo" },
+        { name: "application-name", content: "Frak Wallet Demo" },
+        {
+            name: "description",
+            content: "Simple frak wallet demo for the EthCC.",
+        },
+        {
+            name: "author",
+            content: "Frak labs",
+        },
+        {
+            name: "author",
+            content: "Rodolphe Stoclin",
+        },
+        {
+            name: "author",
+            content: "Quentin Nivelais",
+        },
+        {
+            name: "creator",
+            content: "Frak labs",
+        },
+        {
+            name: "publisher",
+            content: "Frak labs",
+        },
+        {
+            name: "theme-color",
+            content: "#001432",
+        },
+        {
+            name: "keywords",
+            content: "frak, wallet, frak-wallet, blockchain, ethcc",
+        },
+    ];
+};
+
+export const links: LinksFunction = () => [
+    {
+        rel: "icon",
+        href: "/favicons/favicon.ico",
+        sizes: "32x32",
+    },
+    {
+        rel: "icon",
+        href: "/favicons/icon.svg",
+        type: "image/svg+xml",
+    },
+    {
+        rel: "apple-touch-icon",
+        href: "/favicons/icon-192.png",
+        type: "image/png",
+    },
+    {
+        rel: "manifest",
+        href: "/manifest.json",
+        crossOrigin: "use-credentials",
+    },
+    {
+        rel: "author",
+        href: "https://frak.id/",
+    },
+    {
+        rel: "author",
+        href: "https://github.com/srod",
+    },
+    {
+        rel: "author",
+        href: "https://github.com/KONFeature",
+    },
+    { rel: "preconnect", href: "https://fonts.googleapis.com" },
+    {
+        rel: "preconnect",
+        href: "https://fonts.gstatic.com",
+        crossOrigin: "anonymous",
+    },
+    {
+        rel: "stylesheet",
+        href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+    },
+    {
+        rel: "stylesheet",
+        href: allCssUrl,
+    },
+];
+
+export function Layout({ children }: { children: ReactNode }) {
+    return (
+        <html lang="en">
+            <head>
+                <meta charSet="utf-8" />
+                <meta
+                    name="viewport"
+                    content="width=device-width, initial-scale=1"
+                />
+                <Meta />
+                <Links />
+            </head>
+            <body>
+                <RootProvider>
+                    <MainLayout>{children}</MainLayout>
+                </RootProvider>
+                <ScrollRestoration />
+                <Scripts />
+            </body>
+        </html>
+    );
+}
+
+export default function App() {
+    return <Outlet />;
+}
diff --git a/example/wallet-ethcc/src/app/page.tsx → example/wallet-ethcc/app/routes/_index.tsx b/example/wallet-ethcc/src/app/page.tsx → example/wallet-ethcc/app/routes/_index.tsx
@@ -5,7 +5,7 @@ import { SendTransaction } from "@/module/transaction/component/SendTx";
 import { WalletLogin } from "@/module/wallet/component/WalletLogin";
 import { WalletStatus } from "@/module/wallet/component/WalletStatus";
 
-export default function HomePage() {
+export default function Index() {
     return (
         <div>
             <h1>Frak Wallet Demo Eth-CC @Frak-labs</h1>

diff --git a/example/wallet-ethcc/app/styles/all.css b/example/wallet-ethcc/app/styles/all.css
@@ -0,0 +1,5 @@
+@import "normalize.css/normalize.css";
+@import "@frak-labs/shared/module/styles/colors.css";
+@import "colors-app.css";
+@import "@frak-labs/shared/module/styles/global.css";
+@import "global.css";
diff --git a/...le/wallet-ethcc/src/styles/colors-app.css → ...le/wallet-ethcc/app/styles/colors-app.css b/...le/wallet-ethcc/src/styles/colors-app.css → ...le/wallet-ethcc/app/styles/colors-app.css