Replace Verida Connect by Verida Auth

.env.example

@@ -1,23 +1,28 @@
 # Environment variables
 
 # Required: Set the base URL of the application. Mostly used for the SEO tags. No trailing slash.
-NEXT_PUBLIC_BASE_URL=
+NEXT_PUBLIC_BASE_URL=http://localhost:3005
 
 # ------ Dev ------
 
 # Optional: Set the dev mode ("true" or "false"). Default to "false".
 NEXT_PUBLIC_DEV_MODE=false
 
+# ------ Telemetry ------
+
+# Optional: Set the log level ("error", "warn", "info", "debug"). Default to "info".
+NEXT_PUBLIC_LOG_LEVEL=info
+
 # ------ Verida Network ------
 
 # Optional: Set the Verida Network ("myrtle", "banksia", "devnet", "local"). Default to "banksia".
 NEXT_PUBLIC_VERIDA_NETWORK=banksia
 
-# Optional: Set the Verida RPC URL. Default to the SDK default public RPC URL. Strongly suggested to set a custom paid one for reliability. Production deployments should set this.
-NEXT_PUBLIC_VERIDA_RPC_URL=
+# Required: Set the Verida DID for this application. Required for Verida auth.
+NEXT_PUBLIC_VERIDA_APP_DID=
 
 # Data connector server URL
 NEXT_PUBLIC_DCS_URL=
 
 # Endpoint to initiate auth consent for API token with Verida Vault
-NEXT_PUBLIC_VAULT_AUTH_ENDPOINT=
+NEXT_PUBLIC_VAULT_AUTH_ENDPOINT=

README.md

