Merge branch 'frontend-group-providers'

Author: thisconnect

frontends/web/src/app.tsx

@@ -40,12 +40,9 @@ import { Sidebar } from './components/sidebar/sidebar';
 import { Update } from './components/update/update';
 import { RouterWatcher } from './utils/route';
 import { Darkmode } from './components/darkmode/darkmode';
-import { DarkModeProvider } from './contexts/DarkmodeProvider';
-import { AppProvider } from './contexts/AppProvider';
 import { AuthRequired } from './components/auth/authrequired';
-import { WCWeb3WalletProvider } from './contexts/WCWeb3WalletProvider';
-import { RatesProvider } from './contexts/RatesProvider';
 import { WCSigningRequest } from './components/wallet-connect/incoming-signing-request';
+import { Providers } from './contexts/providers';
 
 export const App = () => {
   const { t } = useTranslation();
@@ -148,55 +145,49 @@ export const App = () => {
   const activeAccounts = accounts.filter(acct => acct.active);
   return (
     <ConnectedApp>
-      <AppProvider>
-        <DarkModeProvider>
-          <RatesProvider>
-            <WCWeb3WalletProvider>
-              <Darkmode />
-              <div className="app">
-                <AuthRequired/>
-                <Sidebar
-                  accounts={activeAccounts}
-                  deviceIDs={deviceIDs}
-                />
-                <div className="appContent flex flex-column flex-1" style={{ minWidth: 0 }}>
-                  <Update />
-                  <Banner msgKey="bitbox01" />
-                  <Banner msgKey="bitbox02" />
-                  <MobileDataWarning />
-                  <WCSigningRequest />
-                  <Aopp />
-                  <KeystoreConnectPrompt />
-                  {
-                    Object.entries(devices).map(([deviceID, productName]) => {
-                      if (productName === 'bitbox02') {
-                        return (
-                          <Fragment key={deviceID}>
-                            <BitBox02Wizard
-                              deviceID={deviceID}
-                            />
-                          </Fragment>
-                        );
-                      }
-                      return null;
-                    })
-                  }
-                  <AppRouter
-                    accounts={accounts}
-                    activeAccounts={activeAccounts}
-                    deviceIDs={deviceIDs}
-                    devices={devices}
-                    devicesKey={devicesKey}
-                  />
-                  <RouterWatcher />
-                </div>
-                <Alert />
-                <Confirm />
-              </div>
-            </WCWeb3WalletProvider>
-          </RatesProvider>
-        </DarkModeProvider>
-      </AppProvider>
+      <Providers>
+        <Darkmode />
+        <div className="app">
+          <AuthRequired/>
+          <Sidebar
+            accounts={activeAccounts}
+            deviceIDs={deviceIDs}
+          />
+          <div className="appContent flex flex-column flex-1" style={{ minWidth: 0 }}>
+            <Update />
+            <Banner msgKey="bitbox01" />
+            <Banner msgKey="bitbox02" />
+            <MobileDataWarning />
+            <WCSigningRequest />
+            <Aopp />
+            <KeystoreConnectPrompt />
+            {
+              Object.entries(devices).map(([deviceID, productName]) => {
+                if (productName === 'bitbox02') {
+                  return (
+                    <Fragment key={deviceID}>
+                      <BitBox02Wizard
+                        deviceID={deviceID}
+                      />
+                    </Fragment>
+                  );
+                }
+                return null;
+              })
+            }
+            <AppRouter
+              accounts={accounts}
+              activeAccounts={activeAccounts}
+              deviceIDs={deviceIDs}
+              devices={devices}
+              devicesKey={devicesKey}
+            />
+            <RouterWatcher />
+          </div>
+          <Alert />
+          <Confirm />
+        </div>
+      </Providers>
     </ConnectedApp>
   );
 };

frontends/web/src/contexts/providers.tsx

@@ -0,0 +1,39 @@
+/**
+ * Copyright 2024 Shift Crypto AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ReactNode } from 'react';
+import { DarkModeProvider } from './DarkmodeProvider';
+import { AppProvider } from './AppProvider';
+import { WCWeb3WalletProvider } from './WCWeb3WalletProvider';
+import { RatesProvider } from './RatesProvider';
+
+type Props = {
+  children: ReactNode;
+};
+
+export const Providers = ({ children }: Props) => {
+  return (
+    <AppProvider>
+      <DarkModeProvider>
+        <RatesProvider>
+          <WCWeb3WalletProvider>
+            {children}
+          </WCWeb3WalletProvider>
+        </RatesProvider>
+      </DarkModeProvider>
+    </AppProvider>
+  );
+};