Merge pull request #2330 from Web3Auth/fix/enabling-description-for--mainOption

fix: updated socialLogin lsit to support description

Author: chaitanyapotti

packages/modal/src/ui/components/Button/ButtonSocial/ButtonSocial.tsx

@@ -27,8 +27,8 @@ function SocialLoginButton(props: ButtonSocialProps) {
       })}
     >
       {showIcon && getProviderIcon(method, isDark, isPrimaryBtn)}
-      {showText && <p className="w3a--text-sm w3a--font-normal w3a--text-app-gray-900 dark:w3a--text-app-white">{text}</p>}
       {children}
+      {showText && <p className="w3a--text-sm w3a--font-normal w3a--text-app-gray-900 dark:w3a--text-app-white">{text}</p>}
     </button>
   );
 }

packages/modal/src/ui/components/Login/Login.tsx

@@ -77,6 +77,7 @@ function Login(props: LoginProps) {
   const [canShowMore, setCanShowMore] = useState(false);
   const [visibleRow, setVisibleRow] = useState<rowType[]>([]);
   const [otherRow, setOtherRow] = useState<rowType[]>([]);
+  const [mainOptionsRow, setMainOptionsRow] = useState<rowType[]>([]);
   const [isPasswordLessCtaClicked, setIsPasswordLessCtaClicked] = useState(false);
   const [showOtpFlow, setShowOtpFlow] = useState(false);
   const [authConnection, setAuthConnection] = useState<AUTH_CONNECTION_TYPE | undefined>(undefined);
@@ -100,6 +101,7 @@ function Login(props: LoginProps) {
 
     const visibleRows: rowType[] = [];
     const otherRows: rowType[] = [];
+    const mainOptionsRows: rowType[] = [];
 
     const loginMethodsOrder = (socialLoginsConfig.loginMethodsOrder || []).reduce(
       (acc, method, index) => {
@@ -140,51 +142,43 @@ function Login(props: LoginProps) {
       const order = index + 1;
 
       const isPrimaryBtn = socialLoginsConfig?.uiConfig?.primaryButton === "socialLogin" && order === 1;
+      const isMainOption = connectorConfig.mainOption;
 
       const loginOptionLength = loginOptions.length;
       const moreThanFour = loginOptionLength >= 4;
 
       const lengthCheck = moreThanFour ? order > 0 && order <= loginOptionLength : order > 0 && order < 4;
 
-      if (lengthCheck) {
-        visibleRows.push({
-          method,
-          isDark,
-          isPrimaryBtn,
-          name,
-          connector: socialLoginsConfig.connector,
-          loginParams: {
-            authConnection: connectorConfig.authConnection || (method as AUTH_CONNECTION_TYPE),
-            authConnectionId: connectorConfig.authConnectionId,
-            groupedAuthConnectionId: connectorConfig.groupedAuthConnectionId,
-            extraLoginOptions: connectorConfig.extraLoginOptions,
-            name,
-            login_hint: "",
-          },
-          order,
-        });
-      }
-
-      otherRows.push({
+      const rows = {
+        description: connectorConfig.description || "",
         method,
         isDark,
         isPrimaryBtn,
         name: name === "Twitter" ? "X" : name,
         connector: socialLoginsConfig.connector,
         loginParams: {
-          authConnection: method as AUTH_CONNECTION_TYPE,
+          authConnection: connectorConfig.authConnection || (method as AUTH_CONNECTION_TYPE),
           authConnectionId: connectorConfig.authConnectionId,
           groupedAuthConnectionId: connectorConfig.groupedAuthConnectionId,
           extraLoginOptions: connectorConfig.extraLoginOptions,
           name,
           login_hint: "",
         },
         order,
-      });
+      };
+
+      if (isMainOption) {
+        mainOptionsRows.push(rows);
+      } else if (lengthCheck) {
+        visibleRows.push(rows);
+      }
+
+      otherRows.push(rows);
     });
 
     setVisibleRow(visibleRows);
     setOtherRow(otherRows);
+    setMainOptionsRow(mainOptionsRows);
     setCanShowMore(maxOptions.length > 4); // Update the state based on the condition
   }, [socialLoginsConfig, isDark, buttonRadius]);
 
@@ -432,6 +426,7 @@ function Login(props: LoginProps) {
         isDark={isDark}
         visibleRow={visibleRow}
         canShowMore={canShowMore}
+        mainOptionsRow={mainOptionsRow}
         handleSocialLoginClick={handleSocialLoginClick}
         socialLoginsConfig={socialLoginsConfig}
         handleExpandSocialLogins={handleSocialLoginExpand}

packages/modal/src/ui/components/SocialLoginList/SocialLoginList.tsx

@@ -28,7 +28,7 @@ function getProviderIcon(method: string, isDark: boolean, extension: string) {
 }
 
 function SocialLoginList(props: SocialLoginListProps) {
-  const { visibleRow, otherRow, isDark, canShowMore, handleSocialLoginClick, handleExpandSocialLogins, buttonRadius } = props;
+  const { visibleRow, otherRow, mainOptionsRow, isDark, canShowMore, handleSocialLoginClick, handleExpandSocialLogins, buttonRadius } = props;
 
   const getGridRowFromVisibleLogin = () => {
     if (visibleRow.length === 1) {
@@ -45,6 +45,25 @@ function SocialLoginList(props: SocialLoginListProps) {
   if (visibleRow.length !== 0 && otherRow?.length === 0) {
     return (
       <div className="w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2">
+        <div className="w3a--grid w3a--w-full w3a--gap-y-2">
+          {mainOptionsRow.map((row) => (
+            <Button
+              type={BUTTON_TYPE.SOCIAL}
+              key={row.method}
+              props={{
+                showText: true,
+                text: row.description,
+                method: row.method,
+                isDark,
+                isPrimaryBtn: false,
+                btnStyle: "w3a--flex w3a--items-center !w3a--justify-center w3a--w-full w3a--h-11 w3a--group",
+                children: <>{getProviderIcon(row.method, isDark, ".svg")}</>,
+                onClick: () => handleSocialLoginClick({ connector: row.connector, loginParams: row.loginParams }),
+                buttonRadius,
+              }}
+            />
+          ))}
+        </div>
         <div className={cn("w3a--grid w3a--w-full w3a--gap-x-2", getGridRowFromVisibleLogin())}>
           {visibleRow
             .filter((_, index) => (visibleRow.length === 4 ? index <= 3 : index < 3))

packages/modal/src/ui/components/SocialLoginList/SocialLoginList.type.ts

@@ -4,6 +4,7 @@ export interface SocialLoginListProps {
   isDark: boolean;
   visibleRow: rowType[];
   canShowMore: boolean;
+  mainOptionsRow: rowType[];
   socialLoginsConfig: SocialLoginsConfig;
   otherRow?: rowType[];
   handleSocialLoginClick: (params: SocialLoginEventType) => void;

packages/modal/src/ui/interfaces.ts

@@ -166,6 +166,7 @@ export type browser = "chrome" | "firefox" | "edge" | "safari" | "brave";
 export type mobileOs = "ios" | "android";
 
 export type rowType = {
+  description: string;
   method: string;
   isDark: boolean;
   isPrimaryBtn: boolean;
@@ -180,6 +181,7 @@ export type rowType = {
     extraLoginOptions?: ExtraLoginOptions;
   };
   order: number;
+  mainOption?: boolean;
 };
 
 export type PasswordlessHandlerParams = {