Merge remote-tracking branch 'upstream/feat/privCred-presentation' in…

…to feat/privCred-presentation

packages/features/.ladle/components.tsx

@@ -8,7 +8,9 @@ import {
 import { ThemeProvider } from "next-themes"
 import React, { useEffect } from "react"
 import { ErrorBoundary } from "react-error-boundary"
+import { I18nextProvider } from "react-i18next"
 import { MemoryRouter } from "react-router-dom"
+import { i18n } from "../src/lib/i18n"
 
 export const Provider: GlobalProvider = ({ children }) => {
   const { dispatch } = useLadleContext()
@@ -17,18 +19,20 @@ export const Provider: GlobalProvider = ({ children }) => {
     dispatch({ type: ActionType.UpdateTheme, value: ThemeState.Dark })
   }, [])
   return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-      <MemoryRouter>
-        <ErrorBoundary
-          fallbackRender={({ error }) => (
-            <div>
-              {JSON.stringify(error, Object.getOwnPropertyNames(error))}
-            </div>
-          )}
-        >
-          {children}
-        </ErrorBoundary>
-      </MemoryRouter>
-    </ThemeProvider>
+    <I18nextProvider i18n={i18n}>
+      <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+        <MemoryRouter>
+          <ErrorBoundary
+            fallbackRender={({ error }) => (
+              <div>
+                {JSON.stringify(error, Object.getOwnPropertyNames(error))}
+              </div>
+            )}
+          >
+            {children}
+          </ErrorBoundary>
+        </MemoryRouter>
+      </ThemeProvider>
+    </I18nextProvider>
   )
 }

packages/features/.ladle/config.mjs

@@ -6,16 +6,15 @@ export default {
     width: {
       enabled: true,
       options: {
-        xsmall: 370,
+        xsmall: 480,
         small: 640,
         medium: 768,
         large: 1024,
       },
-      defaultState: 370,
+      defaultState: 480,
     },
   },
   appendToHead: `<style>
-      .ladle-iframe { max-height: 600px; }
       .frame-content { display: flex; flex-direction: column; min-height: 100vh; }
     </style>`,
 }

packages/features/.ladle/vite.config.ts

@@ -1,7 +1,6 @@
 import { defineConfig } from "vite"
 import { nodePolyfills } from "vite-plugin-node-polyfills"
 import svgr from "vite-plugin-svgr"
-import topLevelAwait from "vite-plugin-top-level-await"
 
 const env = (import.meta as any).env
 
