Merge branch 'main' into caleb/otp-delay

alchemyplatform · Jan 27, 2025 · e77b059 · e77b059
2 parents a830e0b + 1772da9
commit e77b059
Show file tree

Hide file tree

Showing 17 changed files with 313 additions and 120 deletions.
diff --git a/account-kit/react/src/components/auth/card/loading/oauth.tsx b/account-kit/react/src/components/auth/card/loading/oauth.tsx
@@ -5,11 +5,11 @@ import {
   ContinueWithOAuth,
   OAuthConnectionFailed,
 } from "../../../../icons/oauth.js";
-import { capitalize } from "../../../../utils.js";
 import { useAuthContext } from "../../context.js";
 import { useOAuthVerify } from "../../hooks/useOAuthVerify.js";
 import { ConnectionError } from "../error/connection-error.js";
 import { ls } from "../../../../strings.js";
+import { getSocialProviderDisplayName } from "../../types.js";
 
 export const CompletingOAuth = () => {
   const { isConnected } = useSignerStatus();
@@ -28,32 +28,33 @@ export const CompletingOAuth = () => {
   if (authStep.error && !oauthWasCancelled) {
     return (
       <ConnectionError
-        headerText={`${ls.error.connection.oauthTitle} ${capitalize(
-          authStep.config.authProviderId
-        )}`}
+        headerText={`${
+          ls.error.connection.oauthTitle
+        } ${getSocialProviderDisplayName(authStep.config)}`}
         bodyText={ls.error.connection.oauthBody}
         handleTryAgain={authenticate}
         handleUseAnotherMethod={() => setAuthStep({ type: "initial" })}
         icon={
-          <OAuthConnectionFailed provider={authStep.config.authProviderId} />
+          <OAuthConnectionFailed
+            provider={authStep.config.authProviderId}
+            auth0Connection={authStep.config.auth0Connection}
+            logoUrl={authStep.config.logoUrl}
+          />
         }
       />
     );
   }
 
+  const providerDisplayName = getSocialProviderDisplayName(authStep.config);
   return (
     <div className="flex flex-col gap-5 items-center">
       <div className="flex flex-col items-center justify-center">
         <ContinueWithOAuth provider={authStep.config.authProviderId} />
       </div>
 
-      <h3 className="font-semibold text-lg">{`Continue with ${capitalize(
-        authStep.config.authProviderId
-      )}`}</h3>
+      <h3 className="font-semibold text-lg">{`Continue with ${providerDisplayName}`}</h3>
       <p className="text-fg-secondary text-center text-sm">
-        {`Follow the steps in the pop up window to sign in with ${capitalize(
-          authStep.config.authProviderId
-        )}`}
+        {`Follow the steps in the pop up window to sign in with ${providerDisplayName}`}
       </p>
     </div>
   );

diff --git a/account-kit/react/src/components/auth/sections/OAuth.tsx b/account-kit/react/src/components/auth/sections/OAuth.tsx
@@ -1,5 +1,9 @@
 import { memo } from "react";
-import { AppleIcon, FacebookIcon, GoogleIcon } from "../../../icons/oauth.js";
+import {
+  AppleIcon,
+  FacebookIcon,
+  GoogleIcon,
+} from "../../../icons/auth-icons/index.js";
 import { assertNever } from "../../../utils.js";
 import { Button } from "../../button.js";
 import { useOAuthVerify } from "../hooks/useOAuthVerify.js";

diff --git a/account-kit/react/src/components/auth/types.ts b/account-kit/react/src/components/auth/types.ts
@@ -3,6 +3,7 @@ import type {
   OauthRedirectConfig,
 } from "@account-kit/signer";
 import type { WalletConnectParameters } from "wagmi/connectors";
+import { capitalize } from "../../utils.js";
 
 export type AuthType =
   | {
@@ -20,13 +21,21 @@ export type AuthType =
           authProviderId: "auth0";
           isCustomProvider?: false;
           auth0Connection?: string;
+          displayName: string;
           logoUrl: string;
         }
       | {
           authProviderId: KnownAuthProvider;
           isCustomProvider?: false;
           auth0Connection?: never;
+          displayName?: never;
           logoUrl?: never;
         }
     ) &
       OauthRedirectConfig);
