feat(HQM-210): Custom fee with new low/average/high calculations

ios/haqq/Images.xcassets/tune.imageset/Contents.json

@@ -0,0 +1,24 @@
+{
+  "images": [
+    {
+      "idiom": "universal",
+      "filename": "tune.png",
+      "scale": "1x"
+    },
+    {
+      "idiom": "universal",
+      "filename": "[email protected]",
+      "scale": "2x"
+    },
+    {
+      "idiom": "universal",
+      "filename": "[email protected]",
+      "scale": "3x"
+    }
+  ],
+  "info": {
+    "version": 1,
+    "author": "xcode",
+    "generatedBy": "Respresso"
+  }
+}

src/components/bottom-popups/index.ts

@@ -5,3 +5,4 @@ export * from './popup-notification';
 export * from './popup-track-activity';
 export * from './popup-proposal-vote';
 export * from './popup-bottom-container';
+export * from './popup-info';

src/components/bottom-popups/popup-info/index.ts

@@ -0,0 +1 @@
+export * from './popup-info';

src/components/bottom-popups/popup-info/popup-info.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import {View} from 'react-native';
+
+import {Color} from '@app/colors';
+import {DismissPopupButton} from '@app/components/popup/dismiss-popup-button';
+import {Text, TextPosition, TextVariant} from '@app/components/ui';
+import {createTheme} from '@app/helpers';
+import {ModalType, Modals} from '@app/types';
+
+export const InfoPopup = ({
+  title,
+  description,
+  onClose,
+}: Modals[ModalType.info]) => {
+  return (
+    <View style={styles.sub}>
+      <View style={styles.row}>
+        <Text
+          variant={TextVariant.t7}
+          position={TextPosition.left}
+          style={styles.title}>
+          {title}
+        </Text>
+        <DismissPopupButton onClose={onClose} />
+      </View>
+      <Text
+        variant={TextVariant.t14}
+        position={TextPosition.left}
+        color={Color.textBase2}
+        style={styles.t14}>
+        {description}
+      </Text>
+    </View>
+  );
+};
+
+const styles = createTheme({
+  sub: {
+    marginHorizontal: 16,
+    marginVertical: 35,
+    backgroundColor: Color.bg1,
+    flex: 0,
+    paddingHorizontal: 24,
+    paddingVertical: 16,
+    borderRadius: 16,
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  title: {
+    marginBottom: 8,
+  },
+  t14: {
+    marginBottom: 28,
+  },
+});

src/components/browser-search-page.tsx

@@ -14,14 +14,14 @@ import {Link} from '@app/types';
 import {LinkPreview, LinkPreviewVariant} from './link-preview';
 import {
   Button,
-  ButtonVariant,
   First,
   Icon,
   IconsName,
   Input,
   MenuNavigationButton,
   Spacer,
   Text,
+  TextVariant,
 } from './ui';
 
 import {onUrlSubmit, showPhishingAlert} from '../helpers/web3-browser-utils';
@@ -125,13 +125,12 @@ export const BrowserSearchPage = ({
         )}
         {!!recentLinks?.length && (
           <View style={styles.historyContainer}>
-            <Text t10 i18n={I18N.browserSearchHistory} />
+            <Text variant={TextVariant.t10} i18n={I18N.browserSearchHistory} />
             <Spacer flex={1} />
             <Button
               i18n={I18N.clear}
               onPress={onPressClearHistory}
               textColor={Color.textGreen1}
-              variant={ButtonVariant.text}
             />
           </View>
         )}

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

@@ -13,7 +13,6 @@ import {
 } from '@app/components/ui';
 import {app} from '@app/contexts';
 import {createTheme} from '@app/helpers';
-import {getRemoteBalanceValue} from '@app/helpers/get-remote-balance-value';
 import {useEffectAsync} from '@app/hooks/use-effect-async';
 import {I18N} from '@app/i18n';
 import {Provider} from '@app/models/provider';
@@ -81,18 +80,13 @@ export const JsonRpcTransactionInfo = ({
     }
 
     try {
-      const gasLimit = getRemoteBalanceValue('eth_min_gas_limit').max(
-        new Balance(tx.gasLimit || '0'),
-      );
-      const {feeWei} = await EthNetwork.estimateTransaction(
-        tx.from!,
-        tx.to!,
-        new Balance(tx.value! || Balance.Empty),
-        tx.data,
-        gasLimit,
-        provider,
-      );
-      return feeWei;
+      const {expectedFee} = await EthNetwork.estimate({
+        from: tx.from!,
+        to: tx.to!,
+        value: new Balance(tx.value! || Balance.Empty),
+        data: tx.data,
+      });
+      return expectedFee;
     } catch {
       return Balance.Empty;
     }

src/components/modals/modal-wrapper.tsx

@@ -33,6 +33,7 @@ import {ViewErrorDetails} from '@app/components/modals/view-error-details';
 import {WalletsBottomSheet} from '@app/components/modals/wallets-bottom-sheet';
 import {createTheme, hideModal} from '@app/helpers';
 import {useTheme} from '@app/hooks';
+import {PopupInfoScreen} from '@app/screens/popup-info';
 import {PopupNotificationScreen} from '@app/screens/popup-notification';
 import {ModalType, Modals, ModalsListBase} from '@app/types';
 
@@ -163,6 +164,8 @@ export const ModalWrapper = ({
         return <RemoveSSS {...modal} onClose={onCloseModalPress} />;
       case ModalType.popupNotification:
         return <PopupNotificationScreen onCloseProp={onCloseModalPress} />;
+      case ModalType.info:
+        return <PopupInfoScreen {...modal} onClose={onCloseModalPress} />;
       default:
         return null;
     }

src/components/popup/dismiss-popup-button.tsx

@@ -4,10 +4,15 @@ import {StyleSheet} from 'react-native';
 
 import {Color} from '@app/colors';
 import {useTypedNavigation} from '@app/hooks';
+import {HeaderButtonProps} from '@app/types';
 
 import {Icon, IconButton} from '../ui';
 
-export const DismissPopupButton = () => {
+type DismissPopupButtonProps = HeaderButtonProps & {
+  onClose?: () => void;
+};
+
+export const DismissPopupButton = ({onClose}: DismissPopupButtonProps) => {
   //TODO: What type should be used here?
   // onPress should be prop
   const navigation = useTypedNavigation();
@@ -17,7 +22,11 @@ export const DismissPopupButton = () => {
       testID="dismissPopupButton"
       onPress={() => {
         try {
-          navigation.pop();
+          if (onClose) {
+            onClose();
+          } else {
+            navigation.pop();
+          }
         } catch (e) {
           navigation.goBack();
         }

src/components/transaction-confirmation/transaction-confirmation.tsx

@@ -7,6 +7,8 @@ import {
   Button,
   ButtonVariant,
   DataView,
+  Icon,
+  IconsName,
   PopupContainer,
   Spacer,
   Text,
@@ -26,10 +28,11 @@ interface TransactionConfirmationProps {
   testID?: string;
   to: string;
   amount: Balance;
-  fee: Balance | null;
+  fee?: Balance | null;
   contact: Contact | null;
   disabled?: boolean;
   onConfirmTransaction: () => void;
+  onFeePress: () => void;
   token: IToken;
 }
 
@@ -41,12 +44,13 @@ export const TransactionConfirmation = ({
   amount,
   fee,
   onConfirmTransaction,
+  onFeePress,
   token,
 }: TransactionConfirmationProps) => {
   const splittedTo = useMemo(() => splitAddress(to), [to]);
 
   const transactionSum = useMemo(() => {
-    if (fee === null) {
+    if (!fee) {
       return null;
     }
 
@@ -148,11 +152,21 @@ export const TransactionConfirmation = ({
             </Text>
           </DataView>
           <DataView label="Network Fee">
-            <Text variant={TextVariant.t11} color={Color.textBase1}>
-              {fee === null
-                ? getText(I18N.estimatingGas)
-                : fee.toBalanceString(LONG_NUM_PRECISION, WEI_PRECISION)}
-            </Text>
+            {!fee ? (
+              <Text variant={TextVariant.t11} color={Color.textBase1}>
+                {getText(I18N.estimatingGas)}
+              </Text>
+            ) : (
+              <View style={styles.feeContainer}>
+                <Text
+                  variant={TextVariant.t11}
+                  color={Color.textGreen1}
+                  onPress={onFeePress}>
+                  {fee.toBalanceString(LONG_NUM_PRECISION, WEI_PRECISION)}
+                </Text>
+                <Icon name={IconsName.tune} color={Color.textGreen1} />
+              </View>
+            )}
           </DataView>
         </View>
       </Spacer>
@@ -207,4 +221,7 @@ const styles = createTheme({
   spacer: {
     justifyContent: 'center',
   },
+  feeContainer: {
+    flexDirection: 'row',
+  },
 });

src/components/transaction-finish.tsx

@@ -22,6 +22,7 @@ import {I18N} from '@app/i18n';
 import {Contact} from '@app/models/contact';
 import {Balance} from '@app/services/balance';
 import {EthNetwork} from '@app/services/eth-network/eth-network';
+import {CalculatedFees} from '@app/services/eth-network/types';
 import {IToken, TransactionResponse} from '@app/types';
 import {CURRENCY_NAME, LONG_NUM_PRECISION} from '@app/variables/common';
 
@@ -34,7 +35,7 @@ type TransactionFinishProps = {
   testID?: string;
   token: IToken;
   amount?: Balance;
-  fee: Balance;
+  fee?: CalculatedFees;
 };
 
 export const TransactionFinish = ({
@@ -116,7 +117,7 @@ export const TransactionFinish = ({
         </Text>
       </View>
 
-      <NetworkFee fee={fee} currency="ISLM" />
+      <NetworkFee fee={fee?.expectedFee} currency="ISLM" />
 
       <View style={styles.providerContainer}>
         <Text

src/components/transaction-nft-confirmation.tsx

@@ -18,14 +18,14 @@ import {useNftImage} from '@app/hooks/nft/use-nft-image';
 import {I18N} from '@app/i18n';
 import {Contact} from '@app/models/contact';
 import {NftItem} from '@app/models/nft';
-import {Balance} from '@app/services/balance';
+import {CalculatedFees} from '@app/services/eth-network/types';
 import {splitAddress} from '@app/utils';
 
 interface TransactionConfirmationProps {
   to: string;
   soulboundTokenHint: string;
   item: NftItem;
-  fee?: Balance | null;
+  fee?: CalculatedFees | null;
   contact: Contact | null;
   disabled?: boolean;
   onConfirmTransaction: () => void;
@@ -104,14 +104,16 @@ export const TransactionNftConfirmation = ({
         <View style={styles.info}>
           <DataView label={soulboundTokenHint || 'Network Fee'}>
             <Text variant={TextVariant.t11} color={Color.textBase1}>
-              {fee!.toBalanceString()}
+              {fee!.expectedFee.toBalanceString()}
             </Text>
           </DataView>
         </View>
       )}
       <Spacer />
       <Button
-        disabled={(!fee?.isPositive() && !disabled) || !!soulboundTokenHint}
+        disabled={
+          (!fee?.expectedFee.isPositive() && !disabled) || !!soulboundTokenHint
+        }
         variant={ButtonVariant.contained}
         i18n={I18N.transactionConfirmationSend}
         onPress={onConfirmTransaction}

src/components/transaction-nft-finish.tsx

@@ -21,8 +21,8 @@ import {useNftImage} from '@app/hooks/nft';
 import {I18N} from '@app/i18n';
 import {Contact} from '@app/models/contact';
 import {NftItem} from '@app/models/nft';
-import {Balance} from '@app/services/balance';
 import {EthNetwork} from '@app/services/eth-network/eth-network';
+import {CalculatedFees} from '@app/services/eth-network/types';
 import {TransactionResponse} from '@app/types';
 
 type TransactionFinishProps = {
@@ -32,7 +32,7 @@ type TransactionFinishProps = {
   onPressContact: () => void;
   contact: Contact | null;
   short: string;
-  fee?: Balance | null;
+  fee?: CalculatedFees | null;
 };
 
 export const TransactionNftFinish = ({
@@ -90,7 +90,7 @@ export const TransactionNftFinish = ({
         </Text>
       </View>
 
-      <NetworkFee fee={fee} currency="ISLM" />
+      <NetworkFee fee={fee?.expectedFee} currency="ISLM" />
 
       <Spacer />