Update Turnkey SDK and README; signer -> connectedSigner

README.md

@@ -9,6 +9,8 @@ This repository features a minimal consumer wallet app powered by Turnkey. Behin
 ```bash
 $ corepack enable # Updates npm for the local project
 
+$ cp .env.example .env # Now update your credentials in `.env`
 $ npm install
 $ npm start
+# Press `i` to open the app in iOS Simulator. Install Xcode if you don't have it already.
 ```

package.json

@@ -17,8 +17,8 @@
     "@peculiar/webcrypto": "~1.4.3",
     "@react-navigation/native": "~6.1.6",
     "@react-navigation/native-stack": "~6.9.12",
-    "@turnkey/ethers": "~0.9.0-beta.0",
-    "@turnkey/http": "~0.9.0-beta.0",
+    "@turnkey/ethers": "~0.10.0",
+    "@turnkey/http": "~0.10.0",
     "@walletconnect/client": "~1.8.0",
     "buffer": "~6.0.3",
     "crypto-browserify": "~3.12.0",

src/turnkey/TurnkeyQuery.ts

@@ -6,10 +6,10 @@ import {
 } from "./TurnkeyWalletContext";
 
 export function useHistoryQuery() {
-  const { signer, network, privateKeyId } = useTurnkeyWalletContext();
+  const { connectedSigner, network, privateKeyId } = useTurnkeyWalletContext();
 
   return useSWR(`/history/${network}/${privateKeyId}`, async () => {
-    const address = await signer.getAddress();
+    const address = await connectedSigner.getAddress();
     const etherscanProvider = new ethers.providers.EtherscanProvider(
       network,
       ETHERSCAN_API_KEY
@@ -27,14 +27,14 @@ export function useHistoryQuery() {
 }
 
 export function useWalletQuery() {
-  const { signer, network, privateKeyId } = useTurnkeyWalletContext();
+  const { connectedSigner, network, privateKeyId } = useTurnkeyWalletContext();
 
   return useSWR(`/wallet/${network}/${privateKeyId}`, async () => {
     return {
-      address: await signer.getAddress(),
-      balance: await signer.getBalance(),
-      transactionCount: await signer.getTransactionCount(),
-      chainId: await signer.getChainId(),
+      address: await connectedSigner.getAddress(),
+      balance: await connectedSigner.getBalance(),
+      transactionCount: await connectedSigner.getTransactionCount(),
+      chainId: await connectedSigner.getChainId(),
     };
   });
 }

src/turnkey/TurnkeyWalletContext.tsx

@@ -32,17 +32,15 @@ export const alchemyNetworkList = [
 export type TAlchemyNetwork = (typeof alchemyNetworkList)[number];
 
 type TTurnkeyWalletContextValue = {
-  signer: TurnkeySigner;
+  connectedSigner: TurnkeySigner;
   network: TAlchemyNetwork;
   setNetwork: (x: TAlchemyNetwork) => void;
   privateKeyId: string;
   setPrivateKeyId: (x: string) => void;
-};
+} | null;
 
-const TurnkeyWalletContext = React.createContext<TTurnkeyWalletContextValue>({
-  // @ts-expect-error -- not possible in practice
-  signer: null,
-});
+const TurnkeyWalletContext =
+  React.createContext<TTurnkeyWalletContextValue>(null);
 
 export function TurnkeyWalletContextProvider(props: {
   children: React.ReactNode;
@@ -52,25 +50,30 @@ export function TurnkeyWalletContextProvider(props: {
   );
   const [network, setNetwork] = React.useState<TAlchemyNetwork>("goerli");
 
-  const contextValue = React.useMemo(
-    () => ({
-      signer: new TurnkeySigner(
-        {
-          apiPublicKey: TURNKEY_API_PUBLIC_KEY,
-          apiPrivateKey: TURNKEY_API_PRIVATE_KEY,
-          baseUrl: TURNKEY_BASE_URL,
-          organizationId: TURNKEY_ORGANIZATION_ID,
-          privateKeyId,
-        },
-        new ethers.providers.AlchemyProvider(network, ALCHEMY_API_KEY)
-      ),
+  const contextValue = React.useMemo(() => {
+    const signer = new TurnkeySigner({
+      apiPublicKey: TURNKEY_API_PUBLIC_KEY,
+      apiPrivateKey: TURNKEY_API_PRIVATE_KEY,
+      baseUrl: TURNKEY_BASE_URL,
+      organizationId: TURNKEY_ORGANIZATION_ID,
+      privateKeyId,
+    });
+
+    const provider = new ethers.providers.AlchemyProvider(
+      network,
+      ALCHEMY_API_KEY
+    );
+
+    const connectedSigner = signer.connect(provider);
+
+    return {
+      connectedSigner,
       network,
       setNetwork,
       privateKeyId,
       setPrivateKeyId,
-    }),
-    [privateKeyId, network]
-  );
+    };
+  }, [privateKeyId, network]);
 
   return (
     <TurnkeyWalletContext.Provider value={contextValue}>
@@ -79,6 +82,14 @@ export function TurnkeyWalletContextProvider(props: {
   );
 }
 
-export function useTurnkeyWalletContext(): TTurnkeyWalletContextValue {
-  return React.useContext(TurnkeyWalletContext);
+export function useTurnkeyWalletContext(): NonNullable<TTurnkeyWalletContextValue> {
+  const value = React.useContext(TurnkeyWalletContext);
+
+  if (value == null) {
+    throw new Error(
+      `Context wasn't initialized. Did you forget to put a \`<TurnkeyWalletContextProvider>\` ancestor?`
+    );
+  }
+
+  return value;
 }