TW-1110 Change Wert popup UI and UX

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

@@ -10,27 +10,34 @@ import { BackHandler, Keyboard, Text, View } from 'react-native';
 import { useOrientationChange } from 'react-native-orientation-locker';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { emptyComponent, emptyFn, EmptyFn } from '../../config/general';
-import { useAppLock } from '../../shelter/app-lock/app-lock';
-import { formatSize } from '../../styles/format-size';
-import { isDefined } from '../../utils/is-defined';
+import { TouchableWithAnalytics } from 'src/components/touchable-with-analytics';
+import { emptyComponent, emptyFn } from 'src/config/general';
+import { useAppLock } from 'src/shelter/app-lock/app-lock';
+import { formatSize } from 'src/styles/format-size';
+import { isDefined } from 'src/utils/is-defined';
 
 import { useDropdownBottomSheetStyles } from './bottom-sheet.styles';
 import { BottomSheetControllerProps } from './use-bottom-sheet-controller';
 
 interface Props extends BottomSheetControllerProps {
   title?: string;
-  description: string;
+  description?: string;
   cancelButtonText?: string;
   onCancelButtonPress?: EmptyFn;
+  cancelButtonTestID?: string;
+  onClose?: EmptyFn;
   contentHeight: number;
+  isInitiallyOpen?: boolean;
 }
 
 export const BottomSheet: FC<Props> = ({
   title,
   description,
   cancelButtonText = 'Cancel',
+  cancelButtonTestID,
+  isInitiallyOpen = false,
   onCancelButtonPress = emptyFn,
+  onClose = emptyFn,
   contentHeight,
   controller,
   children
@@ -65,6 +72,12 @@ export const BottomSheet: FC<Props> = ({
     controller.close();
     onCancelButtonPress();
   };
+  const handleClose = () => {
+    if (isOpened) {
+      setIsOpened(false);
+      onClose();
+    }
+  };
 
   useEffect(() => {
     if (isOpened) {
@@ -85,26 +98,34 @@ export const BottomSheet: FC<Props> = ({
       {!isLocked && (
         <GorhomBottomSheet
           ref={controller.ref}
-          index={-1}
+          index={isInitiallyOpen ? 0 : -1}
           snapPoints={[contentHeight]}
           enablePanDownToClose={true}
           bottomInset={bottomInset}
           handleComponent={emptyComponent}
           backgroundComponent={emptyComponent}
           backdropComponent={renderBackdropComponent}
           onChange={handleChange}
+          onClose={handleClose}
         >
           <View style={styles.root}>
-            <View style={styles.headerContainer}>
-              {isDefined(title) && <Text style={styles.title}>{title}</Text>}
-              <Text style={styles.description}>{description}</Text>
-            </View>
+            {(isDefined(title) || isDefined(description)) && (
+              <View style={styles.headerContainer}>
+                {isDefined(title) && <Text style={styles.title}>{title}</Text>}
+                {isDefined(description) && <Text style={styles.description}>{description}</Text>}
+              </View>
+            )}
 
             {children}
 
-            <TouchableOpacity style={styles.cancelButton} onPress={handleCancelPress}>
+            <TouchableWithAnalytics
+              Component={TouchableOpacity}
+              testID={cancelButtonTestID}
+              style={styles.cancelButton}
+              onPress={handleCancelPress}
+            >
               <Text style={styles.cancelButtonText}>{cancelButtonText}</Text>
-            </TouchableOpacity>
+            </TouchableWithAnalytics>
           </View>
         </GorhomBottomSheet>
       )}

src/components/header-card-action-buttons/header-card-action-buttons.tsx

@@ -4,6 +4,8 @@ import { Animated } from 'react-native';
 import { useDispatch } from 'react-redux';
 
 import { isAndroid, isIOS } from 'src/config/system';
+import { OnRampOverlayState } from 'src/enums/on-ramp-overlay-state.enum';
+import { useCanUseOnRamp } from 'src/hooks/use-can-use-on-ramp.hook';
 import { useAtBootsplash } from 'src/hooks/use-hide-bootsplash';
 import { useNetworkInfo } from 'src/hooks/use-network-info.hook';
 import { useTotalBalance } from 'src/hooks/use-total-balance';
@@ -12,7 +14,7 @@ import { ScreensEnum } from 'src/navigator/enums/screens.enum';
 import { useNavigation } from 'src/navigator/hooks/use-navigation.hook';
 import { WalletSelectors } from 'src/screens/wallet/wallet.selectors';
 import { useAppLock } from 'src/shelter/app-lock/app-lock';
-import { setOnRampPossibilityAction } from 'src/store/settings/settings-actions';
+import { setOnRampOverlayStateAction } from 'src/store/settings/settings-actions';
 import { useIsShowLoaderSelector } from 'src/store/settings/settings-selectors';
 import { formatSize } from 'src/styles/format-size';
 import { showErrorToast } from 'src/toast/toast.utils';
@@ -40,6 +42,7 @@ export const HeaderCardActionButtons: FC<Props> = ({ token }) => {
   const { navigate } = useNavigation();
   const { isLocked } = useAppLock();
   const atBootsplash = useAtBootsplash();
+  const canUseOnRamp = useCanUseOnRamp();
   const { metadata, isTezosNode, isTezosMainnet } = useNetworkInfo();
   const tezosToken = useTezosTokenOfCurrentAccount();
   const { balance } = useTotalBalance();
@@ -112,7 +115,7 @@ export const HeaderCardActionButtons: FC<Props> = ({ token }) => {
     }
 
     showErrorToast({ description: errorMessage });
-    dispatch(setOnRampPossibilityAction(true));
+    canUseOnRamp && dispatch(setOnRampOverlayStateAction(OnRampOverlayState.Continue));
   };
 
   return (

src/enums/on-ramp-overlay-state.enum.ts

@@ -0,0 +1,5 @@
+export enum OnRampOverlayState {
+  Start = 'start',
+  Continue = 'continue',
+  Closed = 'closed'
+}

src/form/validation/asset-amount.ts

@@ -33,7 +33,7 @@ export const createAssetAmountWithMaxValidation = (
   assetAmountValidation.clone().test('max-amount', (value, context) => {
     const { asset, amount } = value;
 
-    if (!isDefined(asset?.balance) || !isDefined(amount)) {
+    if (!isDefined(asset?.balance) || !(amount instanceof BigNumber)) {
       return true;
     }
 
@@ -42,7 +42,7 @@ export const createAssetAmountWithMaxValidation = (
     const maxAmount = BigNumber.max(new BigNumber(asset.balance).minus(gasAmountCap), 0);
     const displayedMaxAmount = formatAssetAmount(mutezToTz(maxAmount, asset.decimals ?? 0));
 
-    return (amount as BigNumber).lte(maxAmount)
+    return amount.lte(maxAmount)
       ? true
       : new ValidationError(
           `Maximal amount is ${displayedMaxAmount} ${asset.symbol}`,

src/hooks/request-confirmation/approve-internal-operation-request-action-payload.interface.ts

@@ -1,9 +1,9 @@
 import { ParamsWithKind } from '@taquito/taquito';
 
-import { AccountInterface } from '../../interfaces/account.interface';
+import { ReadOnlySignerPayload } from 'src/types/read-only-signer-payload';
 
 export interface ApproveInternalOperationRequestActionPayloadInterface {
   rpcUrl: string;
-  sender: AccountInterface;
+  sender: ReadOnlySignerPayload;
   opParams: ParamsWithKind[];
 }

src/hooks/request-confirmation/approve-operation-request-action-payload.interface.ts

@@ -1,11 +1,11 @@
 import { OperationRequestOutput } from '@airgap/beacon-sdk';
 import { ParamsWithKind } from '@taquito/taquito';
 
-import { AccountInterface } from '../../interfaces/account.interface';
+import { ReadOnlySignerPayload } from 'src/types/read-only-signer-payload';
 
 export interface ApproveOperationRequestActionPayloadInterface {
   rpcUrl: string;
-  sender: AccountInterface;
+  sender: ReadOnlySignerPayload;
   opParams: ParamsWithKind[];
   message: OperationRequestOutput;
 }

src/hooks/root-hooks/index.ts

@@ -3,7 +3,7 @@ import { useFirebaseApp } from './use-firebase-app';
 import { usePushNotifications } from './use-push-notifications';
 import { useQuickActions } from './use-quick-actions';
 import { useResetKeychainOnInstall } from './use-reset-keychain-on-install';
-import { useResetLoading } from './use-reset-loading';
+import { useResetPermanentInitialSettings } from './use-reset-permanent-initial-settings';
 import { useScamlistLoading } from './use-scamlist-loading';
 import { useStorageAnalytics } from './use-storage-analytics';
 import { useWhitelistLoading } from './use-whitelist-loading';
@@ -15,7 +15,7 @@ export const useRootHooks = () => {
   useScamlistLoading();
   useCollectiblesDetailsLoading();
   useQuickActions();
-  useResetLoading();
+  useResetPermanentInitialSettings();
   useResetKeychainOnInstall();
 
   useFirebaseApp();

src/hooks/root-hooks/use-reset-permanent-initial-settings.ts

@@ -0,0 +1,11 @@
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { resetPermanentInitialSettingsAction } from 'src/store/settings/settings-actions';
+
+export const useResetPermanentInitialSettings = () => {
+  const dispatch = useDispatch();
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => void dispatch(resetPermanentInitialSettingsAction()), []);
+};

src/hooks/use-can-use-on-ramp.hook.ts

@@ -0,0 +1,9 @@
+import { isAndroid } from 'src/config/system';
+
+import { useNetworkInfo } from './use-network-info.hook';
+
+export const useCanUseOnRamp = () => {
+  const { isTezosNode } = useNetworkInfo();
+
+  return isTezosNode && isAndroid;
+};

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

@@ -0,0 +1,18 @@
+import { useIsFocused } from '@react-navigation/native';
+import { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { OnRampOverlayState } from 'src/enums/on-ramp-overlay-state.enum';
+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 = isFocused && state === OnRampOverlayState.Continue;
+
+  const onClose = useCallback(() => dispatch(setOnRampOverlayStateAction(OnRampOverlayState.Closed)), [dispatch]);
+
+  return { isOpened, onClose };
+};

src/modals/confirmation-modal/d-app-operations-confirmation/operation-request-confirmation/operation-request-confirmation.tsx

@@ -29,7 +29,7 @@ const approveOperationRequest = ({
   opParams,
   message
 }: ApproveOperationRequestActionPayloadInterface) =>
-  sendTransaction$(rpcUrl, sender, opParams).pipe(
+  sendTransaction$(rpcUrl, sender.publicKeyHash, opParams).pipe(
     switchMap(({ hash }) =>
       from(
         BeaconHandler.respond({