-
-
Save perjerz/70847f2376ec064240a69d96a57d9d7c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang=en> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ethers.umd.min.js" defer></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@metamask/[email protected]/dist/detect-provider.min.js" defer></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script> | |
| <script> | |
| window.abi = { | |
| 'IERC20': [ | |
| { | |
| "anonymous": false, | |
| "inputs": [ | |
| { | |
| "indexed": true, | |
| "internalType": "address", | |
| "name": "owner", | |
| "type": "address" | |
| }, | |
| { | |
| "indexed": true, | |
| "internalType": "address", | |
| "name": "spender", | |
| "type": "address" | |
| }, | |
| { | |
| "indexed": false, | |
| "internalType": "uint256", | |
| "name": "value", | |
| "type": "uint256" | |
| } | |
| ], | |
| "name": "Approval", | |
| "type": "event" | |
| }, | |
| { | |
| "anonymous": false, | |
| "inputs": [ | |
| { | |
| "indexed": true, | |
| "internalType": "address", | |
| "name": "from", | |
| "type": "address" | |
| }, | |
| { | |
| "indexed": true, | |
| "internalType": "address", | |
| "name": "to", | |
| "type": "address" | |
| }, | |
| { | |
| "indexed": false, | |
| "internalType": "uint256", | |
| "name": "value", | |
| "type": "uint256" | |
| } | |
| ], | |
| "name": "Transfer", | |
| "type": "event" | |
| }, | |
| { | |
| "inputs": [ | |
| { | |
| "internalType": "address", | |
| "name": "owner", | |
| "type": "address" | |
| }, | |
| { | |
| "internalType": "address", | |
| "name": "spender", | |
| "type": "address" | |
| } | |
| ], | |
| "name": "allowance", | |
| "outputs": [ | |
| { | |
| "internalType": "uint256", | |
| "name": "", | |
| "type": "uint256" | |
| } | |
| ], | |
| "stateMutability": "view", | |
| "type": "function" | |
| }, | |
| { | |
| "inputs": [ | |
| { | |
| "internalType": "address", | |
| "name": "spender", | |
| "type": "address" | |
| }, | |
| { | |
| "internalType": "uint256", | |
| "name": "amount", | |
| "type": "uint256" | |
| } | |
| ], | |
| "name": "approve", | |
| "outputs": [ | |
| { | |
| "internalType": "bool", | |
| "name": "", | |
| "type": "bool" | |
| } | |
| ], | |
| "stateMutability": "nonpayable", | |
| "type": "function" | |
| }, | |
| { | |
| "inputs": [ | |
| { | |
| "internalType": "address", | |
| "name": "account", | |
| "type": "address" | |
| } | |
| ], | |
| "name": "balanceOf", | |
| "outputs": [ | |
| { | |
| "internalType": "uint256", | |
| "name": "", | |
| "type": "uint256" | |
| } | |
| ], | |
| "stateMutability": "view", | |
| "type": "function" | |
| }, | |
| { | |
| "inputs": [], | |
| "name": "totalSupply", | |
| "outputs": [ | |
| { | |
| "internalType": "uint256", | |
| "name": "", | |
| "type": "uint256" | |
| } | |
| ], | |
| "stateMutability": "view", | |
| "type": "function" | |
| }, | |
| { | |
| "inputs": [ | |
| { | |
| "internalType": "address", | |
| "name": "recipient", | |
| "type": "address" | |
| }, | |
| { | |
| "internalType": "uint256", | |
| "name": "amount", | |
| "type": "uint256" | |
| } | |
| ], | |
| "name": "transfer", | |
| "outputs": [ | |
| { | |
| "internalType": "bool", | |
| "name": "", | |
| "type": "bool" | |
| } | |
| ], | |
| "stateMutability": "nonpayable", | |
| "type": "function" | |
| }, | |
| { | |
| "inputs": [ | |
| { | |
| "internalType": "address", | |
| "name": "sender", | |
| "type": "address" | |
| }, | |
| { | |
| "internalType": "address", | |
| "name": "recipient", | |
| "type": "address" | |
| }, | |
| { | |
| "internalType": "uint256", | |
| "name": "amount", | |
| "type": "uint256" | |
| } | |
| ], | |
| "name": "transferFrom", | |
| "outputs": [ | |
| { | |
| "internalType": "bool", | |
| "name": "", | |
| "type": "bool" | |
| } | |
| ], | |
| "stateMutability": "nonpayable", | |
| "type": "function" | |
| } | |
| ], | |
| BankERC20: [ | |
| { | |
| "inputs": [ | |
| { | |
| "internalType": "contract IERC20", | |
| "name": "_token", | |
| "type": "address" | |
| } | |
| ], | |
| "stateMutability": "nonpayable", | |
| "type": "constructor" | |
| }, | |
| { | |
| "anonymous": false, | |
| "inputs": [ | |
| { | |
| "indexed": true, | |
| "internalType": "address", | |
| "name": "sender", | |
| "type": "address" | |
| }, | |
| { | |
| "indexed": false, | |
| "internalType": "uint256", | |
| "name": "amount", | |
| "type": "uint256" | |
| } | |
| ], | |
| "name": "Deposit", | |
| "type": "event" | |
| }, | |
| { | |
| "anonymous": false, | |
| "inputs": [ | |
| { | |
| "indexed": true, | |
| "internalType": "address", | |
| "name": "sender", | |
| "type": "address" | |
| }, | |
| { | |
| "indexed": false, | |
| "internalType": "uint256", | |
| "name": "amount", | |
| "type": "uint256" | |
| } | |
| ], | |
| "name": "Withdraw", | |
| "type": "event" | |
| }, | |
| { | |
| "inputs": [ | |
| { | |
| "internalType": "address", | |
| "name": "", | |
| "type": "address" | |
| } | |
| ], | |
| "name": "balance", | |
| "outputs": [ | |
| { | |
| "internalType": "uint256", | |
| "name": "", | |
| "type": "uint256" | |
| } | |
| ], | |
| "stateMutability": "view", | |
| "type": "function" | |
| }, | |
| { | |
| "inputs": [ | |
| { | |
| "internalType": "uint256", | |
| "name": "amount", | |
| "type": "uint256" | |
| } | |
| ], | |
| "name": "deposit", | |
| "outputs": [], | |
| "stateMutability": "nonpayable", | |
| "type": "function" | |
| }, | |
| { | |
| "inputs": [], | |
| "name": "token", | |
| "outputs": [ | |
| { | |
| "internalType": "contract IERC20", | |
| "name": "", | |
| "type": "address" | |
| } | |
| ], | |
| "stateMutability": "view", | |
| "type": "function" | |
| }, | |
| { | |
| "inputs": [ | |
| { | |
| "internalType": "uint256", | |
| "name": "amount", | |
| "type": "uint256" | |
| } | |
| ], | |
| "name": "withdraw", | |
| "outputs": [], | |
| "stateMutability": "nonpayable", | |
| "type": "function" | |
| } | |
| ] | |
| } | |
| </script> | |
| <div x-data="{ | |
| isConnected: false, | |
| ethereum: null, | |
| account: '', | |
| bankAddress: '0x3E9f75F15A277ff0ea8c2DFdbfCc122ed16e669A', | |
| tokenAddress: '0xa9bcB45E794C7dEb3D2D18eb83EC5f060c835BE4', | |
| amount: '', | |
| balance: ethers.BigNumber.from(0), | |
| depositedBalance: ethers.BigNumber.from(0), | |
| isApproved: false, | |
| async init () { | |
| this.ethereum = await detectEthereumProvider() | |
| window.provider = new ethers.providers.Web3Provider(this.ethereum) | |
| // window.provider = new ethers.providers.JsonRpcProvider('https://rei-testnet-rpc.moonrhythm.io') | |
| const detectAccount = async () => { | |
| const accounts = await ethereum.request({ method: 'eth_accounts' }) | |
| this.account = accounts[0] | |
| this.isConnected = true | |
| this.reloadApprove() | |
| this.reloadBalance() | |
| this.reloadDepositedBalance() | |
| } | |
| detectAccount() | |
| this.ethereum.on('accountChanged', async () => { | |
| detectAccount() | |
| }) | |
| }, | |
| async connect () { | |
| await this.ethereum.request({ method: 'eth_requestAccounts' }) | |
| }, | |
| async reloadApprove () { | |
| const c = new ethers.Contract(this.tokenAddress, abi.IERC20, window.provider) | |
| const allowance = await c.allowance(this.account, this.bankAddress) | |
| this.isApproved = !allowance.isZero() | |
| }, | |
| async reloadBalance () { | |
| const c = new ethers.Contract(this.tokenAddress, abi.IERC20, window.provider) | |
| this.balance = await c.balanceOf(this.account) | |
| }, | |
| async reloadDepositedBalance () { | |
| const c = new ethers.Contract(this.bankAddress, abi.BankERC20, window.provider) | |
| this.depositedBalance = await c.balance(this.account) | |
| }, | |
| getSigner () { | |
| return window.provider.getSigner() | |
| // return (new ethers.providers.Web3Provider(this.ethereum)).getSigner() | |
| }, | |
| async deposit () { | |
| const c = new ethers.Contract(this.bankAddress, abi.BankERC20, window.provider) | |
| const amount = ethers.utils.parseEther(this.amount) | |
| const tx = await c.connect(this.getSigner()).deposit(amount) | |
| await tx.wait() | |
| this.reloadBalance() | |
| this.reloadDepositedBalance() | |
| }, | |
| async withdraw () { | |
| const c = new ethers.Contract(this.bankAddress, abi.BankERC20, window.provider) | |
| const amount = ethers.utils.parseEther(this.amount) | |
| const tx = await c.connect(this.getSigner()).withdraw(amount) | |
| await tx.wait() | |
| this.reloadBalance() | |
| this.reloadDepositedBalance() | |
| } | |
| }"> | |
| <button x-show="!isConnected" @click=connect>Connect</button> | |
| <p>Account: <span x-text=account></span></p> | |
| <p>Balance: <span x-text="ethers.utils.formatEther(balance)"></span></p> | |
| <input x-model=amount> | |
| <button @click=approve x-show="!isApproved">Approve</button> | |
| <button @click=deposit x-show="isApproved">Deposit</button> | |
| <button @click=withdraw>Withdraw</button> | |
| <p>Deposited Balance: <span x-text="ethers.utils.formatEther(depositedBalance)"></span></p> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment