deconflict merge

2026-10-17 10:45:58 +00:00 · 2025-04-16 15:40:18 -07:00
parent d9bd1ac878 ee185cbe47
commit 1fdb695240
203 changed files with 3233 additions and 582 deletions
@@ -9,6 +9,7 @@ import { AppConnection } from "@app/hooks/api/appConnections/enums";
 import { DiscriminativePick } from "@app/types";

 import { AppConnectionHeader } from "../AppConnectionHeader";
+import { Auth0ConnectionForm } from "./Auth0ConnectionForm";
 import { AwsConnectionForm } from "./AwsConnectionForm";
 import { AzureAppConfigurationConnectionForm } from "./AzureAppConfigurationConnectionForm";
 import { AzureKeyVaultConnectionForm } from "./AzureKeyVaultConnectionForm";
@@ -86,6 +87,8 @@ const CreateForm = ({ app, onComplete }: CreateFormProps) => {
      return <CamundaConnectionForm onSubmit={onSubmit} />;
    case AppConnection.Windmill:
      return <WindmillConnectionForm onSubmit={onSubmit} />;
+    case AppConnection.Auth0:
+      return <Auth0ConnectionForm onSubmit={onSubmit} />;
    default:
      throw new Error(`Unhandled App ${app}`);
  }
@@ -148,6 +151,8 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
      return <CamundaConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
    case AppConnection.Windmill:
      return <WindmillConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
+    case AppConnection.Auth0:
+      return <Auth0ConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
    default:
      throw new Error(`Unhandled App ${(appConnection as TAppConnection).app}`);
  }
