Skip to content

Commit

Permalink
Merge branch 'main' of github.com:rainlanguage/rain.orderbook
Browse files Browse the repository at this point in the history
  • Loading branch information
@thedavidmeister
thedavidmeister committed Apr 5, 2024
2 parents d743677 + edc4d8c commit f0bf6e5
Show file tree
Hide file tree
Showing 9 changed files with 139 additions and 104 deletions.
2 changes: 1 addition & 1 deletion tauri-app/src/lib/components/Hash.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
</button>

{#if shorten}
<Tooltip triggeredBy={`#${id}`}>
<Tooltip triggeredBy={`#${id}`} class="z-20">
<div class="inline-block flex justify-start items-center space-x-2">
{#if type === HashType.Wallet }
<WalletOutline size="sm" />
Expand Down
12 changes: 12 additions & 0 deletions tauri-app/src/lib/components/IconTelegram.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<svg
width="24px"
height="24px"
viewBox="0 0 24 24"
class="h-5 w-5"
version="1.1"
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"
><path
id="telegram-1"
d="M18.384,22.779c0.322,0.228 0.737,0.285 1.107,0.145c0.37,-0.141 0.642,-0.457 0.724,-0.84c0.869,-4.084 2.977,-14.421 3.768,-18.136c0.06,-0.28 -0.04,-0.571 -0.26,-0.758c-0.22,-0.187 -0.525,-0.241 -0.797,-0.14c-4.193,1.552 -17.106,6.397 -22.384,8.35c-0.335,0.124 -0.553,0.446 -0.542,0.799c0.012,0.354 0.25,0.661 0.593,0.764c2.367,0.708 5.474,1.693 5.474,1.693c0,0 1.452,4.385 2.209,6.615c0.095,0.28 0.314,0.5 0.603,0.576c0.288,0.075 0.596,-0.004 0.811,-0.207c1.216,-1.148 3.096,-2.923 3.096,-2.923c0,0 3.572,2.619 5.598,4.062Zm-11.01,-8.677l1.679,5.538l0.373,-3.507c0,0 6.487,-5.851 10.185,-9.186c0.108,-0.098 0.123,-0.262 0.033,-0.377c-0.089,-0.115 -0.253,-0.142 -0.376,-0.064c-4.286,2.737 -11.894,7.596 -11.894,7.596Z"
/></svg
>
117 changes: 63 additions & 54 deletions tauri-app/src/lib/components/InputLedgerWallet.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
<script lang="ts">
import { Button, Input, Helper, Spinner, Alert } from 'flowbite-svelte';
import { Helper, Alert } from 'flowbite-svelte';
import type { InputMask } from 'imask';
import { imask } from '@imask/svelte';
import { isAddress } from 'viem';
import { toasts } from '$lib/stores/toasts';
import { getAddressFromLedger } from '$lib/services/wallet';
import { reportErrorToSentry } from '$lib/services/sentry';
import IconWarning from '$lib/components/IconWarning.svelte';
import { ledgerWalletAddress, ledgerWalletDerivationIndex } from '$lib/stores/wallets';
import ButtonLoading from './ButtonLoading.svelte';
import Hash from './Hash.svelte';
import { HashType } from '$lib/types/hash';
const maskOptions = {
mask: Number,
Expand All @@ -17,26 +20,34 @@
radix: '.',
};
export let derivationIndex: number = 0;
export let walletAddress: string;
let isFetchingFromLedger: boolean;
$: isWalletAddressValid = walletAddress && walletAddress.length > 0 && isAddress(walletAddress);
let derivationIndex: number = 0;
let isConnecting: boolean;
let isDisconnecting = false;
function completeDerivationIndex({ detail }: { detail: InputMask }) {
derivationIndex = parseInt(detail.unmaskedValue);
ledgerWalletDerivationIndex.set(derivationIndex);
}
async function getAddress() {
isFetchingFromLedger = true;
try {
const res: string = await getAddressFromLedger(derivationIndex);
walletAddress = res;
} catch (e) {
reportErrorToSentry(e);
toasts.error(`Ledger error: ${e as string}`);
async function ledgerConnect() {
if (!$ledgerWalletAddress) {
isConnecting = true;
try {
const res: string = await getAddressFromLedger(derivationIndex);
ledgerWalletAddress.set(res)
} catch (e) {
reportErrorToSentry(e);
toasts.error(`Ledger error: ${e as string}`);
}
isConnecting = false;
}
isFetchingFromLedger = false;
}
function ledgerDisconnect() {
isDisconnecting = true;
ledgerWalletAddress.set(undefined);
ledgerWalletDerivationIndex.set(0);
isDisconnecting = false;
}
</script>

Expand All @@ -52,45 +63,43 @@
</div>
</Alert>

<div class="flex w-full items-start justify-start space-x-2">
<div class="grow">
<div class="relative flex">
<Input
label="Ledger Wallet Address"
name="walletAddress"
required
bind:value={walletAddress}
<div class="flex w-full justify-end space-x-2 items-start">
<ButtonLoading
color="primary"
class="px-2 py-1 w-full"
size="lg"
pill
loading={isConnecting}
on:click={ledgerConnect}
>
{#if $ledgerWalletAddress}
<Hash type={HashType.Wallet} value={$ledgerWalletAddress} />
{:else}
Connect
{/if}
</ButtonLoading>
{#if $ledgerWalletAddress}
<ButtonLoading
color="red"
class="px-2 py-1 min-w-fit"
size="lg"
pill
loading={isDisconnecting}
on:click={ledgerDisconnect}
>
Disconnect
</ButtonLoading>
{:else}
<div class="w-32 grow-0 break-all">
<input
type="text"
class="focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 block w-32 rounded-xl border-gray-300 bg-gray-50 p-1.5 text-sm text-gray-900 disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
value={derivationIndex}
use:imask={maskOptions}
on:complete={completeDerivationIndex}
/>
<div class="absolute right-2 flex h-10 flex-col justify-center">
<Button
color="blue"
class="px-2 py-1"
size="xs"
pill
on:click={getAddress}
disabled={isFetchingFromLedger}
>
{#if isFetchingFromLedger}
<Spinner size="3" class="mr-2" color="white" />
{/if}
CONNECT
</Button>
</div>
<Helper class="break-word mt-2 text-sm">Derivation Index</Helper>
</div>
{#if !isWalletAddressValid && walletAddress.length > 0}
<Helper class="mt-2 text-sm" color="red">Invalid Address</Helper>
{/if}
<Helper class="mt-2 text-sm">The address of your Ledger wallet.</Helper>
</div>
<div class="w-32 grow-0 break-all">
<input
type="text"
class="focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 block w-32 rounded-lg border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
value={derivationIndex}
use:imask={maskOptions}
on:complete={completeDerivationIndex}
/>
<Helper class="break-word mt-2 text-sm">Derivation Index</Helper>
</div>
{/if}
</div>
</div>
38 changes: 28 additions & 10 deletions tauri-app/src/lib/components/InputWalletConnect.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
<script lang="ts">
import IconWarning from '$lib/components/IconWarning.svelte';
import { Alert } from 'flowbite-svelte';
import ButtonLoading from './ButtonLoading.svelte';
import IconWarning from "$lib/components/IconWarning.svelte";
import { Alert } from "flowbite-svelte";
import ButtonLoading from "./ButtonLoading.svelte";
import Hash from '$lib/components/Hash.svelte';
import { HashType } from '$lib/types/hash';
import {
walletconnectConnect,
walletconnectIsDisconnecting,
walletconnectAccount,
walletconnectDisconnect,
walletconnectIsConnecting,
walletconnectIsDisconnecting,
} from '$lib/stores/walletconnect';
$: walletconnectLabel = $walletconnectAccount
? `${$walletconnectAccount.slice(0, 5)}...${$walletconnectAccount.slice(-5)} (click to disconnect)`
: 'Connect';
</script>

<div>
Expand All @@ -20,13 +19,32 @@
Only mobile wallets are supported in WalletConnect.
</Alert>

<div class="flex w-full flex-col justify-between space-y-2">
<div class="flex w-full justify-end space-x-2">
<ButtonLoading
color="primary"
class="px-2 py-1 w-full"
size="lg"
pill
loading={$walletconnectIsDisconnecting || $walletconnectIsConnecting}
on:click={walletconnectConnect}
>
{walletconnectLabel}
{#if $walletconnectAccount}
<Hash type={HashType.Wallet} value={$walletconnectAccount} />
{:else}
Connect
{/if}
</ButtonLoading>
{#if $walletconnectAccount}
<ButtonLoading
color="red"
class="px-2 py-1 min-w-fit"
size="lg"
pill
loading={$walletconnectIsDisconnecting || $walletconnectIsConnecting}
on:click={walletconnectDisconnect}
>
Disconnect
</ButtonLoading>
{/if}
</div>
</div>
25 changes: 12 additions & 13 deletions tauri-app/src/lib/components/ModalConnect.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script lang="ts">
import { Button, Modal } from 'flowbite-svelte';
import InputLedgerWallet from '$lib/components/InputLedgerWallet.svelte';
import { ledgerWalletDerivationIndex, ledgerWalletAddress } from '$lib/stores/wallets';
import { 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';
Expand All @@ -11,9 +11,11 @@
let selectedLedger = false;
let selectedWalletconnect = false;
$: walletconnectLabel = $walletconnectAccount
$: label = $walletconnectAccount
? `${$walletconnectAccount.slice(0, 5)}...${$walletconnectAccount.slice(-5)}`
: 'Connect to Wallet';
: $ledgerWalletAddress
? `${$ledgerWalletAddress.slice(0, 5)}...${$ledgerWalletAddress.slice(-5)}`
: "Connect to Wallet";
function reset() {
open = false;
Expand All @@ -22,12 +24,12 @@
}
</script>

<div class="flex w-full w-full flex-col py-4">
<Button color="primary" on:click={() => (open = true)}>{walletconnectLabel}</Button>
<div class="flex w-full flex-col py-4">
<Button color="primary" pill on:click={() => (open = true)}>{label}</Button>
</div>

<Modal title="Connect to Wallet" bind:open outsideclose size="sm" on:close={reset}>
{#if !selectedLedger && !selectedWalletconnect && !$walletconnectAccount}
{#if !selectedLedger && !selectedWalletconnect && !$walletconnectAccount && !$ledgerWalletAddress}
<div class="flex justify-center space-x-4">
<Button class="text-lg" on:click={() => (selectedLedger = true)}>
<div class="mr-4">
Expand All @@ -42,18 +44,15 @@
WalletConnect
</Button>
</div>
{:else if selectedLedger}
<InputLedgerWallet
bind:derivationIndex={$ledgerWalletDerivationIndex}
bind:walletAddress={$ledgerWalletAddress.value}
/>
<div class="flex justify-end space-x-4">
{:else if selectedLedger || $ledgerWalletAddress}
<InputLedgerWallet />
<div class="flex justify-between 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">
<div class="flex justify-between space-x-4">
<Button color="alternative" on:click={() => (selectedWalletconnect = false)}>Back</Button>
</div>
{/if}
Expand Down
20 changes: 7 additions & 13 deletions tauri-app/src/lib/components/ModalExecute.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
<script lang="ts">
import { Button, Modal } from 'flowbite-svelte';
import ButtonLoading from '$lib/components/ButtonLoading.svelte';
import { ledgerWalletDerivationIndex, ledgerWalletAddress } from '$lib/stores/wallets';
import { ledgerWalletAddress } from '$lib/stores/wallets';
import InputLedgerWallet from '$lib/components/InputLedgerWallet.svelte';
import InputWalletConnect from '$lib/components/InputWalletConnect.svelte';
import { walletconnectAccount } from '$lib/stores/walletconnect';
import { isNil } from 'lodash';
import IconLedger from './IconLedger.svelte';
import IconWalletConnect from './IconWalletConnect.svelte';
Expand All @@ -30,7 +29,7 @@
</script>

<Modal {title} bind:open outsideclose={!isSubmitting} size="sm" on:close={reset}>
{#if !selectedLedger && !selectedWalletconnect && !$walletconnectAccount}
{#if !selectedLedger && !selectedWalletconnect && !$walletconnectAccount && !$ledgerWalletAddress}
<div class="flex justify-center space-x-4">
<Button class="text-lg" on:click={() => selectedLedger = true}>
<div class="mr-4">
Expand All @@ -51,22 +50,17 @@
<Button color="alternative" on:click={() => {onBack?.(); reset();}}>Back</Button>
{/if}
</div>
{:else if selectedLedger}
<InputLedgerWallet
bind:derivationIndex={$ledgerWalletDerivationIndex}
bind:walletAddress={$ledgerWalletAddress.value}
/>

<div class="flex justify-end space-x-4">
{:else if selectedLedger || $ledgerWalletAddress}
<InputLedgerWallet />
<div class="flex justify-between space-x-4">
<Button color="alternative" on:click={() => selectedLedger = false}>Back</Button>
<ButtonLoading on:click={() => executeLedger().finally(() => reset())} disabled={isSubmitting || !$ledgerWalletAddress || isNil($ledgerWalletDerivationIndex) || isNil($ledgerWalletDerivationIndex)} loading={isSubmitting}>
<ButtonLoading on:click={() => executeLedger().finally(() => reset())} disabled={isSubmitting || !$ledgerWalletAddress} loading={isSubmitting}>
{execButtonLabel}
</ButtonLoading>
</div>
{:else if selectedWalletconnect || $walletconnectAccount}
<InputWalletConnect />

<div class="flex justify-end space-x-4">
<div class="flex justify-between space-x-4">
{#if !$walletconnectAccount}
<Button color="alternative" on:click={() => selectedWalletconnect = false}>Back</Button>
{/if}
Expand Down
11 changes: 9 additions & 2 deletions tauri-app/src/lib/components/Sidebar.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 IconTelegram from '$lib/components/IconTelegram.svelte';
import ModalConnect from '$lib/components/ModalConnect.svelte';
export let hasRequiredSettings = false;
Expand All @@ -23,7 +24,7 @@
: 'flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600';
</script>

<Sidebar activeUrl={$page.url.pathname} asideClass="w-64 fixed">
<Sidebar activeUrl={$page.url.pathname} asideClass="w-64 fixed z-10">
<SidebarWrapper divClass="overflow-y-auto py-11 px-3 bg-gray-100 dark:bg-gray-800 min-h-screen">
<SidebarGroup ulClass="">
<div class="block dark:hidden">
Expand Down Expand Up @@ -93,8 +94,14 @@
<span data-testid="sidebar-documentation"></span>
</svelte:fragment>
</SidebarItem>
<SidebarItem label="Ask for help" target="_blank" href="https://t.me/+W0aQ36ptN_E2MjZk">
<svelte:fragment slot="icon">
<IconTelegram />
<span data-testid="sidebar-telegram"></span>
</svelte:fragment>
</SidebarItem>
</SidebarGroup>
<SidebarGroup border class="flex justify-end">
<SidebarGroup border class="flex justify-start">
<ButtonDarkMode />
</SidebarGroup>
</SidebarWrapper>
Expand Down
4 changes: 1 addition & 3 deletions tauri-app/src/lib/stores/walletconnect.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,7 @@ Provider.init(
});

export async function walletconnectConnect() {
if (walletconnectProvider?.accounts?.length) {
await walletconnectDisconnect();
} else {
if (!walletconnectProvider?.accounts?.length) {
walletconnectIsConnecting.set(true);
const network = get(activeNetwork);
if (network) {
Expand Down
Loading

0 comments on commit f0bf6e5

Please sign in to comment.