Skip to content

Commit 5868f8a

Browse files
peterpeterparkerpeterpeterparker
authored
feat: wrap view with wallet loader (#1113)
Signed-off-by: David Dal Busco <[email protected]>
1 parent 9cc70f7 commit 5868f8a

File tree

15 files changed

+185
-164
lines changed

15 files changed

+185
-164
lines changed

‎src/frontend/src/lib/components/core/NavbarCockpit.svelte

+8-11
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
import IconMissionControl from '$lib/components/icons/IconMissionControl.svelte';
1111
import IconWallet from '$lib/components/icons/IconWallet.svelte';
1212
import WalletInlineBalance from '$lib/components/wallet/WalletInlineBalance.svelte';
13-
import WalletLoader from '$lib/components/wallet/WalletLoader.svelte';
1413
import { balance, balanceLoaded } from '$lib/derived/balance.derived';
1514
import { missionControlIdDerived } from '$lib/derived/mission-control.derived';
1615
import { orbiterStore } from '$lib/derived/orbiter.derived';
@@ -70,16 +69,14 @@
7069
{/if}
7170

7271
{#if nonNullish($missionControlIdDerived)}
73-
<WalletLoader missionControlId={$missionControlIdDerived}>
74-
{#if $balanceLoaded}
75-
<div in:slide={{ axis: 'x' }} class="container wallet">
76-
<NavbarLink href="/wallet" ariaLabel={`${$i18n.core.open}: ${$i18n.wallet.title}`}>
77-
<IconWallet />
78-
<WalletInlineBalance balance={$balance} />
79-
</NavbarLink>
80-
</div>
81-
{/if}
82-
</WalletLoader>
72+
{#if $balanceLoaded}
73+
<div in:slide={{ axis: 'x' }} class="container wallet">
74+
<NavbarLink href="/wallet" ariaLabel={`${$i18n.core.open}: ${$i18n.wallet.title}`}>
75+
<IconWallet />
76+
<WalletInlineBalance balance={$balance} />
77+
</NavbarLink>
78+
</div>
79+
{/if}
8380
{/if}
8481

8582
<style lang="scss">

‎src/frontend/src/lib/components/launchpad/Cockpit.svelte

-5
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
import MissionControlVersion from '$lib/components/mission-control/MissionControlVersion.svelte';
1515
import SkeletonText from '$lib/components/ui/SkeletonText.svelte';
1616
import WalletInlineBalance from '$lib/components/wallet/WalletInlineBalance.svelte';
17-
import WalletLoader from '$lib/components/wallet/WalletLoader.svelte';
1817
import { balance } from '$lib/derived/balance.derived';
1918
import {
2019
missionControlNotMonitored,
@@ -129,10 +128,6 @@
129128
</LaunchpadLink>
130129
</div>
131130

132-
{#if nonNullish($missionControlIdDerived)}
133-
<WalletLoader missionControlId={$missionControlIdDerived} />
134-
{/if}
135-
136131
<div class="wallet">
137132
<LaunchpadLink
138133
size="small"

‎src/frontend/src/lib/components/wallet/Wallet.svelte

+34-37
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
import Identifier from '$lib/components/ui/Identifier.svelte';
99
import Value from '$lib/components/ui/Value.svelte';
1010
import WalletBalance from '$lib/components/wallet/WalletBalance.svelte';
11-
import WalletLoader from '$lib/components/wallet/WalletLoader.svelte';
1211
import { PAGINATION } from '$lib/constants/constants';
1312
import { MISSION_CONTROL_v0_0_12 } from '$lib/constants/version.constants';
1413
import { authSignedIn, authSignedOut } from '$lib/derived/auth.derived';
@@ -95,48 +94,46 @@
9594
</script>
9695

9796
{#if $authSignedIn}
98-
<WalletLoader {missionControlId}>
99-
<div class="card-container with-title">
100-
<span class="title">{$i18n.wallet.overview}</span>
101-
102-
<div class="columns-3 fit-column-1">
103-
<div>
104-
<Value>
105-
{#snippet label()}
106-
{$i18n.wallet.wallet_id}
107-
{/snippet}
108-
<Identifier shorten={false} small={false} identifier={missionControlId.toText()} />
109-
</Value>
110-
111-
<Value>
112-
{#snippet label()}
113-
{$i18n.wallet.account_identifier}
114-
{/snippet}
115-
<Identifier identifier={accountIdentifier?.toHex() ?? ''} small={false} />
116-
</Value>
117-
</div>
118-
119-
<div>
120-
<WalletBalance balance={$balance} />
121-
</div>
97+
<div class="card-container with-title">
98+
<span class="title">{$i18n.wallet.overview}</span>
99+
100+
<div class="columns-3 fit-column-1">
101+
<div>
102+
<Value>
103+
{#snippet label()}
104+
{$i18n.wallet.wallet_id}
105+
{/snippet}
106+
<Identifier shorten={false} small={false} identifier={missionControlId.toText()} />
107+
</Value>
108+
109+
<Value>
110+
{#snippet label()}
111+
{$i18n.wallet.account_identifier}
112+
{/snippet}
113+
<Identifier identifier={accountIdentifier?.toHex() ?? ''} small={false} />
114+
</Value>
115+
</div>
116+
117+
<div>
118+
<WalletBalance balance={$balance} />
122119
</div>
123120
</div>
121+
</div>
124122

125-
<div class="toolbar">
126-
<button onclick={openReceive}>{$i18n.wallet.receive}</button>
123+
<div class="toolbar">
124+
<button onclick={openReceive}>{$i18n.wallet.receive}</button>
127125

128-
<button onclick={openSend}>{$i18n.wallet.send}</button>
129-
</div>
126+
<button onclick={openSend}>{$i18n.wallet.send}</button>
127+
</div>
130128

131-
<Transactions
132-
transactions={$transactions}
133-
{disableInfiniteScroll}
134-
{missionControlId}
135-
{onintersect}
136-
/>
129+
<Transactions
130+
transactions={$transactions}
131+
{disableInfiniteScroll}
132+
{missionControlId}
133+
{onintersect}
134+
/>
137135

138-
<TransactionsExport transactions={$transactions} {missionControlId} />
139-
</WalletLoader>
136+
<TransactionsExport transactions={$transactions} {missionControlId} />
140137
{/if}
141138

142139
<ReceiveTokens bind:visible={receiveVisible} {missionControlId} />

‎src/frontend/src/lib/components/wallet/WalletLoader.svelte

+6-7
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
<script lang="ts">
22
import { isNullish } from '@dfinity/utils';
33
import { onDestroy, onMount, type Snippet } from 'svelte';
4+
import { missionControlIdDerived } from '$lib/derived/mission-control.derived';
45
import { type WalletWorker, initWalletWorker } from '$lib/services/worker.wallet.services';
5-
import type { MissionControlId } from '$lib/types/mission-control';
66
77
interface Props {
8-
missionControlId: MissionControlId;
98
children?: Snippet;
109
}
1110
12-
let { missionControlId, children }: Props = $props();
11+
let { children }: Props = $props();
1312
1413
let worker: WalletWorker | undefined = $state();
1514
@@ -18,22 +17,22 @@
1817
};
1918
2019
$effect(() => {
21-
if (isNullish(missionControlId)) {
20+
if (isNullish($missionControlIdDerived)) {
2221
worker?.stop();
2322
return;
2423
}
2524
2625
worker?.start({
27-
missionControlId
26+
missionControlId: $missionControlIdDerived
2827
});
2928
});
3029
3130
const onRestartWallet = () => {
32-
if (isNullish(missionControlId)) {
31+
if (isNullish($missionControlIdDerived)) {
3332
return;
3433
}
3534
36-
worker?.restart({ missionControlId });
35+
worker?.restart({ missionControlId: $missionControlIdDerived });
3736
};
3837
3938
onMount(async () => await initWorker());

‎src/frontend/src/routes/(home)/+page.svelte

+6-3
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,17 @@
44
import Launchpad from '$lib/components/launchpad/Launchpad.svelte';
55
66
import SatellitesLoader from '$lib/components/loaders/SatellitesLoader.svelte';
7+
import WalletLoader from '$lib/components/wallet/WalletLoader.svelte';
78
import { authSignedIn } from '$lib/derived/auth.derived';
89
</script>
910

1011
{#if $authSignedIn}
1112
<div in:fade>
12-
<SatellitesLoader>
13-
<Launchpad />
14-
</SatellitesLoader>
13+
<WalletLoader>
14+
<SatellitesLoader>
15+
<Launchpad />
16+
</SatellitesLoader>
17+
</WalletLoader>
1518
</div>
1619
{:else}
1720
<SignIn />

‎src/frontend/src/routes/(split)/analytics/+page.svelte

+17-14
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
import Orbiter from '$lib/components/orbiter/Orbiter.svelte';
1313
import OrbiterConfig from '$lib/components/orbiter/OrbiterConfig.svelte';
1414
import Tabs from '$lib/components/ui/Tabs.svelte';
15+
import WalletLoader from '$lib/components/wallet/WalletLoader.svelte';
1516
import Warnings from '$lib/components/warning/Warnings.svelte';
1617
import { authSignedIn } from '$lib/derived/auth.derived';
1718
import { orbiterStore } from '$lib/derived/orbiter.derived';
@@ -73,20 +74,22 @@
7374
{/if}
7475
{/snippet}
7576

76-
<SatellitesLoader>
77-
<OrbitersLoader withVersion>
78-
<MissionControlGuard>
79-
{#if $store.tabId === $store.tabs[0].id}
80-
<Analytics />
81-
{:else if $store.tabId === $store.tabs[1].id && nonNullish($orbiterStore)}
82-
<Orbiter orbiter={$orbiterStore} />
83-
{:else if $store.tabId === $store.tabs[2].id && nonNullish($orbiterStore)}
84-
<OrbiterConfig orbiterId={$orbiterStore.orbiter_id} />
77+
<WalletLoader>
78+
<SatellitesLoader>
79+
<OrbitersLoader withVersion>
80+
<MissionControlGuard>
81+
{#if $store.tabId === $store.tabs[0].id}
82+
<Analytics />
83+
{:else if $store.tabId === $store.tabs[1].id && nonNullish($orbiterStore)}
84+
<Orbiter orbiter={$orbiterStore} />
85+
{:else if $store.tabId === $store.tabs[2].id && nonNullish($orbiterStore)}
86+
<OrbiterConfig orbiterId={$orbiterStore.orbiter_id} />
8587

86-
<AnalyticsSettings orbiterId={$orbiterStore.orbiter_id} />
87-
{/if}
88-
</MissionControlGuard>
89-
</OrbitersLoader>
90-
</SatellitesLoader>
88+
<AnalyticsSettings orbiterId={$orbiterStore.orbiter_id} />
89+
{/if}
90+
</MissionControlGuard>
91+
</OrbitersLoader>
92+
</SatellitesLoader>
93+
</WalletLoader>
9194
</Tabs>
9295
</IdentityGuard>

‎src/frontend/src/routes/(split)/authentication/+page.svelte

+13-10
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
import SatelliteGuard from '$lib/components/guards/SatelliteGuard.svelte';
99
import SatellitesLoader from '$lib/components/loaders/SatellitesLoader.svelte';
1010
import Tabs from '$lib/components/ui/Tabs.svelte';
11+
import WalletLoader from '$lib/components/wallet/WalletLoader.svelte';
1112
import { satelliteStore } from '$lib/derived/satellite.derived';
1213
import {
1314
type Tab,
@@ -40,16 +41,18 @@
4041

4142
<IdentityGuard>
4243
<Tabs help="https://juno.build/docs/build/authentication">
43-
<SatellitesLoader>
44-
<SatelliteGuard>
45-
{#if nonNullish($satelliteStore)}
46-
{#if $store.tabId === $store.tabs[0].id}
47-
<Users satelliteId={$satelliteStore.satellite_id} />
48-
{:else if $store.tabId === $store.tabs[1].id}
49-
<AuthSettings satellite={$satelliteStore} />
44+
<WalletLoader>
45+
<SatellitesLoader>
46+
<SatelliteGuard>
47+
{#if nonNullish($satelliteStore)}
48+
{#if $store.tabId === $store.tabs[0].id}
49+
<Users satelliteId={$satelliteStore.satellite_id} />
50+
{:else if $store.tabId === $store.tabs[1].id}
51+
<AuthSettings satellite={$satelliteStore} />
52+
{/if}
5053
{/if}
51-
{/if}
52-
</SatelliteGuard>
53-
</SatellitesLoader>
54+
</SatelliteGuard>
55+
</SatellitesLoader>
56+
</WalletLoader>
5457
</Tabs>
5558
</IdentityGuard>

‎src/frontend/src/routes/(split)/datastore/+page.svelte

+10-7
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
import SatelliteGuard from '$lib/components/guards/SatelliteGuard.svelte';
88
import SatellitesLoader from '$lib/components/loaders/SatellitesLoader.svelte';
99
import Tabs from '$lib/components/ui/Tabs.svelte';
10+
import WalletLoader from '$lib/components/wallet/WalletLoader.svelte';
1011
import { satelliteStore } from '$lib/derived/satellite.derived';
1112
import {
1213
type Tab,
@@ -39,12 +40,14 @@
3940

4041
<IdentityGuard>
4142
<Tabs help="https://juno.build/docs/build/datastore">
42-
<SatellitesLoader>
43-
<SatelliteGuard>
44-
{#if nonNullish($satelliteStore)}
45-
<Db satelliteId={$satelliteStore.satellite_id} />
46-
{/if}
47-
</SatelliteGuard>
48-
</SatellitesLoader>
43+
<WalletLoader>
44+
<SatellitesLoader>
45+
<SatelliteGuard>
46+
{#if nonNullish($satelliteStore)}
47+
<Db satelliteId={$satelliteStore.satellite_id} />
48+
{/if}
49+
</SatelliteGuard>
50+
</SatellitesLoader>
51+
</WalletLoader>
4952
</Tabs>
5053
</IdentityGuard>

‎src/frontend/src/routes/(split)/functions/+page.svelte

+10-7
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
import SatellitesLoader from '$lib/components/loaders/SatellitesLoader.svelte';
88
import Logs from '$lib/components/logs/Logs.svelte';
99
import Tabs from '$lib/components/ui/Tabs.svelte';
10+
import WalletLoader from '$lib/components/wallet/WalletLoader.svelte';
1011
import { satelliteStore } from '$lib/derived/satellite.derived';
1112
import {
1213
type Tab,
@@ -35,12 +36,14 @@
3536

3637
<IdentityGuard>
3738
<Tabs help="https://juno.build/docs/build/functions">
38-
<SatellitesLoader>
39-
<SatelliteGuard>
40-
{#if nonNullish($satelliteStore)}
41-
<Logs satelliteId={$satelliteStore.satellite_id} />
42-
{/if}
43-
</SatelliteGuard>
44-
</SatellitesLoader>
39+
<WalletLoader>
40+
<SatellitesLoader>
41+
<SatelliteGuard>
42+
{#if nonNullish($satelliteStore)}
43+
<Logs satelliteId={$satelliteStore.satellite_id} />
44+
{/if}
45+
</SatelliteGuard>
46+
</SatellitesLoader>
47+
</WalletLoader>
4548
</Tabs>
4649
</IdentityGuard>

‎src/frontend/src/routes/(split)/hosting/+page.svelte

+13-10
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
import Hosting from '$lib/components/hosting/Hosting.svelte';
99
import SatellitesLoader from '$lib/components/loaders/SatellitesLoader.svelte';
1010
import Tabs from '$lib/components/ui/Tabs.svelte';
11+
import WalletLoader from '$lib/components/wallet/WalletLoader.svelte';
1112
import { satelliteStore } from '$lib/derived/satellite.derived';
1213
import {
1314
type Tab,
@@ -36,16 +37,18 @@
3637

3738
<IdentityGuard>
3839
<Tabs help="https://juno.build/docs/build/hosting">
39-
<SatellitesLoader>
40-
<SatelliteGuard>
41-
<MissionControlGuard>
42-
{#if nonNullish($satelliteStore)}
43-
{#if $store.tabId === $store.tabs[0].id}
44-
<Hosting satellite={$satelliteStore} />
40+
<WalletLoader>
41+
<SatellitesLoader>
42+
<SatelliteGuard>
43+
<MissionControlGuard>
44+
{#if nonNullish($satelliteStore)}
45+
{#if $store.tabId === $store.tabs[0].id}
46+
<Hosting satellite={$satelliteStore} />
47+
{/if}
4548
{/if}
46-
{/if}
47-
</MissionControlGuard>
48-
</SatelliteGuard>
49-
</SatellitesLoader>
49+
</MissionControlGuard>
50+
</SatelliteGuard>
51+
</SatellitesLoader>
52+
</WalletLoader>
5053
</Tabs>
5154
</IdentityGuard>

0 commit comments

Comments
 (0)