@@ -24,4 +24,4 @@ Run the development server:
 yarn run dev
 ```
 
-The application will be available at [http://localhost:3000](http://localhost:3000)
+The application will be available at [http://localhost:3005](http://localhost:3005)

eslint.config.mjs

@@ -25,6 +25,7 @@ const config = [
     rules: {
       "@typescript-eslint/no-explicit-any": "warn",
       "@typescript-eslint/no-unused-vars": "warn",
+      "@typescript-eslint/no-empty-object-type": "off",
       "no-console": "warn",
       "prettier/prettier": "warn",
     },

next.config.ts

@@ -5,23 +5,11 @@ const nextConfig: NextConfig = {
     // TODO: Enable the check again. This is now to disable next.js checking node_modules type errors on building the app
     ignoreBuildErrors: true,
   },
-  webpack: (config, { isServer }) => {
+  webpack: (config) => {
     config.node = {
       __dirname: true,
     }
 
-    config.module.rules.push({
-      test: /\.(woff|woff2|eot|ttf|otf)$/,
-      use: {
-        loader: "file-loader",
-        options: {
-          name: "[name].[ext]",
-          publicPath: "/_next/static/fonts/",
-          outputPath: `${isServer ? "../" : ""}static/fonts/`,
-        },
-      },
-    })
-
     return config
   },
   images: {

package.json

@@ -6,7 +6,7 @@
     "version": "npx genversion --es6 --double ./src/config/version.ts",
     "postinstall": "yarn run version",
     "predev": "yarn run version",
-    "dev": "next dev",
+    "dev": "next dev -p 3005",
     "prebuild": "yarn run version",
     "build": "next build",
     "prestart": "yarn run version",
@@ -20,7 +20,7 @@
     "fix": "yarn run fix:format && yarn run fix:lint"
   },
   "dependencies": {
-    "@headlessui/react": "^2.2.0",
+    "@radix-ui/react-accordion": "^1.2.8",
     "@radix-ui/react-alert-dialog": "^1.1.5",
     "@radix-ui/react-avatar": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.1.3",
@@ -34,8 +34,9 @@
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-switch": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.7",
-    "@verida/types": "^4.4.0",
-    "@verida/web-helpers": "^4.4.1",
+    "@tanstack/query-sync-storage-persister": "^5.74.6",
+    "@tanstack/react-query": "^5.74.4",
+    "@tanstack/react-query-persist-client": "^5.74.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "genversion": "^3.2.0",
@@ -55,23 +56,22 @@
     "@eslint/eslintrc": "^3.2.0",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.10",
+    "@tanstack/react-query-devtools": "^5.74.6",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/node": "^22.12.0",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
+    "@verida/types": "^4.4.1",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.19.0",
     "eslint-config-next": "^15.1.6",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-prettier": "^5.2.3",
     "file-loader": "^6.2.0",
     "postcss": "^8.5.1",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "tailwindcss": "^3.4.17",
-    "typescript": "^5.7.3"
-  },
-  "resolutions": {
-    "qrcode-with-logos": "1.0.3"
+    "typescript": "^5.8.3"
   }
 }

src/app/(connected)/credits/loading.tsx

@@ -0,0 +1,4 @@
+export default function CreditsLoading() {
+  return <div>Loading...</div>
+}
+CreditsLoading.displayName = "CreditsLoading"

src/app/(connected)/credits/page.tsx

@@ -1,24 +1,21 @@
 "use client"
 
-import { useEffect, useState } from "react"
+import { useCallback, useEffect, useState } from "react"
 
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-// shadcn/ui components (adjust imports to match your actual setup)
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { getAccount, getVdaPrice, submitDeposit } from "@/features/dcs/api"
 import type { BillingAccount } from "@/features/dcs/interfaces"
 import { accountBalance, accountCredits } from "@/features/dcs/utils"
-import { useVerida } from "@/features/verida/hooks/use-verida"
 
 // Regex for validating Ethereum/Polygon addresses
 const ethAddressRegex = /^0x[a-fA-F0-9]{40}$/
 
 export default function CreditsPage() {
-  const { getAccountSessionToken, webUserInstanceRef } = useVerida()
-
   // Track current step (1 or 2)
   const [step, setStep] = useState<number>(1)
 
@@ -83,54 +80,56 @@ export default function CreditsPage() {
     }
 
     // If we get here, we have transactionHash
-    const sessionToken = await getAccountSessionToken()
-    const veridaAccount = webUserInstanceRef.current.getAccount()
+    // const sessionToken = await getAccountSessionToken()
 
     try {
-      await submitDeposit(
-        veridaAccount,
-        sessionToken,
-        walletAddress,
-        tokenAmount,
-        transactionHash
-      )
+      // await submitDeposit(
+      //   veridaAccount,
+      //   sessionToken,
+      //   walletAddress,
+      //   tokenAmount,
+      //   transactionHash
+      // )
 
       // Reload account so new credits are displayed
-      await loadAccount()
+      // await loadAccount()
 
       // Reset the form
       setWalletAddress("")
       setTokenAmount("")
       setTransactionHash("")
       handleBack()
-    } catch (err: any) {
-      setSubmitError(`${err.message}`)
+    } catch (error) {
+      setSubmitError(
+        error instanceof Error ? error.message : "An unknown error occurred"
+      )
     }
   }
 
-  async function loadAccount() {
-    const sessionToken = await getAccountSessionToken()
-    const account = await getAccount(sessionToken)
+  // const loadAccount = useCallback(async () => {
+  //   // const sessionToken = await getAccountSessionToken()
+  //   const account = await getAccount(sessionToken)
 
-    if (account) {
-      setAccount(account)
-      const credits = await accountCredits(sessionToken, account)
-      console.log(credits)
-      if (credits) {
-        setCredits(credits)
-      }
-    }
-  }
+  //   if (account) {
+  //     setAccount(account)
+  //     const credits = await accountCredits(sessionToken, account)
+  //     // eslint-disable-next-line no-console -- TODO: Replace with Logger
+  //     console.log(credits)
+  //     if (credits) {
+  //       setCredits(credits)
+  //     }
+  //   }
+  // }, [])
 
   // A function that does something on mount
-  async function onLoad() {
-    await loadAccount()
-  }
+  const onLoad = useCallback(async () => {
+    // await loadAccount()
+  }, [])
 
   // Run the function once, when the component mounts
   useEffect(() => {
     onLoad()
-  }, [])
+  }, [onLoad])
 
   return (
     <div className="p-6">

src/app/(connected)/dashboard/loading.tsx

@@ -0,0 +1,4 @@
+export default function DashboardLoading() {
+  return <div>Loading...</div>
+}
+DashboardLoading.displayName = "DashboardLoading"