fix(ConnectWalletForm): connect with fetched wallet info only (#1088)

Author: sidvishnoi

src/background/services/wallet.ts

@@ -1,5 +1,4 @@
 import {
-  getWalletInformation,
   isErrorWithKey,
   ErrorWithKey,
   errorWithKeyToJSON,
@@ -74,15 +73,9 @@ export class WalletService {
   }
 
   async connectWallet(params: ConnectWalletPayload) {
-    const {
-      walletAddressUrl,
-      amount,
-      recurring,
-      autoKeyAdd,
-      autoKeyAddConsent,
-    } = params;
+    const { walletAddress, amount, recurring, autoKeyAdd, autoKeyAddConsent } =
+      params;
 
-    const walletAddress = await getWalletInformation(walletAddressUrl);
     const exchangeRates = await getExchangeRates();
 
     let rateOfPay = DEFAULT_RATE_OF_PAY;

src/pages/popup/components/ConnectWalletForm.tsx

@@ -20,9 +20,12 @@ import {
   toWalletAddressUrl,
   type ErrorWithKeyLike,
 } from '@/shared/helpers';
-import type { WalletAddress } from '@interledger/open-payments';
 import type { ConnectWalletPayload, Response } from '@/shared/messages';
-import type { DeepReadonly, PopupTransientState } from '@/shared/types';
+import type {
+  DeepReadonly,
+  PopupTransientState,
+  WalletInfo,
+} from '@/shared/types';
 
 interface Inputs {
   walletAddressUrl: string;
@@ -46,7 +49,7 @@ interface ConnectWalletFormProps {
   state?: ConnectTransientState;
   walletAddressPlaceholder?: string;
   saveValue?: (key: keyof Inputs, val: Inputs[typeof key]) => void;
-  getWalletInfo: (walletAddressUrl: string) => Promise<WalletAddress>;
+  getWalletInfo: (walletAddressUrl: string) => Promise<WalletInfo>;
   connectWallet: (data: ConnectWalletPayload) => Promise<Response>;
   clearConnectState: () => Promise<unknown>;
   onConnect?: () => void;
@@ -102,7 +105,7 @@ export const ConnectWalletForm = ({
   );
 
   const [walletAddressInfo, setWalletAddressInfo] =
-    React.useState<WalletAddress | null>(null);
+    React.useState<WalletInfo | null>(null);
 
   const [errors, setErrors] = React.useState<Errors>({
     walletAddressUrl: null,
@@ -244,7 +247,9 @@ export const ConnectWalletForm = ({
       }
       setErrors((prev) => ({ ...prev, keyPair: null, connect: null }));
       const res = await connectWallet({
-        walletAddressUrl: toWalletAddressUrl(walletAddress),
+        walletAddress:
+          walletAddressInfo ??
+          (await getWalletInfo(toWalletAddressUrl(walletAddress))),
         amount,
         recurring,
         autoKeyAdd: !skipAutoKeyShare,

src/shared/messages.ts

@@ -3,7 +3,12 @@ import type {
   OutgoingPayment,
 } from '@interledger/open-payments';
 import type { Browser } from 'webextension-polyfill';
-import type { AmountValue, PopupTransientState, Storage } from '@/shared/types';
+import type {
+  AmountValue,
+  PopupTransientState,
+  Storage,
+  WalletInfo,
+} from '@/shared/types';
 import type { ErrorWithKeyLike } from '@/shared/helpers';
 import type { PopupState } from '@/popup/lib/store';
 import type { AppState } from '@/app/lib/store';
@@ -91,7 +96,7 @@ export class MessageManager<TMessages extends MessageMap> {
 
 // #region Popup ↦ BG
 export interface ConnectWalletPayload {
-  walletAddressUrl: string;
+  walletAddress: WalletInfo;
   amount: string;
   recurring: boolean;
   autoKeyAdd: boolean;
@@ -121,7 +126,7 @@ export interface UpdateRateOfPayPayload {
 }
 
 export interface UpdateBudgetPayload {
-  walletAddressUrl: ConnectWalletPayload['walletAddressUrl'];
+  walletAddressUrl: string;
   amount: ConnectWalletPayload['amount'];
   recurring: ConnectWalletPayload['recurring'];
 }