feat: group connectors between native and external

.changeset/tender-games-flow.md

@@ -0,0 +1,5 @@
+---
+"@fuels/react": minor
+---
+
+Group connectors between native and external

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

@@ -1,9 +1,54 @@
-import { useConnectUI } from '../../../../providers/FuelUIProvider';
+import { useMemo, useState } from 'react';
+import {
+  type FuelUIContextType,
+  useConnectUI,
+} from '../../../../providers/FuelUIProvider';
 import { ConnectorIcon } from '../ConnectorIcon';
 import { ConnectorBadge } from './ConnectorBadge';
 
+import type { FuelConnector } from 'fuels';
+// import { InfoCircleIcon } from '../../icons/InfoCircleIcon';
 import { ConnectorsLoader } from './ConnectorsLoader';
-import { ConnectorItem, ConnectorList, ConnectorName } from './styles';
+import {
+  ConnectorItem,
+  ConnectorList,
+  ConnectorName,
+  GroupFirstTitleContainer,
+  GroupLastTitle,
+  GroupLastTitleContainer,
+} from './styles';
+
+const renderConnector = (
+  connect: FuelUIContextType['dialog']['connect'],
+  theme: FuelUIContextType['theme'],
+  connector: FuelConnector,
+  index: number,
+) => (
+  <ConnectorItem
+    tabIndex={index + 1}
+    key={connector.name}
+    aria-label={`Connect to ${connector.name}`}
+    data-installed={connector.installed}
+    data-connected={connector.connected}
+    onClick={(e) => {
+      e.preventDefault();
+      connect(connector);
+    }}
+  >
+    <ConnectorIcon
+      connectorMetadata={connector.metadata}
+      connectorName={connector.name}
+      size={32}
+      theme={theme}
+    />
+    <ConnectorName>{connector.name}</ConnectorName>
+    <ConnectorBadge
+      name={connector.name}
+      connected={connector.connected}
+      installed={connector.installed}
+    />
+  </ConnectorItem>
+);
 
 export function Connectors() {
   const {
@@ -14,34 +59,52 @@ export function Connectors() {
     dialog: { connect },
   } = useConnectUI();
 
+  const [renderConnectorItem] = useState(() =>
+    renderConnector.bind(null, connect, theme),
+  );
+
+  const { native, external } = useMemo(
+    () =>
+      connectors.reduce(
+        (acc, curr) => {
+          if (
+            curr.name.startsWith('Fuel') ||
+            curr.name === 'Bako Safe' ||
+            curr.name === 'Burner Wallet'
+          ) {
+            acc.native.push(curr);
+          } else {
+            acc.external.push(curr);
+          }
+
+          return acc;
+        },
+        {
+          native: [] as Array<FuelConnector>,
+          external: [] as Array<FuelConnector>,
+        },
+      ),
+    [connectors],
+  );
+
+  const shouldTitleGroups = !isLoading && !!native.length && !!external.length;
+
   return (
     <ConnectorList>
-      {connectors.map((connector, index) => (
-        <ConnectorItem
-          tabIndex={index + 1}
-          key={connector.name}
-          aria-label={`Connect to ${connector.name}`}
-          data-installed={connector.installed}
-          data-connected={connector.connected}
-          onClick={(e) => {
-            e.preventDefault();
-            connect(connector);
-          }}
-        >
-          <ConnectorIcon
-            connectorMetadata={connector.metadata}
-            connectorName={connector.name}
-            size={32}
-            theme={theme}
-          />
-          <ConnectorName>{connector.name}</ConnectorName>
-          <ConnectorBadge
-            name={connector.name}
-            connected={connector.connected}
-            installed={connector.installed}
-          />
-        </ConnectorItem>
-      ))}
+      {shouldTitleGroups && (
+        <GroupFirstTitleContainer>
+          <GroupLastTitle>Fuel Native Wallets</GroupLastTitle>
+          {/* <InfoCircleIcon size={12} /> */}
+        </GroupFirstTitleContainer>
+      )}
+      {!isLoading && native.map(renderConnectorItem)}
+      {shouldTitleGroups && (
+        <GroupLastTitleContainer>
+          <GroupLastTitle>Non-Native Wallets</GroupLastTitle>
+          {/* <InfoCircleIcon size={12} /> */}
+        </GroupLastTitleContainer>
+      )}
+      {!isLoading && external.map(renderConnectorItem)}
       {isLoading && (
         <ConnectorsLoader items={fuelConfig.connectors?.length || 2} />
       )}

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

@@ -29,6 +29,7 @@ export const ConnectorList = styled.div`
   align-items: center;
   gap: var(--fuel-items-gap);
   padding: 0px 14px;
+  margin-top: 23px;
 `;
 
 export const ConnectorName = styled.div`
@@ -56,3 +57,33 @@ export const BadgeSuccess = styled(Badge)`;
   background-color: var(--fuel-green-3);
   color: var(--fuel-green-11);
 `;
+
+export const GroupLastTitle = styled.p`
+  color: #797979;
+  font-family: Inter;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: -0.13px;
+`;
+
+export const GroupFirstTitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  justify-content: flex-start;
+  width: 100%;
+  padding-left: 3px;
+  margin-bottom: 7px;
+`;
+
+export const GroupLastTitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  justify-content: flex-start;
+  width: 100%;
+  padding-left: 3px;
+  margin: 14px 0px 7px 0px;
+`;

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

@@ -0,0 +1,45 @@
+import type { SvgIconProps } from '../../../ui/types';
+
+export function InfoCircleIcon({
+  theme,
+  size,
+  stroke = '#797979',
+  ...props
+}: SvgIconProps & { stroke?: string }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <title>Info Circle Icon</title>
+      <g clip-path="url(#clip0_2341_25997)">
+        <path
+          d="M5.375 5.5H6L6 8.125M10.625 6C10.625 8.55432 8.55432 10.625 6 10.625C3.44568 10.625 1.375 8.55432 1.375 6C1.375 3.44568 3.44568 1.375 6 1.375C8.55432 1.375 10.625 3.44568 10.625 6Z"
+          stroke={stroke}
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <rect
+          x="5.625"
+          y="3.625"
+          width="0.75"
+          height="0.75"
+          rx="0.375"
+          fill={stroke}
+          stroke={stroke}
+          stroke-width="0.25"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2341_25997">
+          <rect width="12" height="12" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}