mirror of
https://github.com/getwax/bls-wallet-website.git
synced 2026-01-09 15:18:10 -05:00
Add constants file so we can remove some of the comments
This commit is contained in:
Blake Duncan
1
.gitignore
vendored
1
.gitignore
vendored
@@ -18,6 +18,7 @@
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
.idea
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
|
||||
38
constants.js
Normal file
38
constants.js
Normal file
@@ -0,0 +1,38 @@
|
||||
export const NETWORKS = {
|
||||
arbitrumGoerli: {
|
||||
chainID: '0x66EED',
|
||||
name: 'Arbitrum Goerli',
|
||||
rpcUrl: 'https://goerli-rollup.arbitrum.io/rpc',
|
||||
aggregatorUrl: 'https://arbitrum-goerli.blswallet.org',
|
||||
verificationGateway: '0xAf96d6e0817Ff8658f0E2a39b641920fA7fF0957',
|
||||
},
|
||||
arbitrumRinkeby: {
|
||||
chainId: '421611',
|
||||
name: 'Arbitrum Rinkeby',
|
||||
rpcUrl: 'https://rinkeby.arbitrum.io/rpc',
|
||||
aggregatorUrl: 'https://arbitrum-testnet.blswallet.org',
|
||||
verificationGateway: '0x697B3E6258B08201d316b31D69805B5F666b62C8',
|
||||
},
|
||||
// For local dev make sure these values match your environment
|
||||
local: {
|
||||
chainId: '31337',
|
||||
name: 'Local hardhat node',
|
||||
rpcUrl: 'http://localhost:8545',
|
||||
aggregatorUrl: 'http://localhost:4000/',
|
||||
verificationGateway: '0x81Ea02723aA4097C39A79545f851490aEe4B09C8',
|
||||
},
|
||||
}
|
||||
|
||||
export const ERC20_ADDRESS = {
|
||||
arbitrumGoerli: '0x56377a667C6370154d43aFc937998C750f0ca9bd',
|
||||
arbitrumRinkeby: '0x6030c15cD584574A5C694984678D50e5E9Aee1b6',
|
||||
// For local dev make sure this value matches your environment
|
||||
local: '',
|
||||
}
|
||||
|
||||
export const SPENDER_CONTRACT_ADDRESS = {
|
||||
arbitrumGoerli: '0x95B02CcF67ceacaBbc33927a5d7607Df590c81F6',
|
||||
arbitrumRinkeby: '0xBeC869B56cF9835E26f16f7E29E1e4Ba324634b8',
|
||||
// For local dev make sure this value matches your environment
|
||||
local: '',
|
||||
}
|
||||
112
pages/demo.js
112
pages/demo.js
@@ -7,84 +7,37 @@ import { Aggregator, BlsWalletWrapper } from 'bls-wallet-clients'
|
||||
import Fade from 'react-reveal'
|
||||
import Swal from 'sweetalert2'
|
||||
|
||||
import { NETWORKS, ERC20_ADDRESS, SPENDER_CONTRACT_ADDRESS } from '../constants';
|
||||
|
||||
export default function Demo() {
|
||||
// For Goerli development
|
||||
const [network, setNetwork] = useState({
|
||||
chainID: '0x66EED',
|
||||
name: 'Arbitrum Goerli',
|
||||
rpcUrl: 'https://goerli-rollup.arbitrum.io/rpc',
|
||||
aggregatorUrl: 'https://arbitrum-goerli.blswallet.org',
|
||||
verificationGateway: '0xAf96d6e0817Ff8658f0E2a39b641920fA7fF0957',
|
||||
})
|
||||
|
||||
// For Arbitrum Rinkeby development
|
||||
// const [network, setNetwork] = useState({
|
||||
// chainId: '421611',
|
||||
// name: 'Arbitrum Rinkeby',
|
||||
// rpcUrl: 'https://rinkeby.arbitrum.io/rpc',
|
||||
// aggregatorUrl: 'https://arbitrum-testnet.blswallet.org',
|
||||
// verificationGateway: '0x697B3E6258B08201d316b31D69805B5F666b62C8',
|
||||
// })
|
||||
|
||||
// For local development
|
||||
// const [network, setNetwork] = useState({
|
||||
// chainId: '31337',
|
||||
// name: 'Local hardhat node',
|
||||
// rpcUrl: 'http://localhost:8545',
|
||||
// aggregatorUrl: 'http://localhost:4000/',
|
||||
// verificationGateway: '0x81Ea02723aA4097C39A79545f851490aEe4B09C8',
|
||||
// })
|
||||
|
||||
// Connect to the BLS Aggregator for your network
|
||||
const [aggregator, setAggregator] = useState(
|
||||
new Aggregator(network.aggregatorUrl),
|
||||
)
|
||||
// Initiate the provider
|
||||
const [provider, setProvider] = useState(
|
||||
new ethers.providers.JsonRpcProvider(network.rpcUrl),
|
||||
)
|
||||
// Create a private key by fetching it from local storage or generating and persisting a new private key
|
||||
const [privateKey, setPrivateKey] = useState(
|
||||
// Create a private key
|
||||
const [privateKey] = useState(
|
||||
ethers.Wallet.createRandom().privateKey,
|
||||
)
|
||||
const [wallet, setWallet] = useState(false)
|
||||
const [balance, setBalance] = useState('0.0')
|
||||
const [balanceChanging, setBalanceChanging] = useState(true)
|
||||
const [firstMint, setFirstMint] = useState(false)
|
||||
|
||||
// Default network is Goerli
|
||||
const network = NETWORKS.arbitrumGoerli;
|
||||
const erc20Address = ERC20_ADDRESS.arbitrumGoerli;
|
||||
|
||||
// Initiate the provider
|
||||
const provider = new ethers.providers.JsonRpcProvider(network.rpcUrl);
|
||||
|
||||
// Connect to the token contract that Kautuk deployed and store it in state
|
||||
|
||||
// For remote goerli development
|
||||
const erc20Address = '0x56377a667C6370154d43aFc937998C750f0ca9bd'
|
||||
// For remote rinkeby development
|
||||
// const erc20Address = '0x6030c15cD584574A5C694984678D50e5E9Aee1b6'
|
||||
// For local development
|
||||
// const erc20Address = '0x5FC8d32690cc91D4c39d9d3abcBD16989F875707'
|
||||
|
||||
const erc20Abi = [
|
||||
'function mint(address _account, uint256 _amount)',
|
||||
'function balanceOf(address) view returns (uint)',
|
||||
'function approve(address _account, uint256 _amount)',
|
||||
]
|
||||
const [erc20, setErc20] = useState(
|
||||
new ethers.Contract(erc20Address, erc20Abi, provider),
|
||||
)
|
||||
const erc20 = new ethers.Contract(erc20Address, erc20Abi, provider);
|
||||
|
||||
const [wallet, setWallet] = useState(false)
|
||||
const [balance, setBalance] = useState(0)
|
||||
const [balanceChanging, setBalanceChanging] = useState(true)
|
||||
const [firstMint, setFirstMint] = useState(false)
|
||||
|
||||
// Connect to the spending contract that Kautuk deployed
|
||||
|
||||
// For remote goerli development
|
||||
const spenderContractAddress = '0x95B02CcF67ceacaBbc33927a5d7607Df590c81F6'
|
||||
// For remote development on Arbitrum Rinkeby
|
||||
// const spenderContractAddress = '0xBeC869B56cF9835E26f16f7E29E1e4Ba324634b8'
|
||||
// For local development [YET TO DEPLOY LOCAL CONTRACTS]
|
||||
// const spenderContractAddress = ''
|
||||
const spenderContractAbi = [
|
||||
'function pullTokens(address _account,uint256 _amount)',
|
||||
]
|
||||
const [spenderContract, setSpenderContract] = useState(
|
||||
new ethers.Contract(spenderContractAddress, spenderContractAbi, provider),
|
||||
)
|
||||
const spenderContract = new ethers.Contract(SPENDER_CONTRACT_ADDRESS.arbitrumGoerli, spenderContractAbi, provider);
|
||||
|
||||
// We want to generate the wallet only once so we do so within a useEffect() hook, without any dependencies so it doesn't re-run
|
||||
useEffect(() => {
|
||||
@@ -96,13 +49,21 @@ export default function Demo() {
|
||||
provider,
|
||||
)
|
||||
setWallet(generatedWallet)
|
||||
mint(generatedWallet)
|
||||
}
|
||||
intialiseWallet()
|
||||
// Call the token contract to mint some tokens
|
||||
}, [])
|
||||
|
||||
const pollBalance = async (wallet) => {
|
||||
useEffect(() => {
|
||||
if (wallet) {
|
||||
mint()
|
||||
}
|
||||
}, [wallet])
|
||||
|
||||
const pollBalance = async () => {
|
||||
if (!wallet) {
|
||||
return null;
|
||||
}
|
||||
const originalBalance = balance
|
||||
const interval = setInterval(async function () {
|
||||
console.log('polling...')
|
||||
@@ -111,7 +72,7 @@ export default function Demo() {
|
||||
await erc20.balanceOf(wallet.address),
|
||||
)
|
||||
console.log(`polled balance is ${fetchedBalance}`)
|
||||
if (fetchedBalance != originalBalance) {
|
||||
if (fetchedBalance !== originalBalance) {
|
||||
console.log('balance updated.')
|
||||
setBalance(fetchedBalance)
|
||||
setBalanceChanging(false)
|
||||
@@ -136,30 +97,31 @@ export default function Demo() {
|
||||
}, 100000)
|
||||
}
|
||||
|
||||
const mint = async (generatedWallet) => {
|
||||
const mint = async () => {
|
||||
console.log('minting...')
|
||||
setBalanceChanging(true)
|
||||
const nonce = await BlsWalletWrapper.Nonce(
|
||||
generatedWallet.PublicKey(),
|
||||
wallet.PublicKey(),
|
||||
network.verificationGateway,
|
||||
provider,
|
||||
)
|
||||
const bundle = generatedWallet.sign({
|
||||
const bundle = wallet.sign({
|
||||
nonce: nonce,
|
||||
actions: [
|
||||
{
|
||||
ethValue: 0,
|
||||
contractAddress: erc20.address,
|
||||
encodedFunction: erc20.interface.encodeFunctionData('mint', [
|
||||
generatedWallet.address,
|
||||
wallet.address,
|
||||
ethers.BigNumber.from(10).pow(20),
|
||||
]),
|
||||
},
|
||||
],
|
||||
})
|
||||
const aggregator = new Aggregator(network.aggregatorUrl);
|
||||
console.log(await aggregator.add(bundle))
|
||||
console.log('mint tx submitted')
|
||||
pollBalance(generatedWallet)
|
||||
pollBalance()
|
||||
}
|
||||
|
||||
// On a frontend event, create a transaction
|
||||
@@ -196,11 +158,13 @@ export default function Demo() {
|
||||
console.log('bundle is:')
|
||||
console.log(bundle)
|
||||
console.log('logging aggregator')
|
||||
const aggregator = new Aggregator(network.aggregatorUrl);
|
||||
console.log(await aggregator.add(bundle))
|
||||
console.log('approval / pull txs submitted')
|
||||
// Store transfer success / failure in state to be represented in the frontend
|
||||
pollBalance(wallet)
|
||||
pollBalance()
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
@@ -299,7 +263,7 @@ export default function Demo() {
|
||||
<div
|
||||
className={styles.demoButton}
|
||||
onClick={() => {
|
||||
balanceChanging
|
||||
return balanceChanging
|
||||
? null
|
||||
: Swal.fire({
|
||||
html: `<div style="text-align: left"><span style="font-size: 12px">Arbitrum testnet</span><h2>BLS Wallet</h2><h3>APPROVE $TOKEN TRANSFER</h3><p><strong>From: </strong>${wallet.address}</p><p><strong>To: </strong>${spenderContract.address}</p><p><strong>Info: </strong><a href="https://blswallet.org/">https://blswallet.org/</a></p><p><strong>Estimated gas fee: </strong>$O <span style="opacity: 1; display: inline; border-radius: 2px; background-color: #bcffbc; border: solid 1px #a5e1a5;font-size: 12px;padding: 2px 4px">dApp sponsored</span></p></div>`,
|
||||
|
||||
Reference in New Issue
Block a user