feat(HW-639): All fetchs by proxy

package.json

@@ -112,7 +112,7 @@
     "react-native-adjust-oaid": "4.33.0",
     "react-native-aes-crypto": "3.0.1",
     "react-native-base64": "0.2.1",
-    "react-native-blasted-image": "0.0.13",
+    "react-native-blasted-image": "1.0.3",
     "react-native-ble-plx": "2.0.3",
     "react-native-camera": "4.2.1",
     "react-native-config": "1.5.1",

src/components/account-info/account-info.tsx

@@ -4,7 +4,7 @@ import {observer} from 'mobx-react';
 
 import {TokenViewer} from '@app/components/token-viewer';
 import {TransactionEmpty} from '@app/components/transaction-empty';
-import {First, PopupContainer, Spacer} from '@app/components/ui';
+import {First, Spacer} from '@app/components/ui';
 import {createTheme} from '@app/helpers';
 import {Feature, isFeatureEnabled} from '@app/helpers/is-feature-enabled';
 import {useShowNft} from '@app/hooks/nft';
@@ -156,15 +156,14 @@ export const AccountInfo = observer(
     );
 
     return (
-      <PopupContainer plain>
-        <TransactionList
-          addresses={[wallet.address]}
-          hideContent={hideTransactionsContent}
-          onTransactionPress={onPressTxRow}
-          ListHeaderComponent={renderListHeader}
-          ListEmptyComponent={renderListEmptyComponent}
-        />
-      </PopupContainer>
+      <TransactionList
+        key={activeTab}
+        addresses={[wallet.address]}
+        hideContent={hideTransactionsContent}
+        onTransactionPress={onPressTxRow}
+        ListHeaderComponent={renderListHeader}
+        ListEmptyComponent={renderListEmptyComponent}
+      />
     );
   },
 );

src/components/image-wrapper.tsx

@@ -6,6 +6,7 @@ import {
   ImageProps,
   ImageSourcePropType,
   ImageStyle,
+  ImageURISource,
   StyleProp,
   StyleSheet,
 } from 'react-native';
