Merge pull request #542 from rainlanguage/2024-04-04-top-connect-button

move `connect to wallet` button to sidebar
rainlanguage · Apr 5, 2024 · 6f542bf · 6f542bf
2 parents 5c48eff + 4c673b6
commit 6f542bf
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 86 deletions.
diff --git a/tauri-app/src/lib/components/InputWalletConnect.svelte b/tauri-app/src/lib/components/InputWalletConnect.svelte
@@ -1,12 +1,17 @@
 <script lang="ts">
-  import IconWarning from "$lib/components/IconWarning.svelte";
-  import { Alert } from "flowbite-svelte";
-  import ButtonLoading from "./ButtonLoading.svelte";
-  import { walletconnectConnect, walletconnectIsDisconnecting, walletconnectAccount, walletconnectIsConnecting } from '$lib/stores/walletconnect';
+  import IconWarning from '$lib/components/IconWarning.svelte';
+  import { Alert } from 'flowbite-svelte';
+  import ButtonLoading from './ButtonLoading.svelte';
+  import {
+    walletconnectConnect,
+    walletconnectIsDisconnecting,
+    walletconnectAccount,
+    walletconnectIsConnecting,
+  } from '$lib/stores/walletconnect';
 
   $: walletconnectLabel = $walletconnectAccount
     ? `${$walletconnectAccount.slice(0, 5)}...${$walletconnectAccount.slice(-5)}  (click to disconnect)`
-    : "CONNECT"
+    : 'Connect';
 </script>
 
 <div>
@@ -15,16 +20,13 @@
     Only mobile wallets are supported in WalletConnect.
   </Alert>
 
-  <div class="flex flex-col w-full justify-between space-y-2">
+  <div class="flex w-full flex-col justify-between space-y-2">
     <ButtonLoading
-      color="blue"
-      class="px-2 py-1"
-      size="lg"
-      pill
+      color="primary"
       loading={$walletconnectIsDisconnecting || $walletconnectIsConnecting}
       on:click={walletconnectConnect}
     >
-    {walletconnectLabel}
+      {walletconnectLabel}
     </ButtonLoading>
   </div>
