[SDK] Feature: X auth (#4571)

gregfromstl · gregfromstl · commit 5058fdb4707c · 2024-09-13T06:12:59.000Z
## Problem solved

Short description of the bug fixed or feature added

&lt;!-- start pr-codex --&gt;

---

## PR-Codex overview
This PR adds authentication support for a new provider 'X' across various components and modules.

### Detailed summary
- Added 'X' authentication provider
- Updated authentication types and components
- Implemented 'X' authentication in multiple files

&gt; ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

&lt;!-- end pr-codex --&gt;
diff --git a/.changeset/long-rice-complain.md b/.changeset/long-rice-complain.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": minor
+---
+
+Adds X authentication
diff --git a/apps/dashboard/src/components/wallets/ConnectWalletMiniPlayground/MiniPlayground.tsx b/apps/dashboard/src/components/wallets/ConnectWalletMiniPlayground/MiniPlayground.tsx
@@ -62,7 +62,8 @@ export function usePlaygroundWallets() {
   const [socialOptions, setSocialOptions] = useState<
     Record<InAppWalletAuth, boolean>
   >({
-    line: true,
+    line: false,
+    x: true,
     google: true,
     discord: true,
     telegram: true,
diff --git a/apps/playground-web/src/app/connect/sign-in/button/page.tsx b/apps/playground-web/src/app/connect/sign-in/button/page.tsx
@@ -14,7 +14,7 @@ const defaultInAppLoginMethods: ConnectPlaygroundOptions["inAppWallet"]["methods
     "telegram",
     "farcaster",
     "email",
-    "line",
+    "x",
     "passkey",
     "phone",
   ];
diff --git a/apps/playground-web/src/app/connect/sign-in/components/InAppWalletFormGroup.tsx b/apps/playground-web/src/app/connect/sign-in/components/InAppWalletFormGroup.tsx
@@ -15,6 +15,7 @@ const allInAppWalletLoginMethods: InAppWalletAuth[] = [
   "passkey",
   "phone",
   "line",
+  "x",
   "facebook",
   "apple",
 ];
diff --git a/packages/thirdweb/src/react/core/utils/walletIcon.ts b/packages/thirdweb/src/react/core/utils/walletIcon.ts
@@ -28,6 +28,9 @@ export const telegramIconUri =
 export const microsoftIconUri =
   "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNDggNDgiIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiPjxwYXRoIGZpbGw9IiNmZjU3MjIiIGQ9Ik02IDZIMjJWMjJINnoiIHRyYW5zZm9ybT0icm90YXRlKC0xODAgMTQgMTQpIi8+PHBhdGggZmlsbD0iIzRjYWY1MCIgZD0iTTI2IDZINDJWMjJIMjZ6IiB0cmFuc2Zvcm09InJvdGF0ZSgtMTgwIDM0IDE0KSIvPjxwYXRoIGZpbGw9IiNmZmMxMDciIGQ9Ik0yNiAyNkg0MlY0MkgyNnoiIHRyYW5zZm9ybT0icm90YXRlKC0xODAgMzQgMzQpIi8+PHBhdGggZmlsbD0iIzAzYTlmNCIgZD0iTTYgMjZIMjJWNDJINnoiIHRyYW5zZm9ybT0icm90YXRlKC0xODAgMTQgMzQpIi8+PC9zdmc+";
 
+export const xIcon =
+  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjMyMCIgdmlld0JveD0iMCAwIDMyMCAzMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIzMjAiIGhlaWdodD0iMzIwIiByeD0iMjQiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0xNzcuMzE1IDE0NS4zMzVMMjQ1LjA2OCA2N0gyMjkuMDEzTDE3MC4xODIgMTM1LjAxN0wxMjMuMTk1IDY3SDY5TDE0MC4wNTUgMTY5Ljg1NEw2OSAyNTJIODUuMDU2M0wxNDcuMTgzIDE4MC4xNzJMMTk2LjgwNSAyNTJIMjUxTDE3Ny4zMTEgMTQ1LjMzNUgxNzcuMzE1Wk0xNTUuMzIzIDE3MC43NkwxNDguMTI0IDE2MC41MThMOTAuODQxNyA3OS4wMjJIMTE1LjUwM0wxNjEuNzMxIDE0NC43OTJMMTY4LjkzIDE1NS4wMzRMMjI5LjAyIDI0MC41MjVIMjA0LjM1OUwxNTUuMzIzIDE3MC43NjRWMTcwLjc2WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==";
+
 export const emailIcon =
   "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjMzMzUgMi42NjY1SDIuNjY2ODNDMS45MzA0NSAyLjY2NjUgMS4zMzM1IDMuMjYzNDYgMS4zMzM1IDMuOTk5ODRWMTEuOTk5OEMxLjMzMzUgMTIuNzM2MiAxLjkzMDQ1IDEzLjMzMzIgMi42NjY4MyAxMy4zMzMySDEzLjMzMzVDMTQuMDY5OSAxMy4zMzMyIDE0LjY2NjggMTIuNzM2MiAxNC42NjY4IDExLjk5OThWMy45OTk4NEMxNC42NjY4IDMuMjYzNDYgMTQuMDY5OSAyLjY2NjUgMTMuMzMzNSAyLjY2NjVaIiBzdHJva2U9IiMzMzg1RkYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTQuNjY2OCA0LjY2NjVMOC42ODY4MyA4LjQ2NjVDOC40ODEwMSA4LjU5NTQ1IDguMjQzMDQgOC42NjM4NCA4LjAwMDE2IDguNjYzODRDNy43NTcyOCA4LjY2Mzg0IDcuNTE5MzEgOC41OTU0NSA3LjMxMzUgOC40NjY1TDEuMzMzNSA0LjY2NjUiIHN0cm9rZT0iIzMzODVGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=";
 
@@ -49,6 +52,7 @@ export const socialIcons = {
   facebook: facebookIconUri,
   discord: discordIconUri,
   line: lineIconUri,
+  x: xIcon,
   farcaster: farcasterIconUri,
   telegram: telegramIconUri,
 };
@@ -72,6 +76,8 @@ export function getWalletIcon(provider: string) {
       return discordIconUri;
     case "line":
       return lineIconUri;
+    case "x":
+      return xIcon;
     case "farcaster":
       return farcasterIconUri;
     case "telegram":
diff --git a/packages/thirdweb/src/react/native/ui/components/WalletImage.tsx b/packages/thirdweb/src/react/native/ui/components/WalletImage.tsx
@@ -17,6 +17,7 @@ import {
   PHONE_ICON,
   TELEGRAM_ICON,
   WALLET_ICON,
+  X_ICON,
 } from "../icons/svgs.js";
 import { RNImage } from "./RNImage.js";
 
@@ -84,6 +85,8 @@ export function getAuthProviderImage(authProvider: string | null): string {
       return DISCORD_ICON;
     case "line":
       return LINE_ICON;
+    case "x":
+      return X_ICON;
     case "farcaster":
       return FARCASTER_ICON;
     case "telegram":
diff --git a/packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx b/packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx
@@ -36,6 +36,7 @@ import {
   GOOGLE_ICON,
   LINE_ICON,
   TELEGRAM_ICON,
+  X_ICON,
 } from "../icons/svgs.js";
 import type { ModalState } from "./ConnectModal.js";
 import { LoadingView } from "./LoadingView.js";
@@ -55,6 +56,7 @@ const socialIcons = {
   apple: APPLE_ICON,
   discord: DISCORD_ICON,
   line: LINE_ICON,
+  x: X_ICON,
   farcaster: FARCASTER_ICON,
   telegram: TELEGRAM_ICON,
 };
diff --git a/packages/thirdweb/src/react/native/ui/icons/svgs.ts b/packages/thirdweb/src/react/native/ui/icons/svgs.ts
@@ -93,6 +93,11 @@ export const RIGHT_ARROW = `<svg width="20" height="20" viewBox="0 0 20 20" fill
 </svg>
 `;
 
+export const X_ICON = `<svg width="320" height="320" viewBox="0 0 320 320" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="320" height="320" rx="24" fill="black"/>
+<path d="M177.315 145.335L245.068 67H229.013L170.182 135.017L123.195 67H69L140.055 169.854L69 252H85.0563L147.183 180.172L196.805 252H251L177.311 145.335H177.315ZM155.323 170.76L148.124 160.518L90.8417 79.022H115.503L161.731 144.792L168.93 155.034L229.02 240.525H204.359L155.323 170.764V170.76Z" fill="white"/>
+</svg>`;
+
 export const WALLET_ICON = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12.6667 4.66667V2.66667C12.6667 2.48986 12.5964 2.32029 12.4714 2.19526C12.3464 2.07024 12.1768 2 12 2H3.33333C2.97971 2 2.64057 2.14048 2.39052 2.39052C2.14048 2.64057 2 2.97971 2 3.33333C2 3.68696 2.14048 4.02609 2.39052 4.27614C2.64057 4.52619 2.97971 4.66667 3.33333 4.66667H13.3333C13.5101 4.66667 13.6797 4.7369 13.8047 4.86193C13.9298 4.98695 14 5.15652 14 5.33333V8M14 8H12C11.6464 8 11.3072 8.14048 11.0572 8.39052C10.8071 8.64057 10.6667 8.97971 10.6667 9.33333C10.6667 9.68696 10.8071 10.0261 11.0572 10.2761C11.3072 10.5262 11.6464 10.6667 12 10.6667H14C14.1768 10.6667 14.3464 10.5964 14.4714 10.4714C14.5964 10.3464 14.6667 10.1768 14.6667 10V8.66667C14.6667 8.48986 14.5964 8.32029 14.4714 8.19526C14.3464 8.07024 14.1768 8 14 8Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M2 3.3335V12.6668C2 13.0205 2.14048 13.3596 2.39052 13.6096C2.64057 13.8597 2.97971 14.0002 3.33333 14.0002H13.3333C13.5101 14.0002 13.6797 13.9299 13.8047 13.8049C13.9298 13.6799 14 13.5103 14 13.3335V10.6668" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
diff --git a/packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx b/packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx
@@ -107,6 +107,7 @@ export const ConnectWalletSocialOptions = (
     apple: locale.signInWithApple,
     discord: locale.signInWithDiscord,
     line: "LINE",
+    x: "X",
     farcaster: "Farcaster",
     telegram: "Telegram",
   };
diff --git a/packages/thirdweb/src/react/web/wallets/shared/oauthSignIn.ts b/packages/thirdweb/src/react/web/wallets/shared/oauthSignIn.ts
@@ -36,6 +36,7 @@ function getOauthLoginPath(
     case "farcaster":
     case "telegram":
     case "line":
+    case "x":
     case "discord":
       return getLoginUrl({ authOption, client, ecosystem });
     default:
diff --git a/packages/thirdweb/src/wallets/in-app/core/authentication/types.ts b/packages/thirdweb/src/wallets/in-app/core/authentication/types.ts
@@ -76,6 +76,7 @@ export enum AuthProvider {
   APPLE = "Apple",
   PASSKEY = "Passkey",
   DISCORD = "Discord",
+  X = "X",
   LINE = "Line",
   FARCASTER = "Farcaster",
   TELEGRAM = "Telegram",
diff --git a/packages/thirdweb/src/wallets/in-app/native/native-connector.ts b/packages/thirdweb/src/wallets/in-app/native/native-connector.ts
@@ -110,6 +110,7 @@ export class InAppNativeConnector implements InAppConnector {
       case "facebook":
       case "discord":
       case "line":
+      case "x":
       case "apple": {
         const ExpoLinking = require("expo-linking");
         const redirectUrl =
@@ -146,6 +147,7 @@ export class InAppNativeConnector implements InAppConnector {
       case "facebook":
       case "discord":
       case "line":
+      case "x":
       case "farcaster":
       case "telegram":
       case "apple": {
diff --git a/packages/thirdweb/src/wallets/in-app/web/ecosystem.ts b/packages/thirdweb/src/wallets/in-app/web/ecosystem.ts
@@ -17,6 +17,8 @@ import { createEcosystemWallet } from "../core/wallet/ecosystem-core.js";
  * - Apple
  * - Facebook
  * - Discord
+ * - LINE
+ * - X
  * - Farcaster
  *
  * Can also be configured to use Account Abstraction to directly connect to a ERC4337 smart account based on those authentication methods.
diff --git a/packages/thirdweb/src/wallets/in-app/web/in-app.ts b/packages/thirdweb/src/wallets/in-app/web/in-app.ts
@@ -16,6 +16,7 @@ import { createInAppWallet } from "../core/wallet/in-app-core.js";
  * - Discord
  * - Telegram
  * - LINE
+ * - X
  * - Farcaster
  *
  * Can also be configured to use Account Abstraction to directly connect to a ERC4337 smart account based on those authentication methods.
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
@@ -216,6 +216,7 @@ export class InAppWebConnector implements InAppConnector {
       case "telegram":
       case "farcaster":
       case "line":
+      case "x":
       case "discord": {
         return loginWithOauth({
           authOption: strategy,
@@ -277,6 +278,7 @@ export class InAppWebConnector implements InAppConnector {
       case "farcaster":
       case "telegram":
       case "line":
+      case "x":
       case "discord": {
         const authToken = await this.authenticate(args);
         return this.auth.loginWithAuthToken(authToken);
diff --git a/packages/thirdweb/src/wallets/types.ts b/packages/thirdweb/src/wallets/types.ts
@@ -25,6 +25,7 @@ export const socialAuthOptions = [
   "facebook",
   "discord",
   "line",
+  "x",
   "farcaster",
   "telegram",
 ] as const;

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"thirdweb": minor
 +---
++
 +Adds X authentication