Feat ERC7715 grant_permissions support on lab

apps/demo/package.json

@@ -20,8 +20,8 @@
     "sonner": "1.4.3",
     "tailwind-merge": "2.2.1",
     "vaul": "0.9.0",
-    "viem": "2.10.3",
-    "wagmi": "2.9.10",
+    "viem": "2.16.2",
+    "wagmi": "2.10.9",
     "zustand": "4.5.2"
   },
   "devDependencies": {

apps/laboratory/.env.example

@@ -10,4 +10,8 @@ NEXT_PUBLIC_SECURE_SITE_SDK_URL=""
 SOCIAL_TEST_EMAIL=""
 SOCIAL_TEST_PASSWORD=""
 NEXT_PUBLIC_DEFAULT_LOG_LEVEL=""
-
+NEXT_PUBLIC_PIMLICO_KEY=""
+# local env setup guide  https://docs.pimlico.io/permissionless/how-to/local-testing"
+NEXT_PUBLIC_LOCAL_BUNDLER_URL=
+NEXT_PUBLIC_LOCAL_PAYMASTER_URL=
+NEXT_PUBLIC_LOCAL_CLIENT_URL=

apps/laboratory/package.json

@@ -41,21 +41,23 @@
     "@solana/wallet-adapter-wallets": "0.19.32",
     "@solana/web3.js": "1.91.7",
     "@tanstack/react-query": "5.24.8",
-    "@wagmi/connectors": "5.0.8",
+    "@wagmi/connectors": "5.0.21",
     "@walletconnect/utils": "2.13.1",
     "@web3modal/ethers": "5.0.6",
     "@web3modal/siwe": "5.0.6",
     "@web3modal/solana": "5.0.6",
     "@web3modal/wagmi": "5.0.6",
+    "bs58": "6.0.0",
     "ethers": "6.13.0",
     "framer-motion": "10.17.9",
     "next": "14.2.3",
     "next-auth": "4.24.5",
+    "permissionless": "0.1.31",
     "react-icons": "4.12.0",
     "rpc-websockets": "7.11.0",
     "valtio": "1.11.2",
-    "viem": "2.10.3",
-    "wagmi": "2.9.10"
+    "viem": "2.16.2",
+    "wagmi": "2.10.9"
   },
   "devDependencies": {
     "@aws-sdk/client-cloudwatch": "3.509.0",

apps/laboratory/src/components/Wagmi/WagmiCreatePrivateKeySignerTest.tsx

@@ -0,0 +1,47 @@
+import { useState, useEffect } from 'react'
+import { Button, Stack } from '@chakra-ui/react'
+import { generatePrivateKey, privateKeyToAccount } from 'viem/accounts'
+import { useChakraToast } from '../Toast'
+import { LOCAL_SIGNER_KEY, setItem, getItem } from '../../utils/LocalStorage'
+
+export function WagmiCreatePrivateKeySignerTest() {
+  const toast = useChakraToast()
+  const [signerAddress, setSignerAddress] = useState<string | undefined>()
+
+  function onCreateNewPrivateKey() {
+    try {
+      const privateKey = generatePrivateKey()
+      setItem(LOCAL_SIGNER_KEY, privateKey)
+      const account = privateKeyToAccount(privateKey)
+      setSignerAddress(account.address)
+      toast({
+        title: 'Created new local signer',
+        description: account.address,
+        type: 'success'
+      })
+    } catch {
+      toast({
+        title: 'Failure',
+        description: 'Failed to create new signer',
+        type: 'error'
+      })
+    }
+  }
+
+  useEffect(() => {
+    const storedLocalSignerPrivateKey = getItem(LOCAL_SIGNER_KEY)
+    if (storedLocalSignerPrivateKey) {
+      const account = privateKeyToAccount(storedLocalSignerPrivateKey as `0x${string}`)
+      setSignerAddress(account.address)
+    }
+  }, [])
+
+  return (
+    <Stack direction={['column', 'column', 'row']} align={'center'}>
+      <Button data-testid="sign-message-button" onClick={onCreateNewPrivateKey}>
+        Create New Signer
+      </Button>
+      {signerAddress && <div>{signerAddress}</div>}
+    </Stack>
+  )
+}

apps/laboratory/src/components/Wagmi/WagmiPermissionsTest.tsx

@@ -0,0 +1,51 @@
+import { Box, Card, CardBody, CardHeader, Heading, Stack, StackDivider } from '@chakra-ui/react'
+import { WagmiCreatePrivateKeySignerTest } from './WagmiCreatePrivateKeySignerTest'
+import { WagmiRequestPermissionsTest } from './WagmiRequestPermissionsTest'
+import { WagmiPurchaseDonutWithPermissionsTest } from './WagmiPurchaseDonutPermissionsTest'
+import { WagmiSendCallsTest } from './WagmiSendCallsTest'
+import { WagmiGetCallsStatusTest } from './WagmiGetCallsStatusTest'
+
+export function WagmiPermissionsTest() {
+  return (
+    <Card marginTop={10} marginBottom={10}>
+      <CardHeader>
+        <Heading size="md">Test Interactions</Heading>
+      </CardHeader>
+
+      <CardBody>
+        <Stack divider={<StackDivider />} spacing="4">
+          <Box>
+            <Heading size="xs" textTransform="uppercase" pb="2">
+              Send Calls (Atomic Batch)
+            </Heading>
+            <WagmiSendCallsTest />
+          </Box>
+          <Box>
+            <Heading size="xs" textTransform="uppercase" pb="2">
+              Get Calls Status
+            </Heading>
+            <WagmiGetCallsStatusTest />
+          </Box>
+          <Box>
+            <Heading size="xs" textTransform="uppercase" pb="2">
+              New Private Key
+            </Heading>
+            <WagmiCreatePrivateKeySignerTest />
+          </Box>
+          <Box>
+            <Heading size="xs" textTransform="uppercase" pb="2">
+              Request Permissions
+            </Heading>
+            <WagmiRequestPermissionsTest />
+          </Box>
+          <Box>
+            <Heading size="xs" textTransform="uppercase" pb="2">
+              Purchase Donut With Permissions
+            </Heading>
+            <WagmiPurchaseDonutWithPermissionsTest />
+          </Box>
+        </Stack>
+      </CardBody>
+    </Card>
+  )
+}

apps/laboratory/src/components/Wagmi/WagmiPurchaseDonutPermissionsTest.tsx

@@ -0,0 +1,109 @@
+import { Button, Flex, Stack, Text } from '@chakra-ui/react'
+import { useAccount, useReadContract } from 'wagmi'
+import { useState } from 'react'
+import { useChakraToast } from '../Toast'
+import { encodeFunctionData, parseEther } from 'viem'
+import { abi as donutContractAbi, address as donutContractaddress } from '../../utils/DonutContract'
+import { usePermissions } from '../../hooks/usePermissions'
+import { useGrantedPermissions } from '../../hooks/useGrantedPermissions'
+import { useLocalSigner } from '../../hooks/useLocalSigner'
+
+export function WagmiPurchaseDonutWithPermissionsTest() {
+  const { address, chain } = useAccount()
+  const { buildAndSendTransactionsECDSAKeyAndPermissions } = usePermissions()
+  const { signerPrivateKey: ecdsaPrivateKey } = useLocalSigner()
+
+  const { grantedPermissions } = useGrantedPermissions()
+  const {
+    data: donutsOwned,
+    refetch: fetchDonutsOwned,
+    isLoading: donutsQueryLoading,
+    isRefetching: donutsQueryRefetching
+  } = useReadContract({
+    abi: donutContractAbi,
+    address: donutContractaddress,
+    functionName: 'getBalance',
+    args: [grantedPermissions?.signerData?.submitToAddress || address]
+  })
+
+  const [isTransactionPending, setTransactionPending] = useState<boolean>(false)
+  const toast = useChakraToast()
+
+  async function onPurchaseDonutWithPermissions() {
+    setTransactionPending(true)
+    try {
+      if (!grantedPermissions) {
+        throw Error('No permissions available')
+      }
+      if (!chain) {
+        throw new Error(`chain ${chain}`)
+      }
+      if (!ecdsaPrivateKey) {
+        throw new Error(`Invalid ecdsaPrivateKey:${ecdsaPrivateKey}`)
+      }
+      const purchaseDonutCallData = encodeFunctionData({
+        abi: donutContractAbi,
+        functionName: 'purchase',
+        args: [1]
+      })
+      const purchaseDonutCallDataExecution = [
+        {
+          target: donutContractaddress as `0x${string}`,
+          value: parseEther('0.0001'),
+          callData: purchaseDonutCallData
+        }
+      ]
+      const txHash = await buildAndSendTransactionsECDSAKeyAndPermissions({
+        actions: purchaseDonutCallDataExecution,
+        ecdsaPrivateKey: ecdsaPrivateKey as `0x${string}`,
+        permissions: grantedPermissions,
+        chain
+      })
+      if (txHash) {
+        toast({
+          title: 'Transaction success',
+          description: txHash,
+          type: 'success'
+        })
+        await fetchDonutsOwned()
+      }
+    } catch (error) {
+      toast({
+        title: 'Transaction Failed',
+        description: `${error}`,
+        type: 'error'
+      })
+    }
+    setTransactionPending(false)
+  }
+
+  if (!grantedPermissions) {
+    return (
+      <Text fontSize="md" color="yellow">
+        Dapp does not have the permissions
+      </Text>
+    )
+  }
+
+  return (
+    <Stack direction={['column', 'column', 'row']}>
+      <Button
+        isDisabled={!grantedPermissions}
+        isLoading={isTransactionPending}
+        onClick={onPurchaseDonutWithPermissions}
+      >
+        Purchase Donut
+      </Button>
+      <Flex alignItems="center">
+        {donutsQueryLoading || donutsQueryRefetching ? (
+          <Text>Fetching donuts...</Text>
+        ) : (
+          <>
+            <Text marginRight="5px">Crypto donuts left:</Text>
+            <Text>{donutsOwned?.toString()}</Text>
+          </>
+        )}
+      </Flex>
+    </Stack>
+  )
+}