feat: docs update (#1391)

- Closes #1320 - Closes #1369 - Closes #1291 Co-authored-by: Luiz Gomes <[email protected]> Co-authored-by: LuizAsFight <[email protected]>
FuelLabs · Jun 27, 2024 · 831e3d2 · 831e3d2
1 parent 3966aa9
commit 831e3d2
Show file tree

Hide file tree

Showing 14 changed files with 253 additions and 74 deletions.
diff --git a/packages/docs/docs/install.mdx b/packages/docs/docs/install.mdx
@@ -8,19 +8,21 @@ title: Install
 
 <SDKSection />
 
-## Install from source code
+# Install from source code
 
-You can also install the development version of Fuel Wallet, built directly from our source code. To do this:
+You can also install directly from our source code through a zip file. Here's how you can do it:
 
 - Download <DownloadWalletZip />;
 - Inside Chrome or Brave;
-- Open the extensions page; it can be done by:
-  - Clicking on settings -> extensions or;
-  - Accessing `brave://extensions/` or `chrome://extensions/`.
+- Open the extensions page:
+  - Click on settings -> extensions, or;
+  - Access `brave://extensions/` or `chrome://extensions/`.
 - Enable the "Developer mode" switch on the top right
-- Load `fuel-wallet.zip` by:
-  - Dragging your downloaded Fuel wallet file and dropping it in the extensions page or;
-  - Clicking on `Load unpacked` and selecting the file.
-- If all goes right, an onboarding page will instantly open.
+- Load `fuel-wallet.zip`:
+  - Drag your downloaded Fuel wallet file and drop it in the extensions page, or;
+  - Click on `Load unpacked` and select the downloaded zip file.
+- If all goes right, the wallet onboard page will open instantly.
 
 The Fuel Wallet extension is now ready to use.
+
+<WalletVersions />
diff --git a/packages/docs/src/components/DownloadWalletZip.tsx b/packages/docs/src/components/DownloadWalletZip.tsx
@@ -1,11 +1,9 @@
-import { DOWNLOAD_LINK } from '../constants';
-
+import { WALLET_DOWNLOAD_PATH } from '../constants';
+import { useExtensionTitle } from '../hooks/useExtensionTitle';
 import { Link } from './Link';
 
 export function DownloadWalletZip() {
-  return (
-    <Link href={DOWNLOAD_LINK} download>
-      FuelWallet zip file
-    </Link>
-  );
+  const title = useExtensionTitle();
+
+  return <Link href={WALLET_DOWNLOAD_PATH}>{`${title} zip file`}</Link>;
 }
diff --git a/packages/docs/src/components/ExampleBox.tsx b/packages/docs/src/components/ExampleBox.tsx
@@ -5,6 +5,7 @@ import type { ReactNode } from 'react';
 import { useFuel } from '../hooks/useFuel';
 import { capitalize } from '../lib/str';
 
+import { useExtensionTitle } from '../hooks/useExtensionTitle';
 import { Heading } from './Heading';
 
 export function ExampleBox({
@@ -20,6 +21,7 @@ export function ExampleBox({
   overlayContent?: any;
   showNotDetectedOverlay?: boolean;
 }) {
+  const extensionName = useExtensionTitle();
   const [, notDetected, isLoading] = useFuel();
   const errorMsg = error?.response?.errors?.[0]?.message || error?.message;
   const shouldShowRawError = errorMsg !== error?.message;
@@ -43,7 +45,7 @@ export function ExampleBox({
     <Box.Stack css={styles.overlay} justify="center" align="center">
       <Heading as="h6">Wallet not detected</Heading>
       <Link href="/docs/install">
-        Please install the Fuel Wallet to use this demo.
+        Please install {extensionName} to use this demo.
       </Link>
     </Box.Stack>
   );

diff --git a/packages/docs/src/components/FuelBrandingDropdown.tsx b/packages/docs/src/components/FuelBrandingDropdown.tsx
@@ -0,0 +1,95 @@
+import { Button, Dropdown, Icon, IconButton } from '@fuel-ui/react';
+import { usePathname } from 'next/navigation';
+import { useCurrentEnv } from '~/src/hooks/useCurrentEnv';
+import {
+  Environment,
+  WALLET_LINK_NEXT,
+  WALLET_LINK_PROD,
+  WALLET_LINK_STAGING,
+} from '../constants';
+import { HeaderFuelBranding } from './HeaderFuelBranding';
+
+const environmentsTitles: Record<Environment, string> = {
+  [Environment.PRODUCTION]: 'Fuel Wallet',
+  [Environment.NEXT]: 'Fuel Wallet Next',
+  [Environment.STAGING]: 'Fuel Wallet Development',
+};
+
+const environments: Array<Environment> = Object.values(Environment);
+
+export function FuelBrandingDropdown() {
+  const currentEnv = useCurrentEnv();
+  const currentPath = usePathname();
+  const onSelect = (e: Environment) => {
+    switch (e) {
+      case Environment.STAGING:
+        window.location.href = `${WALLET_LINK_STAGING}${currentPath}`;
+        break;
+      case Environment.NEXT:
+        window.location.href = `${WALLET_LINK_NEXT}${currentPath}`;
+        break;
+      default:
+        window.location.href = `${WALLET_LINK_PROD}${currentPath}`;
+    }
+  };
+
+  return (
+    <Dropdown
+      popoverProps={{
+        alignOffset: -10,
+        align: 'start',
+        sideOffset: -10,
+      }}
+    >
+      <Dropdown.Trigger asChild>
+        <Button
+          variant="link"
+          aria-label="Change Environment"
+          css={{
+            borderWidth: '0px',
+            backgorundColor: 'transparent',
+            alignItems: 'center',
+            gap: '$2',
+            flexDirection: 'row',
+            color: 'transparent',
+            border: 'none',
+            '&:hover': {
+              color: 'transparent !important',
+              border: 'none !important',
+            },
+            '&:focus-visible': {
+              outline: 'none',
+            },
+          }}
+        >
+          <HeaderFuelBranding title={environmentsTitles[currentEnv]} />
+          <Icon icon="ChevronDown" />
+        </Button>
+      </Dropdown.Trigger>
+      <Dropdown.Menu
+        css={{
+          gap: '$2',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+        onAction={(e) => {
+          onSelect(e as Environment);
+        }}
+      >
+        {environments.map((env) => (
+          <Dropdown.MenuItem
+            key={env}
+            textValue={environmentsTitles[env]}
+            aria-label={`fuel_environment-dropdown-item-${env}`}
+            css={{
+              paddingTop: '$3',
+              paddingBottom: '$3',
+            }}
+          >
+            <HeaderFuelBranding title={environmentsTitles[env]} />
+          </Dropdown.MenuItem>
+        ))}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+}
diff --git a/packages/docs/src/components/Header.tsx b/packages/docs/src/components/Header.tsx
@@ -1,10 +1,10 @@
 import { cssObj } from '@fuel-ui/css';
-import { Box, Button, FuelLogo, Icon } from '@fuel-ui/react';
+import { Box, Icon } from '@fuel-ui/react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { DOWNLOAD_LINK, INSTALL_LINK, IS_PUBLIC_PREVIEW } from '../constants';
-
+import { FuelBrandingDropdown } from '../components/FuelBrandingDropdown';
+import { IS_PUBLIC_PREVIEW } from '../constants';
 import { MobileMenu } from './MobileMenu';
 import { Search } from './Search';
 
@@ -15,15 +15,7 @@ export function Header() {
   return (
     <Box.Flex as="header" css={styles.root}>
       <Box.Flex css={{ alignItems: 'center', flex: 1 }}>
-        <Link href="/" className="logo">
-          <FuelLogo size={40} />
-          <Box.Flex css={styles.logoText}>
-            <span>Fuel Wallet</span>
-            <Box as="span" css={styles.version}>
-              beta
-            </Box>
-          </Box.Flex>
-        </Link>
+        <FuelBrandingDropdown />
       </Box.Flex>
       <Box css={styles.desktop}>
         <Box.Flex css={styles.menu}>
@@ -48,26 +40,6 @@ export function Header() {
           </a>
         </Box.Flex>
         <Search />
-        <Box css={{ ml: '$8' }}>
-          {IS_PUBLIC_PREVIEW ? (
-            <Box.Flex gap="$2">
-              <Button intent="base" as="a" href={DOWNLOAD_LINK}>
-                Download Wallet
-              </Button>
-              <Button
-                intent="primary"
-                as="a"
-                href={process.env.NEXT_PUBLIC_APP_URL}
-              >
-                Open Wallet
-              </Button>
-            </Box.Flex>
-          ) : (
-            <a href={INSTALL_LINK} target="_blank" rel="noreferrer">
-              <Button intent="primary">Install Fuel Wallet</Button>
-            </a>
-          )}
-        </Box>
       </Box>
       <MobileMenu />
     </Box.Flex>
@@ -102,21 +74,6 @@ const styles = {
       px: '$8',
     },
   }),
-  logoText: cssObj({
-    pl: '$6',
-    alignItems: 'center',
-    flex: 1,
-    fontSize: '$2xl',
-    fontWeight: '$normal',
-    color: 'white',
-    letterSpacing: '-0.05em',
-  }),
-  version: cssObj({
-    ml: '$2',
-    color: '$intentsBase8',
-    fontSize: '$sm',
-    fontStyle: 'italic',
-  }),
   desktop: cssObj({
     display: 'none',
 

diff --git a/packages/docs/src/components/HeaderFuelBranding.tsx b/packages/docs/src/components/HeaderFuelBranding.tsx
@@ -0,0 +1,36 @@
+import { cssObj } from '@fuel-ui/css';
+import { Box, FuelLogo } from '@fuel-ui/react';
+
+export function HeaderFuelBranding({
+  title = 'Fuel Wallet',
+}: { title: string }) {
+  return (
+    <Box.Flex css={{ alignItems: 'center' }}>
+      <FuelLogo size={40} />
+      <Box.Flex css={styles.logoText}>
+        <span>{title}</span>
+        <Box as="span" css={styles.version}>
+          beta
+        </Box>
+      </Box.Flex>
+    </Box.Flex>
+  );
+}
+
+const styles = {
+  logoText: cssObj({
+    pl: '$6',
+    alignItems: 'center',
+    flex: 1,
+    fontSize: '$2xl',
+    fontWeight: '$normal',
+    color: 'white',
+    letterSpacing: '-0.05em',
+  }),
+  version: cssObj({
+    ml: '$2',
+    color: '$intentsBase8',
+    fontSize: '$sm',
+    fontStyle: 'italic',
+  }),
+};
diff --git a/packages/docs/src/components/InstallSection.tsx b/packages/docs/src/components/InstallSection.tsx
@@ -1,19 +1,24 @@
 import { cssObj } from '@fuel-ui/css';
 import { Box, Button, Heading, Image, Text } from '@fuel-ui/react';
 
+import { useExtensionTitle } from '~/src/hooks/useExtensionTitle';
 import walletPrivewImg from '../../public/fuell-wallet-preview.png';
 import braveImg from '../../public/icons/browser/brave.png';
 import chomreImg from '../../public/icons/browser/chrome.png';
 import edgeImg from '../../public/icons/browser/edge.png';
 import { INSTALL_LINK } from '../constants';
 
 export function InstallSection() {
+  const title = useExtensionTitle();
+
   return (
     <Box.Flex css={styles.root} justify={'center'}>
       <Box.Flex css={styles.content} justify="space-between">
         <Box.Stack css={styles.head}>
           <Box.Stack css={styles.header}>
-            <Heading color="brand">THE OFFICIAL</Heading>
+            <Heading color="brand" css={styles.headerIntro}>
+              The Official
+            </Heading>
             <Heading css={styles.title} fontSize={'7xl'}>
               Fuel Wallet
             </Heading>
@@ -23,11 +28,13 @@ export function InstallSection() {
             </Text>
           </Box.Stack>
           <Box.Stack css={styles.action} justify={'end'}>
-            <a href={INSTALL_LINK} target="_blank" rel="noreferrer">
-              <Button size="lg" intent="primary">
-                Install Fuel Wallet
-              </Button>
-            </a>
+            {!!INSTALL_LINK && (
+              <a href={INSTALL_LINK} target="_blank" rel="noreferrer">
+                <Button size="lg" intent="primary">
+                  Install {title}
+                </Button>
+              </a>
+            )}
             <Box.Stack>
               <Text fontSize="sm">Supported on</Text>
               <Box.Flex gap={'$2'}>
@@ -75,6 +82,9 @@ const styles = {
   header: cssObj({
     marginTop: '$4',
   }),
+  headerIntro: cssObj({
+    textTransform: 'uppercase',
+  }),
   title: cssObj({
     marginTop: 0,
   }),

diff --git a/packages/docs/src/components/Layout.tsx b/packages/docs/src/components/Layout.tsx
@@ -5,6 +5,7 @@ import type { ReactNode } from 'react';
 
 import { META_DESC, META_OGIMG } from '../constants';
 
+import { useExtensionTitle } from '../hooks/useExtensionTitle';
 import { Header } from './Header';
 
 type LayoutProps = {
@@ -13,7 +14,8 @@ type LayoutProps = {
 };
 
 export function Layout({ title, children }: LayoutProps) {
-  const titleText = title ? `${title} | Fuel Wallet` : 'Fuel Wallet';
+  const extensionName = useExtensionTitle();
+  const titleText = `${title ? `${title} ` : ''} | ${extensionName}`;
   return (
     <>
       <Head>

diff --git a/packages/docs/src/components/Provider.tsx b/packages/docs/src/components/Provider.tsx
@@ -34,6 +34,7 @@ import Player from './Player';
 import { Pre } from './Pre';
 import { SDKSection } from './SDKSection';
 import { TD, TH, Table } from './Table';
+import { WalletVersions } from './WalletVersions';
 
 const components = {
   BadgeDeprecated,
@@ -61,6 +62,7 @@ const components = {
   Examples,
   Demo,
   DownloadWalletZip,
+  WalletVersions,
   HStack,
 };