TW-1110 Change Wert popup UI and UX

src/hooks/use-on-ramp-continue-overlay.hook.ts

@@ -1,3 +1,4 @@
+import { useIsFocused } from '@react-navigation/native';
 import { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 
@@ -6,9 +7,10 @@ import { setOnRampOverlayStateAction } from 'src/store/settings/settings-actions
 import { useOnRampOverlayStateSelector } from 'src/store/settings/settings-selectors';
 
 export const useOnRampContinueOverlay = () => {
+  const isFocused = useIsFocused();
   const dispatch = useDispatch();
   const state = useOnRampOverlayStateSelector();
-  const isOpened = state === OnRampOverlayState.Continue;
+  const isOpened = isFocused && state === OnRampOverlayState.Continue;
 
   const onClose = useCallback(() => dispatch(setOnRampOverlayStateAction(OnRampOverlayState.Closed)), [dispatch]);
 

src/modals/confirmation-modal/internal-operations-confirmation/internal-operations-confirmation.tsx

@@ -29,7 +29,35 @@ import { sendTransaction$ } from 'src/utils/wallet.utils';
 import { InternalOperationsConfirmationModalParams } from '../confirmation-modal.params';
 import { OperationsConfirmation } from '../operations-confirmation/operations-confirmation';
 
-const NOT_ENOUGH_TEZ_ERRORS_KEYWORDS = ['empty_implicit_contract', 'empty_implicit_delegated_contract'];
+const NOT_ENOUGH_TEZ_ESTIMATION_ERRORS_KEYWORDS = [
+  'empty_implicit_contract',
+  'empty_implicit_delegated_contract',
+  'storage_exhausted'
+];
+
+const isNotEnoughTezForDelegationFeeError = (error: string, senderPkh: string): boolean => {
+  /* An example of matching value: `HttpResponseError: Http error response: (500) [
+    {"kind":"temporary","id":"proto.018-Proxford.contract.balance_too_low","contract":"tz1dmR1BEyVW8fYyHT4QjarrRXyMJ1F4DciT","balance":"20","amount":"374"},
+    {"kind":"temporary","id":"proto.018-Proxford.tez.subtraction_underflow","amounts":["20","374"]}]`
+  */
+
+  if (!error.startsWith('HttpResponseError')) {
+    return false;
+  }
+
+  const firstLine = error.split('\n')[0];
+  const rawResponseBody = firstLine.slice(firstLine.indexOf(')') + 1).trim();
+  try {
+    const responseBody = JSON.parse(rawResponseBody);
+
+    return (
+      Array.isArray(responseBody) &&
+      responseBody.some(({ id, contract }) => id.includes('balance_too_low') && contract === senderPkh)
+    );
+  } catch (e) {
+    return false;
+  }
+};
 
 type Props = Omit<InternalOperationsConfirmationModalParams, 'type'>;
 
@@ -102,10 +130,12 @@ export const InternalOperationsConfirmation: FC<Props> = ({ opParams, modalTitle
 
   const handleEstimationError = useCallback(
     (error: string) =>
-      NOT_ENOUGH_TEZ_ERRORS_KEYWORDS.some(keyword => error.includes(keyword)) && canUseOnRamp
+      (NOT_ENOUGH_TEZ_ESTIMATION_ERRORS_KEYWORDS.some(keyword => error.includes(keyword)) ||
+        isNotEnoughTezForDelegationFeeError(error, selectedAccount!.publicKeyHash)) &&
+      canUseOnRamp
         ? updateOverlayState(OnRampOverlayState.Continue)
         : console.error(error),
-    [canUseOnRamp, updateOverlayState]
+    [canUseOnRamp, selectedAccount, updateOverlayState]
   );
 
   const handleTotalTezValue = useCallback(

src/screens/wallet/on-ramp-overlay/on-ramp-overlay.styles.ts

@@ -1,17 +1,7 @@
-import { StyleSheet } from 'react-native';
-
 import { createUseStyles } from 'src/styles/create-use-styles';
 import { formatSize } from 'src/styles/format-size';
 export const useOnRampOverlayStyles = createUseStyles(({ colors, typography }) => ({
-  backdrop: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: colors.black16,
-    flexDirection: 'column',
-    justifyContent: 'flex-end'
-  },
   root: {
-    height: 'auto',
-    paddingBottom: formatSize(2),
     backgroundColor: colors.pageBG
   },
   title: {

src/screens/wallet/on-ramp-overlay/on-ramp-overlay.tsx

@@ -43,7 +43,7 @@ const OverlayBody = memo<OverlayBodyProps>(({ isStart }) => {
   );
 
   return (
-    <View style={dropdownBottomSheetStyles.headerContainer}>
+    <View style={[dropdownBottomSheetStyles.headerContainer, styles.root]}>
       <Text style={styles.title}>{isStart ? 'Jump in Tezos right now!' : 'Insufficient TEZ balance'}</Text>
       <Divider size={formatSize(8)} />
       {isStart ? (