Feat/add permissionless

apps/dapp/package.json

@@ -23,11 +23,13 @@
 		"firebase-tools": "^13.5.1",
 		"helpers": "workspace:*",
 		"lucide-react": "^0.358.0",
+		"permissionless": "^0.1.10",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"tailwind-merge": "^2.2.1",
 		"tailwindcss": "^3.4.1",
 		"tailwindcss-animate": "^1.0.7",
-		"typescript": "^5.4.2"
+		"typescript": "^5.4.2",
+		"viem": "^2.8.10"
 	}
 }

apps/dapp/src/components/deploy-account-button.tsx

@@ -0,0 +1,16 @@
+import { Button } from "@/components/ui/button";
+import { createSafe4337Account } from "@/lib/safe-account";
+
+export function DeployAccountButton() {
+	return (
+		<Button
+			onClick={async (e) => {
+				e.preventDefault();
+				console.log("uop");
+				console.log(await createSafe4337Account());
+			}}
+		>
+			Deploy Account
+		</Button>
+	);
+}

apps/dapp/src/env.d.ts

@@ -1,2 +1,3 @@
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+PUBLIC_PIMLICO_API_KEY

apps/dapp/src/lib/permissionless.ts

@@ -0,0 +1,70 @@
+import { createBundlerClient, createSmartAccountClient } from "permissionless"
+import { baseSepolia } from "viem/chains"
+import { createPublicClient, createWalletClient, http } from "viem"
+import { createPimlicoPaymasterClient } from "permissionless/clients/pimlico";
+import { privateKeyToSimpleSmartAccount, signerToSafeSmartAccount } from "permissionless/accounts";
+import { privateKeyToAccount } from "viem/accounts";
+
+// ! Dont do this in prod
+const pimlicoApiKey = import.meta.env.PUBLIC_PIMLICO_API_KEY
+const privateKey = import.meta.env.PUBLIC_PRIVATE_KEY
+
+const pimlicoTransport = (version: 'v1' | 'v2') => http(`https://api.pimlico.io/${version}/${baseSepolia.id}/rpc?apikey=${pimlicoApiKey}`)
+
+export const ENTRYPOINT_ADDRESS_V07 = '0x0000000071727De22E5E9d8BAf0edAc6f37da032';
+export const ENTRYPOINT_ADDRESS_V06 = '0x5FF137D4b0FDCD49DcA30c7CF57E578a026d2789';
+
+// create clients --------------------------------------------
+
+export const publicClient = createPublicClient({
+    transport: http(baseSepolia.rpcUrls.default.http[0])
+});
+
+export const walletClient = createWalletClient({
+    chain: baseSepolia,
+    transport: http(baseSepolia.rpcUrls.default.http[0]),
+    account: privateKeyToAccount(privateKey)
+});
+
+export const bundlerClient = createBundlerClient({
+    chain: baseSepolia,
+    transport: pimlicoTransport('v2'),
+    entryPoint: ENTRYPOINT_ADDRESS_V07
+})
+
+export const paymasterClient = createPimlicoPaymasterClient({
+    transport: pimlicoTransport('v2'),
+    entryPoint: ENTRYPOINT_ADDRESS_V06
+});
+
+// create account & account client --------------------------------------------
+
+export const simpleAccount = await privateKeyToSimpleSmartAccount(publicClient, {
+    privateKey: privateKey,
+    factoryAddress: "0x15Ba39375ee2Ab563E8873C8390be6f2E2F50232",
+    entryPoint: ENTRYPOINT_ADDRESS_V07
+});
+
+export const safeAccount = await signerToSafeSmartAccount(publicClient, {
+    entryPoint: ENTRYPOINT_ADDRESS_V06,
+    signer: privateKeyToAccount(privateKey),
+    saltNonce: 0n, // optional
+    safeVersion: "1.4.1",
+    //address: "0x...", // optional, only if you are using an already created account
+})
+
+export const smartAccountClient = createSmartAccountClient({
+    account: simpleAccount,
+    entryPoint: ENTRYPOINT_ADDRESS_V07,
+    chain: baseSepolia,
+    bundlerTransport: pimlicoTransport('v2'),
+});
+
+export const safeAccountClient = createSmartAccountClient({
+    account: safeAccount,
+    entryPoint: ENTRYPOINT_ADDRESS_V06,
+    chain: baseSepolia,
+    bundlerTransport: pimlicoTransport('v2'),
+});
+
+

apps/dapp/src/lib/safe-account.ts

@@ -0,0 +1,34 @@
+import { encodeFunctionData } from "viem"
+import { walletClient, publicClient } from './permissionless'
+
+// abis --------------------------------------------
+
+const ONIT_FACTORY_ADDRESS = '0x42ab880ea77fc7a09eb6ba0fe82fbc9901c114b6'
+
+const createSafe4337Abi = [
+    { "type": "function", "name": "createSafe4337", "inputs": [{ "name": "passkeyPublicKey", "type": "uint256[2]", "internalType": "uint256[2]" }, { "name": "nonce", "type": "uint256", "internalType": "uint256" }], "outputs": [{ "name": "onitAccountAddress", "type": "address", "internalType": "address" }], "stateMutability": "nonpayable" }
+]
+
+// formatting calls --------------------------------------------
+
+export const createSafe4337Account = async () => {
+    const { request } = await publicClient.simulateContract({
+        account: walletClient.account,
+        address: ONIT_FACTORY_ADDRESS,
+        abi: createSafe4337Abi,
+        functionName: 'createSafe4337',
+        args: [[1n, 2n], 3n],
+    })
+    console.log({ request })
+
+    const deployResponse = await walletClient.writeContract(request)
+    console.log({ deployResponse })
+
+    return deployResponse
+}
+
+const formatFactoryCreateSafe4337Calldata = (x: bigint, y: bigint, nonce: bigint) => {
+    const createSafe4337Calldata = encodeFunctionData({ abi: createSafe4337Abi, functionName: "createSafe4337", args: [[x, y], nonce] })
+    console.log(createSafe4337Calldata)
+    return createSafe4337Calldata
+}

apps/dapp/src/pages/index.astro

@@ -1,6 +1,10 @@
 ---
 import "../../public/global.css";
 import { CreatePaymentButton } from "@/components/create-payment-button";
+import { DeployAccountButton } from "@/components/deploy-account-button";
+import { getPaymentOrigin } from "@/lib/utils";
+
+const paymentOrigin = getPaymentOrigin();
 import WalletIframeDialog from "@/components/wallet-iframe-dialog.astro";
 ---
 
@@ -17,6 +21,14 @@ import WalletIframeDialog from "@/components/wallet-iframe-dialog.astro";
 		<main class="flex flex-col items-center justify-evenly min-h-[20vh]">
 			<h1>SPC dApp</h1>
 
+			<div id="iframe-container" class="hidden">
+				<iframe name="iframe" allow={`payment ${paymentOrigin}`}
+				></iframe>
+			</div>
+
+			<CreatePaymentButton client:only />
+			<DeployAccountButton client:only />
+			<!-- </form> -->
 			<WalletIframeDialog />
 			<CreatePaymentButton client:only />
 		</main>