feat: ecosystem account linking

thirdweb-dev · Sep 20, 2024 · 187f460 · 187f460
1 parent 786ef9d
commit 187f460
Show file tree

Hide file tree

Showing 7 changed files with 915 additions and 840 deletions.
diff --git a/apps/playground-web/src/components/in-app-wallet/ecosystem.tsx b/apps/playground-web/src/components/in-app-wallet/ecosystem.tsx
@@ -15,12 +15,12 @@ const getEcosystem = () => {
 };
 
 export function EcosystemConnectEmbed(
-  props?: Omit<ConnectButtonProps, "client" | "theme">,
+	props?: Omit<ConnectButtonProps, "client" | "theme">,
 ) {
-  return (
-    <StyledConnectEmbed
-      {...props}
-      wallets={[ecosystemWallet(getEcosystem())]}
-    />
-  );
+	return (
+		<StyledConnectEmbed
+			{...props}
+			wallets={[ecosystemWallet(getEcosystem())]}
+		/>
+	);
 }
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkProfileScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkProfileScreen.tsx
@@ -11,80 +11,107 @@ import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
 import { Container, Line, ModalHeader } from "../../components/basic.js";
 import { Text } from "../../components/text.js";
 import type { ConnectLocale } from "../locale/types.js";
+import { isEcosystemWallet } from "../../../../../wallets/ecosystem/is-ecosystem-wallet.js";
+import EcosystemWalletConnectUI from "../../../wallets/ecosystem/EcosystemWalletConnectUI.js";
+import type { EcosystemWalletId } from "../../../../../wallets/wallet-types.js";
 
 const InAppWalletConnectUI = /* @__PURE__ */ lazy(
-  () => import("../../../wallets/in-app/InAppWalletConnectUI.js"),
+	() => import("../../../wallets/in-app/InAppWalletConnectUI.js"),
 );
 
 /**
  * @internal
  */
 export function LinkProfileScreen(props: {
-  onBack: () => void;
-  locale: ConnectLocale;
-  client: ThirdwebClient;
-  walletConnect: { projectId?: string } | undefined;
+	onBack: () => void;
+	locale: ConnectLocale;
+	client: ThirdwebClient;
+	walletConnect: { projectId?: string } | undefined;
 }) {
-  const activeWallet = useActiveWallet();
-  const chain = useActiveWalletChain();
-  const queryClient = useQueryClient();
+	const activeWallet = useActiveWallet();
+	const chain = useActiveWalletChain();
+	const queryClient = useQueryClient();
 
-  if (!activeWallet) {
-    return <LoadingScreen />;
-  }
+	if (!activeWallet) {
+		return <LoadingScreen />;
+	}
 
-  if (activeWallet.id === "inApp") {
-    return (
-      <Suspense fallback={<LoadingScreen />}>
-        <InAppWalletConnectUI
-          walletConnect={props.walletConnect}
-          wallet={activeWallet as Wallet<"inApp">}
-          done={() => {
-            queryClient.invalidateQueries({ queryKey: ["profiles"] });
-            props.onBack();
-          }}
-          connectLocale={props.locale}
-          client={props.client}
-          size="compact"
-          chain={chain}
-          meta={{
-            title: props.locale.manageWallet.linkProfile,
-            showThirdwebBranding: false,
-          }}
-          isLinking={true}
-          goBack={props.onBack}
-        />
-      </Suspense>
-    );
-  }
+	if (activeWallet.id === "inApp") {
+		return (
+			<Suspense fallback={<LoadingScreen />}>
+				<InAppWalletConnectUI
+					walletConnect={props.walletConnect}
+					wallet={activeWallet as Wallet<"inApp">}
+					done={() => {
+						queryClient.invalidateQueries({ queryKey: ["profiles"] });
+						props.onBack();
+					}}
+					connectLocale={props.locale}
+					client={props.client}
+					size="compact"
+					chain={chain}
+					meta={{
+						title: props.locale.manageWallet.linkProfile,
+						showThirdwebBranding: false,
+					}}
+					isLinking={true}
+					goBack={props.onBack}
+				/>
+			</Suspense>
+		);
+	}
 
-  return (
-    <Container
-      style={{
-        minHeight: "300px",
-      }}
-    >
-      <Container p="lg">
-        <ModalHeader
-          title={props.locale.manageWallet.linkProfile}
-          onBack={props.onBack}
-        />
-      </Container>
-      <Line />
-      <Container
-        flex="column"
-        gap="md"
-        center="both"
-        px="xl"
-        color="secondaryText"
-        style={{
-          flex: "1",
-          minHeight: "250px",
-        }}
-      >
-        <CrossCircledIcon width={iconSize.xl} height={iconSize.xl} />
-        <Text center>This wallet does not support account linking</Text>
-      </Container>
-    </Container>
-  );
+	if (isEcosystemWallet(activeWallet)) {
+		return (
+			<Suspense fallback={<LoadingScreen />}>
+				<EcosystemWalletConnectUI
+					wallet={activeWallet as Wallet<EcosystemWalletId>}
+					done={() => {
+						queryClient.invalidateQueries({ queryKey: ["profiles"] });
+						props.onBack();
+					}}
+					connectLocale={props.locale}
+					client={props.client}
+					size="compact"
+					chain={chain}
+					meta={{
+						title: props.locale.manageWallet.linkProfile,
+						showThirdwebBranding: false,
+					}}
+					isLinking={true}
+					goBack={props.onBack}
+				/>
+			</Suspense>
+		);
+	}
+
+	return (
+		<Container
+			style={{
+				minHeight: "300px",
+			}}
+		>
+			<Container p="lg">
+				<ModalHeader
+					title={props.locale.manageWallet.linkProfile}
+					onBack={props.onBack}
+				/>
+			</Container>
+			<Line />
+			<Container
+				flex="column"
+				gap="md"
+				center="both"
+				px="xl"
+				color="secondaryText"
+				style={{
+					flex: "1",
+					minHeight: "250px",
+				}}
+			>
+				<CrossCircledIcon width={iconSize.xl} height={iconSize.xl} />
+				<Text center>This wallet does not support account linking</Text>
+			</Container>
+		</Container>
+	);
 }