c10c285 Continue moving things to TypeScript — radicle-explorer

modified src/base/vesting/Vesting.svelte

@@ -2,9 +2,9 @@

   import { onMount } from 'svelte';
   import { get, derived, writable } from 'svelte/store';
   import { ethers } from 'ethers';
   import { session, shortAddress } from '@app/session.js';
   import { STATE, state } from './state.js';
   import { getInfo, withdrawVested } from './vesting.js';
   import { session, shortAddress } from '@app/session';
   import { State, state } from './state';
   import { getInfo, withdrawVested } from './vesting';
   let input;

@@ -12,20 +12,20 @@

     input.focus();
   });
   export let config = null;
   export let config;
   let contractAddress = "";
   const info = writable(null);
   async function loadContract(config) {
     state.set(STATE.LOADING);
     state.set(State.Loading);
     info.set(await getInfo(contractAddress, config));
     state.set(STATE.IDLE);
     state.set(State.Idle);
   }
   function reset() {
     $info = null;
     state.set(STATE.IDLE);
     state.set(State.Idle);
   }
   let isBeneficiary = derived([session, info], ([$s, $i]) => {

@@ -58,7 +58,7 @@

         {contractAddress}
       </div>
       <div class="modal-body">
         {#if $state === STATE.WITHDRAWN}
         {#if $state === State.Withdrawn}
           Tokens successfully withdrawn to {shortAddress($info.beneficiary)}.
         {:else}
           <table>

@@ -71,15 +71,15 @@

       </div>
       <div class="modal-actions">
         {#if $isBeneficiary}
           {#if $state === STATE.WITHDRAWING_SIGN}
           {#if $state === State.WithdrawingSign}
             <button disabled data-waiting class="primary small">
               Waiting for signature...
             </button>
           {:else if $state === STATE.WITHDRAWING}
           {:else if $state === State.Withdrawing}
             <button disabled data-waiting class="primary small">
               Withdrawing...
             </button>
           {:else if $state === STATE.IDLE}
           {:else if $state === State.Idle}
             <button on:click={() => withdrawVested(contractAddress, config)} class="primary small">
               Withdraw
             </button>

@@ -101,7 +101,7 @@

             size="40"
             placeholder=""
             class="subdomain"
             disabled={$state === STATE.LOADING}
             disabled={$state === State.Loading}
             type="text"
             bind:this={input}
             bind:value={contractAddress}

@@ -111,8 +111,8 @@

       <button
         on:click={() => loadContract(config)}
         class="primary"
         data-waiting={$state === STATE.LOADING || null}
         disabled={$state === STATE.LOADING}
         data-waiting={$state === State.Loading || null}
         disabled={$state === State.Loading}
       >
         Load
       </button>

deleted src/base/vesting/state.js

@@ -1,18 +0,0 @@

 import { derived, writable } from "svelte/store";
 export const STATE = {
   ERROR: -1,
   IDLE: 0,
   LOADING: 1,
   FOUND: 2,
   NOT_FOUND: 3,
   WITHDRAWING_SIGN: 4,
   WITHDRAWING: 5,
   WITHDRAWN: 6,
 };
 export const state = writable(STATE.IDLE);
 state.subscribe(s => {
   console.log("State", s);
 });

added src/base/vesting/state.ts

@@ -0,0 +1,18 @@

 import { derived, writable } from "svelte/store";
 export enum State {
   Error = -1,
   Idle = 0,
   Loading = 1,
   Found = 2,
   NotFound = 3,
   WithdrawingSign = 4,
   Withdrawing = 5,
   Withdrawn = 6,
 };
 export const state = writable(State.Idle);
 state.subscribe(s => {
   console.log("State", s);
 });

deleted src/base/vesting/vesting.js

@@ -1,59 +0,0 @@

 import { ethers } from "ethers";
 import { formatBalance } from "@app/utils";
 import { refreshBalance } from "@app/session";
 import { STATE, state } from "./state.js";
 const abi = [
   "function token() view returns (address)",
   "function totalVestingAmount() view returns (uint256)",
   "function vestingStartTime() view returns (uint256)",
   "function vestingPeriod() view returns (uint256)",
   "function cliffPeriod() view returns (uint256)",
   "function beneficiary() view returns (address)",
   "function interrupted() view returns (bool)",
   "function withdrawn() view returns (uint256)",
   "function withdrawableBalance() view returns (uint256)",
   "function withdrawVested()",
 ];
 const tokenAbi = [
   "function symbol() view returns (string)",
 ];
 export async function withdrawVested(address, config) {
   const contract = new ethers.Contract(address, abi, config.provider);
   const signer = config.provider.getSigner();
   state.set(STATE.WITHDRAWING_SIGN);
   let tx = await contract.connect(signer).withdrawVested();
   state.set(STATE.WITHDRAWING);
   await tx.wait();
   refreshBalance(config);
   state.set(STATE.WITHDRAWN);
 }
 export async function getInfo(address, config) {
   const contract = new ethers.Contract(address, abi, config.provider);
   const signer = config.provider.getSigner();
   const token = await contract.token();
   const beneficiary = await contract.beneficiary();
   const withdrawable = await contract.withdrawableBalance();
   const withdrawn = await contract.withdrawn();
   const total = await contract.totalVestingAmount();
   const tokenContract = new ethers.Contract(token, tokenAbi, config.provider);
   const symbol = await tokenContract.symbol();
   return {
     token: token,
     symbol: symbol,
     beneficiary: beneficiary,
     totalVesting: formatBalance(total),
     withdrawableBalance: formatBalance(withdrawable),
     withdrawn: formatBalance(withdrawn),
   };
 }

added src/base/vesting/vesting.ts

@@ -0,0 +1,59 @@

 import { ethers } from "ethers";
 import { formatBalance } from "@app/utils";
 import { refreshBalance } from "@app/session";
 import { State, state } from "./state";
 const abi = [
   "function token() view returns (address)",
   "function totalVestingAmount() view returns (uint256)",
   "function vestingStartTime() view returns (uint256)",
   "function vestingPeriod() view returns (uint256)",
   "function cliffPeriod() view returns (uint256)",
   "function beneficiary() view returns (address)",
   "function interrupted() view returns (bool)",
   "function withdrawn() view returns (uint256)",
   "function withdrawableBalance() view returns (uint256)",
   "function withdrawVested()",
 ];
 const tokenAbi = [
   "function symbol() view returns (string)",
 ];
 export async function withdrawVested(address, config) {
   const contract = new ethers.Contract(address, abi, config.provider);
   const signer = config.provider.getSigner();
   state.set(State.WithdrawingSign);
   let tx = await contract.connect(signer).withdrawVested();
   state.set(State.Withdrawing);
   await tx.wait();
   refreshBalance(config);
   state.set(State.Withdrawn);
 }
 export async function getInfo(address, config) {
   const contract = new ethers.Contract(address, abi, config.provider);
   const signer = config.provider.getSigner();
   const token = await contract.token();
   const beneficiary = await contract.beneficiary();
   const withdrawable = await contract.withdrawableBalance();
   const withdrawn = await contract.withdrawn();
   const total = await contract.totalVestingAmount();
   const tokenContract = new ethers.Contract(token, tokenAbi, config.provider);
   const symbol = await tokenContract.symbol();
   return {
     token: token,
     symbol: symbol,
     beneficiary: beneficiary,
     totalVesting: formatBalance(total),
     withdrawableBalance: formatBalance(withdrawable),
     withdrawn: formatBalance(withdrawn),
   };
 }

deleted src/index.js

@@ -1,7 +0,0 @@

 import App from "./App.svelte";
 let app = new App({
   target: document.body,
 });
 export default app;

added src/index.ts

@@ -0,0 +1,7 @@

 import App from "./App.svelte";
 let app = new App({
   target: document.body,
 });
 export default app;