add web example

candidelabs · Mar 27, 2024 · 5dc44ee · 5dc44ee
1 parent 98b9153
commit 5dc44ee
Show file tree

Hide file tree

Showing 24 changed files with 2,218 additions and 0 deletions.
diff --git a/examples/SafeAccountExamples/PasskeysCreateAccountandSendTransaction/.env.example b/examples/SafeAccountExamples/PasskeysCreateAccountandSendTransaction/.env.example
@@ -0,0 +1,6 @@
+VITE_CHAIN_NAME=sepolia
+VITE_CHAIN_ID=11155111
+VITE_BUNDLER_URL=https://sepolia.test.voltaire.candidewallet.com/rpc
+VITE_JSON_RPC_PROVIDER=https://ethereum-sepolia-rpc.publicnode.com
+VITE_PAYMASTER_URL=https://api.candide.dev/paymaster/v1/sepolia/f70ee1e3efa3f7a67ff392eb99dafc78
+VITE_ENTRYPOINT_ADDRESS=0x5FF137D4b0FDCD49DcA30c7CF57E578a026d2789
diff --git a/examples/SafeAccountExamples/PasskeysCreateAccountandSendTransaction/.eslintrc.cjs b/examples/SafeAccountExamples/PasskeysCreateAccountandSendTransaction/.eslintrc.cjs
@@ -0,0 +1,8 @@
+module.exports = {
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  extends: ['../../.eslintrc.js', 'plugin:react-hooks/recommended'],
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+  },
+}
diff --git a/examples/SafeAccountExamples/PasskeysCreateAccountandSendTransaction/.gitignore b/examples/SafeAccountExamples/PasskeysCreateAccountandSendTransaction/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/SafeAccountExamples/PasskeysCreateAccountandSendTransaction/README.md b/examples/SafeAccountExamples/PasskeysCreateAccountandSendTransaction/README.md
@@ -0,0 +1,36 @@
+# Passkeys Safe Owner
+
+This minimalistic example application demonstrates a Safe Account deployment leveraging 4337 and Passkeys. It uses "WebAuthnSigner" as owners to validate webauth transactions. During account initialization, it uses the singleton contract that stores the signer publickey to the account storage directly to avoid 4337 storage restrictions, then it replaces it with a "WebAuthnSigner".
+
+"WebAuthnSigner" addresses are deterministic, we created a proxy and a proxy factory for this purpose (Almost the same proxy and factory as Safe's ).
+
+## Install dependencies
+
+**Change Directory**: Go to path containing the main abstractionkit library in the webauthn branch.
+Install, build, and establish a symbolic link for the for the package.
+
+```bash
+npm install 
+npm run build
+npm link
+```
+
+Now that the library is linked, you can return to the main example path here and connect locally installed abstractionkit. The command below will install the rest of the dependencies as well
+
+```bash
+npm link abstractionkit
+```
+
+## Fill in the environment variables
+
+```bash
+cp .env.example .env
+```
+
+and fill in the variables in `.env` file.
+
+### Run the app in development mode
+
+```bash
+npm run dev
+```
diff --git a/examples/SafeAccountExamples/PasskeysCreateAccountandSendTransaction/index.html b/examples/SafeAccountExamples/PasskeysCreateAccountandSendTransaction/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Candide & Safe Account Abstraction Passkeys</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>