@@ -0,0 +1,179 @@
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import {
+  Button,
+  FormControl,
+  Input,
+  ModalClose,
+  SecretInput,
+  Select,
+  SelectItem
+} from "@app/components/v2";
+import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import { Auth0ConnectionMethod, TAuth0Connection } from "@app/hooks/api/appConnections";
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+
+import {
+  genericAppConnectionFieldsSchema,
+  GenericAppConnectionsFields
+} from "./GenericAppConnectionFields";
+
+type Props = {
+  appConnection?: TAuth0Connection;
+  onSubmit: (formData: FormData) => Promise<void>;
+};
+
+const rootSchema = genericAppConnectionFieldsSchema.extend({
+  app: z.literal(AppConnection.Auth0)
+});
+
+const formSchema = z.discriminatedUnion("method", [
+  rootSchema.extend({
+    method: z.literal(Auth0ConnectionMethod.ClientCredentials),
+    credentials: z.object({
+      domain: z.string().trim().min(1, "Domain required"),
+      clientId: z.string().trim().min(1, "Client ID required"),
+      clientSecret: z.string().trim().min(1, "Client Secret required"),
+      audience: z.string().url().trim().min(1, "Audience required")
+    })
+  })
+]);
+
+type FormData = z.infer<typeof formSchema>;
+
+export const Auth0ConnectionForm = ({ appConnection, onSubmit }: Props) => {
+  const isUpdate = Boolean(appConnection);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: appConnection ?? {
+      app: AppConnection.Auth0,
+      method: Auth0ConnectionMethod.ClientCredentials
+    }
+  });
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting, isDirty }
+  } = form;
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        {!isUpdate && <GenericAppConnectionsFields />}
+        <Controller
+          name="method"
+          control={control}
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              tooltipText={`The method you would like to use to connect with ${
+                APP_CONNECTION_MAP[AppConnection.Auth0].name
+              }. This field cannot be changed after creation.`}
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Method"
+            >
+              <Select
+                isDisabled={isUpdate}
+                value={value}
+                onValueChange={(val) => onChange(val)}
+                className="w-full border border-mineshaft-500"
+                position="popper"
+                dropdownContainerClassName="max-w-none"
+              >
+                {Object.values(Auth0ConnectionMethod).map((method) => {
+                  return (
+                    <SelectItem value={method} key={method}>
+                      {getAppConnectionMethodDetails(method).name}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.domain"
+          control={control}
+          shouldUnregister
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Domain"
+            >
+              <Input {...field} placeholder="xxxxxxxxxxxx.xx.auth0.com" />
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.clientId"
+          control={control}
+          shouldUnregister
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Client ID"
+            >
+              <Input {...field} placeholder="djfh67bpCZAw7HBCPoNml3CcYEUrU0os" />
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.clientSecret"
+          control={control}
+          shouldUnregister
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Client Secret"
+            >
+              <SecretInput
+                containerClassName="text-gray-400 group-focus-within:!border-primary-400/50 border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+              />
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.audience"
+          control={control}
+          shouldUnregister
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Audience"
+              tooltipText="The unique identifier of the target API you want to access."
+            >
+              <Input {...field} placeholder="Your API identifier" />
+            </FormControl>
+          )}
+        />
+        <div className="mt-8 flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            colorSchema="secondary"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting || !isDirty}
+          >
+            {isUpdate ? "Update Credentials" : "Connect to Auth0"}
+          </Button>
+          <ModalClose asChild>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
@@ -24,27 +24,30 @@ export const AppConnectionsSelect = ({ onSelect }: Props) => {

  return (
    <div className="grid grid-cols-4 gap-2">
-      {appConnectionOptions?.map((option) => (
-        <button
-          type="button"
-          key={option.app}
-          onClick={() => onSelect(option.app)}
-          className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
-        >
-          <img
-            src={`/images/integrations/${APP_CONNECTION_MAP[option.app].image}`}
-            style={{
-              height: "50px",
-              width: "50px"
-            }}
-            className="mt-auto"
-            alt={`${APP_CONNECTION_MAP[option.app].name} logo`}
-          />
-          <div className="mt-auto max-w-xs text-center text-sm font-medium text-gray-300 duration-200 group-hover:text-gray-200">
-            {APP_CONNECTION_MAP[option.app].name}
-          </div>
-        </button>
-      ))}
+      {appConnectionOptions?.map((option) => {
+        const { image, name, size = 50 } = APP_CONNECTION_MAP[option.app];
+
+        return (
+          <button
+            type="button"
+            key={option.app}
+            onClick={() => onSelect(option.app)}
+            className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
+          >
+            <img
+              src={`/images/integrations/${image}`}
+              style={{
+                width: `${size}px`
+              }}
+              className="mt-auto"
+              alt={`${name} logo`}
+            />
+            <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
+              {name}
+            </div>
+          </button>
+        );
+      })}
      <Tooltip
        side="bottom"
        className="max-w-sm py-4"
@@ -75,7 +75,7 @@ export const AppConnectionRow = ({
          <img
            alt={`${APP_CONNECTION_MAP[app].name} integration`}
            src={`/images/integrations/${APP_CONNECTION_MAP[app].image}`}
-            className="mr-0.5 h-5 w-5"
+            className="mr-0.5 w-5"
          />
          <span className="hidden lg:inline">{APP_CONNECTION_MAP[app].name}</span>
        </div>
@@ -18,6 +18,7 @@ import { useOrganization } from "@app/context";
 import { useToggle } from "@app/hooks";
 import { useGetOIDCConfig } from "@app/hooks/api";
 import { useCreateOIDCConfig, useUpdateOIDCConfig } from "@app/hooks/api/oidcConfig/mutations";
+import { OIDCJWTSignatureAlgorithm } from "@app/hooks/api/oidcConfig/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";

 enum ConfigurationType {
@@ -43,7 +44,8 @@ const schema = z
    userinfoEndpoint: z.string().optional(),
    clientId: z.string().min(1),
    clientSecret: z.string().min(1),
-    allowedEmailDomains: z.string().optional()
+    allowedEmailDomains: z.string().optional(),
+    jwtSignatureAlgorithm: z.nativeEnum(OIDCJWTSignatureAlgorithm).optional()
  })
  .superRefine((data, ctx) => {
    if (data.configurationType === ConfigurationType.CUSTOM) {
@@ -159,6 +161,7 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDele
      setValue("clientSecret", data.clientSecret);
      setValue("allowedEmailDomains", data.allowedEmailDomains);
      setValue("configurationType", data.configurationType);
+      setValue("jwtSignatureAlgorithm", data.jwtSignatureAlgorithm);
    }
  }, [data]);

@@ -172,7 +175,8 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDele
    configurationType,
    discoveryURL,
    clientId,
-    clientSecret
+    clientSecret,
+    jwtSignatureAlgorithm
  }: OIDCFormData) => {
    try {
      if (!currentOrg) {
@@ -192,7 +196,8 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDele
          clientId,
          clientSecret,
          isActive: true,
-          orgSlug: currentOrg.slug
+          orgSlug: currentOrg.slug,
+          jwtSignatureAlgorithm
        });
      } else {
        await updateMutateAsync({
@@ -207,7 +212,8 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDele
          clientId,
          clientSecret,
          isActive: true,
-          orgSlug: currentOrg.slug
+          orgSlug: currentOrg.slug,
+          jwtSignatureAlgorithm
        });
      }

@@ -362,6 +368,29 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDele
                />
              </>
            )}
+            <Controller
+              control={control}
+              defaultValue={OIDCJWTSignatureAlgorithm.RS256}
+              name="jwtSignatureAlgorithm"
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl
+                  className="w-full"
+                  label="JWT Signature Algorithm"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                >
+                  <Select
+                    defaultValue={field.value}
+                    onValueChange={(e) => onChange(e)}
+                    className="w-full"
+                  >
+                    <SelectItem value={OIDCJWTSignatureAlgorithm.RS256}>RS256</SelectItem>
+                    <SelectItem value={OIDCJWTSignatureAlgorithm.RS512}>RS512</SelectItem>
+                    <SelectItem value={OIDCJWTSignatureAlgorithm.HS256}>HS256</SelectItem>
+                  </Select>
+                </FormControl>
+              )}
+            />
            <Controller
              control={control}
              name="allowedEmailDomains"
