Skip to content

Commit

Permalink
Remove react code from smart account module tutorial
Browse files Browse the repository at this point in the history
  • Loading branch information
@akshay-ap
akshay-ap committed Jan 8, 2025
1 parent 6692b80 commit 58f2d4a
Showing 1 changed file with 0 additions and 127 deletions.
127 changes: 0 additions & 127 deletions pages/advanced/smart-account-modules/smart-account-modules-tutorial.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { Callout } from 'nextra/components'


# How to build an app with Safe and Safe Module

In this tutorial, you will build an app that can:
Expand Down Expand Up @@ -313,132 +312,6 @@ contract TokenWithdrawModule {
}
```

### Setup demo user interface

Initialize a new repository from the [Safe demo template](https://github.com/5afe/safe-demo-template). Clone the repository to your local machine.

#### Step 1: Install dependencies

```bash
pnpm i
```

#### Step 2: Setup project

Copy the `.example.env` file to `.env` and update the values if necessary. For now, you can keep the default values.

```bash
cp .example.env .env
```

#### Step 3: Start the development server

```bash
pnpm dev
```

#### Step 4: Add a scaffold React component

Now, replace the content of `app/page.tsx` with the following code. It includes all necessary imports, the React component and the UI, and empty functions you will fill with code in the following steps. From now on, you will only work on this file.

```tsx
// TODO
```

You can now run the development server with `pnpm dev` and open the app in your browser at `http://localhost:3000`. You should see a card that asks you to connect two wallets. Connect two wallets to proceed with the tutorial.

#### Step 5: Initialize the clients

In the first step, you create the clients that allow you to interact with the smart account. As permissionless.js is just a tiny wrapper around viem, you will use many of viem's functions in this tutorial.

To add this code, overwrite the `init` function with this one:

```tsx
const init = async () => {
// The safe account is created using the public client:
const safeAccount = ; // TODO

const isSafeDeployed = await safeAccount.isDeployed()

setSafeAddress(safeAccount.address)
setSafeIsDeployed(isSafeDeployed)

// Check whether the module has been installed already:
const isModuleInstalled =
isSafeDeployed &&
(await smartAccountClient.isModuleInstalled({
address: ownableExecutorModule,
type: 'executor',
context: '0x'
}))

setModuleIsInstalled(isModuleInstalled)

// We store the clients in the state to use them in the following steps:
setSafeAccount(safeAccount)
setSmartAccountClient(smartAccountClient)

console.log('setup done')
}
```

You must refresh your page after adding this code, as the initial site load will trigger the `init` function and set up the Safe account and the Smart account client. You can check the console to see if the setup was successful.

#### Step 6: Sign token approval as Safe owner

```tsx
// TODO
```

#### Step 7: Send a transaction via the TokenTransferModule

```tsx
// TODO
```

#### Step 8: Disable the TokenTransferModule

The last step is to uninstall the module. If the module is no longer needed, you can remove it from the smart account.

Replace the `uninstallModule` function with this code:

```tsx
const uninstallModule = async () => {
setLoading(true)
console.log('Disabling module...')

// To uninstall the module, use the `uninstallModule`.
// You have to pack the abi parameter yourself:
// - previousEntry (address): The address of the previous entry in the module sentinel list.
// - deInitData (bytes): The data that is passed to the deInit function of the module.
// As this is the only module, the previous entry is the sentinel address 0x1. The deInitData is empty for the
// OwnableExecutor.
const userOp = await smartAccountClient?.uninstallModule({
type: 'executor',
address: ownableExecutorModule,
context: encodeAbiParameters(
parseAbiParameters('address prevEntry, bytes memory deInitData'),
['0x0000000000000000000000000000000000000001', '0x']
)
})

console.log('User operation:', userOp, '\nwaiting for tx receipt...')

// We wait for the transaction to be settled:
const receipt = await pimlicoClient.waitForUserOperationReceipt({
hash: userOp as `0x${string}`
})

console.log('Module uninstalled, tx receipt:', receipt)
setModuleIsUninstalled(true)
setLoading(false)
}
```

In the last step of the UI, you can now click the “Uninstall Module” button to remove the module from the smart account.

That’s it! You have successfully built an app that can interact with a Safe Smart Account using the ERC-7579 standard. You can now deploy and test your app with your Safes and modules.

## Do more with Safe and Safe Modules

Did you encounter any difficulties? Let us know by opening [an issue](https://github.com/5afe/safe-module-tutorial/issues/new) or asking a question on [Stack Exchange](https://ethereum.stackexchange.com/questions/tagged/safe-core) with the `safe-core` tag.

0 comments on commit 58f2d4a

Please sign in to comment.