@@ -26,7 +27,7 @@ const SVG_MIME_TYPE = 'data:image/svg+xml;base64,';
 export function ImageWrapper({source, style, ...props}: ImageWrapperProps) {
   const [isError, setError] = useState(false);
 
-  const fixedSource = useMemo(() => {
+  const fixedSource: number | ImageSourcePropType = useMemo(() => {
     if (typeof source === 'string' && isValidUrl(source)) {
       return {uri: source} as ImageSourcePropType;
     }
@@ -44,6 +45,15 @@ export function ImageWrapper({source, style, ...props}: ImageWrapperProps) {
     if (isObservable(source)) {
       return toJS(source) as ImageSourcePropType;
     }
+
+    if (typeof source === 'number') {
+      return source as ImageSourcePropType;
+    }
+
+    if (!(source as ImageURISource).uri) {
+      return {uri: ''};
+    }
+
     return source as ImageSourcePropType;
   }, [source]);
 
@@ -107,6 +117,7 @@ export function ImageWrapper({source, style, ...props}: ImageWrapperProps) {
       <BlastedImage
         {...props}
         style={StyleSheet.flatten(style)}
+        // @ts-ignore
         source={fixedSource}
         onError={() => setError(true)}
       />

src/components/json-rpc-sign/json-rpc-transaction-info.tsx

@@ -138,9 +138,7 @@ export const JsonRpcTransactionInfo = observer(
             provider?.denom,
           ),
           data: tx.data,
-          chainId: provider?.ethChainId
-            ? String(provider.ethChainId)
-            : undefined,
+          chainId: provider?.ethChainId ? provider.ethChainId : undefined,
         });
         setFee(result);
       }

src/components/modals/providers-bottom-sheet.tsx

@@ -9,34 +9,45 @@ import {app} from '@app/contexts';
 import {createTheme} from '@app/helpers';
 import {useCalculatedDimensionsValue} from '@app/hooks/use-calculated-dimensions-value';
 import {I18N} from '@app/i18n';
-import {ALL_NETWORKS_ID} from '@app/models/provider';
+import {ALL_NETWORKS_ID, Provider} from '@app/models/provider';
 import {ModalType, Modals} from '@app/types';
 
 import {SettingsProvidersAllNetworksRow} from '../settings/settings-providers/settings-providers-all-networks-row';
 import {SettingsProvidersRow} from '../settings/settings-providers/settings-providers-row';
 
 export function ProvidersBottomSheet({
   title,
-  providers,
-  initialProviderId: initialProvider,
+  providers: outProviders,
+  initialProviderChainId,
   closeDistance,
   eventSuffix = '',
   onClose,
+  desableAllNetworksOption,
 }: Modals[ModalType.providersBottomSheet]) {
   const [searchProviderValue, setSearchProviderValue] = useState('');
+  const providers = useMemo(
+    () =>
+      outProviders ?? desableAllNetworksOption
+        ? Provider.getAllNetworks()
+        : Provider.getAll(),
+    [desableAllNetworksOption],
+  );
 
   const closeDistanceCalculated = useCalculatedDimensionsValue(
     () => closeDistance?.(),
     [closeDistance],
   );
   const onPressProvider = useCallback(
-    (providerId: string) => {
-      if (providerId === initialProvider) {
+    (providerChainId: number) => {
+      if (providerChainId === initialProviderChainId) {
         // close if selected same provider
         return onCloseModal();
       }
       onClose?.();
-      app.emit(`provider-selected${eventSuffix}`, providerId);
+      app.emit(
+        `provider-selected${eventSuffix}`,
+        Provider.getByEthChainId(providerChainId)?.id,
+      );
     },
     [eventSuffix, onClose],
   );
@@ -98,7 +109,7 @@ export function ProvidersBottomSheet({
           if (item.id === ALL_NETWORKS_ID) {
             return (
               <SettingsProvidersAllNetworksRow
-                providerId={initialProvider}
+                providerChainId={initialProviderChainId}
                 item={item}
                 onPress={onPressProvider}
               />
@@ -107,7 +118,7 @@ export function ProvidersBottomSheet({
 
           return (
             <SettingsProvidersRow
-              providerId={initialProvider}
+              providerChainId={initialProviderChainId}
               item={item}
               onPress={onPressProvider}
             />

src/components/settings/settings-providers/settings-providers-all-networks-row.tsx

@@ -5,22 +5,22 @@ import {TouchableWithoutFeedback, View} from 'react-native';
 import {Color} from '@app/colors';
 import {DataContent, Icon, IconsName, Spacer} from '@app/components/ui';
 import {createTheme} from '@app/helpers';
-import {ALL_NETWORKS_ID, ProviderModel} from '@app/models/provider';
+import {ALL_NETWORKS_CHAIN_ID, ProviderModel} from '@app/models/provider';
 
 export type SettingsProvidersAllNetworksRowProps = {
   item: ProviderModel;
-  providerId: string;
-  onPress: (providerId: string) => void;
+  providerChainId: number;
+  onPress: (providerChainId: number) => void;
 };
 export const SettingsProvidersAllNetworksRow = ({
   item,
   onPress,
-  providerId,
+  providerChainId,
 }: SettingsProvidersAllNetworksRowProps) => {
   return (
     <TouchableWithoutFeedback
       onPress={() => {
-        onPress(item.id);
+        onPress(item.ethChainId);
       }}>
       <View style={styles.container}>
         <View style={styles.iconWrapper}>
@@ -33,7 +33,7 @@ export const SettingsProvidersAllNetworksRow = ({
         <Spacer width={12} />
         <DataContent style={styles.info} title={item.name} />
         <Spacer flex={1} />
-        {providerId === ALL_NETWORKS_ID && (
+        {providerChainId === ALL_NETWORKS_CHAIN_ID && (
           <Icon color={Color.graphicGreen1} name="check" i24 />
         )}
       </View>

src/components/settings/settings-providers/settings-providers-row.tsx

@@ -9,18 +9,18 @@ import {ProviderModel} from '@app/models/provider';
 
 export type SettingsProvidersRowProps = {
   item: ProviderModel;
-  providerId: string;
-  onPress: (providerId: string) => void;
+  providerChainId: number;
+  onPress: (providerChainId: number) => void;
 };
 export const SettingsProvidersRow = ({
   item,
   onPress,
-  providerId,
+  providerChainId,
 }: SettingsProvidersRowProps) => {
   return (
     <TouchableWithoutFeedback
       onPress={() => {
-        onPress(item.id);
+        onPress(item.ethChainId);
       }}>
       <View style={styles.container}>
         <ImageWrapper source={item.icon} style={styles.icon} />
@@ -31,7 +31,7 @@ export const SettingsProvidersRow = ({
           subtitle={`${item.name} (${item.ethChainId})`}
         />
         <Spacer flex={1} />
-        {providerId === item.id && (
+        {providerChainId === item.ethChainId && (
           <Icon color={Color.graphicGreen1} name="check" i24 />
         )}
       </View>

src/components/settings/settings-providers/settings-providers.tsx

@@ -8,24 +8,24 @@ import {SettingsProvidersRow} from './settings-providers-row';
 
 export type SettingsProvidersProps = {
   providers: ProviderModel[];
-  providerId: string;
-  onSelect: (providerId: string) => void;
+  providerChainId: number;
+  onSelect: (providerChainId: number) => void;
 };
 
 export const SettingsProviders = ({
   providers,
-  providerId,
+  providerChainId,
   onSelect,
 }: SettingsProvidersProps) => {
   return (
     <FlatList
-      key={providerId}
+      key={providerChainId}
       data={providers}
       renderItem={({item}) => (
         <SettingsProvidersRow
           item={item}
           onPress={onSelect}
-          providerId={providerId}
+          providerChainId={providerChainId}
         />
       )}
       keyExtractor={item => item.id}

src/components/singin-restore-wallet/signin-restore-wallet.tsx

@@ -13,6 +13,7 @@ import {
   Spacer,
   Text,
   TextField,
+  TextVariant,
 } from '@app/components/ui';
 import {hideModal} from '@app/helpers';
 import {I18N} from '@app/i18n';
@@ -71,7 +72,7 @@ export const SignInRestore = ({
       testID={testID}>
       <KeyboardSafeArea style={page.container} testID={`${testID}_area`}>
         <Text
-          t11
+          variant={TextVariant.t11}
           color={getColor(Color.textBase2)}
           i18n={I18N.signinRestoreWalletPhraseOrKey}
           style={page.intro}
@@ -96,7 +97,7 @@ export const SignInRestore = ({
         <IconButton onPress={onPressPaste} style={page.button}>
           <Text
             color={Color.textGreen1}
-            t14
+            variant={TextVariant.t14}
             i18n={I18N.signinRestoreWalletPasteClipboard}
           />
         </IconButton>

src/components/stories/stories-preview-item.tsx

@@ -1,10 +1,10 @@
 import React, {memo, useCallback, useMemo} from 'react';
 
-import {ImageURISource, StyleSheet, TouchableOpacity, View} from 'react-native';
+import {StyleSheet, TouchableOpacity, View} from 'react-native';
 import BlastedImage from 'react-native-blasted-image';
 
 import {Color} from '@app/colors';
-import {Spacer, Text} from '@app/components/ui';
+import {Spacer, Text, TextVariant} from '@app/components/ui';
 import {createTheme} from '@app/helpers';
 import {IStory} from '@app/types';
 
@@ -15,8 +15,8 @@ type Props = {
 };
 
 export const StoriesPreviewItem = memo(({item, onPress, seen}: Props) => {
-  const source: ImageURISource = {
-    uri: item.preview,
+  const source = {
+    uri: item.preview ?? '',
   };
   const borderColor = useMemo(
     () => (seen ? styles.borderSeen : styles.borderUnseen),
@@ -41,12 +41,12 @@ export const StoriesPreviewItem = memo(({item, onPress, seen}: Props) => {
 
       <Spacer height={2} />
       <Text
-        t17
-        children={item.title}
+        variant={TextVariant.t17}
         style={styles.title}
         numberOfLines={2}
-        color={titleColor}
-      />
+        color={titleColor}>
+        {item.title}
+      </Text>
     </TouchableOpacity>
   );
 });

src/components/stories/story-view/components/story-image.tsx

@@ -116,8 +116,9 @@ const StoryImage: FC<StoryImageProps> = memo(
                 width={WIDTH}
                 style={imageStyles ?? {}}
                 resizeMode="cover"
+                // @ts-ignore
                 testID="storyImageComponent"
-                onLayout={e =>
+                onLayout={(e: any) =>
                   onImageLayout(Math.min(HEIGHT, e.nativeEvent.layout.height))
                 }
                 onLoad={() => onContentLoad()}