-</div>
+</div>
diff --git a/tauri-app/src/lib/components/ModalConnect.svelte b/tauri-app/src/lib/components/ModalConnect.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { Button, Modal } from 'flowbite-svelte';
+  import InputLedgerWallet from '$lib/components/InputLedgerWallet.svelte';
+  import { ledgerWalletDerivationIndex, ledgerWalletAddress } from '$lib/stores/wallets';
+  import InputWalletConnect from '$lib/components/InputWalletConnect.svelte';
+  import IconLedger from '$lib/components/IconLedger.svelte';
+  import IconWalletConnect from '$lib/components/IconWalletConnect.svelte';
+  import { walletconnectAccount } from '$lib/stores/walletconnect';
+
+  let open = false;
+  let selectedLedger = false;
+  let selectedWalletconnect = false;
+
+  $: walletconnectLabel = $walletconnectAccount
+    ? `${$walletconnectAccount.slice(0, 5)}...${$walletconnectAccount.slice(-5)}`
+    : 'Connect to Wallet';
+
+  function reset() {
+    open = false;
+    selectedLedger = false;
+    selectedWalletconnect = false;
+  }
+</script>
+
+<div class="flex w-full w-full flex-col py-4">
+  <Button color="primary" on:click={() => (open = true)}>{walletconnectLabel}</Button>
+</div>
+
+<Modal title="Connect to Wallet" bind:open outsideclose size="sm" on:close={reset}>
+  {#if !selectedLedger && !selectedWalletconnect && !$walletconnectAccount}
+    <div class="flex justify-center space-x-4">
+      <Button class="text-lg" on:click={() => (selectedLedger = true)}>
+        <div class="mr-4">
+          <IconLedger />
+        </div>
+        Ledger Wallet
+      </Button>
+      <Button class="text-lg" on:click={() => (selectedWalletconnect = true)}>
+        <div class="mr-3">
+          <IconWalletConnect />
+        </div>
+        WalletConnect
+      </Button>
+    </div>
+  {:else if selectedLedger}
+    <InputLedgerWallet
+      bind:derivationIndex={$ledgerWalletDerivationIndex}
+      bind:walletAddress={$ledgerWalletAddress.value}
+    />
+    <div class="flex justify-end space-x-4">
+      <Button color="alternative" on:click={() => (selectedLedger = false)}>Back</Button>
+    </div>
+  {:else if selectedWalletconnect || $walletconnectAccount}
+    <InputWalletConnect />
+    {#if !$walletconnectAccount}
+      <div class="flex justify-end space-x-4">
+        <Button color="alternative" on:click={() => (selectedWalletconnect = false)}>Back</Button>
+      </div>
+    {/if}
+  {/if}
+</Modal>
diff --git a/tauri-app/src/lib/components/ModalExecute.svelte b/tauri-app/src/lib/components/ModalExecute.svelte
@@ -30,7 +30,7 @@
 </script>
 
 <Modal {title} bind:open outsideclose={!isSubmitting} size="sm" on:close={reset}>
-  {#if !selectedLedger && !selectedWalletconnect}
+  {#if !selectedLedger && !selectedWalletconnect && !$walletconnectAccount}
     <div class="flex justify-center space-x-4">
       <Button class="text-lg" on:click={() => selectedLedger = true}>
         <div class="mr-4">
@@ -63,11 +63,13 @@
         {execButtonLabel}
       </ButtonLoading>
     </div>
-  {:else if selectedWalletconnect}
+  {:else if selectedWalletconnect || $walletconnectAccount}
     <InputWalletConnect />
 
     <div class="flex justify-end space-x-4">
-      <Button color="alternative" on:click={() => selectedWalletconnect = false}>Back</Button>
+      {#if !$walletconnectAccount}
+        <Button color="alternative" on:click={() => selectedWalletconnect = false}>Back</Button>
+      {/if}
       <ButtonLoading on:click={() => executeWalletconnect().finally(() => reset())} disabled={isSubmitting || !$walletconnectAccount} loading={isSubmitting}>
         {execButtonLabel}
       </ButtonLoading>

diff --git a/tauri-app/src/lib/components/Sidebar.svelte b/tauri-app/src/lib/components/Sidebar.svelte
@@ -14,6 +14,7 @@
   import ButtonDarkMode from '$lib/components/ButtonDarkMode.svelte';
   import DropdownActiveNetwork from '$lib/components/DropdownActiveNetwork.svelte';
   import DropdownActiveOrderbook from '$lib/components/DropdownActiveOrderbook.svelte';
+  import ModalConnect from '$lib/components/ModalConnect.svelte';
 
   export let hasRequiredSettings = false;
 
@@ -76,6 +77,9 @@
       <DropdownActiveNetwork />
       <DropdownActiveOrderbook />
     </SidebarGroup>
+    <SidebarGroup border>
+      <ModalConnect />
+    </SidebarGroup>
     <SidebarGroup border>
       <SidebarItem label="Settings" href="/settings">
         <svelte:fragment slot="icon">

diff --git a/tauri-app/src/lib/stores/walletconnect.ts b/tauri-app/src/lib/stores/walletconnect.ts
@@ -34,7 +34,10 @@ Provider.init(
       "disconnect",
     ],
     showQrModal: true,
-    qrModalOptions: { themeMode: get(colorTheme) },
+    qrModalOptions: {
+      themeMode: get(colorTheme),
+      enableExplorer: false
+    },
   }
 ).then(async provider => {
   provider.on("connect", () => {
@@ -46,22 +49,15 @@ Provider.init(
   provider.on("accountsChanged", (accounts) => {
     walletconnectAccount.set(accounts?.[0] ?? undefined);
   });
-  provider.on("chainChanged", async (chainid) => {
-    // disconnect if networks from ui and wallet dont match
-    const network = get(activeNetwork);
-    if (!network || network['chain-id'] !== Number(chainid)) {
-      toasts.error("Please choose the same chain in your wallet")
-      await walletconnectDisconnect();
-    }
-  });
+
   walletconnectProvider = provider;
 
   // disconnect if last session is still active
   if (provider.accounts.length) {
     await walletconnectDisconnect();
   }
 }).catch(e => {
-  toasts.error("could not instantiate walletconnect service")
+  toasts.error("Could not instantiate Walletconnect modal")
   reportErrorToSentry(e);
 });
 
@@ -72,15 +68,15 @@ export async function walletconnectConnect() {
     walletconnectIsConnecting.set(true);
     const network = get(activeNetwork);
     if (network) {
-      const rpcMap: Record<string, string>  = {};
+      const rpcMap: Record<string, string> = {};
       rpcMap[network['chain-id']] = network.rpc;
       try {
         await walletconnectProvider?.connect({
           chains: [network['chain-id']],
           rpcMap
         })
       } catch {
-        toasts.error("canceled by user!")
+        toasts.error("Connection cancelled by user")
       }
     } else {
       toasts.error("Cannot find active network")
@@ -90,18 +86,18 @@ export async function walletconnectConnect() {
 }
 
 export async function walletconnectDisconnect() {
-  walletconnectAccount.set(undefined);
   walletconnectIsDisconnecting.set(true);
   try {
     await walletconnectProvider?.disconnect();
-  } catch(e) {
+  } catch (e) {
     reportErrorToSentry(e);
   }
   walletconnectIsDisconnecting.set(false);
+  walletconnectAccount.set(undefined);
 }
 
 // subscribe to networks and disconnect on network changes
 activeNetwork.subscribe(async () => await walletconnectDisconnect());
 
 // set theme when changed by user
-colorTheme.subscribe(v => (walletconnectProvider?.modal as WalletConnectModal)?.setTheme({themeMode: v}))
+colorTheme.subscribe(v => (walletconnectProvider?.modal as WalletConnectModal)?.setTheme({ themeMode: v }))
diff --git a/tauri-app/src/routes/settings/+page.svelte b/tauri-app/src/routes/settings/+page.svelte
@@ -1,31 +1,15 @@
 <script lang="ts">
-  import { Alert, Button, Modal } from 'flowbite-svelte';
+  import { Alert } from 'flowbite-svelte';
   import { hasRequiredSettings, settingsText } from '$lib/stores/settings';
   import PageHeader from '$lib/components/PageHeader.svelte';
   import CodeMirrorConfigSource from '$lib/components/CodeMirrorConfigSource.svelte';
   import ButtonLoading from '$lib/components/ButtonLoading.svelte';
   import { settingsFile }from '$lib/stores/settings';
   import FileTextarea from '$lib/components/FileTextarea.svelte';
-  import InputLedgerWallet from '$lib/components/InputLedgerWallet.svelte';
-  import { ledgerWalletDerivationIndex, ledgerWalletAddress } from '$lib/stores/wallets';
-  import InputWalletConnect from '$lib/components/InputWalletConnect.svelte';
-  import IconLedger from '$lib/components/IconLedger.svelte';
-  import IconWalletConnect from '$lib/components/IconWalletConnect.svelte';
-
-  let open = false;
-  let selectedLedger = false;
-  let selectedWalletconnect = false;
 
   function apply() {
     settingsText.set($settingsFile.text);
   };
-
-
-  function reset() {
-    open = false;
-    selectedLedger = false;
-    selectedWalletconnect = false;
-  }
 </script>
 
 <PageHeader title="Settings" />
@@ -57,42 +41,4 @@
         <span data-testid="button-applysettings"></span>
       </ButtonLoading>
   </svelte:fragment>
-</FileTextarea>
-
-<div class="flex flex-col w-full w-full py-4">
-  <Button color="blue" on:click={() => open = true}>Connect to Wallet</Button>
-</div>
-
-<Modal title="Connect to Wallet" bind:open={open} outsideclose size="sm" on:close={reset}>
-  {#if !selectedLedger && !selectedWalletconnect}
-    <div class="flex justify-center space-x-4">
-      <Button class="text-lg" on:click={() => selectedLedger = true}>
-        <div class="mr-4">
-          <IconLedger />
-        </div>
-        Ledger Wallet
-      </Button>
-      <Button class="text-lg" on:click={() => selectedWalletconnect = true}>
-        <div class="mr-3">
-          <IconWalletConnect />
-        </div>
-        WalletConnect
-      </Button>
-    </div>
-  {:else if selectedLedger}
-    <InputLedgerWallet
-      bind:derivationIndex={$ledgerWalletDerivationIndex}
-      bind:walletAddress={$ledgerWalletAddress.value}
-    />
-
-    <div class="flex justify-end space-x-4">
-      <Button color="alternative" on:click={() => selectedLedger = false}>Back</Button>
-    </div>
-  {:else if selectedWalletconnect}
-    <InputWalletConnect />
-
-    <div class="flex justify-end space-x-4">
-      <Button color="alternative" on:click={() => selectedWalletconnect = false}>Back</Button>
-    </div>
-  {/if}
-</Modal>
+</FileTextarea>