diff --git a/.changeset/spicy-flowers-return.md b/.changeset/spicy-flowers-return.md new file mode 100644 index 00000000000..af1fe47f8b5 --- /dev/null +++ b/.changeset/spicy-flowers-return.md @@ -0,0 +1,12 @@ +--- +"thirdweb": minor +--- + +Adds SIWF for in-app wallets + +```ts +await wallet.connect({ + strategy: "farcaster", + client: CLIENT, +}); +``` diff --git a/apps/playground-web/src/lib/constants.ts b/apps/playground-web/src/lib/constants.ts index ae5f9ba541b..f94bc7fd442 100644 --- a/apps/playground-web/src/lib/constants.ts +++ b/apps/playground-web/src/lib/constants.ts @@ -9,12 +9,12 @@ export const WALLETS = [ auth: { options: [ "google", - "facebook", "discord", "apple", "email", "passkey", "phone", + "farcaster" ], mode: "redirect", }, diff --git a/packages/thirdweb/src/react/core/utils/socialIcons.ts b/packages/thirdweb/src/react/core/utils/socialIcons.ts index 63a2e0e17e9..432a0392fc6 100644 --- a/packages/thirdweb/src/react/core/utils/socialIcons.ts +++ b/packages/thirdweb/src/react/core/utils/socialIcons.ts @@ -19,6 +19,8 @@ export const twitchIconUri = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgdmlld0JveD0iMCAwIDExMS43ODY2NyAxMjcuMzg2NjciCiAgIGhlaWdodD0iMTI3LjM4NjY3IgogICB3aWR0aD0iMTExLjc4NjY3IgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmczMzU1IgogICBzb2RpcG9kaTpkb2NuYW1lPSJUd2l0Y2hfbG9nby5zdmciCiAgIGlua3NjYXBlOnZlcnNpb249IjEuMS4xICgzYmY1YWUwZDI1LCAyMDIxLTA5LTIwKSIKICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiCiAgIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcwogICBpZD0iZGVmczI5Ij4KICAgIAogICAgCiAgPC9kZWZzPjxzb2RpcG9kaTpuYW1lZHZpZXcKICAgaWQ9Im5hbWVkdmlldzI3IgogICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICBib3JkZXJvcGFjaXR5PSIxLjAiCiAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwLjAiCiAgIGlua3NjYXBlOnBhZ2VjaGVja2VyYm9hcmQ9IjAiCiAgIHNob3dncmlkPSJmYWxzZSIKICAgaW5rc2NhcGU6em9vbT0iNC4xOTkyMjg0IgogICBpbmtzY2FwZTpjeD0iLTUwLjYwNDUzNSIKICAgaW5rc2NhcGU6Y3k9IjE0MC4zODI5MyIKICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIyNTYwIgogICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSIxMzg3IgogICBpbmtzY2FwZTp3aW5kb3cteD0iMTkxMiIKICAgaW5rc2NhcGU6d2luZG93LXk9Ii04IgogICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmczMzU1IiAvPgogIDxnCiAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywxMDEuMzkzMzMsNjcuNTg5MzMyKSIKICAgaWQ9ImczMzY1Ij4KICAgICAgPHBhdGgKICAgaWQ9InBhdGgzMzY3IgogICBzdHlsZT0iZmlsbDojNjQ0MWE1O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lIgogICBkPSJtIDAsMCAtMTMuNjUyLC0xMy42NTEgaCAtMjEuNDQ1IGwgLTExLjY5OSwtMTEuNjk3IHYgMTEuNjk3IEggLTY0LjM0NCBWIDQyLjg5MyBIIDAgWiBtIC03Mi4xNDYsNTAuNjkyIC0zLjg5OSwtMTUuNTk5IHYgLTcwLjE5IGggMTcuNTUgdiAtOS43NTEgaCA5Ljc0NiBsIDkuNzUyLDkuNzUxIGggMTUuNTk2IEwgNy43OTUsLTMuOTA1IHYgNTQuNTk3IHoiIC8+CiAgICA8L2c+PHBhdGgKICAgaWQ9InBhdGgzMzY5IgogICBzdHlsZT0iZmlsbDojNjQ0MWE1O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxLjMzMzMzIgogICBkPSJtIDQ0LjE5NzMzMSw2Mi4zOTQyNjYgaCAxMC4zOTg2NyBWIDMxLjE5MjkzMyBoIC0xMC4zOTg2NyB6IG0gMjguNTk0NjcsMCBoIDEwLjM5ODY2IFYgMzEuMTkyOTMzIGggLTEwLjM5ODY2IHoiIC8+Cjwvc3ZnPgo="; export const discordIconUri = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBpZD0iZGlzY29yZCI+PHBhdGggZmlsbD0iIzY2NjVkMiIgZD0iTTg1LjIyLDI0Ljk1OGMtMTEuNDU5LTguNTc1LTIyLjQzOC04LjMzNC0yMi40MzgtOC4zMzRsLTEuMTIyLDEuMjgyCgkJCQljMTMuNjIzLDQuMDg3LDE5Ljk1NCwxMC4wOTcsMTkuOTU0LDEwLjA5N2MtMTkuNDkxLTEwLjczMS00NC4zMTctMTAuNjU0LTY0LjU5LDBjMCwwLDYuNTcxLTYuMzMxLDIwLjk5Ni0xMC40MThsLTAuODAxLTAuOTYyCgkJCQljMCwwLTEwLjg5OS0wLjI0LTIyLjQzOCw4LjMzNGMwLDAtMTEuNTQsMjAuNzU1LTExLjU0LDQ2LjMxOWMwLDAsNi43MzIsMTEuNTQsMjQuNDQyLDEyLjEwMWMwLDAsMi45NjUtMy41MjYsNS4zNjktNi41NzEKCQkJCWMtMTAuMTc3LTMuMDQ1LTE0LjAyNC05LjM3Ni0xNC4wMjQtOS4zNzZjNi4zOTQsNC4wMDEsMTIuODU5LDYuNTA1LDIwLjkxNiw4LjA5NGMxMy4xMDgsMi42OTgsMjkuNDEzLTAuMDc2LDQxLjU5MS04LjA5NAoJCQkJYzAsMC00LjAwNyw2LjQ5MS0xNC41MDUsOS40NTZjMi40MDQsMi45NjUsNS4yODksNi40MTEsNS4yODksNi40MTFjMTcuNzEtMC41NjEsMjQuNDQxLTEyLjEwMSwyNC40NDEtMTIuMDIKCQkJCUM5Ni43NTksNDUuNzEzLDg1LjIyLDI0Ljk1OCw4NS4yMiwyNC45NTh6IE0zNS4wNTUsNjMuODI0Yy00LjQ4OCwwLTguMTc0LTMuOTI3LTguMTc0LTguODE1CgkJCQljMC4zMjgtMTEuNzA3LDE2LjEwMi0xMS42NzEsMTYuMzQ4LDBDNDMuMjI5LDU5Ljg5NywzOS42MjIsNjMuODI0LDM1LjA1NSw2My44MjR6IE02NC4zMDQsNjMuODI0CgkJCQljLTQuNDg4LDAtOC4xNzQtMy45MjctOC4xNzQtOC44MTVjMC4zNi0xMS42ODQsMTUuOTM3LTExLjY4OSwxNi4zNDgsMEM3Mi40NzgsNTkuODk3LDY4Ljg3Miw2My44MjQsNjQuMzA0LDYzLjgyNHoiPjwvcGF0aD48L3N2Zz4="; +export const farcasterIconUri = + "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIiB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cmVjdCB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIiByeD0iMjAwIiBmaWxsPSIjODU1RENEIi8+CjxwYXRoIGQ9Ik0yNTcuNzc4IDE1NS41NTZINzQyLjIyMlY4NDQuNDQ0SDY3MS4xMTFWNTI4Ljg4OUg2NzAuNDE0QzY2Mi41NTQgNDQxLjY3NyA1ODkuMjU4IDM3My4zMzMgNTAwIDM3My4zMzNDNDEwLjc0MiAzNzMuMzMzIDMzNy40NDYgNDQxLjY3NyAzMjkuNTg2IDUyOC44ODlIMzI4Ljg4OVY4NDQuNDQ0SDI1Ny43NzhWMTU1LjU1NloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xMjguODg5IDI1My4zMzNMMTU3Ljc3OCAzNTEuMTExSDE4Mi4yMjJWNzQ2LjY2N0MxNjkuOTQ5IDc0Ni42NjcgMTYwIDc1Ni42MTYgMTYwIDc2OC44ODlWNzk1LjU1NkgxNTUuNTU2QzE0My4yODMgNzk1LjU1NiAxMzMuMzMzIDgwNS41MDUgMTMzLjMzMyA4MTcuNzc4Vjg0NC40NDRIMzgyLjIyMlY4MTcuNzc4QzM4Mi4yMjIgODA1LjUwNSAzNzIuMjczIDc5NS41NTYgMzYwIDc5NS41NTZIMzU1LjU1NlY3NjguODg5QzM1NS41NTYgNzU2LjYxNiAzNDUuNjA2IDc0Ni42NjcgMzMzLjMzMyA3NDYuNjY3SDMwNi42NjdWMjUzLjMzM0gxMjguODg5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTY3NS41NTYgNzQ2LjY2N0M2NjMuMjgzIDc0Ni42NjcgNjUzLjMzMyA3NTYuNjE2IDY1My4zMzMgNzY4Ljg4OVY3OTUuNTU2SDY0OC44ODlDNjM2LjYxNiA3OTUuNTU2IDYyNi42NjcgODA1LjUwNSA2MjYuNjY3IDgxNy43NzhWODQ0LjQ0NEg4NzUuNTU2VjgxNy43NzhDODc1LjU1NiA4MDUuNTA1IDg2NS42MDYgNzk1LjU1NiA4NTMuMzMzIDc5NS41NTZIODQ4Ljg4OVY3NjguODg5Qzg0OC44ODkgNzU2LjYxNiA4MzguOTQgNzQ2LjY2NyA4MjYuNjY3IDc0Ni42NjdWMzUxLjExMUg4NTEuMTExTDg4MCAyNTMuMzMzSDcwMi4yMjJWNzQ2LjY2N0g2NzUuNTU2WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=="; export const microsoftIconUri = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNDggNDgiIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiPjxwYXRoIGZpbGw9IiNmZjU3MjIiIGQ9Ik02IDZIMjJWMjJINnoiIHRyYW5zZm9ybT0icm90YXRlKC0xODAgMTQgMTQpIi8+PHBhdGggZmlsbD0iIzRjYWY1MCIgZD0iTTI2IDZINDJWMjJIMjZ6IiB0cmFuc2Zvcm09InJvdGF0ZSgtMTgwIDM0IDE0KSIvPjxwYXRoIGZpbGw9IiNmZmMxMDciIGQ9Ik0yNiAyNkg0MlY0MkgyNnoiIHRyYW5zZm9ybT0icm90YXRlKC0xODAgMzQgMzQpIi8+PHBhdGggZmlsbD0iIzAzYTlmNCIgZD0iTTYgMjZIMjJWNDJINnoiIHRyYW5zZm9ybT0icm90YXRlKC0xODAgMTQgMzQpIi8+PC9zdmc+"; @@ -48,4 +50,5 @@ export const socialIcons = { apple: appleIconUri, facebook: facebookIconUri, discord: discordIconUri, + farcaster: farcasterIconUri, }; diff --git a/packages/thirdweb/src/react/native/ui/components/WalletImage.tsx b/packages/thirdweb/src/react/native/ui/components/WalletImage.tsx index fc67b411be0..b8913f64ae9 100644 --- a/packages/thirdweb/src/react/native/ui/components/WalletImage.tsx +++ b/packages/thirdweb/src/react/native/ui/components/WalletImage.tsx @@ -10,6 +10,7 @@ import { DISCORD_ICON, EMAIL_ICON, FACEBOOK_ICON, + FARCASTER_ICON, GOOGLE_ICON, PHONE_ICON, WALLET_ICON, @@ -76,6 +77,8 @@ export function getAuthProviderImage(lastAuthProvider: string | null): string { return FACEBOOK_ICON; case "discord": return DISCORD_ICON; + case "farcaster": + return FARCASTER_ICON; default: return WALLET_ICON; } diff --git a/packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx b/packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx index 0a935a6f99f..c062a35a3ea 100644 --- a/packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx +++ b/packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx @@ -13,6 +13,10 @@ import type { } from "../../../../wallets/in-app/core/wallet/types.js"; import { preAuthenticate } from "../../../../wallets/in-app/native/auth/index.js"; import type { Wallet } from "../../../../wallets/interfaces/wallet.js"; +import { + type SocialAuthOption, + socialAuthOptions, +} from "../../../../wallets/types.js"; import type { Theme } from "../../../core/design-system/index.js"; import { setLastAuthProvider } from "../../../core/utils/storage.js"; import { radius, spacing } from "../../design-system/index.js"; @@ -26,6 +30,7 @@ import { DISCORD_ICON, EMAIL_ICON, FACEBOOK_ICON, + FARCASTER_ICON, GOOGLE_ICON, PHONE_ICON, } from "../icons/svgs.js"; @@ -44,6 +49,7 @@ const socialIcons = { facebook: FACEBOOK_ICON, apple: APPLE_ICON, discord: DISCORD_ICON, + farcaster: FARCASTER_ICON, }; type InAppWalletFormUIProps = { @@ -62,9 +68,8 @@ export function InAppWalletUI(props: InAppWalletFormUIProps) { const { wallet, theme } = props; const config = wallet.getConfig(); const authOptions = config?.auth?.options || defaultAuthOptions; - const socialLogins = authOptions.filter( - (x) => - x === "google" || x === "apple" || x === "facebook" || x === "discord", + const socialLogins = authOptions.filter((x) => + socialAuthOptions.includes(x as SocialAuthOption), ) as InAppWalletSocialAuth[]; const [inputMode, setInputMode] = useState<"email" | "phone">("email"); diff --git a/packages/thirdweb/src/react/native/ui/icons/svgs.ts b/packages/thirdweb/src/react/native/ui/icons/svgs.ts index 0725ffc3758..d655eac47de 100644 --- a/packages/thirdweb/src/react/native/ui/icons/svgs.ts +++ b/packages/thirdweb/src/react/native/ui/icons/svgs.ts @@ -37,6 +37,13 @@ export const DISCORD_ICON = ` `; +export const FARCASTER_ICON = ` + + + + +`; + export const EMAIL_ICON = ` diff --git a/packages/thirdweb/src/react/web/ui/components/WalletImage.tsx b/packages/thirdweb/src/react/web/ui/components/WalletImage.tsx index a5d49a24dd2..476208ea4e2 100644 --- a/packages/thirdweb/src/react/web/ui/components/WalletImage.tsx +++ b/packages/thirdweb/src/react/web/ui/components/WalletImage.tsx @@ -12,6 +12,7 @@ import { discordIconUri, emailIcon, facebookIconUri, + farcasterIconUri, genericWalletIcon, googleIconUri, passkeyIcon, @@ -77,6 +78,9 @@ export function WalletImage(props: { case "discord": image = discordIconUri; break; + case "farcaster": + image = farcasterIconUri; + break; } } else { const mipdImage = getInstalledWalletProviders().find( diff --git a/packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx b/packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx index 82900f562c8..1b2b745038e 100644 --- a/packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx +++ b/packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx @@ -91,6 +91,7 @@ export const ConnectWalletSocialOptions = ( facebook: locale.signInWithFacebook, apple: locale.signInWithApple, discord: locale.signInWithDiscord, + farcaster: "Farcaster", }; const { data: ecosystemAuthOptions, isLoading } = useQuery({ diff --git a/packages/thirdweb/src/react/web/wallets/shared/oauthSignIn.ts b/packages/thirdweb/src/react/web/wallets/shared/oauthSignIn.ts index 5c9fd4b3d6f..ab9dee30225 100644 --- a/packages/thirdweb/src/react/web/wallets/shared/oauthSignIn.ts +++ b/packages/thirdweb/src/react/web/wallets/shared/oauthSignIn.ts @@ -33,6 +33,7 @@ function getOauthLoginPath( case "apple": case "facebook": case "google": + case "farcaster": case "discord": return getSocialAuthLoginPath(authOption, client, ecosystem); default: diff --git a/packages/thirdweb/src/wallets/in-app/core/authentication/type.ts b/packages/thirdweb/src/wallets/in-app/core/authentication/type.ts index 916f900ac56..cd01604cfba 100644 --- a/packages/thirdweb/src/wallets/in-app/core/authentication/type.ts +++ b/packages/thirdweb/src/wallets/in-app/core/authentication/type.ts @@ -62,6 +62,7 @@ export enum AuthProvider { APPLE = "Apple", PASSKEY = "Passkey", DISCORD = "Discord", + FARCASTER = "Farcaster", } export type OauthOption = { diff --git a/packages/thirdweb/src/wallets/in-app/native/native-connector.ts b/packages/thirdweb/src/wallets/in-app/native/native-connector.ts index 90d22afb1ee..cf5eefde379 100644 --- a/packages/thirdweb/src/wallets/in-app/native/native-connector.ts +++ b/packages/thirdweb/src/wallets/in-app/native/native-connector.ts @@ -109,6 +109,7 @@ export class InAppNativeConnector implements InAppConnector { case "google": case "facebook": case "discord": + case "farcaster": case "apple": { const ExpoLinking = require("expo-linking"); const redirectUrl = diff --git a/packages/thirdweb/src/wallets/in-app/web/lib/auth/oauth.ts b/packages/thirdweb/src/wallets/in-app/web/lib/auth/oauth.ts index ee8e6b91c45..d273069208a 100644 --- a/packages/thirdweb/src/wallets/in-app/web/lib/auth/oauth.ts +++ b/packages/thirdweb/src/wallets/in-app/web/lib/auth/oauth.ts @@ -62,12 +62,13 @@ export const loginWithOauth = async (options: { let win = options.openedWindow; let isWindowOpenedByFn = false; if (!win) { + const redirectUrl = new URL(window.location.href); win = window.open( - getSocialAuthLoginPath( + `${getSocialAuthLoginPath( options.authOption, options.client, options.ecosystem, - ), + )}&redirectUrl=${encodeURIComponent(redirectUrl.toString())}`, `Login to ${options.authOption}`, DEFAULT_POP_UP_SIZE, ); diff --git a/packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts b/packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts index 99f18eea8d1..159d5ba56a3 100644 --- a/packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts +++ b/packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts @@ -222,6 +222,7 @@ export class InAppWebConnector implements InAppConnector { case "apple": case "facebook": case "google": + case "farcaster": case "discord": { const authToken = await loginWithOauth({ authOption: strategy, diff --git a/packages/thirdweb/src/wallets/types.ts b/packages/thirdweb/src/wallets/types.ts index 6ede9631e6f..a422b3246f4 100644 --- a/packages/thirdweb/src/wallets/types.ts +++ b/packages/thirdweb/src/wallets/types.ts @@ -24,6 +24,7 @@ export const socialAuthOptions = [ "apple", "facebook", "discord", + "farcaster", ] as const; export type SocialAuthOption = (typeof socialAuthOptions)[number];