develop a peanut Safe{Wallet} app

[0xkkonrad]

I'd like to start a discussion about the feasibility of this bounty. The next step is to write more detailed specs.

Description and Objective

Develop a fully functional wallet application that seamlessly incorporates elements from the peanut-ui and integrates the peanut-sdk. The app should be compatible with the Safe protocol, ensuring a robust and secure user experience.

Acceptance Criteria

• A fully functional wallet app that effectively integrates both peanut-ui elements and peanut-sdk.
• The app must be compatible with and adhere to the Safe core protocol standards.
• Ensure user-friendly interface and smooth functionality.

Additional Resources

• Peanut SDK Quick Start Guide: Peanut SDK Documentation
• Safe Core Protocol: Safe Protocol Documentation
• Quickstart: https://docs.safe.global/safe-apps-sdk/get-started

[nebolax]

Sounds cool! So this should be an app that is based on Safe smart contracts, but has a custom UI and integrates peanut, right?

What exact features should it have apart from sending tokens via peanut links? Social login? Multisig? Should it be ERC-4337 compatible? Should gas be sponsored for users when creating peanut links?

Should this wallet be a web app for desktop, a web app for mobile, a native mobile app, a browser extension, etc.?

Is it intended to be a "real wallet" or more of a demonstration for other devs to show how to integrate peanut?

[0xkkonrad]

Sorry @nebolax , just for clarity: This is for building a Peanut app that is a safe app: https://app.safe.global/apps. This should be done by using the scaffolds that safe provides (e.g. react elements) and the peanut SDK.

[nebolax]

Oh, alright, got it! Will read more about Safe apps and will come back with questions about the specs.

[Hugo0]

@borcherd any reusable peanut-ui components we could isolate/use for this? So as to have consistent look on the safe app and on peanut-ui

[borcherd]

At the moment we dont have any off the shelf exported components from the peanut-ui, but it's built pretty modular and should be quite easy to re-use components in the safe app that are already in the peanut-ui.

[nebolax]

Peanut Safe app

A Safe{Wallet} application that allows users to send tokens via Peanut links in a Safe-native environment.

Overview

Main screens

The app has 3 main screens:

1. Send screen where users generate a Safe transaction.
2. Success screen, displayed once a Safe transaction is executed.
3. Dashboard where users can see all the links that they've ever created.

Header & Footer

1. The header of the app contains:
   1. A peanut logo that opens peanut.to in a new browser tab (outside the Safe web app)
   2. A button to go to the dashboard and see created links
   3. A button to go to the send page and create a link
   4. Note: it DOES NOT contain a button to connect wallet and does not display the wallet address / chain since for a certain Safe these never change and are already shown to the user in the Safe web app.
2. The footer stays exactly the same as on peanut.to

User flow

Send screen

User enters the data

When the user opens the app for the first time, the Send screen is opened. User's owned tokens and token prices are fetched via Safe's native API. Tokens are fetched and displayed only for the chain on which the user's Safe is deployed on.

The user selects the token, enters the amount, etc. (the process is the same as on peanut.to/send) and clicks "Send" button. Once clicked, a Safe transaction is proposed. Once signed, a message that says something like "Execute the safe transaction and come back to the Peanut app on this device" is shown.

Background link processing

Info about the generated links is saved in the local storage. What's saved for every link is: user's Safe address, chain id, link password, Safe tx hash.

Safe address & chain id need to be stored so that if the user manages multiple Safe accounts on the same device, only relevant Peanut links are shown for every account.

Important to keep in mind: The user may propose multiple safe transactions that create Peanut links, may execute them at any time and may reject them.

Success screen

Then the user returns to the Peanut app. We check if any of the Peanut links stored in the local storage were created (i.e. if the relevant Safe transactions were executed) and if they were:

1. Fetch deposit indices for the links
2. Display a success screen with these links (the screen is the same as on peanut.to/send).

These links are marked with something like "User was notifed" so that this success screen is displayed only once for every link.

So, how do we deal with rejection?

We check if any of the Safe transactions awaiting execution were rejected, and if they were, we silently delete the relevant Peanut links from the local storage.

Dashboard

The user may then go to the dashboard, which works same as peanut.to/dashboard with a few differences. The dashboard contains columns: amount, token, date, status. It doesn't contain chain column as chain is always the same for a certain Safe account.

The status has 3 possible values: waiting for transaction execution if the user needs to sign and execute the relevant safe transaction hash, a copy button if the link was created and needs to be claimed and Claimed label if the link was already claimed.

[borcherd]

Thanks for the detailed writeup! Couple of things:

• what would the flow be to claim links to a safe account? Could we use the baseUrl param in the createLink function for this? Ie, pass in a url link that opens the peanut app directly in the safe wallet? (baseUrl is used to make links that arent formatted like 'peanut.to/claim...' but 'safe.peanut-app://claim...')
• also keep in mind that if the user is on a chain that we dont support, but safe does, it has to be handled accordingly
• more of a general question: is the safe app connected to the safe account directly without any user interaction needed?

[nebolax]

what would the flow be to claim links to a safe account? Could we use the baseUrl param in the createLink function for this? Ie, pass in a url link that opens the peanut app directly in the safe wallet? (baseUrl is used to make links that arent formatted like 'peanut.to/claim...' but 'safe.peanut-app://claim...')

Yeah, I've thought about it and my reason to leave claiming links unchanged was that we should allow anybody, including people that don't use Safe, to claim the links. And if the claiming party does use Safe, they connect their Safe to peanut.to via walletconnect.

Or do you think that it will make more sense to make this app 100% Safe native, including the claiming part?

also keep in mind that if the user is on a chain that we dont support, but safe does, it has to be handled accordingly

Yep, good point!

more of a general question: is the safe app connected to the safe account directly without any user interaction needed?

Yes!

[0xkkonrad]

Nice! This looks like a good overview of what it would look like. Let's now estimate the effort that's needed to make this a thing.

You also mentioned that safe apps require audits. That's something we can do too.