CP-8221: gas widget UI improvement (#1195)

ava-labs · Feb 19, 2024 · 3d51d9f · 3d51d9f
1 parent fe6944d
commit 3d51d9f
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 78 deletions.
diff --git a/packages/core-mobile/app/components/EditFees.tsx b/packages/core-mobile/app/components/EditFees.tsx
@@ -6,13 +6,21 @@ import { Row } from 'components/Row'
 import { calculateGasAndFees, Eip1559Fees, GasAndFees } from 'utils/Utils'
 import { Network } from '@avalabs/chains-sdk'
 import { useNativeTokenPriceForNetwork } from 'hooks/useNativeTokenPriceForNetwork'
-import { Button, DividerLine, Text, View, useTheme } from '@avalabs/k2-mobile'
+import {
+  Button,
+  DividerLine,
+  ScrollView,
+  Text,
+  View,
+  useTheme
+} from '@avalabs/k2-mobile'
 import { Tooltip } from 'components/Tooltip'
 import { TokenBaseUnit } from 'types/TokenBaseUnit'
 import { NetworkTokenUnit } from 'types'
 import { useSelector } from 'react-redux'
 import { selectSelectedCurrency } from 'store/settings/currency'
 import { VsCurrencyType } from '@avalabs/coingecko-sdk'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
 
 type EditFeesProps<T extends TokenBaseUnit<T>> = {
   network: Network
@@ -21,6 +29,7 @@ type EditFeesProps<T extends TokenBaseUnit<T>> = {
   lowMaxFeePerGas: NetworkTokenUnit
   isGasLimitEditable?: boolean
   isBtcNetwork?: boolean
+  noGasLimitError?: string
 } & Eip1559Fees<T>
 
 const maxBaseFeeInfoMessage =
@@ -49,8 +58,10 @@ const EditFees = ({
   onSave,
   onClose,
   isGasLimitEditable,
-  isBtcNetwork
+  isBtcNetwork,
+  noGasLimitError
 }: EditFeesProps<NetworkTokenUnit>): JSX.Element => {
+  const _gasLimitError = noGasLimitError ?? 'Please enter a valid gas limit'
   const {
     theme: { colors }
   } = useTheme()
@@ -96,9 +107,7 @@ const EditFees = ({
         gasLimit: isNaN(parseInt(newGasLimit)) ? 0 : parseInt(newGasLimit)
       })
       setNewFees(fees)
-      setGasLimitError(
-        fees.gasLimit <= 0 ? 'Please enter a valid gas limit' : ''
-      )
+      setGasLimitError(fees.gasLimit <= 0 ? _gasLimitError : '')
       setFeeError(
         fees.maxFeePerGas.lt(lowMaxFeePerGas) ? 'Max base fee is too low' : ''
       )
@@ -114,7 +123,8 @@ const EditFees = ({
     newMaxPriorityFeePerGas,
     tokenPrice,
     typeCreator,
-    lowMaxFeePerGas
+    lowMaxFeePerGas,
+    _gasLimitError
   ])
 
   const handleOnSave = (): void => {
@@ -133,75 +143,76 @@ const EditFees = ({
   const sanitized = (text: string): string => text.replace(/[^0-9]/g, '')
 
   return (
-    <View style={{ flex: 1, paddingBottom: 16 }}>
-      <Text
-        variant="heading4"
-        sx={{ color: '$neutral50', marginHorizontal: 12 }}>
-        Edit Network Fee
-      </Text>
-      <Space y={24} />
-      <InputText
-        label={isBtcNetwork ? 'Network Fee' : 'Max Base Fee'}
-        mode={'amount'}
-        text={newMaxFeePerGas}
-        keyboardType="numeric"
-        popOverInfoText={isBtcNetwork ? undefined : maxBaseFeeInfoMessage}
-        onChangeText={text => setNewMaxFeePerGas(sanitized(text))}
-        errorText={feeError}
-      />
-      {!isBtcNetwork && (
-        <>
-          <InputText
-            label={'Max Priority Fee'}
-            mode={'amount'}
-            keyboardType="numeric"
-            text={newMaxPriorityFeePerGas}
-            popOverInfoText={maxPriorityFeeInfoMessage}
-            onChangeText={text => setNewMaxPriorityFeePerGas(sanitized(text))}
-          />
-          <InputText
-            label={'Gas Limit'}
-            mode={'amount'}
-            text={newGasLimit}
-            keyboardType="numeric"
-            editable={isGasLimitEditable}
-            popOverInfoText={gasLimitInfoMessage}
-            onChangeText={text => setNewGasLimit(sanitized(text))}
-            errorText={gasLimitError}
-            backgroundColor={colors.$neutral900}
-            borderColor={colors.$neutral800}
-          />
-        </>
-      )}
-      <View sx={{ paddingHorizontal: 16, marginTop: 20, marginBottom: 16 }}>
-        <DividerLine />
-      </View>
-      <Row style={{ marginHorizontal: 12, alignItems: 'baseline' }}>
-        {isBtcNetwork ? (
-          <TotalNetworkFeeText />
-        ) : (
-          <Tooltip
-            style={{ width: 220 }}
-            content={`Total Network Fee = (Current Base Fee + Max Priority Fee) * Gas Limit.\n\nIt will never be higher than Max Base Fee * Gas Limit.`}
-            position={'bottom'}>
-            <TotalNetworkFeeText />
-          </Tooltip>
-        )}
-        <FlexSpacer />
-        <Text variant="heading5" sx={{ color: '$neutral50' }}>
-          {maxTotalFee}
+    <SafeAreaProvider style={{ flex: 1, paddingBottom: 16 }}>
+      <ScrollView>
+        <Text
+          variant="heading4"
+          sx={{ color: '$neutral50', marginHorizontal: 12 }}>
+          Edit Network Fee
         </Text>
-        <Space x={4} />
-        <Text variant="heading6" sx={{ color: '$neutral400' }}>
-          {network?.networkToken?.symbol?.toUpperCase()}
-        </Text>
-      </Row>
-      <CurrencyHelperText
-        text={`${
-          newFees.maxTotalFeeInCurrency
-        } ${selectedCurrency.toUpperCase()}`}
-      />
-      <FlexSpacer />
+        <Space y={24} />
+        <InputText
+          label={isBtcNetwork ? 'Network Fee' : 'Max Base Fee'}
+          mode={'amount'}
+          text={newMaxFeePerGas}
+          keyboardType="numeric"
+          popOverInfoText={isBtcNetwork ? undefined : maxBaseFeeInfoMessage}
+          onChangeText={text => setNewMaxFeePerGas(sanitized(text))}
+          errorText={feeError}
+        />
+        {!isBtcNetwork && (
+          <>
+            <InputText
+              label={'Max Priority Fee'}
+              mode={'amount'}
+              keyboardType="numeric"
+              text={newMaxPriorityFeePerGas}
+              popOverInfoText={maxPriorityFeeInfoMessage}
+              onChangeText={text => setNewMaxPriorityFeePerGas(sanitized(text))}
+            />
+            <InputText
+              label={'Gas Limit'}
+              mode={'amount'}
+              text={newGasLimit}
+              keyboardType="numeric"
+              editable={isGasLimitEditable}
+              popOverInfoText={gasLimitInfoMessage}
+              onChangeText={text => setNewGasLimit(sanitized(text))}
+              errorText={gasLimitError}
+              backgroundColor={colors.$neutral900}
+              borderColor={colors.$neutral800}
+            />
+          </>
+        )}
+        <View sx={{ paddingHorizontal: 16, marginTop: 20, marginBottom: 16 }}>
+          <DividerLine />
+        </View>
+        <Row style={{ marginHorizontal: 12, alignItems: 'baseline' }}>
+          {isBtcNetwork ? (
+            <TotalNetworkFeeText />
+          ) : (
+            <Tooltip
+              style={{ width: 220 }}
+              content={`Total Network Fee = (Current Base Fee + Max Priority Fee) * Gas Limit.\n\nIt will never be higher than Max Base Fee * Gas Limit.`}
+              position={'bottom'}>
+              <TotalNetworkFeeText />
+            </Tooltip>
+          )}
+          <FlexSpacer />
+          <Text variant="heading5" sx={{ color: '$neutral50' }}>
+            {maxTotalFee}
+          </Text>
+          <Space x={4} />
+          <Text variant="heading6" sx={{ color: '$neutral400' }}>
+            {network?.networkToken?.symbol?.toUpperCase()}
+          </Text>
+        </Row>
+        <CurrencyHelperText
+          text={`${
+            newFees.maxTotalFeeInCurrency
+          } ${selectedCurrency.toUpperCase()}`}
+        />
+      </ScrollView>
       <Button
         type={'primary'}
         size={'xlarge'}
@@ -210,7 +221,7 @@ const EditFees = ({
         onPress={handleOnSave}>
         Save
       </Button>
-    </View>
+    </SafeAreaProvider>
   )
 }
 

diff --git a/packages/core-mobile/app/components/NetworkFeeSelector.tsx b/packages/core-mobile/app/components/NetworkFeeSelector.tsx
@@ -41,13 +41,15 @@ const NetworkFeeSelector = ({
   gasLimit,
   onFeesChange,
   maxNetworkFee,
-  isGasLimitEditable = true
+  isGasLimitEditable = true,
+  noGasLimitError
 }: {
   chainId?: number
   gasLimit: number
   onFeesChange?(fees: Eip1559Fees<NetworkTokenUnit>, feePreset: FeePreset): void
   maxNetworkFee?: NetworkTokenUnit
   isGasLimitEditable?: boolean
+  noGasLimitError?: string
 }): JSX.Element => {
   const {
     appHook: { currencyFormatter }
@@ -154,7 +156,8 @@ const NetworkFeeSelector = ({
         NetworkTokenUnit.fromNetwork(activeNetwork),
       gasLimit,
       isGasLimitEditable,
-      isBtcNetwork
+      isBtcNetwork,
+      noGasLimitError
     })
   }
 

diff --git a/packages/core-mobile/app/navigation/WalletScreenStack/createModals.tsx b/packages/core-mobile/app/navigation/WalletScreenStack/createModals.tsx
@@ -243,6 +243,7 @@ const EditGasLimit = (): JSX.Element => {
       lowMaxFeePerGas={params.lowMaxFeePerGas}
       isGasLimitEditable={params.isGasLimitEditable}
       isBtcNetwork={params.isBtcNetwork}
+      noGasLimitError={params.noGasLimitError}
     />
   )
 }

diff --git a/packages/core-mobile/app/navigation/types.ts b/packages/core-mobile/app/navigation/types.ts
@@ -74,6 +74,7 @@ export type EditGasLimitParams = {
   lowMaxFeePerGas: NetworkTokenUnit
   isGasLimitEditable?: boolean
   isBtcNetwork?: boolean
+  noGasLimitError?: string
 } & Eip1559Fees<NetworkTokenUnit>
 
 export type SessionProposalV2Params = {

diff --git a/packages/core-mobile/app/screens/bridge/Bridge.tsx b/packages/core-mobile/app/screens/bridge/Bridge.tsx
@@ -794,6 +794,11 @@ const Bridge: FC = () => {
           gasLimit={eip1559Fees.gasLimit}
           onFeesChange={handleFeesChange}
           isGasLimitEditable={false}
+          noGasLimitError={
+            provider === BridgeProvider.UNIFIED
+              ? 'Please select a token and enter a transfer amount'
+              : 'Please select a token'
+          }
         />
       </ScrollViewList>
       {renderTransferBtn()}

diff --git a/packages/core-mobile/app/screens/shared/EditGasLimitBottomSheet.tsx b/packages/core-mobile/app/screens/shared/EditGasLimitBottomSheet.tsx
@@ -14,6 +14,7 @@ type Props<T extends TokenBaseUnit<T>> = {
   lowMaxFeePerGas: NetworkTokenUnit
   isGasLimitEditable?: boolean
   isBtcNetwork?: boolean
+  noGasLimitError?: string
 } & Eip1559Fees<T>
 
 const EditGasLimitBottomSheet = ({
@@ -25,7 +26,8 @@ const EditGasLimitBottomSheet = ({
   network,
   lowMaxFeePerGas,
   isGasLimitEditable,
-  isBtcNetwork
+  isBtcNetwork,
+  noGasLimitError
 }: Props<NetworkTokenUnit>): JSX.Element => {
   return (
     <Sheet onClose={onClose || noop}>
@@ -41,6 +43,7 @@ const EditGasLimitBottomSheet = ({
         lowMaxFeePerGas={lowMaxFeePerGas}
         isGasLimitEditable={isGasLimitEditable}
         isBtcNetwork={isBtcNetwork}
+        noGasLimitError={noGasLimitError}
       />
     </Sheet>
   )