thirdweb 5.32.1 → 5.32.2-nightly-229561e1a79fe2ab3f010c5a8659c7e0fc497ec3-20240703090013

package/src/react/native/ui/connect/InAppWalletUI.tsx

@@ -16,12 +16,10 @@ import type { Wallet } from "../../../../wallets/interfaces/wallet.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";
-import type { useConnect } from "../../hooks/wallets/useConnect.js";
 import { RNImage } from "../components/RNImage.js";
 import { ThemedButton, ThemedButtonWithIcon } from "../components/button.js";
 import { ThemedInput, ThemedInputWithSubmit } from "../components/input.js";
 import { Spacer } from "../components/spacer.js";
-import { ThemedSpinner } from "../components/spinner.js";
 import { ThemedText } from "../components/text.js";
 import {
   APPLE_ICON,
@@ -51,7 +49,11 @@ type InAppWalletFormUIProps = {
   theme: Theme;
   wallet: Wallet<"inApp">;
   setScreen: (screen: ModalState) => void;
-  connectMutation: ReturnType<typeof useConnect>;
+  connector: (args: {
+    wallet: Wallet;
+    connectFn: () => Promise<Wallet>;
+    authMethod?: InAppWalletAuth;
+  }) => Promise<void>;
 };
 
 export function InAppWalletUI(props: InAppWalletFormUIProps) {
@@ -98,21 +100,23 @@ export function InAppWalletUI(props: InAppWalletFormUIProps) {
 function SocialLogin(
   props: InAppWalletFormUIProps & { auth: InAppWalletSocialAuth },
 ) {
-  const { theme, wallet, auth, client, connectMutation } = props;
+  const { theme, wallet, auth, client, connector } = props;
   // TODO (rn) - move this onPress and state up
   const strategy = props.auth;
-  const [selectedAuth, setSelectedAuth] = useState<InAppWalletSocialAuth>();
   const connectInAppWallet = useCallback(() => {
-    setSelectedAuth(strategy);
-    connectMutation.connect(async () => {
-      await wallet.connect({
-        client,
-        strategy: auth,
-      });
-      await setLastAuthProvider(auth, nativeLocalStorage);
-      return wallet;
+    connector({
+      wallet,
+      connectFn: async () => {
+        await wallet.connect({
+          client,
+          strategy: auth,
+        });
+        await setLastAuthProvider(auth, nativeLocalStorage);
+        return wallet;
+      },
+      authMethod: auth,
     });
-  }, [connectMutation, auth, client, wallet, strategy]);
+  }, [connector, auth, wallet, client]);
 
   return (
     <View
@@ -121,17 +125,9 @@ function SocialLogin(
         { borderColor: theme.colors.borderColor },
       ]}
     >
-      {connectMutation.isConnecting && selectedAuth === auth ? (
-        <ThemedSpinner color={theme.colors.primaryText} />
-      ) : (
-        <TouchableOpacity
-          key={strategy}
-          onPress={connectInAppWallet}
-          disabled={connectMutation.isConnecting}
-        >
-          <RNImage theme={theme} size={38} data={socialIcons[auth]} />
-        </TouchableOpacity>
-      )}
+      <TouchableOpacity key={strategy} onPress={connectInAppWallet}>
+        <RNImage theme={theme} size={38} data={socialIcons[auth]} />
+      </TouchableOpacity>
     </View>
   );
 }
@@ -215,29 +211,33 @@ export function OtpLogin(
     auth: MultiStepAuthProviderType;
   },
 ) {
-  const { theme, auth, wallet, client, connectMutation } = props;
+  const { theme, auth, wallet, client, connector } = props;
   const [verificationCode, setVerificationCode] = useState("");
 
   const connectInAppWallet = async () => {
     if (!verificationCode || !verificationCode) return;
-    await connectMutation.connect(async () => {
-      if (auth.strategy === "phone") {
-        await wallet.connect({
-          client,
-          strategy: auth.strategy,
-          phoneNumber: auth.phoneNumber,
-          verificationCode,
-        });
-      } else {
-        await wallet.connect({
-          client,
-          strategy: auth.strategy,
-          email: auth.email,
-          verificationCode,
-        });
-      }
-      await setLastAuthProvider(auth.strategy, nativeLocalStorage);
-      return wallet;
+    await connector({
+      wallet,
+      connectFn: async () => {
+        if (auth.strategy === "phone") {
+          await wallet.connect({
+            client,
+            strategy: auth.strategy,
+            phoneNumber: auth.phoneNumber,
+            verificationCode,
+          });
+        } else {
+          await wallet.connect({
+            client,
+            strategy: auth.strategy,
+            email: auth.email,
+            verificationCode,
+          });
+        }
+        await setLastAuthProvider(auth.strategy, nativeLocalStorage);
+        return wallet;
+      },
+      authMethod: auth.strategy,
     });
   };
 
@@ -265,33 +265,15 @@ export function OtpLogin(
         value={verificationCode}
         keyboardType="number-pad"
       />
-      <ThemedButton
-        theme={theme}
-        onPress={connectInAppWallet}
-        variant="accent"
-        disabled={connectMutation.isConnecting}
-      >
-        {connectMutation.isConnecting ? (
-          <ThemedSpinner color={theme.colors.accentButtonText} />
-        ) : (
-          <ThemedText
-            theme={theme}
-            type="defaultSemiBold"
-            style={{ color: theme.colors.accentButtonText }}
-          >
-            Verify
-          </ThemedText>
-        )}
-      </ThemedButton>
-      {connectMutation.error && (
+      <ThemedButton theme={theme} onPress={connectInAppWallet} variant="accent">
         <ThemedText
           theme={theme}
-          type="subtext"
-          style={{ color: theme.colors.danger }}
+          type="defaultSemiBold"
+          style={{ color: theme.colors.accentButtonText }}
         >
-          {connectMutation.error.message}
+          Verify
         </ThemedText>
-      )}
+      </ThemedButton>
     </>
   );
 }

package/src/react/native/ui/connect/WalletLoadingThumbnail.tsx

@@ -0,0 +1,98 @@
+import { useEffect, useRef } from "react";
+import { Animated, Easing, StyleSheet, View } from "react-native";
+import { Rect, Svg } from "react-native-svg";
+import type { Theme } from "../../../core/design-system/index.js";
+import { radius } from "../../design-system/index.js";
+
+const AnimatedRect = Animated.createAnimatedComponent(Rect);
+
+const PADDING = 10;
+const INTERNAL_PADDING = 5;
+
+interface Props {
+  theme: Theme;
+  children?: React.ReactNode;
+  imageSize: number;
+  showError?: boolean;
+}
+
+function WalletLoadingThumbnail({
+  theme,
+  children,
+  showError,
+  imageSize,
+}: Props) {
+  const spinValue = useRef(new Animated.Value(0));
+
+  useEffect(() => {
+    const animation = Animated.timing(spinValue.current, {
+      toValue: 1,
+      duration: 1150,
+      useNativeDriver: true,
+      easing: Easing.linear,
+    });
+
+    const loop = Animated.loop(animation);
+    loop.start();
+
+    return () => {
+      loop.stop();
+    };
+  }, []);
+
+  const spin = spinValue.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, -400],
+  });
+
+  return (
+    <View style={styles.container}>
+      <Svg
+        width={imageSize + PADDING}
+        height={imageSize + PADDING}
+        viewBox={`0 0 ${imageSize + PADDING} ${imageSize + PADDING}`}
+        style={styles.loader}
+      >
+        <AnimatedRect
+          x="2"
+          y="2"
+          width={imageSize + INTERNAL_PADDING}
+          height={imageSize + INTERNAL_PADDING}
+          rx={15}
+          stroke={showError ? "transparent" : theme.colors.accentButtonBg}
+          strokeWidth={3}
+          fill="transparent"
+          strokeDasharray={"100 300"}
+          strokeDashoffset={spin}
+        />
+      </Svg>
+      {showError && (
+        <View
+          style={[
+            {
+              position: "absolute",
+              borderWidth: 3,
+              height: imageSize + INTERNAL_PADDING,
+              width: imageSize + INTERNAL_PADDING,
+              borderRadius: radius.lg,
+              borderColor: theme.colors.borderColor,
+            },
+          ]}
+        />
+      )}
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  loader: {
+    position: "absolute",
+  },
+});
+
+export default WalletLoadingThumbnail;

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.32.1";
+export const version = "5.32.2-nightly-229561e1a79fe2ab3f010c5a8659c7e0fc497ec3-20240703090013";