feat: add porto and config

[hpmaxi]

Closes #410

Description:

Added porto connector option, by injecting it as explained here. New option to opt-out it for unsupported networks.

Steps:

1. Go to /
2. Connect
3. Select Porto
4. Create Account

(Required steps to reproduce or test the fix / feature)

Type of change:

• New feature
• Bug fix
• Breaking change
• Enhancement
• Refactoring
• Chore

How Has This Been Tested?

• Manual testing
• Automated tests
• Other (explain)

Remember to check that:

• Your code follows the style guidelines of this project
• You have performed a self-review of your code
• You have commented your code in hard-to-understand areas
• You have made corresponding changes to the documentation
• Your changes generate no new warnings

Screenshots

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
components.dappbooster	Ready	Preview	Comment	Oct 21, 2025 11:49pm
demo.dappbooster	Ready	Preview	Comment	Oct 21, 2025 11:49pm
docs.dappbooster	Ready	Preview	Comment	Oct 21, 2025 11:49pm

[fernandomg]

All looks legit, but there's a tiny thing that you may have missed.

In lib/wallets there are other config files, user can choose one or another to handle the conectivity.

Can you add Porto support to those as well?

[Copilot]

Pull Request Overview

This PR adds Porto wallet connector support to the application, allowing users to connect using the Porto wallet alongside existing wallet options. The implementation includes conditional enabling via environment configuration.

• Added Porto SDK dependency and import
• Created conditional initialization based on environment flag
• Updated environment configuration to support Porto enablement

Reviewed Changes

Copilot reviewed 4 out of 6 changed files in this pull request and generated 1 comment.

File	Description
src/lib/wallets/connectkit.config.tsx	Added Porto import and conditional initialization
src/env.ts	Added PUBLIC_ENABLE_PORTO environment variable
package.json	Added porto dependency and updated viem/wagmi versions
.env.example	Added documentation for Porto configuration option

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

Pull Request Overview

Copilot reviewed 4 out of 6 changed files in this pull request and generated 1 comment.

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

The Porto initialization is executed at module level outside of any component or function. This could cause side effects during module loading and makes the code harder to test. Consider moving this initialization inside a function or React hook where it can be properly controlled and tested.

[hpmaxi]

All looks legit, but there's a tiny thing that you may have missed.

In lib/wallets there are other config files, user can choose one or another to handle the conectivity.

Can you add Porto support to those as well?

For web3modal, it seems like deprecated. I should do it in another PR
https://docs.reown.com/appkit/upgrade/to-reown-appkit-web

And about RainbowKit, after installing the package, It seems like something is wrong and I don't get any wallet popup instead an scroll to the bottom with some of the connectors. Maybe it requires an specific version.

To change wallets, I had to:

• Remove comments
• Install any missing dependency @rainbow-me/rainbowkit
• Change imports in src/providers/Web3Provider.tsx and src/lib/wagmi/plugins/reactSuspenseRead.ts
• pnpm postinstall, to update hooks

But I've moved the porto initialization code to another file, so the other wallets can just import that file, and hopefully get porto injected.

[InakyMaister]

Been tinkering a bit with this, and the connection works great.

As a side comment, I went ahead and tried some other things while connected with Porto.

I reckon there's some error communication issues when attempting to execute actions without sufficient balance and/or gas, but I guess that's mainly due to Porto's shortcomings rather than dAppBooster's.

Here I would have expected an "Insufficient balance" or "Not enough gas" message.

[hpmaxi]

For web3modal, it seems like deprecated. I should do it in another PR https://docs.reown.com/appkit/upgrade/to-reown-appkit-web

And about RainbowKit, after installing the package, It seems like something is wrong and I don't get any wallet popup instead an scroll to the bottom with some of the connectors. Maybe it requires an specific version.

To change wallets, I had to:

• Remove comments
• Install any missing dependency @rainbow-me/rainbowkit
• Change imports in src/providers/Web3Provider.tsx and src/lib/wagmi/plugins/reactSuspenseRead.ts
• pnpm postinstall, to update hooks

• I migrated from Web3Modal to Reown in this PR. Everything seems to be working fine, although the button/label looks a bit different.
• RainbowKit currently has some styling issues and isn’t working properly.
• I’ve kept ConnectKit as the default wallet to avoid introducing breaking changes.
• We should probably finish the manual-installation setup docs for wallet integrations or find a way to make it simpler — or maybe even deprecate the use of other wallets altogether. Not sure yet.