@@ -1,7 +1,10 @@
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
-import { Switch } from "@app/components/v2";
+import { Switch, Tooltip } from "@app/components/v2";
 import {
  OrgPermissionActions,
  OrgPermissionSubjects,
@@ -52,6 +55,28 @@ export const OrgGeneralAuthSection = () => {
    }
  };

+  const handleEnableBypassOrgAuthToggle = async (value: boolean) => {
+    try {
+      if (!currentOrg?.id) return;
+      if (!subscription?.samlSSO) {
+        handlePopUpOpen("upgradePlan");
+        return;
+      }
+
+      await mutateAsync({
+        orgId: currentOrg?.id,
+        bypassOrgAuthEnabled: value
+      });
+
+      createNotification({
+        text: `Successfully ${value ? "enabled" : "disabled"} admin bypassing of org-level auth`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
  return (
    <>
      {/* <div className="py-4">
@@ -72,7 +97,9 @@ export const OrgGeneralAuthSection = () => {
            </div> */}
      <div className="py-4">
        <div className="mb-2 flex justify-between">
-          <h3 className="text-md text-mineshaft-100">Enforce SAML SSO</h3>
+          <div className="flex items-center gap-1">
+            <span className="text-md text-mineshaft-100">Enforce SAML SSO</span>
+          </div>
          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
            {(isAllowed) => (
              <Switch
@@ -85,9 +112,62 @@ export const OrgGeneralAuthSection = () => {
          </OrgPermissionCan>
        </div>
        <p className="text-sm text-mineshaft-300">
-          Enforce members to authenticate via SAML to access this organization
+          Enforce users to authenticate via SAML to access this organization
        </p>
      </div>
+      {currentOrg?.authEnforced && (
+        <div className="py-4">
+          <div className="mb-2 flex justify-between">
+            <div className="flex items-center gap-1">
+              <span className="text-md text-mineshaft-100">Enable Admin SSO Bypass</span>
+              <Tooltip
+                className="max-w-lg"
+                content={
+                  <div>
+                    <span>
+                      When this is enabled, we strongly recommend enforcing MFA at the organization
+                      level.
+                    </span>
+                    <p className="mt-4">
+                      In case of a lockout, admins can use the admin login portal at{" "}
+                      <a
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="underline underline-offset-2 hover:text-mineshaft-300"
+                        href={`${window.location.origin}/login/admin`}
+                      >
+                        {window.location.origin}/login/admin
+                      </a>
+                    </p>
+                  </div>
+                }
+              >
+                <FontAwesomeIcon
+                  icon={faInfoCircle}
+                  size="sm"
+                  className="mt-0.5 inline-block text-mineshaft-400"
+                />
+              </Tooltip>
+            </div>
+            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
+              {(isAllowed) => (
+                <Switch
+                  id="allow-admin-bypass"
+                  isChecked={currentOrg?.bypassOrgAuthEnabled ?? false}
+                  onCheckedChange={(value) => handleEnableBypassOrgAuthToggle(value)}
+                  isDisabled={!isAllowed}
+                />
+              )}
+            </OrgPermissionCan>
+          </div>
+          <p className="text-sm text-mineshaft-300">
+            <span>
+              Allow organization admins to bypass SAML enforcement when SSO is unavailable,
+              misconfigured, or inaccessible.
+            </span>
+          </p>
+        </div>
+      )}
      <UpgradePlanModal
        isOpen={popUp.upgradePlan.isOpen}
        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
@@ -82,6 +82,28 @@ export const OrgOIDCSection = (): JSX.Element => {
    }
  };

+  const handleEnableBypassOrgAuthToggle = async (value: boolean) => {
+    try {
+      if (!currentOrg?.id) return;
+      if (!subscription?.oidcSSO) {
+        handlePopUpOpen("upgradePlan");
+        return;
+      }
+
+      await updateOrg({
+        orgId: currentOrg?.id,
+        bypassOrgAuthEnabled: value
+      });
+
+      createNotification({
+        text: `Successfully ${value ? "enabled" : "disabled"} admin bypassing of org-level auth`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
  const handleOIDCGroupManagement = async (value: boolean) => {
    try {
      if (!currentOrg?.id) return;
@@ -158,7 +180,9 @@ export const OrgOIDCSection = (): JSX.Element => {
      )}
      <div className="py-4">
        <div className="mb-2 flex justify-between">
-          <h3 className="text-md text-mineshaft-100">Enforce OIDC SSO</h3>
+          <div className="flex items-center gap-1">
+            <span className="text-md text-mineshaft-100">Enforce OIDC SSO</span>
+          </div>
          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
            {(isAllowed) => (
              <Switch
@@ -171,9 +195,62 @@ export const OrgOIDCSection = (): JSX.Element => {
          </OrgPermissionCan>
        </div>
        <p className="text-sm text-mineshaft-300">
-          Enforce members to authenticate via OIDC to access this organization
+          <span>Enforce users to authenticate via OIDC to access this organization.</span>
        </p>
      </div>
+      {currentOrg?.authEnforced && (
+        <div className="py-4">
+          <div className="mb-2 flex justify-between">
+            <div className="flex items-center gap-1">
+              <span className="text-md text-mineshaft-100">Enable Admin SSO Bypass</span>
+              <Tooltip
+                className="max-w-lg"
+                content={
+                  <div>
+                    <span>
+                      When this is enabled, we strongly recommend enforcing MFA at the organization
+                      level.
+                    </span>
+                    <p className="mt-4">
+                      In case of a lockout, admins can use the admin login portal at{" "}
+                      <a
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="underline underline-offset-2 hover:text-mineshaft-300"
+                        href={`${window.location.origin}/login/admin`}
+                      >
+                        {window.location.origin}/login/admin
+                      </a>
+                    </p>
+                  </div>
+                }
+              >
+                <FontAwesomeIcon
+                  icon={faInfoCircle}
+                  size="sm"
+                  className="mt-0.5 inline-block text-mineshaft-400"
+                />
+              </Tooltip>
+            </div>
+            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
+              {(isAllowed) => (
+                <Switch
+                  id="allow-admin-bypass"
+                  isChecked={currentOrg?.bypassOrgAuthEnabled ?? false}
+                  onCheckedChange={(value) => handleEnableBypassOrgAuthToggle(value)}
+                  isDisabled={!isAllowed}
+                />
+              )}
+            </OrgPermissionCan>
+          </div>
+          <p className="text-sm text-mineshaft-300">
+            <span>
+              Allow organization admins to bypass OIDC enforcement when SSO is unavailable,
+              misconfigured, or inaccessible.
+            </span>
+          </p>
+        </div>
+      )}
      <div className="py-4">
        <div className="mb-2 flex justify-between">
          <div className="text-md flex items-center text-mineshaft-100">
@@ -20,6 +20,8 @@ import { useToggle } from "@app/hooks";
 import { useCreateSSOConfig, useGetSSOConfig, useUpdateSSOConfig } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";

+import { SSOModalHeader } from "./SSOModalHeader";
+
 enum AuthProvider {
  OKTA_SAML = "okta-saml",
  AZURE_SAML = "azure-saml",
@@ -30,12 +32,32 @@ enum AuthProvider {
 }

 const ssoAuthProviders = [
-  { label: "Okta SAML", value: AuthProvider.OKTA_SAML },
-  { label: "Azure / Entra SAML", value: AuthProvider.AZURE_SAML },
-  { label: "JumpCloud SAML", value: AuthProvider.JUMPCLOUD_SAML },
-  { label: "Keycloak SAML", value: AuthProvider.KEYCLOAK_SAML },
-  { label: "Google SAML", value: AuthProvider.GOOGLE_SAML },
-  { label: "Auth0 SAML", value: AuthProvider.AUTH0_SAML }
+  { label: "Okta SAML", value: AuthProvider.OKTA_SAML, image: "Okta.png", docsUrl: "okta" },
+  {
+    label: "Azure / Entra SAML",
+    value: AuthProvider.AZURE_SAML,
+    image: "Microsoft Azure.png",
+    docsUrl: "azure"
+  },
+  {
+    label: "JumpCloud SAML",
+    value: AuthProvider.JUMPCLOUD_SAML,
+    image: "JumpCloud.png",
+    docsUrl: "jumpcloud"
+  },
+  {
+    label: "Keycloak SAML",
+    value: AuthProvider.KEYCLOAK_SAML,
+    image: "Keycloak.png",
+    docsUrl: "keycloak-saml"
+  },
+  {
+    label: "Google SAML",
+    value: AuthProvider.GOOGLE_SAML,
+    image: "Google.png",
+    docsUrl: "google-saml"
+  },
+  { label: "Auth0 SAML", value: AuthProvider.AUTH0_SAML, image: "Auth0.png", docsUrl: "auth0-saml" }
 ];

 const schema = z
@@ -231,6 +253,10 @@ export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDelet
        }}
      >
        <ModalContent title="Manage SAML configuration">
+          <SSOModalHeader
+            providerDetails={ssoAuthProviders.find((provider) => provider.value === authProvider)!}
+            isConnected={Boolean(data)}
+          />
          <form onSubmit={handleSubmit(onSSOModalSubmit)}>
            <Controller
              control={control}
@@ -0,0 +1,53 @@
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+type ProviderDetails = {
+  label: string;
+  image: string;
+  value: string;
+  docsUrl: string;
+};
+
+type Props = {
+  providerDetails: ProviderDetails;
+  isConnected: boolean;
+};
+
+const docsBaseUrl = "https://infisical.com/docs/documentation/platform/sso";
+
+export const SSOModalHeader = ({ providerDetails, isConnected }: Props) => {
+  return (
+    <div className="mb-4 flex w-full items-start gap-2 border-b border-mineshaft-500 pb-4">
+      <img
+        alt={`${providerDetails.label} logo`}
+        src={`/images/sso/${providerDetails.image}`}
+        className="h-12 w-12 rounded-md bg-bunker-500 p-2"
+      />
+      <div>
+        <div className="flex items-center text-mineshaft-300">
+          {providerDetails.label}
+          <a
+            href={`${docsBaseUrl}/${providerDetails.docsUrl}`}
+            target="_blank"
+            className="mb-1 ml-1"
+            rel="noopener noreferrer"
+          >
+            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+              <FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
+              <span>Docs</span>
+              <FontAwesomeIcon
+                icon={faArrowUpRightFromSquare}
+                className="mb-[0.07rem] ml-1 text-[10px]"
+              />
+            </div>
+          </a>
+        </div>
+        <p className="text-sm leading-4 text-mineshaft-400">
+          {isConnected
+            ? `${providerDetails.label} Connection`
+            : `Connect to ${providerDetails.label}`}
+        </p>
+      </div>
+    </div>
+  );
+};