wslyvh / nexth

A Next.js + Ethereum starter kit with Viem, Wagmi, Web3Modal, SIWE, Tailwind, daisyUI and more to quickly ship production-ready Web3 Apps ⚡
https://nexth.vercel.app/
MIT License
671 stars 141 forks source link

initial smart wallet example setup #39

Closed hone1er closed 2 months ago

hone1er commented 6 months ago

Opening as a draft to get feedback

but this should be a working example of coinbase smart wallet integration

https://github.com/wslyvh/nexth/assets/24376928/a8d90964-82f5-47f3-b252-3412867b287c

https://github.com/wslyvh/nexth/assets/24376928/a5481b9e-0e07-4c0e-9767-231b0474d7ae

https://github.com/wslyvh/nexth/assets/24376928/3a270824-2335-4869-b3e7-8b4971b47b9a

Removed the Coinbase connector specific connect and disconnect buttons in favor of telling the user to use the coinbase wallet in web3Modal and added links to smart wallet repo and docs

Screenshot 2024-05-01 at 8 51 06 PM
vercel[bot] commented 6 months ago

@hone1er is attempting to deploy a commit to the useWeb3 Team on Vercel.

A member of the Team first needs to authorize it.

socket-security[bot] commented 6 months ago

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package New capabilities Transitives Size Publisher
npm/@coinbase/wallet-sdk@4.0.0-beta.12 network +4 483 kB cb-felix-z
npm/@nomicfoundation/hardhat-viem@2.0.1 filesystem +1 1.28 MB kanej
npm/eslint-config-next@14.1.4 unsafe Transitive: environment, filesystem +61 11.8 MB vercel-release-bot
npm/eslint-config-prettier@9.1.0 None 0 20.8 kB lydell
npm/eslint-plugin-prettier@5.1.3 None 0 33.9 kB jounqin

🚮 Removed packages: npm/@emotion/babel-plugin@11.11.0, npm/@emotion/cache@11.11.0, npm/@emotion/is-prop-valid@1.2.2, npm/@emotion/react@11.11.4, npm/@emotion/serialize@1.1.4, npm/@emotion/styled@11.11.5, npm/@eslint/eslintrc@3.0.2, npm/@eslint/js@9.1.1, npm/@humanwhocodes/config-array@0.13.0, npm/@metamask/object-multiplex@1.3.0, npm/@metamask/post-message-stream@6.2.0, npm/@metamask/providers@10.2.1, npm/@metamask/sdk-communication-layer@0.14.3, npm/@metamask/sdk-install-modal-web@0.14.1, npm/@metamask/sdk@0.14.3, npm/@nomicfoundation/edr-darwin-arm64@0.3.4, npm/@nomicfoundation/edr-darwin-x64@0.3.4, npm/@nomicfoundation/edr-linux-arm64-gnu@0.3.4, npm/@nomicfoundation/edr-linux-arm64-musl@0.3.4, npm/@nomicfoundation/edr-linux-x64-gnu@0.3.4, npm/@nomicfoundation/edr-linux-x64-musl@0.3.4, npm/@nomicfoundation/edr-win32-arm64-msvc@0.3.4, npm/@nomicfoundation/edr-win32-ia32-msvc@0.3.4, npm/@nomicfoundation/edr-win32-x64-msvc@0.3.4, npm/@nomicfoundation/edr@0.3.4, npm/@nomicfoundation/hardhat-viem@2.0.0, npm/@types/qs@6.9.15, npm/@wagmi/connectors@4.1.25, npm/dayjs@1.11.11

View full report↗︎

socket-security[bot] commented 6 months ago

🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎

To accept the risk, merge this PR and you will not be notified again.

Alert Package NoteSource
Install scripts npm/esbuild@0.19.12

View full report↗︎

Next steps

What is an install script?

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Packages should not be running non-essential scripts during install and there are often solutions to problems people solve with install scripts that can be run at publish time instead.

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of ecosystem/package-name@version specifiers. e.g. @SocketSecurity ignore npm/foo@1.0.0 or ignore all packages with @SocketSecurity ignore-all

  • @SocketSecurity ignore npm/esbuild@0.19.12
wslyvh commented 5 months ago

This is great! Love it

I wonder a little bit if we should add it as an example page or as a more detailed, full example implementation. My thinking so far is that example/pages should demonstrate basic functionalities (send ether, transfer tokens, etc.) without requiring custom configurations, etc.

More detailed examples like this, which require different packages/configuration/etc. might be easier to maintain as fork or branch. There are a couple of other branches as examples (e.g. ethers instead of viem, using signature-recovery,etc.). We should probably keep a list of active examples on the readme so its easier to find tho.

In this case, I think you could replace the default connect/sign in flow, include a simple contract, NFT minting and provide the full E2E example and functionalities of smart wallets.

What do you think?

hone1er commented 5 months ago

This is great! Love it

I wonder a little bit if we should add it as an example page or as a more detailed, full example implementation. My thinking so far is that example/pages should demonstrate basic functionalities (send ether, transfer tokens, etc.) without requiring custom configurations, etc.

More detailed examples like this, which require different packages/configuration/etc. might be easier to maintain as fork or branch. There are a couple of other branches as examples (e.g. ethers instead of viem, using signature-recovery,etc.). We should probably keep a list of active examples on the readme so its easier to find tho.

In this case, I think you could replace the default connect/sign in flow, include a simple contract, NFT minting and provide the full E2E example and functionalities of smart wallets.

What do you think?

Sounds good to me! I'll get working on this soon. I was actually thinking the smart contract example should have a lot more documentation to it so i think breaking it out into it's own branch and getting more detailed is a great idea.

wslyvh commented 4 months ago

Hi @hone1er just checking in and see if this is still something you'd like to contribute? I believe there have been a lot of advancements in smart contract wallets. Would love to see a Nexth example if you're up for it :)

hone1er commented 4 months ago

Hi @hone1er just checking in and see if this is still something you'd like to contribute? I believe there have been a lot of advancements in smart contract wallets. Would love to see a Nexth example if you're up for it :)

Hey @wslyvh ! Yeah my bad i've been working on some buildathon stuff and trying to get freelance work where i can. Lost my job recently lol if no one gets to some smart wallet examples before i get back to this i'd definitely still like to contribute

I've been working with the smart wallet a bit more lately plus wagmi and viem have experimental features already to make working with smart wallets easier so it should be a pretty smooth setup now. Might be a good idea to just close this branch and i'll start fresh with those new hooks and actions to integrate the smart wallet stuff

wslyvh commented 2 months ago

Hi @hone1er I would love to see a proper Smart contract wallet example, but closing the PR for now.. Happy to chat, once you're ready for it :)