// TO-DO // hookup to paymster, show transactionr ecipet // show balance of USDC of connected wallet // put usdc address on ZKSync // check connect address instead of deposit // configure dropw down reciever // show the on chain mimum balance amount // add zk account if (state.chainId !== undefined && state.chainId !== 280) { return <p>Switch to ZKSync Testnet</p>; } // not sure if this is working // https://era.zksync.io/docs/dev/building-on-zksync/useful-address.html State.init({ reciever: "0xDoodoo", }); // write now state reciever is in clipboard // need to have the search result updated and selected in state // Charity helper functions function loadCharities() { const res = fetch( "https://raw.githubusercontent.com/codingshot/donatedao-landing/main/data/charityList.json" ); return res.body && JSON.parse(res.body); } const charityList = loadCharities(); if (!charityList) { return "⧗ Loading Charities..."; } const PAYMASTER_ADDRESS = "0xaB23B553781757a8ebdFb11A9231825ff4EE4118"; const TOKEN_ADDRESS = "0x5DBAFaccAADa3E16213de291fA5e39c1996093D5"; // on zk sync testnet const { action, amount, USDCbalance } = state; const { assets } = deposit; // need to get USDC balance form on CHain const getUSDCBalance = () => { // add to query USDC balance on chain for ZK Testnet account, this is how we will set max State.update({ USDCbalance: USDCbalance }); // not all the way correct }; const actionTitle = isDeposit ? "Donate" : "Withdraw"; const donate = () => { // add payment to charity logic here }; const handleMax = () => { State.update({ amount: USDCbalance }); }; // how to get max of selectedasset const handleAmountChange = (e) => { State.update({ amount: e.target.value }); }; const handleRecieverChange = (e) => { State.update({ reciever: e.target.value }); }; // const handleCharityChange = (e) => { // State.update({ // reciever: charityList?.find((a) => a.address === e.target.value), // }); // }; // need to change this around // Assuming you have a state variable called `state` which contains the `receiver` property const handleCharityChange = (e) => { // Find the charity object with the selected title const selectedCharity = charityList.find( (charity) => charity.title === e.target.value ); if (selectedCharity) { // Update the `receiver` state to the associated address State.update({ reciever: selectedCharity.address, }); } }; const Container = styled.div` max-width: 90%; width: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; border: 1px solid gray; padding-top: 1rem; border-radius: 0.5rem; margin-top: 1rem; * { font-family: 'Inter custom',sans-serif; } background: white; color: black; .title { margin-top: 8px; } .actionTabs { border: 1px solid black; height: 38px; input:checked + label { color: black; } label { color: gray; background: white !important; border: 1px solid black !important; height: 38px; &:hover { color: black; } } } button.max { border: 1px solid black; } button.action { background-color: black; } .action { background: black; color: white; } .balance { input { height: 38px; background: #f5f6fd; color: black; border: 1px solid black; } } .assets { select { background: #f5f6fd; color: black; } } `; const sender = Ethers.send("eth_requestAccounts", [])[0]; const erc20Abi = fetch( "https://gist.githubusercontent.com/veox/8800debbf56e24718f9f483e1e40c35c/raw/f853187315486225002ba56e5283c1dba0556e6f/erc20.abi.json" ); const usdcZKtestnet = "0x3355df6D4c9C3035724Fd0e3914dE96A5a83aaf4"; const paymasterZKtestnet = ""; if (!state.theme) { State.update({ theme: styled.div` ${css} `, }); } const Theme = state.theme; const paymasterContract = ""; const tokenDecimals = 18; // double check on contract // FETCH Paymaster ABI // see if API3 can be fetched here const paymasterABI = fetch( "https://raw.githubusercontent.com/codingshot/zksync-paymaster/main/paymaster-abi.json" ); if (!paymasterABI.ok) { return "Loading"; } // add conditional for charity // this should be emitted as an error from the smart contract return ( <Theme> <Container> <div className="d-flex gap-4 align-items-center mb-3 justify-content-center"> <h1 className="title">🙏 DonateDAO</h1> </div> <div className="border border-secondary border-bottom-0 border-light" /> <div className="p-2"> <div className="d-flex justify-content-between"> <span> {" "} USDC Balance: {USDCbalance} </span> </div> <div className="balance input-group"> <input style={{ maxWidth: "100%" }} type="number" min="0" step="0.1" defaultValue={props.amount} value={amount} placeholder="0.00" onChange={handleAmountChange} /> <button className="btn btn-light btn-sm max" onClick={handleMax}> max </button> </div> <label>Charity Address</label> <div className="charities"> <select className="form-select" aria-label="select asset" onChange={handleCharityChange(e)} > {charityList && charityList.map((charity) => ( <option value={charity.title} selected={charity.selected}> {charity.title} </option> ))} // add reciever logic here </select> </div> <div className="balance input-group"> <input style={{ maxWidth: "100%" }} type="string" defaultValue={props.amount} value={reciever} placeholder={state.reciever} onChange={handleRecieverChange} /> </div> </div> <div className="border border-secondary border-bottom-0 border-light" /> <div className="border border-secondary border-bottom-0 border-light" /> {!!state.sender ? ( <div className="p-4 d-grid gap-3"> <button className="action btn btn-primary" onClick={donate} disabled={isLoading} > {isLoading ? "Loading..." : actionTitle} </button> {log && ( <div className="alert alert-success" role="alert"> <div className="text-truncate" style={{ maxWidth: 300 }}> {log} </div> <a href={explorerLink} className="alert-link" target="_blank"> Etherscan </a> </div> )} </div> ) : ( <div className="row"> <Web3Connect className="btn btn-secondary col-6" connectLabel="Connect To ZkSync" /> <button className=" btn btn-primary col-6" onClick={donate} disabled={isLoading} > {chainId != 280 ? "Connect to Donate" : "Donate"} </button> </div> )} </Container> <div> <h1>Debug</h1> <p>Input USDC Amount: {state.amount}</p> <p>Input Reciever Address: {state.reciever}</p> </div> </Theme> );