faucet for erc20s

packages/bridge-ui/src/components/ERC20Faucet.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { ethers } from "ethers";
+  import { HORSE } from "../domain/token";
+  import { pendingTransactions } from "../store/transactions";
+  import { signer } from "../store/signer";
+  import { errorToast, successToast } from "../utils/toast";
+  import { _ } from "svelte-i18n";
+  import { Funnel } from "svelte-heros-v2";
+  import MintableERC20 from "../constants/abi/MintableERC20";
+  import { fromChain } from "../store/chain";
+  import { switchNetwork } from "@wagmi/core";
+  import { CHAIN_MAINNET } from "../domain/chain";
+  import Tooltip from "./Tooltip.svelte";
+  import TooltipModal from "./modals/TooltipModal.svelte";
+  import { token } from "../store/token";
+
+  export let onMint: () => Promise<void>;
+
+  let tooltipOpen: boolean = false;
+
+  async function mint() {
+    try {
+      if ($fromChain.id !== HORSE.addresses[0].chainId) {
+        await switchNetwork({
+          chainId: CHAIN_MAINNET.id,
+        });
+      }
+      const contract = new ethers.Contract(
+        HORSE.addresses[0].address,
+        MintableERC20,
+        $signer
+      );
+
+      const tx = await contract.mint(ethers.utils.parseEther("1000"));
+      pendingTransactions.update((store) => {
+        store.push(tx);
+        return store;
+      });
+
+      successToast($_("toast.transactionSent"));
+      await $signer.provider.waitForTransaction(tx.hash, 1);
+
+      await onMint();
+    } catch (e) {
+      console.log(e);
+      errorToast($_("toast.errorSendingTransaction"));
+    }
+  }
+</script>
+
+<button class="btn" on:click={mint}>
+  <Funnel class="mr-2" /> Faucet
+</button>
+<Tooltip />
+
+<TooltipModal title="{$token.symbol} Faucet" bind:isOpen={tooltipOpen}>
+  <span slot="body">
+    <p class="text-left">
+      You can request 1000 {$token.symbol}. {$token.symbol} is only available to
+      be minted on Ethereum A1. If you are on Taiko A1, your network will be changed
+      first. You must have a small amount of ether in your Ethereum A1 wallet to
+      send the transaction.
+    </p>
+  </span>
+</TooltipModal>

packages/bridge-ui/src/components/form/BridgeForm.svelte

@@ -34,7 +34,7 @@
   import TokenVault from "../../constants/abi/TokenVault";
   import type { BridgeTransaction } from "../../domain/transactions";
   import { MessageStatus } from "../../domain/message";
-  import { getContractAddress } from "ethers/lib/utils.js";
+  import Erc20Faucet from "../ERC20Faucet.svelte";
 
   let amount: string;
   let requiresAllowance: boolean = true;
@@ -262,6 +262,7 @@
 <div class="form-control my-4 md:my-8">
   <label class="label" for="amount">
     <span class="label-text">{$_("bridgeForm.fieldLabel")}</span>
+
     {#if $signer && tokenBalance}
       <button class="label-text" on:click={useFullAmount}
         >{$_("bridgeForm.maxLabel")}
@@ -271,6 +272,7 @@
         {$token.symbol}
       </button>{/if}
   </label>
+
   <label
     class="input-group relative rounded-lg bg-dark-4 justify-between items-center pr-4"
   >
@@ -286,6 +288,16 @@
   </label>
 </div>
 
+{#if $token.symbol === "HORSE" && $signer && tokenBalance && ethers.utils
+    .parseUnits(tokenBalance, $token.decimals)
+    .eq(BigNumber.from(0))}
+  <div class="flex" style="flex-direction:row-reverse">
+    <Erc20Faucet
+      onMint={async () => await getUserBalance($signer, $token, $fromChain)}
+    />
+  </div>
+{/if}
+
 <ProcessingFee bind:customFee bind:recommendedFee />
 
 <Memo bind:memo />

packages/bridge-ui/src/constants/abi/MintableERC20.ts

@@ -0,0 +1,255 @@
+export default [
+  {
+    inputs: [],
+    stateMutability: "nonpayable",
+    type: "constructor",
+  },
+  {
+    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: "",
+        type: "address",
+      },
+      {
+        internalType: "address",
+        name: "",
+        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: "",
+        type: "address",
+      },
+    ],
+    name: "balanceOf",
+    outputs: [
+      {
+        internalType: "uint256",
+        name: "",
+        type: "uint256",
+      },
+    ],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [
+      {
+        internalType: "uint256",
+        name: "amount",
+        type: "uint256",
+      },
+    ],
+    name: "burn",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [],
+    name: "decimals",
+    outputs: [
+      {
+        internalType: "uint8",
+        name: "",
+        type: "uint8",
+      },
+    ],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [
+      {
+        internalType: "uint256",
+        name: "amount",
+        type: "uint256",
+      },
+    ],
+    name: "mint",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [],
+    name: "name",
+    outputs: [
+      {
+        internalType: "string",
+        name: "",
+        type: "string",
+      },
+    ],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [],
+    name: "symbol",
+    outputs: [
+      {
+        internalType: "string",
+        name: "",
+        type: "string",
+      },
+    ],
+    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",
+  },
+];