🔗

Wallet Connect Setup

Configure Reown (WalletConnect) integration for web3 wallet connections

📖 Overview

Bicrypto uses Reown (formerly WalletConnect) to enable users to connect their web3 wallets to the platform. This integration allows users to interact with blockchain features using popular wallets like MetaMask, Coinbase Wallet, Trust Wallet, and more.

What You'll Need
  • • A Reown (WalletConnect) account
  • • Access to your application's .env file
  • • Your domain information for production setup

1️⃣ Create a Reown Account

1

Visit Reown Cloud

Go to https://cloud.reown.com and sign up for a free account.

2

Create New Project

After logging in, click on "Create New Project" or "New Project" button.

3

Configure Project Settings

Fill in your project details:

  • • Project Name: Your application name (e.g., "Bicrypto")
  • • Project Type: Select "App"
  • • Homepage URL: Your domain (e.g., "https://yourdomain.com")

2️⃣ Get Your Project ID

🔑

Copy Project ID

After creating your project, you'll see a Project ID on your project dashboard. This is a unique identifier that looks like:

b56e18d47c72ab683b10814fe9495694

Copy this Project ID - you'll need it for the next step.

3️⃣ Add Project ID to Environment Variables

1

Open .env File

Navigate to your project's root directory and open the .env file.

2

Add Environment Variable

Add the following line to your .env file, replacing the value with your actual Project ID:

NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID="your_project_id_here"

Example:

NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID="b56e18d47c72ab683b10814fe9495694"
3

Save the File

Save the .env file and close it.

4️⃣ Restart Your Application

🔄

Apply Changes

For the changes to take effect, restart your frontend application:

pnpm updator:frontend

This will rebuild and restart the frontend with the new WalletConnect configuration.

🌐 Supported Networks

By default, Bicrypto supports the following networks for wallet connections:

🔷 Ethereum Mainnet

Main Ethereum network

🟣 Polygon

Layer 2 scaling solution

🔵 Arbitrum

Optimistic rollup network

🔴 Optimism

Layer 2 optimistic rollup

Note: Network configurations are defined in frontend/config/wallet.ts. You can customize the supported networks by modifying this file.

🔍 Verification

Test Wallet Connection

1

Navigate to any page with wallet connection functionality (e.g., ICO investment page)

2

Click on "Connect Wallet" button

3

The Reown modal should appear showing available wallet options

4

Connect your wallet and verify the connection is successful

🔧 Troubleshooting

Wallet Connection Not Working

Check the following:

  • • Ensure NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID is correctly set in .env
  • • Verify the Project ID is valid and active in your Reown dashboard
  • • Confirm the frontend has been restarted after adding the environment variable
  • • Check browser console for any error messages

Modal Displays Fallback Project ID Warning

If you see a fallback Project ID being used:

  • • The environment variable is not properly configured
  • • Double-check the variable name is exactly NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID
  • • Ensure the .env file is in the root directory of the project
  • • Restart the application after making changes

Network Issues

If users can't connect to specific networks:

  • • Verify the network is configured in frontend/config/wallet.ts
  • • Check if the user's wallet supports the selected network
  • • Ensure the network configuration includes correct chain IDs

🔒 Security Considerations

Best Practices
  • • Keep Project ID Secure: While the Project ID is public-facing, it's tied to your domain. Configure domain restrictions in Reown dashboard for added security.
  • • Use Environment Variables: Never hardcode the Project ID directly in your source code.
  • • Monitor Usage: Regularly check your Reown dashboard for unusual activity or usage patterns.
  • • Domain Whitelisting: In production, configure allowed domains in your Reown project settings to prevent unauthorized use.

📚 Additional Resources

Reown Official Documentation
Reown Cloud Dashboard
Bicrypto Support Center

🎯 Conclusion

Setup Complete!

You've successfully configured Reown (WalletConnect) for your Bicrypto platform. Users can now connect their web3 wallets to interact with blockchain features. Make sure to test the connection thoroughly and monitor your Reown dashboard for usage statistics and potential issues.