@@ -12,7 +11,6 @@ export default defineConfig({
     "process.env": {},
   },
   plugins: [
-    topLevelAwait(),
     svgr(),
     nodePolyfills({ protocolImports: true, globals: { Buffer: true } }),
   ],

packages/features/src/components/menu-drawer.tsx

@@ -86,6 +86,14 @@ export const MenuDrawer = () => {
             >
               {t("components.staking")}
             </button>
+            <button
+              type="button"
+              className="text-3xl text-left"
+              onClick={() => navigate("/credentials")}
+              data-testid="menu/credentials"
+            >
+              {t("credentials.credentials")}
+            </button>
             <button
               type="button"
               className="text-3xl text-left"

packages/features/src/credentials/index.stories.tsx

@@ -0,0 +1,11 @@
+import type { StoryDefault } from "@ladle/react"
+import { CredentialDetailsRoute } from "./routes/credential-details"
+import { CredentialsRoute } from "./routes/credentials"
+
+export const Credentials = () => <CredentialsRoute />
+
+export const CredentialDetails = () => <CredentialDetailsRoute />
+
+export default {
+  title: "Credentials",
+} satisfies StoryDefault

packages/features/src/credentials/routes/credential-details.tsx

@@ -0,0 +1,29 @@
+import { type CredentialId, useVault } from "@palladco/vault"
+import { useNavigate, useParams } from "react-router"
+import { CredentialDetailsView } from "../views/credential-details"
+
+export const CredentialDetailsRoute = () => {
+  const navigate = useNavigate()
+  const { id } = useParams()
+  const credential = useVault((state) =>
+    JSON.stringify(state.getObject(id as CredentialId), null, "\t"),
+  )
+  const removeObject = useVault((state) => state.removeObject)
+  const onCredentialDelete = () => {
+    const result = window.confirm(
+      "Are you sure you want to delete this credential?",
+    )
+    if (!result) return
+    removeObject(id as CredentialId)
+    return navigate("/credentials")
+  }
+  if (!id) return null
+  return (
+    <CredentialDetailsView
+      id={id}
+      credential={credential}
+      onGoBack={() => navigate("/credentials")}
+      onDelete={onCredentialDelete}
+    />
+  )
+}

packages/features/src/credentials/routes/credentials.tsx

@@ -0,0 +1,7 @@
+import { useVault } from "@palladco/vault"
+import { CredentialsView } from "../views/credentials"
+
+export const CredentialsRoute = () => {
+  const credentials = useVault((store) => Object.entries(store.objects))
+  return <CredentialsView credentials={credentials} />
+}

packages/features/src/credentials/views/credential-details.tsx

@@ -0,0 +1,33 @@
+import { AppLayout } from "@/components/app-layout"
+import { MenuBar } from "@/components/menu-bar"
+import { useTranslation } from "react-i18next"
+
+export type CredentialDetailsViewProps = {
+  id: string
+  credential: string
+  onGoBack: () => void
+  onDelete: () => void
+}
+
+export const CredentialDetailsView = ({
+  id,
+  credential,
+  onGoBack,
+  onDelete,
+}: CredentialDetailsViewProps) => {
+  const { t } = useTranslation()
+  return (
+    <AppLayout>
+      <MenuBar variant="back" onBackClicked={onGoBack} />
+      <section className="flex flex-col flex-1 justify-between px-8 pb-8 gap-8">
+        <h1 className="text-3xl w-full">{id}</h1>
+        <div className="break-all flex-1 p-4 bg-secondary rounded-xl whitespace-pre-wrap overflow-y-scroll">
+          {credential}
+        </div>
+        <button type="button" className="btn btn-error" onClick={onDelete}>
+          {t("credentials.delete")}
+        </button>
+      </section>
+    </AppLayout>
+  )
+}

packages/features/src/credentials/views/credentials.tsx

@@ -0,0 +1,38 @@
+import { AppLayout } from "@/components/app-layout"
+import { MenuBar } from "@/components/menu-bar"
+import type { Json } from "@mina-js/utils"
+import { KeyRound } from "lucide-react"
+import { useTranslation } from "react-i18next"
+import { Link } from "react-router-dom"
+
+type CredentialsViewProps = {
+  credentials: [string, Json][]
+}
+
+export const CredentialsView = ({ credentials }: CredentialsViewProps) => {
+  const { t } = useTranslation()
+  return (
+    <AppLayout>
+      <MenuBar variant="dashboard" />
+      <section className="flex flex-col gap-4 px-8">
+        <h1 className="text-3xl w-full">{t("credentials.credentials")}</h1>
+        <div className="flex flex-col gap-2">
+          {credentials.map(([id]) => (
+            <Link
+              key={id}
+              to={`/credentials/${id}`}
+              className="p-4 flex items-center space-x-4 bg-secondary rounded-2xl"
+            >
+              <div className="flex items-center justify-center w-12 h-12 rounded-full bg-neutral">
+                <KeyRound />
+              </div>
+              <div>
+                <p>{id}</p>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </section>
+    </AppLayout>
+  )
+}

packages/features/src/lib/locales/en/en.json

@@ -147,5 +147,9 @@
     "deny": "Deny",
     "sign": "Sign",
     "reject": "Reject"
+  },
+  "credentials": {
+    "credentials": "Credentials",
+    "delete": "Delete"
   }
 }

packages/features/src/lib/locales/tr/tr.json

@@ -147,5 +147,9 @@
     "deny": "Reddet",
     "sign": "İmzala",
     "reject": "Reddet"
+  },
+  "credentials": {
+    "credentials": "Kimlik",
+    "delete": "Silmek"
   }
 }

packages/features/src/router.tsx

@@ -7,6 +7,8 @@ import { I18nextProvider } from "react-i18next"
 import { Toaster } from "sonner"
 import { AddressBookRoute } from "./address-book/routes/address-book"
 import { NewAddressRoute } from "./address-book/routes/new-address"
+import { CredentialDetailsRoute } from "./credentials/routes/credential-details"
+import { CredentialsRoute } from "./credentials/routes/credentials"
 import { ErrorView } from "./error-renderer/views/error"
 import { i18n } from "./lib/i18n"
 import { UnlockWalletRoute } from "./lock/routes/unlock-wallet"
@@ -122,6 +124,10 @@ export const Router = () => {
                 />
                 <Route path="privacy" element={<PrivacyRoute />} />
               </Route>
+              <Route path="credentials" element={<Outlet />}>
+                <Route path="" element={<CredentialsRoute />} />
+                <Route path=":id" element={<CredentialDetailsRoute />} />
+              </Route>
               <Route path="/*" element={<NotFoundRoute />} />
             </Routes>
           </MemoryRouter>