I tried using chatgpt and any other resource I could find, here are my Walletbutton.js script, app.js, and my AppWalletProvider.. I'm using create-react-app.
//WalletButton.js
import React, { useCallback, useState } from 'react';
import { useWallet } from '@solana/wallet-adapter-react';
import { WalletMultiButton } from '@solana/wallet-adapter-react-ui';
const WalletButton = () => {
const { connected } = useWallet();
const [buttonText, setButtonText] = useState('Connect Wallet');
const handleClick = useCallback(() => {
if (connected) {
setButtonText('Buy');
// Implement the buy logic here
}
}, [connected]);
return (
<button className="MainButton" onClick={handleClick}>
{connected ? 'Buy' : 'Connect Wallet'}
</button>
);
};
export default WalletButton;```
and next,
```//AppWalletProvider.js
import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
import { clusterApiUrl } from '@solana/web3.js';
import {
PhantomWalletAdapter,
SolflareWalletAdapter,
TorusWalletAdapter,
LedgerWalletAdapter
} from '@solana/wallet-adapter-wallets';
const wallets = [
new PhantomWalletAdapter(),
new SolflareWalletAdapter(),
new TorusWalletAdapter(),
new LedgerWalletAdapter()
];
const AppWalletProvider = ({ children }) => {
return (
<ConnectionProvider endpoint={clusterApiUrl('mainnet-beta')}>
<WalletProvider wallets={wallets} autoConnect>
<WalletModalProvider>
{children}
</WalletModalProvider>
</WalletProvider>
</ConnectionProvider>
);
};
export default AppWalletProvider;
and finally the app.js
import React from 'react';
import './App.css';
import './index.css';
import { useState } from 'react';
import WalletButton from './components/WalletButton';
import { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui';
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
import { clusterApiUrl } from '@solana/web3.js';
import {
PhantomWalletAdapter,
SolflareWalletAdapter,
TorusWalletAdapter,
LedgerWalletAdapter
} from '@solana/wallet-adapter-wallets';
//import { useImmer } from 'use-immer';
//import { Progress } from 'antd';
const wallets = [
new PhantomWalletAdapter(),
new SolflareWalletAdapter(),
new TorusWalletAdapter(),
new LedgerWalletAdapter()
];
const PaymentTypes = [
{
ID: 1,
PaymentName: 'Solana',
NameBrev: 'SOL',
USDRate: 172.11,
IconImg:'./images/Solana_Icon200px.png',
IsSelected: false,
},
{
ID: 2,
PaymentName: 'United States Dollar Coin',
NameBrev: 'USDC',
USDRate: 1,
IconImg:'./images/USDC_Icon200px.png',
IsSelected: false,
},
{
ID: 3,
PaymentName: 'United States Dollar',
NameBrev: 'FIAT',
USDRate: 1,
IconImg:'./images/FIAT_Icon200px.png',
IsSelected: false,
},
];
const InputFields = [
{
id: 1,
type:'currency',
value: '',
placeholder: 'Enter amount',
},
{
id: 2,
type:'token',
value: '',
placeholder: 'Enter amount',
},
];
const presaleRate = 0.34;
export default function App() {
const [currencyVal, setCurrencyVal] = useState('');
const [tokenAmount, setTokenAmount] = useState('');
const [PaymentOptionsLi, renderList] = useState(PaymentTypes);
//const InputFArr = InputFields;
function handleSelected(id){
renderList(PaymentOptionsLi => PaymentOptionsLi.map(PaymentOption => PaymentOption.ID === id?{...PaymentOption, IsSelected: true} :{...PaymentOption, IsSelected: false}));
resetInputValues();
}
const selectedPaymentType = PaymentOptionsLi.find(option => option.IsSelected);
function handleCurrencyChange(event){
const value = parseFloat(event.target.value);
setCurrencyVal(value);
if (selectedPaymentType) {
const newTokenAmount = (value * selectedPaymentType.USDRate) / presaleRate;
setTokenAmount(newTokenAmount.toFixed(2));
}
}
function handleTokenChange(event) {
const value = parseFloat(event.target.value);
setTokenAmount(value);
if (selectedPaymentType) {
const newCurrencyVal = (value * presaleRate) / selectedPaymentType.USDRate;
setCurrencyVal(newCurrencyVal.toFixed(2));
}
}
//index through the the inputs
//used when someone selects new exchange button.
function resetInputValues(){
setCurrencyVal('');
setTokenAmount('');
}
//used when someone puts something into the input 'numbers only'
//should update both fields and the you get: displays.
let tokensOwned = 0;
return (
<ConnectionProvider endpoint={clusterApiUrl('mainnet-beta')}>
<WalletProvider wallets={wallets} autoConnect>
<WalletModalProvider>
<div className='MainPanel'>
<p className='LaunchHeader'style={{marginTop:'5px',marginBottom:'5px'}}>
🚀 Time till launch 🚀
</p>
<CountDownTimer/>
<ICOprogress/>
<h3 style={{color: 'whitesmoke', fontSize: 'medium', textAlign: 'center',
marginTop:'6px',marginBottom:'6px',fontWeight:350}}>
You Own: {tokensOwned}
</h3>
<PaymentList paymentOP = {PaymentOptionsLi} onSelected={handleSelected}/>
<div>
<h5>
</h5>
<Inputlist
inputFields={InputFields}
currencyVal={currencyVal}
tokenAmount={tokenAmount}
handleCurrencyChange={handleCurrencyChange}
handleTokenChange={handleTokenChange}
/>
</div>
<div>
<WalletButton/>
</div>
<div>
<footer style={{color: 'white',textAlign:'center',fontSize:11,fontWeight:600}}>
Wallet connected: N/A
</footer>
</div>
</div>
</WalletModalProvider>
</WalletProvider>
</ConnectionProvider>
);
}
function ICOprogress(){
let TokensSold = 0;
let TokenPool = 30000000;
const ProgressRate = (TokensSold / TokenPool) * 100;
return(
<div>
<div>
<p style= {{marginBottom: '3px', color:'#cbcbcb', fontWeight:50,fontSize:12,textAlign: 'center'}}>Tokens sold: {TokensSold} / {TokenPool}</p>
<section className = 'TokenMeter'>
<section className='TokenMeter-fill' style={{width: `${ProgressRate}%`}}></section>
</section>
</div>
</div>
)
}
function CountDownTimer(){
return(<div className='CountDown'>
90:00:00:00
</div>
)
}
function PaymentList({paymentOP,onSelected}){
//let PaymentsSel = PaymentOptionsLi;
return(
<section className={'PaymentTyeBtn'} style={{marginBottom:'-10px'}} >
{paymentOP.map((payOP) =>(
<PaymentType payOP={payOP}
onSelected={onSelected}
key = {payOP.ID}/>))}
</section>
)
}
function PaymentType({payOP,onSelected}){
//let PaymentOp = {PaymentOptionsLi};
console.log('contents of PaymentOP are,',payOP);
return(
<li style ={{display:'inline'}}>
<button className={`PaymentTyeBtn ${payOP.IsSelected ? "Enabled" : "Disabled"}`} onClick={()=> onSelected(payOP.ID)}>
<img className = 'icon' src={`${payOP.IconImg}`}style={{position:'relative',top:'5%',marginLeft:'-4px'}}>
</img>
<p style={{display:'inline',position:'relative',top:'-5%',paddingRight:'5px'}}>
{`${payOP.NameBrev}`}
</p>
</button>
</li>
)
}
function Inputlist({inputFields, currencyVal, tokenAmount,handleCurrencyChange, handleTokenChange}){
return (
<div style={{ marginTop: '5px',display:'flex', marginLeft:'11px'}}>
{inputFields.map(field => (
<InputField
key={field.id}
type={field.type}
value={field.type === 'currency' ? currencyVal : tokenAmount}
placeholder={field.placeholder}
handleChange={field.type === 'currency' ? handleCurrencyChange : handleTokenChange}
/>
))}
</div>
);
}
function InputField({type, value, placeholder,handleChange}){
return (
<div style={{display:'inline'}}>
<p>
</p>
<input
className='ICOinputField'
style={{display:'inline'}}
type='number'
value={value}
onChange={handleChange}
placeholder={placeholder}
/>
</div>
);
}
the wallet connect button doesn't work and I get this list of errors..
I keep trying to use chatgpt4o but I'm not getting anywhere!
there's even more errors than that but, all I can list in images.
I was having https://github.com/AlmostEfficient/full-stack-solana-dev/issues/3#event-12860788211 issue, did as it said but, now connect does nothing on my widget and throws these errors, this is all so complicated, if anyone here knows A LOT about solana dev and is willing to help me more hands on, please do. My discord is keolamation, same as here. I could really use some intense help atm.. I'm so behind on my project cause of this huge landslides or errors trying to implement the /anza-xyz/wallet-adapter .
