Merge pull request #6738 from BlueWallet/watchwarning

ADD: Watch only wallets warning

class/wallets/watch-only-wallet.ts

@@ -18,6 +18,7 @@ export class WatchOnlyWallet extends LegacyWallet {
   public readonly type = WatchOnlyWallet.type;
   // @ts-ignore: override
   public readonly typeReadable = WatchOnlyWallet.typeReadable;
+  public isWatchOnlyWarningVisible = true;
 
   public _hdWalletInstance?: THDWalletForWatchOnly;
   use_with_hardware_wallet = false;

components/WatchOnlyWarning.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { Icon } from '@rneui/themed';
+import loc from '../loc';
+
+interface Props {
+  handleDismiss: () => void;
+  isLoading?: boolean;
+}
+
+const WatchOnlyWarning: React.FC<Props> = ({ handleDismiss, isLoading }) => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.content}>
+        <TouchableOpacity style={styles.dismissButton} onPress={handleDismiss} disabled={isLoading}>
+          <Icon name="close" color="white" size={20} />
+        </TouchableOpacity>
+        <Icon name="warning" color="#FFFF" />
+        <Text style={styles.title}>{loc.transactions.watchOnlyWarningTitle}</Text>
+        <Text style={styles.description}>{loc.transactions.watchOnlyWarningDescription}</Text> 
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#ff4c4c',
+    padding: 16,
+    margin: 16,
+    borderRadius: 8,
+    position: 'relative',
+  },
+  dismissButton: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    backgroundColor: 'black',
+    borderRadius: 15,
+    width: 30,
+    height: 30,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 1,
+  },
+  content: {
+    alignItems: 'center',
+  },
+  title: {
+    color: 'white',
+    fontWeight: 'bold',
+    marginBottom: 8,
+    marginTop: 8,
+  },
+  description: {
+    color: 'white',
+    textAlign: 'center',
+  },
+});
+
+export default WatchOnlyWarning;

loc/en.json

@@ -382,7 +382,9 @@
     "txid": "Transaction ID",
     "from": "From: {counterparty}",
     "to": "To: {counterparty}",
-    "updating": "Updating..."
+    "updating": "Updating...",
+    "watchOnlyWarningTitle": "Scam Alert",
+    "watchOnlyWarningDescription": "Be aware that scammers usually use this type of wallet 'watch-only' to try to steal from users. This wallet you cannot control or send from it, only allows to watch the balance."
   },
   "wallets": {
     "add_bitcoin": "Bitcoin",

screen/wallets/transactions.js

@@ -42,6 +42,7 @@ import { Chain } from '../../models/bitcoinUnits';
 import ActionSheet from '../ActionSheet';
 import { useStorage } from '../../hooks/context/useStorage';
 import { WalletTransactionsStatus } from '../../components/Context/StorageProvider';
+import WatchOnlyWarning from '../../components/WatchOnlyWarning';
 
 const buttonFontSize =
   PixelRatio.roundToNearestPixel(Dimensions.get('window').width / 26) > 22
@@ -286,7 +287,6 @@ const WalletTransactions = ({ navigation }) => {
       </View>
     );
   };
-
   const onWalletSelect = async selectedWallet => {
     if (selectedWallet) {
       navigate('WalletTransactions', {
@@ -530,6 +530,16 @@ const WalletTransactions = ({ navigation }) => {
         }}
       />
       <View style={[styles.list, stylesHook.list]}>
+        {wallet.type === WatchOnlyWallet.type && wallet.isWatchOnlyWarningVisible && (
+          <WatchOnlyWarning
+            disabled={isLoading}
+            handleDismiss={() => {
+              wallet.isWatchOnlyWarningVisible = false;
+              LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
+              saveToDisk();
+            }}
+          />
+        )}
         <FlatList
           getItemLayout={getItemLayout}
           updateCellsBatchingPeriod={30}