chore: general improvements

Author: ignaciosantise

apps/native/tests/shared/validators/WalletValidator.ts

@@ -27,7 +27,7 @@ export class WalletValidator {
   async expectSessionCard({ visible = true }: { visible?: boolean }) {
     if (visible) {
       await expect(
-        this.page.getByTestId('session-card'),
+        this.page.getByTestId('session-card').first(),
         'Session card should be visible'
       ).toBeVisible({
         timeout: MAX_WAIT

apps/native/tests/wallet.spec.ts

@@ -185,7 +185,7 @@ sampleWalletTest('it should disconnect using hook', async () => {
   await modalValidator.expectDisconnected();
 });
 
-sampleWalletTest('it should disconnect and close modal when connecting from wallet', async () => {
+sampleWalletTest('it should disconnect and close modal when disconnecting from wallet', async () => {
   await modalValidator.expectDisconnected();
   await modalPage.qrCodeFlow(modalPage, walletPage);
   await modalValidator.expectConnected();

packages/core/src/controllers/OnRampController.ts

@@ -1,16 +1,17 @@
 import { subscribeKey as subKey } from 'valtio/vanilla/utils';
 import { proxy, subscribe as sub } from 'valtio/vanilla';
-import type {
-  OnRampPaymentMethod,
-  OnRampCountry,
-  OnRampFiatCurrency,
-  OnRampQuote,
-  OnRampFiatLimit,
-  OnRampCryptoCurrency,
-  OnRampServiceProvider,
-  OnRampError,
-  OnRampErrorTypeValues,
-  OnRampCountryDefaults
+import {
+  type OnRampPaymentMethod,
+  type OnRampCountry,
+  type OnRampFiatCurrency,
+  type OnRampQuote,
+  type OnRampFiatLimit,
+  type OnRampCryptoCurrency,
+  type OnRampServiceProvider,
+  type OnRampError,
+  type OnRampErrorTypeValues,
+  type OnRampCountryDefaults,
+  BlockchainOnRampError
 } from '../utils/TypeUtil';
 
 import { CoreHelperUtil } from '../utils/CoreHelperUtil';
@@ -115,27 +116,35 @@ export const OnRampController = {
   },
 
   async setSelectedCountry(country: OnRampCountry, updateCurrency = true) {
-    state.selectedCountry = country;
-    state.loading = true;
+    try {
+      state.selectedCountry = country;
+      state.loading = true;
 
-    if (updateCurrency) {
-      const currencyCode =
-        state.countriesDefaults?.find(d => d.countryCode === country.countryCode)
-          ?.defaultCurrencyCode || 'USD';
+      if (updateCurrency) {
+        const currencyCode =
+          state.countriesDefaults?.find(d => d.countryCode === country.countryCode)
+            ?.defaultCurrencyCode || 'USD';
 
-      const currency = state.paymentCurrencies?.find(c => c.currencyCode === currencyCode);
+        const currency = state.paymentCurrencies?.find(c => c.currencyCode === currencyCode);
 
-      if (currency) {
-        this.setPaymentCurrency(currency);
+        if (currency) {
+          this.setPaymentCurrency(currency);
+        }
       }
-    }
 
-    await Promise.all([this.fetchPaymentMethods(), this.fetchCryptoCurrencies()]);
-    this.clearQuotes();
+      await Promise.all([this.fetchPaymentMethods(), this.fetchCryptoCurrencies()]);
+      this.clearQuotes();
 
-    state.loading = false;
+      state.loading = false;
 
-    StorageUtil.setOnRampPreferredCountry(country);
+      StorageUtil.setOnRampPreferredCountry(country);
+    } catch (error) {
+      state.loading = false;
+      state.error = {
+        type: OnRampErrorType.FAILED_TO_LOAD_COUNTRIES,
+        message: 'Failed to load countries'
+      };
+    }
   },
 
   setSelectedPaymentMethod(paymentMethod: OnRampPaymentMethod) {
@@ -395,40 +404,45 @@ export const OnRampController = {
     }
   },
 
-  getQuotesDebounced: CoreHelperUtil.debounce(function () {
-    OnRampController.getQuotes();
-  }, 500),
-
   async getQuotes() {
-    if (!state.paymentAmount || state.paymentAmount <= 0) {
+    if (!this.canGenerateQuote()) {
       this.clearQuotes();
 
       return;
     }
 
-    state.quotesLoading = true;
-    state.selectedQuote = undefined;
-    state.selectedServiceProvider = undefined;
-    state.error = undefined;
-
     this.abortGetQuotes(false);
     quotesAbortController = new AbortController();
     const currentSignal = quotesAbortController.signal;
 
     try {
+      if (
+        !state.selectedCountry?.countryCode ||
+        !state.purchaseCurrency?.currencyCode ||
+        !state.paymentCurrency?.currencyCode ||
+        !AccountController.state.address
+      ) {
+        throw new BlockchainOnRampError(OnRampErrorType.UNKNOWN, 'Invalid quote parameters');
+      }
+
+      state.quotesLoading = true;
+      state.selectedQuote = undefined;
+      state.selectedServiceProvider = undefined;
+      state.error = undefined;
+
       const body = {
-        countryCode: state.selectedCountry?.countryCode!,
-        destinationCurrencyCode: state.purchaseCurrency?.currencyCode!,
-        sourceAmount: state.paymentAmount,
-        sourceCurrencyCode: state.paymentCurrency?.currencyCode!,
-        walletAddress: AccountController.state.address!,
+        countryCode: state.selectedCountry.countryCode,
+        destinationCurrencyCode: state.purchaseCurrency.currencyCode,
+        sourceAmount: state.paymentAmount!,
+        sourceCurrencyCode: state.paymentCurrency.currencyCode,
+        walletAddress: AccountController.state.address,
         excludeProviders: EXCLUDED_ONRAMP_PROVIDERS
       };
 
       const response = await BlockchainApiController.getOnRampQuotes(body, currentSignal);
 
       if (!response || !response.length) {
-        throw { code: OnRampErrorType.NO_VALID_QUOTES };
+        throw new BlockchainOnRampError(OnRampErrorType.NO_VALID_QUOTES, 'No valid quotes');
       }
 
       const quotes = response.sort((a, b) => b.customerScore - a.customerScore);
@@ -647,3 +661,8 @@ export const OnRampController = {
     this.updateSelectedPurchaseCurrency();
   }
 };
+
+// Add getQuotesDebounced to the controller after definition to avoid circular reference
+(OnRampController as any).getQuotesDebounced = CoreHelperUtil.debounce(function () {
+  OnRampController.getQuotes();
+}, 500);

packages/core/src/utils/TypeUtil.ts

@@ -346,6 +346,15 @@ export type BlockchainApiOnRampWidgetResponse = {
   widgetUrl: string;
 };
 
+export class BlockchainOnRampError extends Error {
+  code: string;
+  constructor(code: string, message: string) {
+    super(message);
+    this.code = code;
+    this.message = message;
+  }
+}
+
 // -- OptionsController Types ---------------------------------------------------
 export interface Token {
   address: string;

packages/scaffold/src/views/w3m-onramp-loading-view/index.tsx

@@ -45,7 +45,7 @@ export function OnRampLoadingView() {
         quote: OnRampController.state.selectedQuote
       });
       if (response?.widgetUrl) {
-        Linking.openURL(response?.widgetUrl);
+        Linking.openURL(response.widgetUrl);
       }
     }
   }, []);

packages/ui/src/composites/wui-numeric-keyboard/index.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { TouchableOpacity, StyleSheet } from 'react-native';
 import { Text } from '../../components/wui-text';
 import { FlexView } from '../../layout/wui-flex';
@@ -7,7 +8,7 @@ export interface NumericKeyboardProps {
   onKeyPress: (value: string) => void;
 }
 
-export function NumericKeyboard({ onKeyPress }: NumericKeyboardProps) {
+function _NumericKeyboard({ onKeyPress }: NumericKeyboardProps) {
   const Theme = useTheme();
   const keys = [
     ['1', '2', '3'],
@@ -48,6 +49,8 @@ export function NumericKeyboard({ onKeyPress }: NumericKeyboardProps) {
   );
 }
 
+export const NumericKeyboard = memo(_NumericKeyboard);
+
 const styles = StyleSheet.create({
   row: {
     marginBottom: 10