e2db821 Fix reactiveness issue with connect — radicle-explorer

Radicle web interface

Fix reactiveness issue with connect

Alexis Sellier committed 5 years ago

commit e2db821b99262c0b7d28adcdb72fd6dde3b51922
parent 30f86ed4645a0ce0aa4237fcc3ca456dfe4984fb

6 files changed +46 -13

modified src/App.svelte

@@ -1,4 +1,5 @@

 <script lang="javascript">
   // TODO: Navigating directly to /vesting doesn't work.
   import { ethers } from 'ethers';
   import { get } from 'svelte/store';
   import { Router, Link, Route } from "svelte-routing";

modified src/Connect.svelte

@@ -1,14 +1,15 @@

 <script lang="js">
   import {CONNECTION, session, connectWallet} from "./session.js";
 <script lang="javascript">
   import { derived } from "svelte/store";
   import { CONNECTION, session, connectWallet } from "./session.js";
   export let caption = "Connect";
   export let className = "";
   export let style = "";
   let connecting = false;
   let walletUnavailable = !window.ethereum;
   session.subscribe((sess) => {
     connecting = sess.connection === CONNECTION.CONNECTING;
   const connecting = derived(session, $s => {
     return $s.connection === CONNECTION.CONNECTING;
   });
 </script>

@@ -19,10 +20,10 @@

   on:click={connectWallet}
   {style}
   class="connect {className}"
   disabled={connecting || walletUnavailable}
   data-waiting={connecting || null}
   disabled={$connecting || walletUnavailable}
   data-waiting={$connecting || null}
 >
   {#if connecting}
   {#if $connecting}
     Connecting...
   {:else}
     {caption}

modified src/Header.svelte

@@ -1,6 +1,7 @@

 <script lang="javascript">
   // TODO: Shorten tx hash
   // TODO: Link to correct network on etherscan
   import { derived } from "svelte/store";
   import { ethers } from "ethers";
   import { link } from "svelte-routing";
   import { formatBalance } from "@app/utils";

@@ -11,6 +12,9 @@

   let sessionButton = null;
   let sessionButtonHover = false;
   const address = derived(session, $s => { return $s.address });
   const tokenBalance = derived(session, $s => { return $s.tokenBalance });
 </script>
 <style>

@@ -78,9 +82,9 @@

       <a use:link href="/vesting/">Vesting</a>
     </span>
     {#if $session.address}
     {#if $address}
       <span class="balance">
         {formatBalance($session.tokenBalance)} <strong>RAD</strong>
         {formatBalance($tokenBalance)} <strong>RAD</strong>
       </span>
       <button class="address outline small" bind:this={sessionButton}

@@ -91,7 +95,7 @@

         {#if sessionButtonHover}
           Disconnect
         {:else}
           {shortAddress($session.address)}
           {shortAddress($address)}
         {/if}
       </button>
     {:else}

modified src/base/vesting/state.js

@@ -12,3 +12,7 @@ export const STATE = {

 };
 export const state = writable(STATE.IDLE);
 state.subscribe(s => {
   console.log("State", s);
 });

modified src/base/vesting/vesting.js

@@ -1,5 +1,6 @@

 import { ethers } from "ethers";
 import { formatBalance } from "@app/utils";
 import { refreshBalance } from "@app/session";
 import { STATE, state } from "./state.js";
 const abi = [

@@ -29,7 +30,7 @@ export async function withdrawVested(address, config) {

   state.set(STATE.WITHDRAWING);
   await tx.wait();
   // TODO: Update balance.
   refreshBalance(config);
   state.set(STATE.WITHDRAWN);
 }

modified src/session.js

@@ -1,4 +1,4 @@

 import { writable } from "svelte/store";
 import { get, writable } from "svelte/store";
 import { ethers } from "ethers";
 import { getConfig } from "./config.js";

@@ -12,6 +12,10 @@ export const session = writable({

   connection: CONNECTION.DISCONNECTED,
 });
 session.subscribe(s => {
   console.log("Session", s);
 });
 const tokenAbi = [
   "function balanceOf(address) view returns (uint256)",
   "function approve(address, uint256) returns (bool)",

@@ -67,6 +71,24 @@ export async function updateBalance(n) {

   });
 }
 export async function refreshBalance(config) {
   const addr = get(session).address;
   if (addr) {
     try {
       const token = new ethers.Contract(config.radToken.address, tokenAbi, config.provider);
       const tokenBalance = await token.balanceOf(addr);
       console.log("new balance", tokenBalance);
       session.update((s) => {
         s.tokenBalance = tokenBalance;
       });
     } catch (e) {
       console.error(e);
     }
   }
 }
 export function disconnectWallet() {
   location.reload();
 }