feat(wallet-dashboard): add missing link for AllianceNo2 (#3825)

* feat(wallet-dashboard): add missing link for AllianceNo2 * fix: update names * fix: add missing import
iotaledger · Nov 6, 2024 · 568247e · 568247e
1 parent 900a641
commit 568247e
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 49 deletions.
diff --git a/apps/wallet-dashboard/app/layout.tsx b/apps/wallet-dashboard/app/layout.tsx
@@ -1,67 +1,32 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
-'use client';
 
-import './globals.css';
 import '@iota/dapp-kit/dist/index.css';
+import './globals.css';
 import { Inter } from 'next/font/google';
-import { GrowthBookProvider } from '@growthbook/growthbook-react';
-import { IotaClientProvider, lightTheme, darkTheme, WalletProvider } from '@iota/dapp-kit';
-import { getAllNetworks, getDefaultNetwork } from '@iota/iota-sdk/client';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import React from 'react';
-import '@iota/dapp-kit/dist/index.css';
-import { Popup, PopupProvider } from '@/components/Popup';
-import { growthbook } from '@/lib/utils';
-import { Toaster } from 'react-hot-toast';
-import { ThemeProvider } from '@/contexts';
+import { Metadata } from 'next';
+import { AppProviders } from '@/providers';
+import { FontLinks } from '@/components/FontLinks';
 
 const inter = Inter({ subsets: ['latin'] });
-growthbook.init();
+
+export const metadata: Metadata = {
+    title: 'IOTA Wallet Dashboard',
+    description: 'IOTA Wallet Dashboard',
+};
 
 export default function RootLayout({
     children,
 }: Readonly<{
     children: React.ReactNode;
 }>) {
-    const [queryClient] = React.useState(() => new QueryClient());
-    const bodyRef = React.useRef<HTMLBodyElement>(null);
-
-    const allNetworks = getAllNetworks();
-    const defaultNetwork = getDefaultNetwork();
-
     return (
         <html lang="en">
-            <body className={inter.className} ref={bodyRef}>
-                <GrowthBookProvider growthbook={growthbook}>
-                    <QueryClientProvider client={queryClient}>
-                        <IotaClientProvider networks={allNetworks} defaultNetwork={defaultNetwork}>
-                            <WalletProvider
-                                theme={[
-                                    {
-                                        variables: lightTheme,
-                                    },
-                                    {
-                                        selector: '.dark',
-                                        variables: darkTheme,
-                                    },
-                                ]}
-                            >
-                                <ThemeProvider>
-                                    <PopupProvider>
-                                        {children}
-                                        <Toaster
-                                            containerStyle={{
-                                                zIndex: 99999,
-                                            }}
-                                        />
-                                        <Popup />
-                                    </PopupProvider>
-                                </ThemeProvider>
-                            </WalletProvider>
-                        </IotaClientProvider>
-                    </QueryClientProvider>
-                </GrowthBookProvider>
+            <body className={inter.className}>
+                <AppProviders>
+                    <FontLinks />
+                    {children}
+                </AppProviders>
             </body>
         </html>
     );

diff --git a/apps/wallet-dashboard/components/FontLinks.tsx b/apps/wallet-dashboard/components/FontLinks.tsx
@@ -0,0 +1,8 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+const ALLIANCE_NO2_FONT_URL = 'https://webassets.iota.org/api/protected?face=alliance-no2';
+
+export function FontLinks() {
+    return <link rel="stylesheet" href={ALLIANCE_NO2_FONT_URL} />;
+}
diff --git a/apps/wallet-dashboard/providers/AppProviders.tsx b/apps/wallet-dashboard/providers/AppProviders.tsx
@@ -0,0 +1,55 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+'use client';
+
+import { PopupProvider } from '@/components';
+import { GrowthBookProvider } from '@growthbook/growthbook-react';
+import { IotaClientProvider, lightTheme, darkTheme, WalletProvider } from '@iota/dapp-kit';
+import { getAllNetworks, getDefaultNetwork } from '@iota/iota-sdk/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useState } from 'react';
+import { growthbook } from '@/lib/utils';
+import { Popup } from '@/components/Popup';
+import { Toaster } from 'react-hot-toast';
+import { ThemeProvider } from '@/contexts';
+
+growthbook.init();
+
+export function AppProviders({ children }: React.PropsWithChildren) {
+    const [queryClient] = useState(() => new QueryClient());
+    const allNetworks = getAllNetworks();
+    const defaultNetwork = getDefaultNetwork();
+
+    return (
+        <GrowthBookProvider growthbook={growthbook}>
+            <QueryClientProvider client={queryClient}>
+                <IotaClientProvider networks={allNetworks} defaultNetwork={defaultNetwork}>
+                    <WalletProvider
+                        theme={[
+                            {
+                                variables: lightTheme,
+                            },
+                            {
+                                selector: '.dark',
+                                variables: darkTheme,
+                            },
+                        ]}
+                    >
+                        <ThemeProvider>
+                            <PopupProvider>
+                                {children}
+                                <Toaster
+                                    containerStyle={{
+                                        zIndex: 99999,
+                                    }}
+                                />
+                                <Popup />
+                            </PopupProvider>
+                        </ThemeProvider>
+                    </WalletProvider>
+                </IotaClientProvider>
+            </QueryClientProvider>
+        </GrowthBookProvider>
+    );
+}
diff --git a/apps/wallet-dashboard/providers/index.ts b/apps/wallet-dashboard/providers/index.ts
@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './AppProviders';