feat: replace styled-components to raw styles (#302)

.changeset/lemon-poems-wash.md

@@ -0,0 +1,5 @@
+---
+"@fuels/react": patch
+---
+
+Apply global styles (css variables) for the Connectors UI correctly.

examples/react-app/package.json

@@ -7,6 +7,7 @@
     "fuels:build": "fuels build",
     "fuels:typegen": "fuels typegen --output=./src/types/contracts --inputs=./contracts/out/debug/counter-abi.json",
     "dev": "vite",
+    "preview": "vite preview",
     "build": "vite build"
   },
   "dependencies": {

examples/react-app/src/index.css

@@ -4,8 +4,6 @@
 @tailwind components;
 @tailwind utilities;
 
-/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap'); */
-
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

examples/react-next/.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_WC_PROJECT_ID=

examples/react-next/src/components/Providers.tsx

@@ -5,6 +5,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 import { defaultConnectors } from '@fuels/connectors';
 import { FuelProvider } from '@fuels/react';
+import { useState } from 'react';
 
 const queryClient = new QueryClient();
 
@@ -16,9 +17,18 @@ const fuelConfig = {
 };
 
 export const Providers = ({ children }: { children: React.ReactNode }) => {
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
+
   return (
     <QueryClientProvider client={queryClient}>
-      <FuelProvider theme="dark" fuelConfig={fuelConfig}>
+      <button
+        type="submit"
+        onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+      >
+        Switch theme {theme}
+      </button>
+
+      <FuelProvider theme={theme} fuelConfig={fuelConfig}>
         {children}
       </FuelProvider>
 

package.json

@@ -10,6 +10,7 @@
     "build:docs": "turbo run build --filter=docs",
     "fuels:build": "turbo run fuels:build && pnpm format",
     "dev:examples:react": "turbo run dev --filter=react-app",
+    "dev:examples:next": "turbo run dev --filter=react-next",
     "dev:docs": "turbo run dev --filter=docs",
     "build:watch": "turbo build:watch",
     "ts:check": "turbo run ts:check",

packages/react/package.json

@@ -40,7 +40,6 @@
     "compare-versions": "6.1.0",
     "fuels": "0.94.6",
     "react": "18.3.1",
-    "styled-components": "6.1.12",
     "tsup": "7.3.0",
     "tsx": "4.9.3",
     "typescript": "5.4.5"

packages/react/src/constants/themes.tsx → packages/react/src/constants/themes.ts

@@ -1,7 +1,7 @@
-const commonTheme = {
+const shared = {
   /* Fonts */
   '--fuel-font-family':
-    '"Inter", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;',
+    '"Inter", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
   '--fuel-font-size': '16px',
   '--fuel-font-size-xs': '12px',
   '--fuel-letter-spacing': '-0.64px',
@@ -11,10 +11,9 @@ const commonTheme = {
   /* Border */
   '--fuel-border': '1px solid var(--fuel-border-color)',
   '--fuel-color-error': '#f25a68',
-  '--fuel-black-color': '#141414',
-};
+} as React.CSSProperties;
 
-const lightTheme = {
+const light = {
   '--fuel-color': '#141414',
   '--fuel-color-bold': '#000000',
   '--fuel-dialog-background': 'white',
@@ -34,9 +33,9 @@ const lightTheme = {
   '--fuel-color-light-gray': 'rgb(83 79 79 / 84%)',
   '--fuel-separator-color': 'rgb(83 79 79 / 13%)',
   '--fuel-black-color': '#FFFFFF',
-};
+} as React.CSSProperties;
 
-const darkTheme = {
+const dark = {
   '--fuel-color': '#e4e7e7',
   '--fuel-color-bold': '#ffffff',
   '--fuel-dialog-background': 'rgb(25 26 26)',
@@ -55,18 +54,20 @@ const darkTheme = {
   '--fuel-blue-11': '#70B9FF',
   '--fuel-color-light-gray': 'rgb(165 165 165 / 84%)',
   '--fuel-separator-color': 'rgb(165 165 165 / 13%)',
-};
+  '--fuel-black-color': '#141414',
+} as React.CSSProperties;
 
-type CustomTheme = Partial<typeof commonTheme & typeof lightTheme>;
+const themes: Record<'light' | 'dark', React.CSSProperties> = {
+  light,
+  dark,
+};
 
 export const getThemeVariables = (
-  theme: 'light' | 'dark' | string,
-  customTheme?: CustomTheme,
-) => {
-  const colorTheme = theme === 'dark' ? darkTheme : lightTheme;
+  theme: 'light' | 'dark',
+): React.CSSProperties => {
+  const colors = themes[theme];
   return {
-    ...commonTheme,
-    ...colorTheme,
-    ...customTheme,
+    ...shared,
+    ...colors,
   };
 };

packages/react/src/icons/Spinner.tsx

@@ -1,24 +1,17 @@
-import styled, { keyframes } from 'styled-components';
-
 interface SpinnerProps {
   size: number;
   color: string;
 }
 
-const spinAnimation = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-`;
+export const Spinner = ({ size, color }: SpinnerProps) => {
+  const spinnerStyle: React.CSSProperties = {
+    height: `${size}px`,
+    width: `${size}px`,
+    border: '4px solid rgba(0, 0, 0, 0.1)',
+    borderTopColor: color,
+    borderRadius: '50%',
+    animation: 'fuelSpin 1s infinite linear',
+  };
 
-export const Spinner = styled.div<SpinnerProps>`
-  height: ${({ size }) => size}px;
-  width: ${({ size }) => size}px;
-  border: 4px solid rgba(0, 0, 0, 0.1);
-  border-top-color: ${({ color }) => color};
-  border-radius: 50%;
-  animation: ${spinAnimation} 1s infinite linear;
-`;
+  return <div style={spinnerStyle} />;
+};

packages/react/src/providers/FuelUIProvider.tsx

@@ -1,4 +1,4 @@
-import type { FuelConfig, FuelConnector, Network } from 'fuels';
+import type { FuelConfig, FuelConnector } from 'fuels';
 import {
   type ReactNode,
   createContext,
@@ -21,7 +21,7 @@ export type FuelUIProviderProps = {
   children?: ReactNode;
   uiConfig: UIConfig;
   fuelConfig: FuelConfig;
-  theme?: string;
+  theme?: 'dark' | 'light';
 };
 
 export enum Routes {
@@ -35,7 +35,7 @@ export type FuelUIContextType = {
   isConnected: boolean;
   uiConfig: UIConfig;
   fuelConfig: FuelConfig;
-  theme: string;
+  theme: 'dark' | 'light';
   connectors: Array<FuelConnector>;
   isLoading: boolean;
   isConnecting: boolean;
@@ -190,6 +190,19 @@ export function FuelUIProvider({
     }
   }, []);
 
+  useEffect(() => {
+    const css = document.createElement('style');
+    css.appendChild(
+      document.createTextNode(
+        `@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap"); .fuel-connectors * { box-sizing: border-box; } .fuel-connectors .fuel-connectors-dialog-content:focus { outline: none; } @media (max-width: 430px) { .fuel-connectors .fuel-connectors-dialog-content { top: 50%; width: 100%; border-radius: 36px; } } .fuel-connectors .fuel-connectors-connector-item { transition: background-color 50ms cubic-bezier(0.16, 1, 0.3, 1); background-color: var(--fuel-connector-background); } .fuel-connectors .fuel-connectors-connector-item:active { opacity: 0.8; } .fuel-connectors .fuel-connectors-connector-item:hover { background-color: var(--fuel-connector-hover); } .fuel-connectors .fuel-connectors-disclaimer-list > li { margin: 0.6em 0; } .fuel-connectors .fuel-connectors-connector-button { transition: background-color 50ms cubic-bezier(0.16, 1, 0.3, 1); background-color: var(--fuel-button-background); color: var(--fuel-color-bold); } .fuel-connectors .fuel-connectors-connector-button:visited { color: var(--fuel-color-bold); } .fuel-connectors .fuel-connectors-connector-button:hover { background-color: var(--fuel-button-background-hover); } .fuel-connectors .fuel-connectors-connector-button-primary { transition: background-color 50ms cubic-bezier(0.16, 1, 0.3, 1); background-color: var(--fuel-green-11); color: var(--fuel-black-color); } .fuel-connectors .fuel-connectors-connector-button-primary:visited { color: var(--fuel-black-color); } .fuel-connectors .fuel-connectors-connector-button-primary:hover { background-color: var(--fuel-green-11); } .fuel-connectors .fuel-connectors-back-icon { transition: background-color 50ms cubic-bezier(0.16, 1, 0.3, 1); } .fuel-connectors .fuel-connectors-back-icon[data-connector='false'] { visibility: hidden; } .fuel-connectors .fuel-connectors-back-icon:hover, .fuel-connectors .fuel-connectors-back-icon:active { opacity: 1; background-color: var(--fuel-connector-hover); } .fuel-connectors .fuel-connectors-close-icon { transition: background-color 50ms cubic-bezier(0.16, 1, 0.3, 1); } .fuel-connectors .fuel-connectors-close-icon:hover, .fuel-connectors .fuel-connectors-close-icon:active { opacity: 1; background-color: var(--fuel-connector-hover); } .fuel-connectors .fuel-connectors-button-base { cursor: pointer; } .fuel-connectors .fuel-connectors-button:disabled { cursor: not-allowed; } .fuel-connectors .fuel-connectors-button { transition: background-color 50ms cubic-bezier(0.16, 1, 0.3, 1); background-color: var(--fuel-green-11); } .fuel-connectors .fuel-connectors-button:disabled { background-color: var(--fuel-border-color); } .fuel-connectors .fuel-connectors-button-disconnect { transition: background-color 50ms cubic-bezier(0.16, 1, 0.3, 1); background-color: var(--fuel-button-background); } .fuel-connectors .fuel-connectors-button-disconnect:hover { background-color: var(--fuel-button-background-hover); } @keyframes fuelOverlayShow { from { opacity: 0; } to { opacity: 1; } } @keyframes fuelSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes fuelContentShow { from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes fuelLoader { 0% { background-position: -468px 0 } 100% { background-position: 468px 0 } }`,
+      ),
+    );
+    document.head.appendChild(css);
+    return () => {
+      document.head.removeChild(css);
+    };
+  }, []);
+
   return (
     <FuelConnectContext.Provider
       value={{

packages/react/src/types.ts

@@ -25,6 +25,7 @@ export type UIConfig = {
 
 export type SvgIconProps = {
   theme?: string;
+  style?: React.CSSProperties;
   className?: string;
   onClick?: () => void;
   size: number;

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

@@ -9,7 +9,14 @@ import {
 import { NoFundIcon } from '../../../../icons/NoFundIcon';
 import { useConnectUI } from '../../../../providers/FuelUIProvider';
 import { useNetworkConfigs } from '../../hooks/useNetworkConfigs';
-import { CloseIcon, DialogMain, DialogTitle, Divider } from '../../styles';
+import {
+  BackIcon,
+  CloseIcon,
+  DialogHeader,
+  DialogMain,
+  DialogTitle,
+  Divider,
+} from '../../styles';
 import {
   ConnectorButton,
   ConnectorButtonPrimary,
@@ -22,11 +29,10 @@ import { DialogContent } from '../Core/DialogContent';
 import { DialogFuel } from '../Core/DialogFuel';
 
 type BridgeProps = {
-  theme: string;
-  className?: string;
+  theme: 'dark' | 'light';
 };
 
-export function BridgeDialog({ className, theme }: BridgeProps) {
+export function BridgeDialog({ theme }: BridgeProps) {
   const networks = useNetworkConfigs();
   const { provider } = useProvider();
   const bridgeHref = useMemo(() => {
@@ -76,13 +82,16 @@ export function BridgeDialog({ className, theme }: BridgeProps) {
       }}
     >
       <DialogContent data-connector={true}>
-        <DialogTitle>Bridge Funds</DialogTitle>
+        <DialogHeader>
+          <BackIcon size={32} data-connector={false} />
+          <DialogTitle>Bridge Funds</DialogTitle>
+          <Dialog.Close asChild>
+            <CloseIcon size={32} />
+          </Dialog.Close>
+        </DialogHeader>
         <Divider />
-        <Dialog.Close asChild>
-          <CloseIcon size={32} />
-        </Dialog.Close>
         <DialogMain>
-          <div className={className}>
+          <div>
             <ConnectorImage>
               <NoFundIcon size={100} theme={theme} />
             </ConnectorImage>

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

@@ -59,7 +59,7 @@ export function Connecting({ className }: ConnectorProps) {
           </ConnectorDescription>
         ) : (
           <ConnectorDescription>
-            Click on the button bellow to connect to {location.origin}.
+            Click on the button below to connect to {location.origin}.
           </ConnectorDescription>
         )}
       </ConnectorContent>

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

@@ -14,11 +14,7 @@ import {
   ConnectorTitle,
 } from './styles';
 
-type ConnectorProps = {
-  className?: string;
-};
-
-export function Connector({ className }: ConnectorProps) {
+export function Connector() {
   const {
     theme,
     dialog: { connector, setRoute },
@@ -28,7 +24,7 @@ export function Connector({ className }: ConnectorProps) {
     install: { action, link, description },
   } = connector.metadata;
 
-  // Ping exetensin if it's installed it will trigger connector
+  // Ping extension: if it's installed, it will trigger connector
   useQuery({
     queryKey: ['CONNECTOR_PING', connector.name, connector.installed],
     queryFn: async () => {
@@ -42,7 +38,7 @@ export function Connector({ className }: ConnectorProps) {
   const actionText = action || 'Install';
 
   return (
-    <div className={className}>
+    <div>
       <ConnectorImage>
         <ConnectorIcon
           connectorMetadata={connector.metadata}