chore: add warning update on bridge (#188)

Co-authored-by: Hélcio Franco <helciofranco@me.com>
FuelLabs · Feb 22, 2024 · cec8945 · cec8945
1 parent 934392c
commit cec8945
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 5 deletions.
diff --git a/packages/app-portal/src/systems/Core/components/Header.tsx b/packages/app-portal/src/systems/Core/components/Header.tsx
@@ -6,7 +6,7 @@ import { Pages } from '~/types';
 export function Header() {
   return (
     <Nav>
-      <Nav.Desktop>
+      <Nav.Desktop css={{ zIndex: 10 }}>
         <Nav.Logo />
         <Nav.Spacer />
         <Nav.Menu>
@@ -22,7 +22,7 @@ export function Header() {
         </Nav.Menu>
         <Nav.ThemeToggle />
       </Nav.Desktop>
-      <Nav.Mobile>
+      <Nav.Mobile css={{ zIndex: 10 }}>
         <Nav.MobileContent>
           <Nav.Logo />
           <Nav.ThemeToggle />

diff --git a/packages/app-portal/src/systems/Settings/providers/FuelConnectProvider.tsx b/packages/app-portal/src/systems/Settings/providers/FuelConnectProvider.tsx
@@ -1,5 +1,8 @@
 import { FuelProvider } from '@fuel-wallet/react';
-import { defaultConnectors } from '@fuel-wallet/sdk';
+import {
+  FuelWalletConnector,
+  FuelWalletDevelopmentConnector,
+} from '@fuel-wallet/sdk';
 import type { ReactNode } from 'react';
 import { IS_PREVIEW, IS_TEST } from '~/config';
 
@@ -19,7 +22,10 @@ export function FuelConnectProvider({ children }: ProvidersProps) {
       theme={theme}
       fuelConfig={{
         devMode: IS_DEV,
-        connnectors: defaultConnectors(),
+        connectors: [
+          new FuelWalletConnector(),
+          new FuelWalletDevelopmentConnector(),
+        ],
       }}
     >
       {children}

diff --git a/packages/app-portal/src/systems/Settings/providers/FuelUiProvider.tsx b/packages/app-portal/src/systems/Settings/providers/FuelUiProvider.tsx
@@ -1,13 +1,19 @@
 import { cssObj, globalCss } from '@fuel-ui/css';
 import {
+  Box,
+  Button,
+  Dialog,
+  Icon,
+  Link,
   ThemeProvider,
   darkTheme,
   lightTheme,
   loadIcons,
   setFuelThemes,
 } from '@fuel-ui/react';
-import type { PropsWithChildren } from 'react';
+import { PropsWithChildren, useState } from 'react';
 
+import { useQuery } from '@tanstack/react-query';
 // eslint-disable-next-line import/no-unresolved
 import icons from '/icons/sprite.svg';
 
@@ -30,10 +36,84 @@ setFuelThemes({
 });
 
 export function FuelUiProvider({ children }: PropsWithChildren) {
+  const [founded, setFounded] = useState(false);
+  const { data: isOldWallet, isLoading } = useQuery(
+    ['network'],
+    async () => {
+      const oldWindowFuel = (window as any).fuel as any;
+      const fuelet = (window as any).fuelet;
+      if (!oldWindowFuel && !founded) {
+        throw new Error('No Fuel Wallet found');
+      }
+      if (!oldWindowFuel && founded) {
+        setFounded(true);
+        return;
+      }
+      const version = window.fuel?.connectorName;
+      return fuelet ? false : Boolean(version);
+    },
+    {
+      retry: 5,
+      retryDelay: 1000,
+    },
+  );
+
   return (
     <ThemeProvider>
+      {!isLoading && isOldWallet && (
+        <Box css={styles.dialog}>
+          <Box css={styles.content}>
+            Your wallet version is incompatible with this application. Please
+            update your wallet for version 0.15.2.
+            <Button
+              as="a"
+              size="sm"
+              variant="solid"
+              intent="primary"
+              href="https://chromewebstore.google.com/detail/fuel-wallet/dldjpboieedgcmpkchcjcbijingjcgok"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Update Wallet
+            </Button>
+          </Box>
+        </Box>
+      )}
+
       {globalCss(globalStyles)()}
       {children}
     </ThemeProvider>
   );
 }
+
+const OVERLAY_HEIGHT = 100;
+const OVERLAY_WIDTH = 300;
+
+const styles = {
+  dialog: cssObj({
+    zIndex: 1,
+    top: 64,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    position: 'fixed',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backdropFilter: 'blur(15px)',
+  }),
+  content: cssObj({
+    borderRadius: '$md',
+    padding: '$4',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '$4',
+    width: OVERLAY_WIDTH,
+    minHeight: OVERLAY_HEIGHT,
+    maxWidth: OVERLAY_WIDTH,
+    maxHeight: 'none',
+    backgroundColor: '$cardBg',
+    textAlign: 'center',
+    boxShadow: '$md',
+  }),
+};