fix: update the example apps to supply account when signing messages

solana-mobile · Jul 28, 2022 · 1bbc743 · 1bbc743
1 parent 78a7309
commit 1bbc743
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 18 deletions.
diff --git a/examples/example-react-native-app/components/RecordMessageButton.tsx b/examples/example-react-native-app/components/RecordMessageButton.tsx
@@ -23,7 +23,7 @@ type Props = Readonly<{
 }>;
 
 export default function RecordMessageButton({children, message}: Props) {
-  const {authorizeSession} = useAuthorization();
+  const {account: selectedAccount, authorizeSession} = useAuthorization();
   const {connection} = useConnection();
   const setSnackbarProps = useContext(SnackbarContext);
   const [recordMessageTutorialOpen, setRecordMessageTutorialOpen] =
@@ -34,13 +34,17 @@ export default function RecordMessageButton({children, message}: Props) {
       messageBuffer: Buffer,
     ): Promise<[string, RpcResponseAndContext<SignatureResult>]> => {
       const [signature] = await transact(async wallet => {
-        const [publicKey, latestBlockhash] = await Promise.all([
+        const [freshAccount, latestBlockhash] = await Promise.all([
           authorizeSession(wallet),
           connection.getLatestBlockhash(),
         ]);
         const memoProgramTransaction = new Transaction({
           ...latestBlockhash,
-          feePayer: publicKey,
+          feePayer:
+            // Either the public key that was already selected when this method was called...
+            selectedAccount?.publicKey ??
+            // ...or the newly authorized public key.
+            freshAccount.publicKey,
         }).add(
           new TransactionInstruction({
             data: messageBuffer,
@@ -57,7 +61,7 @@ export default function RecordMessageButton({children, message}: Props) {
       });
       return [signature, await connection.confirmTransaction(signature)];
     },
-    [authorizeSession, connection],
+    [authorizeSession, connection, selectedAccount],
   );
   return (
     <>

diff --git a/examples/example-react-native-app/components/SignMessageButton.tsx b/examples/example-react-native-app/components/SignMessageButton.tsx
@@ -14,7 +14,7 @@ type Props = Readonly<{
 }>;
 
 export default function SignMessageButton({children, message}: Props) {
-  const {authorizeSession} = useAuthorization();
+  const {account: selectedAccount, authorizeSession} = useAuthorization();
   const [previewSignature, setPreviewSignature] = useState<Uint8Array | null>(
     null,
   );
@@ -25,14 +25,19 @@ export default function SignMessageButton({children, message}: Props) {
   const signMessageGuarded = useGuardedCallback(
     async buffer => {
       const [signature] = await transact(async wallet => {
-        await authorizeSession(wallet);
+        const freshAccount = await authorizeSession(wallet);
         return await wallet.signMessages({
+          address:
+            // Either the address that was already selected when this method was called...
+            selectedAccount?.address ??
+            // ...or the newly authorized address
+            freshAccount.address,
           payloads: [buffer],
         });
       });
       return signature;
     },
-    [authorizeSession],
+    [authorizeSession, selectedAccount],
   );
   return (
     <>

diff --git a/examples/example-react-native-app/screens/MainScreen.tsx b/examples/example-react-native-app/screens/MainScreen.tsx
@@ -8,7 +8,7 @@ import SignMessageButton from '../components/SignMessageButton';
 import useAuthorization from '../utils/useAuthorization';
 
 export default function MainScreen() {
-  const {publicKey} = useAuthorization();
+  const {account} = useAuthorization();
   const [memoText, setMemoText] = useState('');
   return (
     <>
@@ -36,7 +36,7 @@ export default function MainScreen() {
           <Divider style={styles.spacer} />
           <SignMessageButton message={memoText}>Sign Message</SignMessageButton>
         </ScrollView>
-        {publicKey ? <AccountInfo publicKey={publicKey} /> : null}
+        {account ? <AccountInfo publicKey={account.publicKey} /> : null}
       </Portal.Host>
     </>
   );

diff --git a/examples/example-react-native-app/utils/useAuthorization.tsx b/examples/example-react-native-app/utils/useAuthorization.tsx
@@ -11,24 +11,30 @@ import {toUint8Array} from 'js-base64';
 import {useCallback} from 'react';
 import useSWR from 'swr';
 
+type Account = Readonly<{
+  address: Base64EncodedAddress;
+  publicKey: PublicKey;
+}>;
+
 const STORAGE_KEY = 'cachedAuthorization';
 
 function getDataFromAuthorizationResult(
   authorizationResult: AuthorizationResult,
 ) {
   return {
+    account: getAccountFromAuthorizationResult(authorizationResult),
     authorization: authorizationResult,
-    publicKey: getPublicKeyFromAuthorizationResult(authorizationResult),
   };
 }
 
-function getPublicKeyFromAuthorizationResult(
+function getAccountFromAuthorizationResult(
   authorizationResult: AuthorizationResult,
-): PublicKey {
-  return getPublicKeyFromAddress(
-    // TODO(#44): support multiple addresses
-    authorizationResult.addresses[0],
-  );
+): Account {
+  const address = authorizationResult.addresses[0]; // TODO(#44): support multiple addresses
+  return {
+    address,
+    publicKey: getPublicKeyFromAddress(address),
+  };
 }
 
 async function authorizationFetcher(storageKey: string) {
@@ -94,7 +100,7 @@ export default function useAuthorization() {
             identity: APP_IDENTITY,
           }));
       setAuthorization(authorizationResult);
-      return getPublicKeyFromAuthorizationResult(authorizationResult);
+      return getAccountFromAuthorizationResult(authorizationResult);
     },
     [data, setAuthorization],
   );
@@ -109,8 +115,8 @@ export default function useAuthorization() {
     [data?.authorization.auth_token, setAuthorization],
   );
   return {
+    account: data?.account ?? null,
     authorizeSession,
     deauthorizeSession,
-    publicKey: data?.publicKey ?? null,
   };
 }