+
+export function getSocialProviderDisplayName(
+  authType: Extract<AuthType, { type: "social" }>
+): string {
+  return authType.displayName ?? capitalize(authType.authProviderId);
+}
diff --git a/account-kit/react/src/icons/auth-icons/apple.tsx b/account-kit/react/src/icons/auth-icons/apple.tsx
@@ -0,0 +1,21 @@
+import type { SVGProps } from "react";
+
+export const AppleIcon = (
+  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>
+) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        fill="#000"
+        d="M22.192 18.703c-.363.839-.793 1.61-1.29 2.32-.679.968-1.234 1.637-1.663 2.009-.663.61-1.374.923-2.136.94-.546 0-1.206-.155-1.973-.47-.77-.314-1.477-.47-2.124-.47-.679 0-1.406.156-2.185.47-.78.315-1.407.48-1.888.496-.73.031-1.458-.29-2.184-.966-.464-.404-1.044-1.098-1.739-2.08-.745-1.049-1.358-2.265-1.838-3.652-.514-1.497-.772-2.948-.772-4.352 0-1.608.348-2.995 1.044-4.158A6.122 6.122 0 0 1 5.63 6.58a5.88 5.88 0 0 1 2.955-.835c.58 0 1.34.18 2.285.532.943.354 1.548.533 1.813.533.199 0 .871-.21 2.01-.628 1.079-.388 1.988-.548 2.733-.485 2.02.163 3.536.96 4.545 2.393-1.806 1.094-2.699 2.627-2.681 4.593.016 1.531.572 2.806 1.663 3.817.495.47 1.048.833 1.663 1.09-.134.387-.274.758-.424 1.113ZM17.561.48c0 1.2-.439 2.321-1.313 3.358-1.054 1.234-2.33 1.946-3.714 1.834a3.742 3.742 0 0 1-.027-.455c0-1.152.501-2.386 1.392-3.394.445-.51 1.01-.935 1.696-1.273.685-.334 1.332-.518 1.94-.55.019.16.026.32.026.48Z"
+      />
+    </svg>
+  );
+};
diff --git a/account-kit/react/src/icons/auth-icons/discord.tsx b/account-kit/react/src/icons/auth-icons/discord.tsx
@@ -0,0 +1,13 @@
+import type { SVGProps } from "react";
+
+export const DiscordIcon = ({
+  fill,
+  ...props
+}: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
+  <svg width="20" height="16" viewBox="0 0 20 16" fill="none" {...props}>
+    <path
+      d="M16.9419 1.60281C15.6279 1.00122 14.2407 0.574428 12.8158 0.333344C12.6208 0.681916 12.4443 1.04055 12.2872 1.40775C10.7694 1.17903 9.22584 1.17903 7.70801 1.40775C7.55079 1.04059 7.37437 0.681959 7.17946 0.333344C5.75361 0.576464 4.3655 1.00427 3.05016 1.60595C0.43887 5.4694 -0.269009 9.2369 0.0849305 12.9509C1.61417 14.0808 3.32582 14.9401 5.14548 15.4914C5.55522 14.9403 5.91778 14.3557 6.22933 13.7437C5.63759 13.5227 5.06646 13.2501 4.52255 12.9289C4.6657 12.8251 4.8057 12.7181 4.94098 12.6143C6.52364 13.3586 8.25103 13.7445 9.99996 13.7445C11.7489 13.7445 13.4763 13.3586 15.0589 12.6143C15.1958 12.726 15.3358 12.8329 15.4774 12.9289C14.9324 13.2506 14.3602 13.5238 13.7675 13.7453C14.0786 14.357 14.4412 14.9411 14.8513 15.4914C16.6725 14.9423 18.3855 14.0834 19.915 12.9525C20.3303 8.64542 19.2055 4.91254 16.9419 1.60281ZM6.67765 10.6668C5.69134 10.6668 4.87649 9.77174 4.87649 8.67059C4.87649 7.56945 5.66302 6.66651 6.6745 6.66651C7.68598 6.66651 8.49454 7.56945 8.47724 8.67059C8.45993 9.77174 7.68284 10.6668 6.67765 10.6668ZM13.3223 10.6668C12.3344 10.6668 11.5227 9.77174 11.5227 8.67059C11.5227 7.56945 12.3092 6.66651 13.3223 6.66651C14.3353 6.66651 15.1376 7.56945 15.1203 8.67059C15.103 9.77174 14.3275 10.6668 13.3223 10.6668Z"
+      fill="#5865F2"
+    />
+  </svg>
+);
diff --git a/account-kit/react/src/icons/auth-icons/facebook.tsx b/account-kit/react/src/icons/auth-icons/facebook.tsx
@@ -0,0 +1,27 @@
+import type { SVGProps } from "react";
+
+export const FacebookIcon = (
+  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>
+) => {
+  return (
+    <svg
+      width="21"
+      height="20"
+      viewBox="0 0 21 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g>
+        <path
+          d="M8.85 19.9C4.1 19.05 0.5 14.95 0.5 10C0.5 4.5 5 0 10.5 0C16 0 20.5 4.5 20.5 10C20.5 14.95 16.9 19.05 12.15 19.9L11.6 19.45H9.4L8.85 19.9Z"
+          fill="#0062E0"
+        />
+        <path
+          d="M14.4004 12.7999L14.8504 9.9999H12.2004V8.0499C12.2004 7.2499 12.5004 6.6499 13.7004 6.6499H15.0004V4.0999C14.3004 3.9999 13.5004 3.8999 12.8004 3.8999C10.5004 3.8999 8.90039 5.2999 8.90039 7.7999V9.9999H6.40039V12.7999H8.90039V19.8499C9.45039 19.9499 10.0004 19.9999 10.5504 19.9999C11.1004 19.9999 11.6504 19.9499 12.2004 19.8499V12.7999H14.4004Z"
+          fill="white"
+        />
+      </g>
+    </svg>
+  );
+};
diff --git a/account-kit/react/src/icons/auth-icons/google.tsx b/account-kit/react/src/icons/auth-icons/google.tsx
@@ -0,0 +1,39 @@
+import type { SVGProps } from "react";
+
+export const GoogleIcon = ({
+  className,
+  ...props
+}: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={19}
+      height={20}
+      fill="none"
+      {...props}
+    >
+      <path
+        fill="#3E82F1"
+        fillRule="evenodd"
+        d="M18.801 10.21c0-.63-.055-1.257-.166-1.876H10v3.546h4.934a4.212 4.212 0 0 1-1.83 2.767v2.3h2.963C17.8 15.351 18.8 13.001 18.8 10.21h.001Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#32A753"
+        fillRule="evenodd"
+        d="M10 19.167c2.475 0 4.55-.821 6.067-2.22l-2.963-2.301c-.82.55-1.87.875-3.104.875-2.388 0-4.409-1.612-5.13-3.78H1.809v2.379A9.167 9.167 0 0 0 10 19.167Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#F9BB00"
+        fillRule="evenodd"
+        d="M4.871 11.742a5.412 5.412 0 0 1 0-3.483V5.884H1.808a9.181 9.181 0 0 0 0 8.234l3.063-2.376Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#E74133"
+        d="m1.808 5.884 3.063 2.375c.721-2.167 2.742-3.78 5.13-3.78 1.346 0 2.554.464 3.504 1.371l2.63-2.63C14.546 1.743 12.471.834 10 .834a9.164 9.164 0 0 0-8.192 5.05Z"
+      />
+    </svg>
+  );
+};
diff --git a/account-kit/react/src/icons/auth-icons/index.ts b/account-kit/react/src/icons/auth-icons/index.ts
@@ -0,0 +1,6 @@
+import { DiscordIcon } from "./discord.js";
+import { FacebookIcon } from "./facebook.js";
+import { GoogleIcon } from "./google.js";
+import { AppleIcon } from "./apple.js";
+
+export { DiscordIcon, GoogleIcon, FacebookIcon, AppleIcon };
diff --git a/account-kit/react/src/icons/oauth.tsx b/account-kit/react/src/icons/oauth.tsx
@@ -1,13 +1,15 @@
 import type { KnownAuthProvider } from "@account-kit/signer";
