I'll create an .env.local file for your project with the necessary environment variables. This file will contain placeholder values that you should replace with your actual values.

I've created the .env.local file with placeholder values for the required environment variables. Here's what you need to do:

1. Replace your_wallet_connect_project_id_here with your actual WalletConnect Project ID. You can obtain this by creating a project on the WalletConnect Cloud dashboard (https://cloud.walletconnect.com/).
2. Replace the placeholder addresses for NEXT_PUBLIC_PRESALE_ADDRESS_MAINNET and NEXT_PUBLIC_PRESALE_ADDRESS_TESTNET with your actual deployed presale contract addresses on the BSC mainnet and testnet, respectively.

Remember to never commit this file to version control, as it contains sensitive information. It's already included in the .gitignore file by default in Next.js projects, but it's good to double-check.

To use these environment variables in your Next.js application, you can access them like this:

Make sure to restart your development server after adding or changing environment variables for the changes to take effect.

I'll create a Solidity smart contract for the presale that will work and interact with the React frontend we've developed. This contract will include the functionality for buying tokens with BNB, USDT, and USDC, as well as referral and claiming features.

Here's the Solidity contract for the presale:

This Solidity contract implements the presale functionality that interacts with our React frontend. Here's a breakdown of the main features:

1. The contract allows purchasing tokens with BNB, USDT, and USDC.
2. It implements a referral system where referrers can earn a percentage of the purchase amount.
3. Users can claim their purchased tokens once the owner allows claiming.
4. Referrers can claim their referral earnings.
5. The contract includes various view functions to get presale information.
6. Owner-only functions are available for managing the presale, such as setting claiming status and withdrawing funds.

To use this contract:

1. Deploy it with the necessary parameters (token address, USDT address, USDC address, token price, tokens for sale, presale duration, min purchase, max purchase, and referral percentage).
2. Ensure that the token contract has approved this presale contract to spend the required number of tokens.
3. For USDT and USDC purchases, users need to approve the presale contract to spend their tokens before calling the buy functions.

You may need to adjust the contract address in your React frontend to match the deployed address of this contract. Also, ensure that the ABI in your frontend matches this contract's functions.

Let's update the ABI in the PresaleCard component to match our new contract:

Now, let's add approval functions for USDT and USDC in the PresaleCard component:

These changes update the PresaleCard component to work with the new Solidity contract. The component now includes approval functions for USDT and USDC, which are called before attempting to buy tokens with these currencies. This ensures that the presale contract has the necessary allowance to spend the user's USDT or USDC tokens.

To complete the integration, we should also update the display of purchased tokens and add a function to check the allowance before attempting to buy. Let's make these final adjustments to the PresaleCard component:

These final adjustments complete the integration of the new Solidity contract with the React frontend. The PresaleCard component now:

1. Displays the user's purchased tokens
2. Checks for and handles token approvals for USDT and USDC
3. Uses the correct decimals for each token type (18 for USDT, 6 for USDC)
4. Provides a more robust buying process that ensures proper allowances before attempting to purchase tokens

With these changes, your presale dApp should now be fully functional and ready for deployment. Remember to update the contract addresses in your .env file after deploying the new Solidity contract to the desired network(s).