feat: add walletClient

Author: turnekybc

examples/react-components/src/app/dashboard/page.tsx

@@ -56,7 +56,7 @@ export default function Dashboard() {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [isPasskeyModalOpen, setIsPasskeyModalOpen] = useState(false);
   const [messageToSign, setMessageToSign] = useState(
-    "Signing within Turnkey Demo.",
+    "Signing within Turnkey Demo."
   );
   const [signature, setSignature] = useState<any>(null);
   const [suborgId, setSuborgId] = useState<string>("");
@@ -135,7 +135,7 @@ export default function Dashboard() {
     await authIframeClient?.updateUser({
       organizationId: suborgId,
       userId: user.userId,
-      email: emailInput,
+      userEmail: emailInput,
     });
 
     const sendOtpResponse = await server.sendOtp({
@@ -169,7 +169,7 @@ export default function Dashboard() {
     await authIframeClient?.updateUser({
       organizationId: suborgId,
       userId: user.userId,
-      phoneNumber: phoneInput,
+      userPhoneNumber: phoneInput,
     });
 
     const sendOtpResponse = await server.sendOtp({
@@ -452,19 +452,19 @@ export default function Dashboard() {
             signature.r,
             signature.s,
             signature.v,
-            selectedAccount!,
+            selectedAccount!
           )
         : verifySolSignatureWithAddress(
             messageToSign,
             signature.r,
             signature.s,
-            selectedAccount!,
+            selectedAccount!
           );
 
     setMessageSigningResult(
       verificationPassed
         ? "Verified! The address used to sign the message matches your wallet address."
-        : "Verification failed.",
+        : "Verification failed."
     );
   };
   if (loading) {
@@ -548,13 +548,13 @@ export default function Dashboard() {
               {user &&
                 user.oauthProviders &&
                 user.oauthProviders.some((provider: { issuer: string }) =>
-                  provider.issuer.toLowerCase().includes("google"),
+                  provider.issuer.toLowerCase().includes("google")
                 ) && <span className="loginMethodDetails">{}</span>}
             </div>
             {user &&
             user.oauthProviders &&
             user.oauthProviders.some((provider: { issuer: string }) =>
-              provider.issuer.toLowerCase().includes("google"),
+              provider.issuer.toLowerCase().includes("google")
             ) ? (
               <CheckCircleIcon sx={{ color: "#4c48ff" }} />
             ) : (
@@ -571,7 +571,7 @@ export default function Dashboard() {
             {user &&
             user.oauthProviders &&
             user.oauthProviders.some((provider: { issuer: string }) =>
-              provider.issuer.toLowerCase().includes("apple"),
+              provider.issuer.toLowerCase().includes("apple")
             ) ? (
               <CheckCircleIcon sx={{ color: "#4c48ff" }} />
             ) : (
@@ -588,7 +588,7 @@ export default function Dashboard() {
             {user &&
             user.oauthProviders &&
             user.oauthProviders.some((provider: { issuer: string }) =>
-              provider.issuer.toLowerCase().includes("facebook"),
+              provider.issuer.toLowerCase().includes("facebook")
             ) ? (
               <CheckCircleIcon sx={{ color: "#4c48ff" }} />
             ) : (
@@ -664,7 +664,7 @@ export default function Dashboard() {
                         account.addressFormat === "ADDRESS_FORMAT_ETHEREUM"
                           ? `https://etherscan.io/address/${account.address}`
                           : `https://solscan.io/account/${account.address}`,
-                        "_blank",
+                        "_blank"
                       )
                     }
                     style={{
@@ -681,7 +681,7 @@ export default function Dashboard() {
                     )}
                     <span className="accountAddress">{`${account.address.slice(
                       0,
-                      5,
+                      5
                     )}...${account.address.slice(-5)}`}</span>
                     <LaunchIcon className="launchIcon" />
                   </div>

packages/sdk-react/src/components/auth/Auth.tsx

@@ -88,7 +88,7 @@ const Auth: React.FC<AuthProps> = ({
   customSmsMessage,
   customAccounts,
 }) => {
-  const { authIframeClient, passkeyClient } = useTurnkey();
+  const { authIframeClient, passkeyClient, walletClient } = useTurnkey();
   const router = useRouter();
   const [email, setEmail] = useState<string>("");
   const [phone, setPhone] = useState<string>("");
@@ -139,13 +139,13 @@ const Auth: React.FC<AuthProps> = ({
 
   const handleAuthSuccess = async (
     credentialBundle: any,
-    expirationSeconds?: string,
+    expirationSeconds?: string
   ) => {
     if (credentialBundle) {
       await authIframeClient!.injectCredentialBundle(credentialBundle);
       await authIframeClient!.loginWithAuthBundle(
         credentialBundle,
-        expirationSeconds,
+        expirationSeconds
       );
       await onAuthSuccess();
     }
@@ -195,7 +195,7 @@ const Auth: React.FC<AuthProps> = ({
       await passkeyClient?.loginWithPasskey(
         SessionType.READ_WRITE,
         authIframeClient!,
-        authIframeClient?.iframePublicKey!,
+        authIframeClient?.iframePublicKey!
       );
       router.push("/dashboard");
     } catch {
@@ -208,7 +208,7 @@ const Auth: React.FC<AuthProps> = ({
       await passkeyClient?.loginWithPasskey(
         SessionType.READ_WRITE,
         authIframeClient!,
-        authIframeClient?.iframePublicKey!,
+        authIframeClient?.iframePublicKey!
       );
       router.push("/dashboard");
     } catch (error) {
@@ -219,7 +219,7 @@ const Auth: React.FC<AuthProps> = ({
   const handleOtpLogin = async (
     type: FilterType.Email | FilterType.PhoneNumber,
     value: string,
-    otpType: string,
+    otpType: string
   ) => {
     const createSuborgData: Record<string, any> = {};
     if (type === FilterType.Email) createSuborgData.email = value;