-import type { SVGProps } from "react";
 import { Spinner } from "./spinner.js";
+import { GoogleIcon, FacebookIcon } from "./auth-icons/index.js";
 
 interface ContinueWithOAuthProps {
   provider: KnownAuthProvider;
 }
 
 interface OAuthConnectionFailedWithProps {
   provider: KnownAuthProvider;
+  logoUrl?: string;
+  auth0Connection?: string;
 }
 
 // TO DO: extend for BYO auth provider
@@ -24,6 +26,8 @@ export function ContinueWithOAuth({ provider }: ContinueWithOAuthProps) {
 // TO DO: extend for BYO auth provider
 export function OAuthConnectionFailed({
   provider,
+  logoUrl,
+  auth0Connection,
 }: OAuthConnectionFailedWithProps) {
   return (
     <div className="relative flex flex-col items-center justify-center h-12 w-12">
@@ -46,92 +50,10 @@ export function OAuthConnectionFailed({
         </svg>
       </div>
       {(provider === "google" && <GoogleIcon />) ||
-        (provider === "facebook" && <FacebookIcon />)}
+        (provider === "facebook" && <FacebookIcon />) ||
+        (provider === "auth0" && logoUrl && (
+          <img src={logoUrl} alt={auth0Connection} />
+        ))}
     </div>
   );
 }
-
-// eslint-disable-next-line jsdoc/require-jsdoc
-export const GoogleIcon = ({
-  className,
-  ...props
-}: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={19}
-      height={20}
-      fill="none"
-      {...props}
-    >
-      <path
-        fill="#3E82F1"
-        fillRule="evenodd"
-        d="M18.801 10.21c0-.63-.055-1.257-.166-1.876H10v3.546h4.934a4.212 4.212 0 0 1-1.83 2.767v2.3h2.963C17.8 15.351 18.8 13.001 18.8 10.21h.001Z"
-        clipRule="evenodd"
-      />
-      <path
-        fill="#32A753"
-        fillRule="evenodd"
-        d="M10 19.167c2.475 0 4.55-.821 6.067-2.22l-2.963-2.301c-.82.55-1.87.875-3.104.875-2.388 0-4.409-1.612-5.13-3.78H1.809v2.379A9.167 9.167 0 0 0 10 19.167Z"
-        clipRule="evenodd"
-      />
-      <path
-        fill="#F9BB00"
-        fillRule="evenodd"
-        d="M4.871 11.742a5.412 5.412 0 0 1 0-3.483V5.884H1.808a9.181 9.181 0 0 0 0 8.234l3.063-2.376Z"
-        clipRule="evenodd"
-      />
-      <path
-        fill="#E74133"
-        d="m1.808 5.884 3.063 2.375c.721-2.167 2.742-3.78 5.13-3.78 1.346 0 2.554.464 3.504 1.371l2.63-2.63C14.546 1.743 12.471.834 10 .834a9.164 9.164 0 0 0-8.192 5.05Z"
-      />
-    </svg>
-  );
-};
-
-export const FacebookIcon = (
-  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>
-) => {
-  return (
-    <svg
-      width="21"
-      height="20"
-      viewBox="0 0 21 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g>
-        <path
-          d="M8.85 19.9C4.1 19.05 0.5 14.95 0.5 10C0.5 4.5 5 0 10.5 0C16 0 20.5 4.5 20.5 10C20.5 14.95 16.9 19.05 12.15 19.9L11.6 19.45H9.4L8.85 19.9Z"
-          fill="#0062E0"
-        />
-        <path
-          d="M14.4004 12.7999L14.8504 9.9999H12.2004V8.0499C12.2004 7.2499 12.5004 6.6499 13.7004 6.6499H15.0004V4.0999C14.3004 3.9999 13.5004 3.8999 12.8004 3.8999C10.5004 3.8999 8.90039 5.2999 8.90039 7.7999V9.9999H6.40039V12.7999H8.90039V19.8499C9.45039 19.9499 10.0004 19.9999 10.5504 19.9999C11.1004 19.9999 11.6504 19.9499 12.2004 19.8499V12.7999H14.4004Z"
-          fill="white"
-        />
-      </g>
-    </svg>
-  );
-};
-
-export const AppleIcon = (
-  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>
-) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={24}
-      height={24}
-      viewBox="0 0 24 24"
-      fill="none"
-      {...props}
-    >
-      <path
-        fill="#000"
-        d="M22.192 18.703c-.363.839-.793 1.61-1.29 2.32-.679.968-1.234 1.637-1.663 2.009-.663.61-1.374.923-2.136.94-.546 0-1.206-.155-1.973-.47-.77-.314-1.477-.47-2.124-.47-.679 0-1.406.156-2.185.47-.78.315-1.407.48-1.888.496-.73.031-1.458-.29-2.184-.966-.464-.404-1.044-1.098-1.739-2.08-.745-1.049-1.358-2.265-1.838-3.652-.514-1.497-.772-2.948-.772-4.352 0-1.608.348-2.995 1.044-4.158A6.122 6.122 0 0 1 5.63 6.58a5.88 5.88 0 0 1 2.955-.835c.58 0 1.34.18 2.285.532.943.354 1.548.533 1.813.533.199 0 .871-.21 2.01-.628 1.079-.388 1.988-.548 2.733-.485 2.02.163 3.536.96 4.545 2.393-1.806 1.094-2.699 2.627-2.681 4.593.016 1.531.572 2.806 1.663 3.817.495.47 1.048.833 1.663 1.09-.134.387-.274.758-.424 1.113ZM17.561.48c0 1.2-.439 2.321-1.313 3.358-1.054 1.234-2.33 1.946-3.714 1.834a3.742 3.742 0 0 1-.027-.455c0-1.152.501-2.386 1.392-3.394.445-.51 1.01-.935 1.696-1.273.685-.334 1.332-.518 1.94-.55.019.16.026.32.026.48Z"
-      />
-    </svg>
-  );
-};
diff --git a/examples/ui-demo/public/images/discord.svg b/examples/ui-demo/public/images/discord.svg
diff --git a/examples/ui-demo/public/images/twitter.svg b/examples/ui-demo/public/images/twitter.svg
diff --git a/examples/ui-demo/src/app/config.tsx b/examples/ui-demo/src/app/config.tsx
@@ -13,7 +13,10 @@ export type Config = {
     showPasskey: boolean;
     addPasskey: boolean;
     showOAuth: boolean;
-    oAuthMethods: Record<KnownAuthProvider | "auth0", boolean>;
+    oAuthMethods: Record<
+      KnownAuthProvider | "auth0" | "twitter" | "discord",
+      boolean
+    >;
   };
   ui: {
     theme: "light" | "dark";
@@ -51,6 +54,8 @@ export const DEFAULT_CONFIG: Config = {
       facebook: true,
       auth0: false,
       apple: false,
+      discord: true,
+      twitter: true,
       // TO DO: extend for BYO auth provider
     },
   },