@crossmint/client-sdk-react-ui 1.8.0 → 1.9.2

package/src/components/common/InputOTP.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { createContext, useContext } from "react";
+import { classNames } from "@/utils/classNames";
+
+// Define the type for customStyles
+type CustomStyles = {
+    textPrimary: string;
+    inputBackground: string;
+    buttonBackground: string;
+    accent: string;
+    danger: string;
+    border: string;
+    borderRadius?: string;
+};
+
+// Create a context for customStyles
+const CustomStylesContext = createContext<CustomStyles | undefined>(undefined);
+
+const InputOTP = React.forwardRef<
+    React.ElementRef<typeof OTPInput>,
+    React.ComponentPropsWithoutRef<typeof OTPInput> & { customStyles?: CustomStyles }
+>(({ className, containerClassName, customStyles, ...props }, ref) => (
+    <CustomStylesContext.Provider value={customStyles}>
+        <OTPInput
+            autoFocus
+            ref={ref}
+            containerClassName={classNames("flex items-center gap-2 has-[:disabled]:opacity-50", containerClassName)}
+            className={classNames("disabled:cursor-not-allowed", className)}
+            {...props}
+        />
+    </CustomStylesContext.Provider>
+));
+InputOTP.displayName = "InputOTP";
+
+const InputOTPGroup = React.forwardRef<React.ElementRef<"div">, React.ComponentPropsWithoutRef<"div">>(
+    ({ className, ...props }, ref) => (
+        <div ref={ref} className={classNames("flex gap-2 items-center", className)} {...props} />
+    )
+);
+InputOTPGroup.displayName = "InputOTPGroup";
+
+const InputOTPSlot = React.forwardRef<
+    React.ElementRef<"div">,
+    React.ComponentPropsWithoutRef<"div"> & {
+        index: number;
+        hasError?: boolean;
+    }
+>(({ index, className, hasError, ...props }, ref) => {
+    const inputOTPContext = React.useContext(OTPInputContext);
+    const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+    const customStyles = useContext(CustomStylesContext);
+
+    return (
+        <div
+            ref={ref}
+            className={classNames(
+                "relative flex h-14 w-12 items-center justify-center border text-lg transition-all rounded-md text-cm-text-primary",
+                isActive && `z-10 ring-2 ring-offset-background`,
+                className
+            )}
+            style={{
+                borderRadius: customStyles?.borderRadius,
+                borderColor: hasError ? customStyles?.danger : customStyles?.border,
+                boxShadow: isActive ? `0 0 0 2px ${customStyles?.accent}` : "none",
+                backgroundColor: char ? customStyles?.buttonBackground : customStyles?.inputBackground,
+            }}
+            {...props}
+        >
+            {char}
+            {hasFakeCaret && (
+                <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+                    <div
+                        className="h-4 w-px animate-caret-blink duration-1000"
+                        style={{
+                            height: "18px",
+                            backgroundColor: customStyles?.textPrimary,
+                        }}
+                    />
+                </div>
+            )}
+        </div>
+    );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+
+export { InputOTP, InputOTPGroup, InputOTPSlot };

package/src/components/common/PoweredByCrossmint.tsx

@@ -1,16 +1,11 @@
 import { PoweredByLeaf } from "@/icons/poweredByLeaf";
+import { classNames } from "@/utils/classNames";
 
-export function PoweredByCrossmint({ color }: { color?: string }) {
+export function PoweredByCrossmint({ color, className }: { color?: string; className?: string }) {
     return (
         <p
-            style={{
-                display: "flex",
-                fontSize: "0.75rem",
-                fontWeight: "400",
-                letterSpacing: "-0.2px",
-                padding: "0.5rem",
-                color: color || "#67797F",
-            }}
+            className={classNames("flex text-xs font-normal tracking-tight p-2 items-center", className)}
+            style={{ color: color || "#67797F" }}
         >
             Powered by
             <span className="flex self-center pl-1 gap-1 items-center font-semibold">

package/src/components/common/Spinner.tsx

@@ -0,0 +1,22 @@
+import type React from "react";
+import { classNames } from "@/utils/classNames";
+
+export const Spinner = ({ className, style }: { className?: string; style?: React.CSSProperties }) => (
+    <svg
+        aria-hidden="true"
+        className={classNames("w-6 h-6 fill-cm-text-primary text-cm-text-secondary animate-spin", className)}
+        style={style}
+        viewBox="0 0 100 101"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+            fill="currentColor"
+        />
+        <path
+            d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+            fill="currentFill"
+        />
+    </svg>
+);

package/src/components/dynamic-xyz/DynamicContextProviderWrapper.tsx

@@ -1,17 +1,27 @@
+import type { APIKeyEnvironmentPrefix } from "@crossmint/common-sdk-base";
 import { type DynamicContextProps, DynamicContextProvider } from "@dynamic-labs/sdk-react-core";
 import type { ReactNode } from "react";
 
 export interface DynamicContextProviderWrapperProps {
     children?: ReactNode;
     settings: Omit<DynamicContextProps["settings"], "initialAuthenticationMode" | "environmentId">;
+    apiKeyEnvironment: APIKeyEnvironmentPrefix;
 }
 
-export default function DynamicContextProviderWrapper({ children, settings }: DynamicContextProviderWrapperProps) {
+export default function DynamicContextProviderWrapper({
+    children,
+    settings,
+    apiKeyEnvironment,
+}: DynamicContextProviderWrapperProps) {
     return (
         <DynamicContextProvider
             settings={{
                 initialAuthenticationMode: "connect-only",
-                environmentId: "cd53135a-b32b-4704-bfca-324b665e9329", // TODO: Key per env
+                environmentId:
+                    apiKeyEnvironment === "production"
+                        ? "3fc6c24e-6a8e-45f8-aae1-a87d7a027e12"
+                        : "cd53135a-b32b-4704-bfca-324b665e9329",
+                cssOverrides: `.powered-by-dynamic { display: none !important; }`,
                 ...settings,
             }}
         >

package/src/components/embed/v3/EmbeddedCheckoutV3IFrame.tsx

@@ -63,7 +63,12 @@ export function EmbeddedCheckoutV3IFrame(props: CrossmintEmbeddedCheckoutV3Props
                     backgroundColor: "transparent",
                 }}
             />
-            {props.payment.crypto.enabled ? <CryptoWalletConnectionHandler iframeClient={iframeClient} /> : null}
+            {props.payment.crypto.enabled ? (
+                <CryptoWalletConnectionHandler
+                    iframeClient={iframeClient}
+                    apiKeyEnvironment={apiClient["parsedAPIKey"].environment}
+                />
+            ) : null}
         </>
     );
 }

package/src/components/embed/v3/crypto/CryptoWalletConnectionHandler.tsx

@@ -1,17 +1,25 @@
 import DynamicContextProviderWrapper from "@/components/dynamic-xyz/DynamicContextProviderWrapper";
 import type { EmbeddedCheckoutV3IFrameEmitter } from "@crossmint/client-sdk-base";
-import { type BlockchainIncludingTestnet, chainIdToBlockchain } from "@crossmint/common-sdk-base";
+import {
+    type APIKeyEnvironmentPrefix,
+    type BlockchainIncludingTestnet,
+    chainIdToBlockchain,
+} from "@crossmint/common-sdk-base";
 import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
 import { type HandleConnectedWallet, useDynamicContext } from "@dynamic-labs/sdk-react-core";
 import { SolanaWalletConnectors } from "@dynamic-labs/solana";
 import { useEffect } from "react";
 import { handleSendTransaction } from "./utils/handleSendTransaction";
 
-export function CryptoWalletConnectionHandler(props: { iframeClient: EmbeddedCheckoutV3IFrameEmitter | null }) {
-    const { iframeClient } = props;
+export function CryptoWalletConnectionHandler(props: {
+    iframeClient: EmbeddedCheckoutV3IFrameEmitter | null;
+    apiKeyEnvironment: APIKeyEnvironmentPrefix;
+}) {
+    const { iframeClient, apiKeyEnvironment } = props;
 
     return (
         <DynamicContextProviderWrapper
+            apiKeyEnvironment={apiKeyEnvironment}
             settings={{
                 walletConnectors: [EthereumWalletConnectors, SolanaWalletConnectors],
                 events: {

package/src/components/index.ts

@@ -3,5 +3,6 @@ export * from "./CrossmintNFTDetail";
 
 export * from "./embed";
 export * from "./hosted";
-
 export * from "./embed/v3";
+
+export { EmbeddedAuthForm } from "./auth/EmbeddedAuthForm";

package/src/hooks/useAuthSignIn.ts

@@ -0,0 +1,117 @@
+import type { UseSignInData } from "@farcaster/auth-kit";
+
+export function useAuthSignIn() {
+    return {
+        onEmailSignIn,
+        onConfirmEmailOtp,
+        onFarcasterSignIn,
+    };
+}
+
+async function onEmailSignIn(email: string, options: { baseUrl: string; apiKey: string }) {
+    try {
+        const queryParams = new URLSearchParams({ apiKey: options.apiKey });
+        const response = await fetch(`${options.baseUrl}api/2024-09-26/session/sdk/auth/otps/send?${queryParams}`, {
+            headers: {
+                "Content-Type": "application/json",
+                "x-api-key": options.apiKey,
+            },
+            credentials: "same-origin",
+            cache: "no-cache",
+            mode: "cors",
+            method: "POST",
+            body: JSON.stringify({ email }),
+        });
+
+        if (!response?.ok) {
+            throw new Error("Failed to send email. Please try again or contact support.");
+        }
+
+        return await response.json();
+    } catch (err) {
+        console.error("Error signing in via email ", err);
+        throw new Error("Error signing in via email " + err);
+    }
+}
+
+async function onConfirmEmailOtp(
+    email: string,
+    emailId: string,
+    token: string,
+    options: { baseUrl: string; apiKey: string }
+) {
+    try {
+        const queryParams = new URLSearchParams({
+            email,
+            signinAuthenticationMethod: "email",
+            apiKey: options.apiKey,
+            token,
+            locale: "en",
+            state: emailId,
+            callbackUrl: `${options.baseUrl}api/2024-09-26/session/sdk/auth/we-dont-actually-use-this-anymore`,
+        });
+        const response = await fetch(`${options.baseUrl}api/2024-09-26/session/sdk/auth/authenticate?${queryParams}`, {
+            headers: {
+                "Content-Type": "application/json",
+                "x-api-key": options.apiKey,
+            },
+            credentials: "same-origin",
+            cache: "no-cache",
+            mode: "cors",
+            method: "POST",
+        });
+
+        if (!response?.ok) {
+            throw new Error("Failed to confirm email otp. Please try again or contact support.");
+        }
+
+        const data = await response.json();
+        const callbackUrl = new URL(data.callbackUrl);
+
+        // parse the oneTimeSecret from the callbackUrl response
+        return callbackUrl.searchParams.get("oneTimeSecret");
+    } catch (err) {
+        console.error("Error confirming email otp ", err);
+        throw new Error("Error confirming email otp " + err);
+    }
+}
+
+async function onFarcasterSignIn(data: UseSignInData, options: { baseUrl: string; apiKey: string }) {
+    try {
+        const queryParams = new URLSearchParams({
+            signinAuthenticationMethod: "farcaster",
+            apiKey: options.apiKey,
+            callbackUrl: `${options.baseUrl}sdk/2024-09-26/auth/callback?isPopup=false`,
+        });
+
+        const response = await fetch(`${options.baseUrl}api/2024-09-26/session/sdk/auth/authenticate?${queryParams}`, {
+            headers: {
+                "Content-Type": "application/json",
+                "x-api-key": options.apiKey,
+            },
+            body: JSON.stringify({
+                ...data,
+                domain: data.signatureParams.domain,
+                redirect: true,
+                callbackUrl: `${options.baseUrl}sdk/2024-09-26/auth/callback?isPopup=false`,
+            }),
+            credentials: "same-origin",
+            cache: "no-cache",
+            mode: "cors",
+            method: "POST",
+        });
+
+        if (!response?.ok) {
+            throw new Error("Failed to sign in via farcaster. Please try again or contact support.");
+        }
+
+        const resData = await response.json();
+        const callbackUrl = new URL(resData.callbackUrl);
+
+        // parse the oneTimeSecret from the callbackUrl response
+        return callbackUrl.searchParams.get("oneTimeSecret");
+    } catch (err) {
+        console.error("Error signing in via farcaster ", err);
+        throw new Error("Error signing in via farcaster " + err);
+    }
+}

package/src/hooks/useOAuthWindowListener.ts

@@ -0,0 +1,87 @@
+import type { OAuthProvider } from "@crossmint/common-sdk-auth";
+import { ChildWindow, PopupWindow } from "@crossmint/client-sdk-window";
+import type { AuthMaterialWithUser } from "@crossmint/common-sdk-auth";
+import { useEffect, useRef, useState } from "react";
+import { z } from "zod";
+import { useAuthForm } from "@/providers/auth/AuthFormProvider";
+
+export const useOAuthWindowListener = (
+    provider: OAuthProvider,
+    options: {
+        apiKey: string;
+        baseUrl: string;
+        fetchAuthMaterial: (refreshToken: string) => Promise<AuthMaterialWithUser>;
+    }
+) => {
+    const { oauthUrlMap } = useAuthForm();
+    const [isLoading, setIsLoading] = useState(false);
+    const childRef = useRef<ChildWindow<IncomingEvents, OutgoingEvents> | null>(null);
+
+    useEffect(() => {
+        if (childRef.current == null) {
+            childRef.current = new ChildWindow<IncomingEvents, OutgoingEvents>(window.opener || window.parent, "*", {
+                incomingEvents,
+                outgoingEvents,
+            });
+        }
+
+        return () => {
+            if (childRef.current != null) {
+                childRef.current.off("authMaterialFromPopupCallback");
+            }
+        };
+    }, []);
+
+    const createPopupAndSetupListeners = async () => {
+        if (childRef.current == null) {
+            throw new Error("Child window not initialized");
+        }
+        setIsLoading(true);
+        const popup = await PopupWindow.init(oauthUrlMap[provider], {
+            awaitToLoad: false,
+            crossOrigin: true,
+            width: 400,
+            height: 700,
+        });
+
+        const handleAuthMaterial = async (data: { oneTimeSecret: string }) => {
+            await options.fetchAuthMaterial(data.oneTimeSecret);
+            childRef.current?.off("authMaterialFromPopupCallback");
+            popup.window.close();
+            setIsLoading(false);
+        };
+
+        childRef.current.on("authMaterialFromPopupCallback", handleAuthMaterial);
+
+        // Add a check for manual window closure
+        // Ideally we should find a more explicit way of doing this, but I think this is fine for now.
+        const checkWindowClosure = setInterval(() => {
+            if (popup.window.closed) {
+                clearInterval(checkWindowClosure);
+                setIsLoading(false);
+                childRef.current?.off("authMaterialFromPopupCallback");
+            }
+        }, 2500); // Check every 2.5 seconds
+    };
+
+    return {
+        createPopupAndSetupListeners,
+        isLoading,
+    };
+};
+
+const incomingEvents = {
+    authMaterialFromPopupCallback: z.object({ oneTimeSecret: z.string() }),
+};
+
+const outgoingEvents = {
+    authMaterialFromAuthFrame: z.object({ oneTimeSecret: z.string() }),
+};
+
+type IncomingEvents = {
+    authMaterialFromPopupCallback: typeof incomingEvents.authMaterialFromPopupCallback;
+};
+
+type OutgoingEvents = {
+    authMaterialFromAuthFrame: typeof outgoingEvents.authMaterialFromAuthFrame;
+};

package/src/icons/alert.tsx

@@ -0,0 +1,19 @@
+export function AlertIcon({ customColor = "#f44336" }: { customColor?: string }) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke={customColor}
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        >
+            <circle cx="12" cy="12" r="10" />
+            <line x1="12" x2="12" y1="8" y2="12" />
+            <line x1="12" x2="12.01" y1="16" y2="16" />
+        </svg>
+    );
+}

package/src/icons/discord.tsx

@@ -0,0 +1,18 @@
+export function DiscordIcon({ className }: { className?: string }) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            x="0px"
+            y="0px"
+            width="100"
+            height="100"
+            viewBox="0 0 48 48"
+            className={className}
+        >
+            <path
+                fill="#8c9eff"
+                d="M40,12c0,0-4.585-3.588-10-4l-0.488,0.976C34.408,10.174,36.654,11.891,39,14c-4.045-2.065-8.039-4-15-4s-10.955,1.935-15,4c2.346-2.109,5.018-4.015,9.488-5.024L18,8c-5.681,0.537-10,4-10,4s-5.121,7.425-6,22c5.162,5.953,13,6,13,6l1.639-2.185C13.857,36.848,10.715,35.121,8,32c3.238,2.45,8.125,5,16,5s12.762-2.55,16-5c-2.715,3.121-5.857,4.848-8.639,5.815L33,40c0,0,7.838-0.047,13-6C45.121,19.425,40,12,40,12z M17.5,30c-1.933,0-3.5-1.791-3.5-4c0-2.209,1.567-4,3.5-4s3.5,1.791,3.5,4C21,28.209,19.433,30,17.5,30z M30.5,30c-1.933,0-3.5-1.791-3.5-4c0-2.209,1.567-4,3.5-4s3.5,1.791,3.5,4C34,28.209,32.433,30,30.5,30z"
+            ></path>
+        </svg>
+    );
+}

package/src/icons/emailOTP.tsx

@@ -0,0 +1,147 @@
+export function EmailOtpIcon({
+    customAccentColor = "#04AA6D",
+    customButtonBackgroundColor = "#F2F3F7",
+    customBackgroundColor = "#ffffff",
+}: { customAccentColor?: string; customButtonBackgroundColor?: string; customBackgroundColor?: string }) {
+    return (
+        <svg width="136" height="113" viewBox="0 0 136 113" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <mask id="mask0_944_1329" maskUnits="userSpaceOnUse" x="8" y="8" width="97" height="97">
+                <path
+                    d="M104.598 56.2539C104.598 82.7636 83.1073 104.254 56.5977 104.254C30.088 104.254 8.59766 82.7636 8.59766 56.2539C8.59766 29.7442 30.088 8.25391 56.5977 8.25391C83.1073 8.25391 104.598 29.7442 104.598 56.2539Z"
+                    fill="#D9D9D9"
+                />
+            </mask>
+            <g mask="url(#mask0_944_1329)">
+                <circle cx="56.5977" cy="56.2539" r="48" fill={customButtonBackgroundColor} />
+                <g filter="url(#filter0_d_944_1329)">
+                    <mask id="mask1_944_1329" maskUnits="userSpaceOnUse" x="29" y="37" width="55" height="37">
+                        <rect x="29.2957" y="37.5449" width="54.604" height="35.8658" rx="3.212" fill="#52E0B5" />
+                    </mask>
+                    <g mask="url(#mask1_944_1329)">
+                        <rect
+                            x="29.2957"
+                            y="34.8662"
+                            width="54.604"
+                            height="38.544"
+                            rx="3.212"
+                            fill={customBackgroundColor}
+                        />
+                        <mask id="mask2_944_1329" maskUnits="userSpaceOnUse" x="29" y="51" width="55" height="41">
+                            <path
+                                d="M31.8833 74.2272C29.1168 72.267 29.1866 68.1383 32.0178 66.2728L53.9469 51.8234C55.5553 50.7636 57.6403 50.7636 59.2487 51.8234L81.1779 66.2728C84.0091 68.1383 84.0789 72.267 81.3124 74.2272L56.5978 91.7381L31.8833 74.2272Z"
+                                fill="#52E0B5"
+                            />
+                        </mask>
+                        <g mask="url(#mask2_944_1329)">
+                            <path
+                                d="M32.0675 73.9008C29.5307 72.1034 29.5947 68.3175 32.1909 66.6068L54.12 52.1574C55.5949 51.1856 57.5068 51.1856 58.9817 52.1574L80.9108 66.6068C83.507 68.3175 83.571 72.1034 81.0341 73.9008L56.5508 91.2479L32.0675 73.9008Z"
+                                stroke="#D0D5DD"
+                                strokeWidth="0.8"
+                            />
+                        </g>
+                        <path
+                            d="M26.9443 36.6072C23.1618 33.6476 22.8212 28.0457 26.2172 24.6497L50.9406 -0.073638C54.0648 -3.19783 59.1301 -3.19783 62.2543 -0.0736384L86.9776 24.6497C90.3737 28.0457 90.033 33.6476 86.2506 36.6072L61.5272 55.9514C58.6312 58.2173 54.5636 58.2173 51.6677 55.9514L26.9443 36.6072Z"
+                            fill={customBackgroundColor}
+                        />
+                        <path
+                            d="M27.1908 36.2921C23.5974 33.4806 23.2738 28.1588 26.5001 24.9326L51.2234 0.209205C54.1914 -2.75878 59.0035 -2.75878 61.9714 0.209205L86.6948 24.9326C89.921 28.1588 89.5974 33.4806 86.0041 36.2921L61.2807 55.6364C58.5296 57.789 54.6653 57.789 51.9142 55.6364L27.1908 36.2921Z"
+                            stroke="#67797F"
+                            strokeOpacity="0.45"
+                            strokeWidth="0.8"
+                        />
+                    </g>
+                </g>
+            </g>
+            <g filter="url(#filter1_d_944_1329)">
+                <path
+                    d="M106.88 68.5039H82.8799C74.5956 68.5039 67.8799 75.2196 67.8799 83.5039C67.8799 91.7882 74.5956 98.5039 82.8799 98.5039H106.88C115.164 98.5039 121.88 91.7882 121.88 83.5039C121.88 75.2196 115.164 68.5039 106.88 68.5039Z"
+                    fill={customBackgroundColor}
+                />
+            </g>
+            <g clipPath="url(#clip0_944_1329)">
+                <mask id="mask3_944_1329" maskUnits="userSpaceOnUse" x="70" y="71" width="49" height="25">
+                    <path d="M118.88 71.5039H70.8799V95.5039H118.88V71.5039Z" fill="white" />
+                </mask>
+                <g mask="url(#mask3_944_1329)">
+                    <path d="M118.88 71.5039H70.8799V95.5039H118.88V71.5039Z" fill="url(#paint0_linear_944_1329)" />
+                    <path d="M118.88 71.5039H70.8799V95.5039H118.88V71.5039Z" fill={customAccentColor} />
+                </g>
+                <path
+                    d="M80.5866 87.7014L80.7337 85.1127L78.5604 86.5381L77.7805 85.183L80.1009 84.0196L77.7805 82.8563L78.5604 81.5012L80.7337 82.9266L80.5866 80.3378H82.1399L81.9993 82.9266L84.1726 81.5012L84.9524 82.8563L82.6257 84.0196L84.9524 85.183L84.1726 86.5381L81.9993 85.1127L82.1399 87.7014H80.5866ZM90.0001 87.7014L90.1471 85.1127L87.9738 86.5381L87.194 85.183L89.5143 84.0196L87.194 82.8563L87.9738 81.5012L90.1471 82.9266L90.0001 80.3378H91.5534L91.4127 82.9266L93.586 81.5012L94.3659 82.8563L92.0391 84.0196L94.3659 85.183L93.586 86.5381L91.4127 85.1127L91.5534 87.7014H90.0001ZM99.4135 87.7014L99.5605 85.1127L97.3872 86.5381L96.6074 85.183L98.9277 84.0196L96.6074 82.8563L97.3872 81.5012L99.5605 82.9266L99.4135 80.3378H100.967L100.826 82.9266L102.999 81.5012L103.779 82.8563L101.453 84.0196L103.779 85.183L102.999 86.5381L100.826 85.1127L100.967 87.7014H99.4135ZM108.827 87.7014L108.974 85.1127L106.801 86.5381L106.021 85.183L108.341 84.0196L106.021 82.8563L106.801 81.5012L108.974 82.9266L108.827 80.3378H110.38L110.24 82.9266L112.413 81.5012L113.193 82.8563L110.866 84.0196L113.193 85.183L112.413 86.5381L110.24 85.1127L110.38 87.7014H108.827Z"
+                    fill={customBackgroundColor}
+                />
+            </g>
+            <defs>
+                <filter
+                    id="filter0_d_944_1329"
+                    x="11.6957"
+                    y="28.7449"
+                    width="89.804"
+                    height="71.0657"
+                    filterUnits="userSpaceOnUse"
+                    colorInterpolationFilters="sRGB"
+                >
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feColorMatrix
+                        in="SourceAlpha"
+                        type="matrix"
+                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                        result="hardAlpha"
+                    />
+                    <feOffset dy="8.8" />
+                    <feGaussianBlur stdDeviation="8.8" />
+                    <feComposite in2="hardAlpha" operator="out" />
+                    <feColorMatrix
+                        type="matrix"
+                        values="0 0 0 0 0.0370486 0 0 0 0 0.087038 0 0 0 0 0.0916667 0 0 0 0.16 0"
+                    />
+                    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_944_1329" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_944_1329" result="shape" />
+                </filter>
+                <filter
+                    id="filter1_d_944_1329"
+                    x="53.8799"
+                    y="54.5039"
+                    width="82"
+                    height="58"
+                    filterUnits="userSpaceOnUse"
+                    colorInterpolationFilters="sRGB"
+                >
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feColorMatrix
+                        in="SourceAlpha"
+                        type="matrix"
+                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                        result="hardAlpha"
+                    />
+                    <feOffset />
+                    <feGaussianBlur stdDeviation="7" />
+                    <feComposite in2="hardAlpha" operator="out" />
+                    <feColorMatrix
+                        type="matrix"
+                        values="0 0 0 0 0.0362847 0 0 0 0 0.0869733 0 0 0 0 0.0916667 0 0 0 0.12 0"
+                    />
+                    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_944_1329" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_944_1329" result="shape" />
+                </filter>
+                <linearGradient
+                    id="paint0_linear_944_1329"
+                    x1="103.915"
+                    y1="95.5039"
+                    x2="97.9027"
+                    y2="68.179"
+                    gradientUnits="userSpaceOnUse"
+                >
+                    <stop stopColor="#2E996C" />
+                    <stop offset="1" stopColor="#D0F2E5" />
+                </linearGradient>
+                <clipPath id="clip0_944_1329">
+                    <path
+                        d="M70.8799 83.5039C70.8799 76.8765 76.2525 71.5039 82.8799 71.5039H106.88C113.507 71.5039 118.88 76.8765 118.88 83.5039C118.88 90.1313 113.507 95.5039 106.88 95.5039H82.8799C76.2525 95.5039 70.8799 90.1313 70.8799 83.5039Z"
+                        fill={customBackgroundColor}
+                    />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+}

package/src/icons/farcaster.tsx

@@ -0,0 +1,26 @@
+export const FarcasterIcon = ({ className }: { className?: string }) => {
+    return (
+        <svg
+            width="24"
+            height="24"
+            viewBox="0 0 1000 1000"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className={className}
+        >
+            <rect width="1000" height="1000" fill="#855DCD" />
+            <path
+                d="M257.778 155.556H742.222V844.444H671.111V528.889H670.414C662.554 441.677 589.258 373.333 500 373.333C410.742 373.333 337.446 441.677 329.586 528.889H328.889V844.444H257.778V155.556Z"
+                fill="white"
+            />
+            <path
+                d="M128.889 253.333L157.778 351.111H182.222V746.667C169.949 746.667 160 756.616 160 768.889V795.556H155.556C143.283 795.556 133.333 805.505 133.333 817.778V844.444H382.222V817.778C382.222 805.505 372.273 795.556 360 795.556H355.556V768.889C355.556 756.616 345.606 746.667 333.333 746.667H306.667V253.333H128.889Z"
+                fill="white"
+            />
+            <path
+                d="M675.555 746.667C663.282 746.667 653.333 756.616 653.333 768.889V795.556H648.889C636.616 795.556 626.667 805.505 626.667 817.778V844.444H875.555V817.778C875.555 805.505 865.606 795.556 853.333 795.556H848.889V768.889C848.889 756.616 838.94 746.667 826.667 746.667V351.111H851.111L880 253.333H702.222V746.667H675.555Z"
+                fill="white"
+            />
+        </svg>
+    );
+};