feat: enforce target network

.changeset/happy-snakes-change.md

@@ -0,0 +1,5 @@
+---
+"@fuels/react": minor
+---
+
+Add FuelChainProvider

.changeset/shiny-coats-yawn.md

@@ -0,0 +1,5 @@
+---
+"@fuels/react": patch
+---
+
+Moved icons and global stylings to HOC

examples/react-app/src/main.tsx

@@ -57,6 +57,7 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
     <QueryClientProvider client={queryClient}>
       <FuelProvider
         theme="dark"
+        chainId={0}
         fuelConfig={{
           connectors: defaultConnectors({
             devMode: true,

packages/react/src/ui/Connect/themes.tsx → packages/react/src/constants/themes.tsx

@@ -31,6 +31,8 @@ const lightTheme = {
   '--fuel-green-11': '#008347',
   '--fuel-blue-3': '#E6F4FE',
   '--fuel-blue-11': '#0D74CE',
+  '--fuel-color-light-gray': 'rgb(83 79 79 / 84%)',
+  '--fuel-separator-color': 'rgb(83 79 79 / 13%)',
 };
 
 const darkTheme = {
@@ -50,6 +52,8 @@ const darkTheme = {
   '--fuel-green-11': '#00DD75',
   '--fuel-blue-3': '#0D2847',
   '--fuel-blue-11': '#70B9FF',
+  '--fuel-color-light-gray': 'rgb(165 165 165 / 84%)',
+  '--fuel-separator-color': 'rgb(165 165 165 / 13%)',
 };
 
 type CustomTheme = Partial<typeof commonTheme & typeof lightTheme>;

packages/react/src/ui/Connect/icons/BackIcon.tsx → packages/react/src/icons/BackIcon.tsx

@@ -1,4 +1,4 @@
-import type { SvgIconProps } from '../../types';
+import type { SvgIconProps } from '../types';
 
 export function BackIcon({ size, ...props }: SvgIconProps) {
   return (

packages/react/src/ui/Connect/icons/CloseIcon.tsx → packages/react/src/icons/CloseIcon.tsx

@@ -1,4 +1,4 @@
-import type { SvgIconProps } from '../../../ui/types';
+import type { SvgIconProps } from '../types';
 
 export function CloseIcon({ size, ...props }: SvgIconProps) {
   return (

packages/react/src/ui/Connect/icons/FuelWalletDevelopmentIcon.tsx → packages/react/src/icons/FuelWalletDevelopmentIcon.tsx

@@ -1,4 +1,4 @@
-import type { SvgIconProps } from '../../types';
+import type { SvgIconProps } from '../types';
 
 export function FuelWalletDevelopmentIcon({ size, ...props }: SvgIconProps) {
   return (

packages/react/src/ui/Connect/icons/FuelWalletIcon.tsx → packages/react/src/icons/FuelWalletIcon.tsx

@@ -1,4 +1,4 @@
-import type { SvgIconProps } from '../../types';
+import type { SvgIconProps } from '../types';
 
 export function FuelWalletIcon({ size, ...props }: SvgIconProps) {
   return (

packages/react/src/ui/Connect/icons/FueletIcon.tsx → packages/react/src/icons/FueletIcon.tsx

@@ -1,4 +1,4 @@
-import type { SvgIconProps } from '../../../ui/types';
+import type { SvgIconProps } from '../types';
 
 export function FueletIcon({ theme, size, ...props }: SvgIconProps) {
   return (

packages/react/src/ui/Connect/icons/InfoCircleIcon.tsx → packages/react/src/icons/InfoCircleIcon.tsx

@@ -1,4 +1,4 @@
-import type { SvgIconProps } from '../../../ui/types';
+import type { SvgIconProps } from '../types';
 
 export function InfoCircleIcon({
   theme,

packages/react/src/ui/Connect/icons/NoFundIcon.tsx → packages/react/src/icons/NoFundIcon.tsx

@@ -1,4 +1,4 @@
-import type { SvgIconProps } from '../../types';
+import type { SvgIconProps } from '../types';
 
 export function NoFundIcon({ size, ...props }: SvgIconProps) {
   return (

packages/react/src/providers/FuelChainProvider.tsx

@@ -0,0 +1,24 @@
+import type { Network } from 'fuels';
+import { createContext, useContext } from 'react';
+
+const context = createContext<Network['chainId'] | null | undefined>(null);
+
+/**
+ * A hook that returns the target chain id to be enforced on the active provider.
+ *
+ * @examples
+ * ```ts
+ * const { chainId } = useFuelChain();
+ * console.log(chainId);
+ * ```
+ */
+export function useFuelChain() {
+  const contextData = useContext(context);
+
+  if (contextData === null) {
+    throw new Error('useFuelChain must be used within a FuelChainProvider');
+  }
+  return { chainId: contextData };
+}
+
+export const FuelChainProvider = context.Provider;

packages/react/src/providers/FuelProvider.tsx

@@ -2,7 +2,9 @@ import type { FuelConfig } from 'fuels';
 
 import { Connect } from '../ui/Connect';
 
-import { FuelHooksProvider } from './FuelHooksProvider';
+import { FuelChainProvider } from '../providers/FuelChainProvider';
+import { NetworkMonitor } from '../ui/NetworkMonitor';
+import { FuelHooksProvider, useFuel } from './FuelHooksProvider';
 import { FuelUIProvider, type FuelUIProviderProps } from './FuelUIProvider';
 
 export { useFuel } from './FuelHooksProvider';
@@ -11,26 +13,36 @@ export { useConnectUI } from './FuelUIProvider';
 type FuelProviderProps = {
   ui?: boolean;
   fuelConfig?: FuelConfig;
+  /**
+   * Whether enforce connectors to be on the desired the network.
+   * @default true
+   */
+  chainId?: number;
 } & FuelUIProviderProps;
 
 export function FuelProvider({
-  theme,
+  theme: _theme,
   children,
   fuelConfig,
   bridgeURL,
   ui = true,
+  chainId,
 }: FuelProviderProps) {
+  const theme = _theme || 'light';
   if (ui) {
     return (
       <FuelHooksProvider fuelConfig={fuelConfig}>
-        <FuelUIProvider
-          theme={theme}
-          bridgeURL={bridgeURL}
-          fuelConfig={fuelConfig}
-        >
-          <Connect />
-          {children}
-        </FuelUIProvider>
+        <FuelChainProvider value={chainId ?? undefined}>
+          <FuelUIProvider
+            theme={theme}
+            bridgeURL={bridgeURL}
+            fuelConfig={fuelConfig}
+          >
+            <Connect />
+            {chainId != null && <NetworkMonitor theme={theme} />}
+            {children}
+          </FuelUIProvider>
+        </FuelChainProvider>
       </FuelHooksProvider>
     );
   }

packages/react/src/providers/index.tsx

@@ -1 +1,2 @@
 export * from './FuelProvider';
+export * from './FuelChainProvider';

packages/react/src/types.ts

@@ -15,4 +15,11 @@ export type Connector = {
   installed: boolean;
 };
 
+export type SvgIconProps = {
+  theme?: string;
+  className?: string;
+  onClick?: () => void;
+  size: number;
+};
+
 export type ConnectorList = Array<Connector>;

packages/react/src/ui/Connect/components/Bridge/Bridge.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { BRIDGE_URL } from '../../../../config';
+import { NoFundIcon } from '../../../../icons/NoFundIcon';
 import { useConnectUI } from '../../../../providers/FuelUIProvider';
-import { NoFundIcon } from '../../icons/NoFundIcon';
 import {
   ConnectorButton,
   ConnectorButtonPrimary,

packages/react/src/ui/Connect/components/Connector/Connecting.tsx

@@ -3,7 +3,7 @@ import type { FuelConnector } from 'fuels';
 import { useConnectUI } from '../../../../providers/FuelUIProvider';
 import { ConnectorIcon } from '../ConnectorIcon';
 
-import { Spinner } from '../Spinner/Spinner';
+import { Spinner } from '../../../../icons/Spinner';
 import {
   ConnectorButton,
   ConnectorButtonPrimary,

packages/react/src/ui/Connect/components/ConnectorIcon.tsx

@@ -1,9 +1,9 @@
 import type { ConnectorMetadata } from 'fuels';
 
-import type { SvgIconProps } from '../../types';
-import { FuelWalletDevelopmentIcon } from '../icons/FuelWalletDevelopmentIcon';
-import { FuelWalletIcon } from '../icons/FuelWalletIcon';
-import { FueletIcon } from '../icons/FueletIcon';
+import { FuelWalletDevelopmentIcon } from '../../../icons/FuelWalletDevelopmentIcon';
+import { FuelWalletIcon } from '../../../icons/FuelWalletIcon';
+import { FueletIcon } from '../../../icons/FueletIcon';
+import type { SvgIconProps } from '../../../types';
 import { getImageUrl } from '../utils/getImageUrl';
 
 type ConnectorIconProps = {

packages/react/src/ui/Connect/index.tsx

@@ -8,17 +8,16 @@ import { Connectors } from './components/Connectors';
 import {
   BackIcon,
   CloseIcon,
-  DialogContent,
   DialogMain,
   DialogOverlay,
   DialogTitle,
   Divider,
   FuelRoot,
 } from './styles';
-import { getThemeVariables } from './themes';
 
-import './index.css';
 import type { FuelConnector } from 'fuels';
+import { getThemeVariables } from '../../constants/themes';
+import { DialogContent } from '../Dialog/components/Content';
 import { Bridge } from './components/Bridge/Bridge';
 import { Connecting } from './components/Connector/Connecting';
 import { ExternalDisclaimer } from './components/ExternalDisclaimer/ExternalDisclaimer';

packages/react/src/ui/Connect/styles.tsx

@@ -1,8 +1,8 @@
 import * as Dialog from '@radix-ui/react-dialog';
 import { keyframes, styled } from 'styled-components';
 
-import { BackIcon as CBackIcon } from './icons/BackIcon';
-import { CloseIcon as CCloseIcon } from './icons/CloseIcon';
+import { BackIcon as CBackIcon } from '../../icons/BackIcon';
+import { CloseIcon as CCloseIcon } from '../../icons/CloseIcon';
 
 const overlayShow = keyframes`
   from {
@@ -13,17 +13,6 @@ const overlayShow = keyframes`
   }
 `;
 
-const contentShow = keyframes`
-  from {
-    opacity: 0;
-    transform: translate(-50%, -48%) scale(0.96);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-`;
-
 const placeholderLoader = keyframes`
   0%{
     background-position: -468px 0
@@ -40,43 +29,6 @@ export const DialogOverlay = styled(Dialog.Overlay)`
   animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
 `;
 
-export const DialogContent = styled(Dialog.Content)`
-  overflow: hidden;
-  color: var(--fuel-color);
-  user-select: none;
-  max-height: calc(100% - 20px);
-  box-sizing: border-box;
-  background-color: var(--fuel-dialog-background);
-  position: fixed;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  border-radius: 36px;
-  padding: 14px 0px;
-  padding-bottom: 18px;
-  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
-  box-shadow:
-    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
-    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
-
-  &:focus {
-    outline: none;
-  }
-
-  @media (min-width: 431px) {
-    top: 50%;
-    width: 360px;
-    max-width: calc(100% - 20px);
-  }
-
-  @media (max-width: 430px) {
-    top: auto;
-    bottom: -246px;
-    width: 100vw;
-    max-width: 100%;
-    border-radius: 36px 36px 0 0;
-  }
-` as unknown as typeof Dialog.Content;
-
 export const DialogTitle = styled(Dialog.Title)`
   padding: 8px 14px 12px;
   margin: 0;

packages/react/src/ui/Dialog/components/Content/index.tsx

@@ -0,0 +1,45 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { keyframes, styled } from 'styled-components';
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+export const DialogContent = styled(Dialog.Content)`
+  overflow: hidden;
+  color: var(--fuel-color);
+  user-select: none;
+  max-height: calc(100% - 20px);
+  box-sizing: border-box;
+  background-color: var(--fuel-dialog-background);
+  position: fixed;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 36px;
+  padding: 14px 0px;
+  padding-bottom: 18px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  top: 50%;
+  width: 360px;
+  max-width: calc(100% - 20px);
+  box-shadow:
+    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+
+  &:focus {
+    outline: none;
+  }
+
+  @media (max-width: 430px) {
+    top: 50%;
+    width: 100%;
+    border-radius: 36px;
+  }
+` as unknown as typeof Dialog.Content;