mutiny-web/src/routes/index.tsx at 19d1752dc873d94ec38659b4b6d5b653865745e1 · MutinyWallet/mutiny-web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import { Show, Suspense } from "solid-js";
import { A } from "solid-start";

import scan from "~/assets/icons/scan.svg";
import settings from "~/assets/icons/settings.svg";
import {
    BalanceBox,
    BetaWarningModal,
    Card,
    CombinedActivity,
    DecryptDialog,
    DefaultMain,
    LoadingIndicator,
    LoadingShimmer,
    Logo,
    NavBar,
    OnboardWarning,
    PendingNwc,
    ReloadPrompt,
    SafeArea,
    VStack
} from "~/components";
import { useI18n } from "~/i18n/context";
import { FeedbackLink } from "~/routes/Feedback";
import { useMegaStore } from "~/state/megaStore";
import { registerSW } from 'virtual:pwa-register';

export default function App() {
    registerSW({ immediate: true });

    const i18n = useI18n();
    const [state, _actions] = useMegaStore();

    return (
        <SafeArea>
            <DefaultMain>
                <LoadingIndicator />
                <header class="mb-2 mt-4 flex w-full items-center justify-between">
                    <div class="flex items-center gap-2">
                        <Logo />
                        <Show
                            when={
                                !state.wallet_loading &&
                                state.mutiny_wallet?.get_network() !== "bitcoin"
                            }
                        >
                            <div class="text-white-400 -my-1 box-border w-fit rounded bg-neutral-800 px-2 py-1 text-xs  uppercase">
                                {state.mutiny_wallet?.get_network()}
                            </div>
                        </Show>
                        <Show when={state.settings?.selfhosted === "true"}>
                            <div class="text-white-400 -my-1 box-border w-fit rounded bg-neutral-800 px-2 py-1 text-xs  uppercase">
                                {i18n.t("common.self_hosted")}
                            </div>
                        </Show>
                    </div>
                    <div class="flex items-center gap-2">
                        <A
                            class="rounded-lg p-2 hover:bg-white/5 active:bg-m-blue md:hidden"
                            href="/scanner"
                        >
                            <img src={scan} alt="Scan" class="h-6 w-6" />
                        </A>
                        <A
                            class="rounded-lg p-2 hover:bg-white/5 active:bg-m-blue md:hidden"
                            href="/settings"
                        >
                            <img
                                src={settings}
                                alt="Settings"
                                class="h-6 w-6"
                            />
                        </A>
                    </div>
                </header>
                <Show when={!state.wallet_loading}>
                    <OnboardWarning />
                    <ReloadPrompt />
                </Show>
                <BalanceBox loading={state.wallet_loading} />
                <Suspense>
                    <Show when={!state.wallet_loading && !state.safe_mode}>
                        <PendingNwc />
                    </Show>
                </Suspense>
                <Card title={i18n.t("activity.title")}>
                    <div class="p-1" />
                    <VStack>
                        <Suspense>
                            <Show
                                when={!state.wallet_loading}
                                fallback={<LoadingShimmer />}
                            >
                                <CombinedActivity limit={3} />
                            </Show>
                        </Suspense>
                    </VStack>
                </Card>
                <div class="mt-4 self-center">
                    <FeedbackLink />
                </div>
            </DefaultMain>
            <DecryptDialog />
            <BetaWarningModal />
            <NavBar activeTab="home" />
        </SafeArea>
    );
}