diff --git a/packages/docs/docs/install.mdx b/packages/docs/docs/install.mdx index e9087c279..0d3a3d122 100644 --- a/packages/docs/docs/install.mdx +++ b/packages/docs/docs/install.mdx @@ -8,19 +8,21 @@ title: Install -## 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 ; - 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. + + \ No newline at end of file diff --git a/packages/docs/src/components/DownloadWalletZip.tsx b/packages/docs/src/components/DownloadWalletZip.tsx index d8b5f8d32..229e97dc5 100644 --- 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 ( - - FuelWallet zip file - - ); + const title = useExtensionTitle(); + + return {`${title} zip file`}; } diff --git a/packages/docs/src/components/ExampleBox.tsx b/packages/docs/src/components/ExampleBox.tsx index f6ac81311..e53d3b8b4 100644 --- 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({ Wallet not detected - Please install the Fuel Wallet to use this demo. + Please install {extensionName} to use this demo. ); diff --git a/packages/docs/src/components/FuelBrandingDropdown.tsx b/packages/docs/src/components/FuelBrandingDropdown.tsx new file mode 100644 index 000000000..4cde44848 --- /dev/null +++ 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.PRODUCTION]: 'Fuel Wallet', + [Environment.NEXT]: 'Fuel Wallet Next', + [Environment.STAGING]: 'Fuel Wallet Development', +}; + +const environments: Array = 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 ( + + + + + { + onSelect(e as Environment); + }} + > + {environments.map((env) => ( + + + + ))} + + + ); +} diff --git a/packages/docs/src/components/Header.tsx b/packages/docs/src/components/Header.tsx index 0895c1a56..d3489e8af 100644 --- 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 ( - - - - Fuel Wallet - - beta - - - + @@ -48,26 +40,6 @@ export function Header() { - - {IS_PUBLIC_PREVIEW ? ( - - - - - ) : ( - - - - )} - @@ -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 new file mode 100644 index 000000000..29d8f1a65 --- /dev/null +++ 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 ( + + + + {title} + + beta + + + + ); +} + +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 index 93a1e1e31..9c0f636a5 100644 --- a/packages/docs/src/components/InstallSection.tsx +++ b/packages/docs/src/components/InstallSection.tsx @@ -1,6 +1,7 @@ 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'; @@ -8,12 +9,16 @@ import edgeImg from '../../public/icons/browser/edge.png'; import { INSTALL_LINK } from '../constants'; export function InstallSection() { + const title = useExtensionTitle(); + return ( - THE OFFICIAL + + The Official + Fuel Wallet @@ -23,11 +28,13 @@ export function InstallSection() { - - - + {!!INSTALL_LINK && ( + + + + )} Supported on @@ -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 index 60a315606..4bacab5da 100644 --- 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 ( <> diff --git a/packages/docs/src/components/Provider.tsx b/packages/docs/src/components/Provider.tsx index 7b9955013..81db3e7c7 100644 --- 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, }; diff --git a/packages/docs/src/components/WalletVersions.tsx b/packages/docs/src/components/WalletVersions.tsx new file mode 100644 index 000000000..742cec253 --- /dev/null +++ b/packages/docs/src/components/WalletVersions.tsx @@ -0,0 +1,44 @@ +import { cssObj } from '@fuel-ui/css'; +import { Box, Text } from '@fuel-ui/react'; +import { Heading } from '~/src/components/Heading'; +import { Link } from '~/src/components/Link'; +import { UL } from '~/src/components/List'; +import { + WALLET_LINK_NEXT, + WALLET_LINK_PROD, + WALLET_LINK_STAGING, +} from '~/src/constants'; + +export function WalletVersions() { + return ( +
+ Wallet Versions +
    +
  • + + Fuel Wallet - Stable - The + official version on Chrome Store. + +
    • +
  • + + Fuel Wallet Development - + Development - The development version on Chrome Store + +
    • +
  • + + Fuel Wallet Next - Latest - + Contains the latest changes. Available only in zip format + +
    • +
+
+ ); +} + +const styles = { + root: cssObj({ + marginTop: 100, + }), +}; diff --git a/packages/docs/src/constants.ts b/packages/docs/src/constants.ts index 0faa76e5f..753e7720a 100644 --- a/packages/docs/src/constants.ts +++ b/packages/docs/src/constants.ts @@ -39,6 +39,20 @@ export const IS_PUBLIC_PREVIEW = process.env.NEXT_PUBLIC_PREVIEW === 'true'; // If preview link them download from the path otherwise download from the main // branch version of the documentation. -export const DOWNLOAD_LINK = `${ - IS_PUBLIC_PREVIEW ? '' : 'https://next-wallet.fuel.network' -}/app/fuel-wallet-${process.env.NEXT_PUBLIC_APP_VERSION}.zip`; +export const WALLET_LINK_NEXT = 'https://next-wallet.fuel.network'; +export const WALLET_LINK_STAGING = 'https://dev-wallet.fuel.network'; +export const WALLET_LINK_PROD = 'https://wallet.fuel.network'; +export const WALLET_DOWNLOAD_PATH = `/app/fuel-wallet-${process.env.NEXT_PUBLIC_APP_VERSION}.zip`; +export const CURRENT_ENV = process.env.NEXT_PUBLIC_CURRENT_ENV || 'NEXT'; + +export enum Environment { + PRODUCTION = 'PRODUCTION', + STAGING = 'STAGING', + NEXT = 'NEXT', +} + +export const ENV_TITLES: Record = { + [Environment.PRODUCTION]: 'Fuel Wallet', + [Environment.NEXT]: 'Fuel Wallet Next', + [Environment.STAGING]: 'Fuel Wallet Development', +}; diff --git a/packages/docs/src/hooks/useCurrentEnv.tsx b/packages/docs/src/hooks/useCurrentEnv.tsx new file mode 100644 index 000000000..48959404e --- /dev/null +++ b/packages/docs/src/hooks/useCurrentEnv.tsx @@ -0,0 +1,5 @@ +import { CURRENT_ENV, Environment } from '../constants'; + +export function useCurrentEnv(): Environment { + return Environment[CURRENT_ENV]; +} diff --git a/packages/docs/src/hooks/useExtensionTitle.tsx b/packages/docs/src/hooks/useExtensionTitle.tsx new file mode 100644 index 000000000..6fc246e9b --- /dev/null +++ b/packages/docs/src/hooks/useExtensionTitle.tsx @@ -0,0 +1,7 @@ +import { useIsPreviewEnv } from './useIsPreviewEnv'; + +export function useExtensionTitle() { + const isPreview = useIsPreviewEnv(); + + return isPreview ? 'Fuel Wallet Development' : 'Fuel Wallet'; +} diff --git a/packages/docs/src/hooks/useIsPreviewEnv.tsx b/packages/docs/src/hooks/useIsPreviewEnv.tsx new file mode 100644 index 000000000..599e49c48 --- /dev/null +++ b/packages/docs/src/hooks/useIsPreviewEnv.tsx @@ -0,0 +1,5 @@ +import { IS_PUBLIC_PREVIEW } from '../constants'; + +export function useIsPreviewEnv() { + return !!IS_PUBLIC_PREVIEW; +}