[FEAT] txp notifications

src/components/list/TransactionProposalRow.tsx

@@ -46,6 +46,7 @@ interface Props {
   value?: string;
   time?: string;
   onPressTransaction?: () => void;
+  hideIcon?: boolean;
 }
 
 const TransactionProposalRow = ({
@@ -54,11 +55,12 @@ const TransactionProposalRow = ({
   value,
   time,
   onPressTransaction,
+  hideIcon,
 }: Props) => {
   const {t} = useTranslation();
   return (
     <TransactionContainer onPress={onPressTransaction}>
-      {icon && <IconContainer>{icon}</IconContainer>}
+      {icon && !hideIcon && <IconContainer>{icon}</IconContainer>}
 
       <HeadContainer>
         <Description numberOfLines={1} ellipsizeMode={'tail'}>

src/components/styled/Containers.tsx

@@ -9,6 +9,7 @@ import {
   White,
   Slate,
   NotificationPrimary,
+  Action,
 } from '../../styles/colors';
 import {BaseText} from './Text';
 
@@ -362,3 +363,13 @@ export const NoResultsImgContainer = styled.View`
 export const NoResultsDescription = styled(BaseText)`
   font-size: 16px;
 `;
+
+export const ProposalBadgeContainer = styled.TouchableOpacity`
+  background: ${Action};
+  border-radius: 10px;
+  height: 30px;
+  width: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;

src/components/styled/Text.tsx

@@ -193,6 +193,13 @@ export const Badge = styled(BaseText)`
   border: 1px solid #e1e4e7;
 `;
 
+export const ProposalBadge = styled(BaseText)`
+  color: white;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+`;
+
 export const ImportTitle = styled(BaseText)`
   font-weight: 500;
   font-size: 13px;

src/navigation/tabs/home/HomeRoot.tsx

@@ -45,6 +45,9 @@ import KeyMigrationFailureModal from './components/KeyMigrationFailureModal';
 import {batch} from 'react-redux';
 import {useThemeType} from '../../../utils/hooks/useThemeType';
 import {useTranslation} from 'react-i18next';
+import {ProposalBadgeContainer} from '../../../components/styled/Containers';
+import {ProposalBadge} from '../../../components/styled/Text';
+import _ from 'lodash';
 
 const HomeRoot = () => {
   const {t} = useTranslation();
@@ -57,6 +60,13 @@ const HomeRoot = () => {
   const brazeDoMore = useAppSelector(selectBrazeDoMore);
   const brazeQuickLinks = useAppSelector(selectBrazeQuickLinks);
   const keys = useAppSelector(({WALLET}) => WALLET.keys);
+  const wallets = Object.values(keys).flatMap(k => k.wallets);
+  let pendingTxps: any = [];
+  _.each(wallets, x => {
+    if (x.pendingTxps) {
+      pendingTxps = pendingTxps.concat(x.pendingTxps);
+    }
+  });
   const keyMigrationFailure = useAppSelector(
     ({APP}) => APP.keyMigrationFailure,
   );
@@ -153,6 +163,16 @@ const HomeRoot = () => {
     setRefreshing(false);
   };
 
+  const onPressTxpBadge = useMemo(
+    () => () => {
+      navigation.navigate('Wallet', {
+        screen: 'TransactionProposalNotifications',
+        params: {},
+      });
+    },
+    [],
+  );
+
   useEffect(() => {
     if (keyMigrationFailure && !keyMigrationFailureModalHasBeenShown) {
       batch(() => {
@@ -174,6 +194,11 @@ const HomeRoot = () => {
             />
           }>
           <HeaderContainer>
+            {pendingTxps.length ? (
+              <ProposalBadgeContainer onPress={onPressTxpBadge}>
+                <ProposalBadge>{pendingTxps.length}</ProposalBadge>
+              </ProposalBadgeContainer>
+            ) : null}
             <ScanButton />
             <ProfileButton />
           </HeaderContainer>

src/navigation/tabs/home/components/Styled.tsx

@@ -6,6 +6,7 @@ import {Black, Slate, White} from '../../../../styles/colors';
 export const HeaderContainer = styled.View`
   flex-direction: row;
   justify-content: flex-end;
+  align-items: center;
   margin: 10px ${ScreenGutter};
 `;
 

src/navigation/wallet/WalletStack.tsx

@@ -23,6 +23,7 @@ import {HeaderTitle} from '../../components/styled/Text';
 import CreateEncryptionPassword from './screens/CreateEncryptionPassword';
 import {
   Key,
+  TransactionProposal,
   Wallet as WalletModel,
   _Credentials,
 } from '../../store/wallet/wallet.models';
@@ -44,6 +45,7 @@ import UpdateKeyOrWalletName from './screens/UpdateKeyOrWalletName';
 import RequestSpecificAmountQR from './screens/request-specific-amount/RequestSpecificAmountQR';
 import TransactionDetails from './screens/TransactionDetails';
 import TransactionProposalDetails from './screens/TransactionProposalDetails';
+import TransactionProposalNotifications from './screens/TransactionProposalNotifications';
 import GlobalSelect, {GlobalSelectParamList} from './screens/GlobalSelect';
 import KeyGlobalSelect, {
   KeyGlobalSelectParamList,
@@ -113,6 +115,7 @@ export type WalletStackParamList = {
   RequestSpecificAmountQR: {wallet: WalletModel; requestAmount: number};
   TransactionDetails: {wallet: WalletModel; transaction: any};
   TransactionProposalDetails: {wallet: WalletModel; transaction: any; key: Key};
+  TransactionProposalNotifications: {walletId?: string; keyId?: string};
   GlobalSelect: GlobalSelectParamList;
   KeyGlobalSelect: KeyGlobalSelectParamList;
   WalletInformation: {wallet: WalletModel};
@@ -163,6 +166,7 @@ export enum WalletScreens {
   REQUEST_SPECIFIC_AMOUNT_QR = 'RequestSpecificAmountQR',
   TRANSACTION_DETAILS = 'TransactionDetails',
   TRANSACTION_PROPOSAL_DETAILS = 'TransactionProposalDetails',
+  TRANSACTION_PROPOSAL_NOTIFICATIONS = 'TransactionProposalNotifications',
   GLOBAL_SELECT = 'GlobalSelect',
   KEY_GLOBAL_SELECT = 'KeyGlobalSelect',
   WALLET_INFORMATION = 'WalletInformation',
@@ -356,6 +360,13 @@ const WalletStack = () => {
           name={WalletScreens.TRANSACTION_PROPOSAL_DETAILS}
           component={TransactionProposalDetails}
         />
+        <Wallet.Screen
+          options={{
+            ...TransitionPresets.ModalPresentationIOS,
+          }}
+          name={WalletScreens.TRANSACTION_PROPOSAL_NOTIFICATIONS}
+          component={TransactionProposalNotifications}
+        />
         <Wallet.Screen
           options={{
             headerTitle: () => (

src/navigation/wallet/screens/KeyOverview.tsx

@@ -10,13 +10,20 @@ import {FlatList, LogBox, RefreshControl, TouchableOpacity} from 'react-native';
 import styled from 'styled-components/native';
 import haptic from '../../../components/haptic-feedback/haptic';
 import WalletRow, {WalletRowProps} from '../../../components/list/WalletRow';
-import {BaseText, H2, H5, HeaderTitle} from '../../../components/styled/Text';
+import {
+  BaseText,
+  H2,
+  H5,
+  HeaderTitle,
+  ProposalBadge,
+} from '../../../components/styled/Text';
 import Settings from '../../../components/settings/Settings';
 import {
   Hr,
   ActiveOpacity,
   ScreenGutter,
-  HeaderRightContainer,
+  HeaderRightContainer as _HeaderRightContainer,
+  ProposalBadgeContainer,
 } from '../../../components/styled/Containers';
 import {showBottomNotificationModal} from '../../../store/app/app.actions';
 import {startUpdateAllWalletStatusForKey} from '../../../store/wallet/effects/status/status';
@@ -56,6 +63,7 @@ import EncryptPasswordImg from '../../../../assets/img/tinyicon-encrypt.svg';
 import EncryptPasswordDarkModeImg from '../../../../assets/img/tinyicon-encrypt-darkmode.svg';
 import {useTranslation} from 'react-i18next';
 import {toFiat} from '../../../store/wallet/utils/wallet';
+import _ from 'lodash';
 
 LogBox.ignoreLogs([
   'Non-serializable values were found in the navigation state',
@@ -141,6 +149,11 @@ const HeaderTitleContainer = styled.View`
   align-items: center;
 `;
 
+const HeaderRightContainer = styled(_HeaderRightContainer)`
+  flex-direction: row;
+  align-items: center;
+`;
+
 export const buildUIFormattedWallet: (
   wallet: Wallet,
   defaultAltCurrencyIsoCode: string,
@@ -328,7 +341,12 @@ const KeyOverview: React.FC<KeyOverviewScreenProps> = ({navigation, route}) => {
   const key = keys[id];
   const hasMultipleKeys =
     Object.values(keys).filter(k => k.backupComplete).length > 1;
-
+  let pendingTxps: any = [];
+  _.each(key.wallets, x => {
+    if (x.pendingTxps) {
+      pendingTxps = pendingTxps.concat(x.pendingTxps);
+    }
+  });
   useLayoutEffect(() => {
     if (!key) {
       return;
@@ -358,25 +376,36 @@ const KeyOverview: React.FC<KeyOverviewScreenProps> = ({navigation, route}) => {
         );
       },
       headerRight: () => {
-        return key?.methods.isPrivKeyEncrypted() ? (
-          <HeaderRightContainer>
-            <CogIconContainer
-              onPress={() =>
-                navigation.navigate('KeySettings', {
-                  key,
-                })
-              }
-              activeOpacity={ActiveOpacity}>
-              <Icons.Cog />
-            </CogIconContainer>
-          </HeaderRightContainer>
-        ) : (
+        return (
           <>
-            <Settings
-              onPress={() => {
-                setShowKeyOptions(true);
-              }}
-            />
+            <HeaderRightContainer>
+              {pendingTxps.length ? (
+                <ProposalBadgeContainer
+                  style={{marginRight: 10}}
+                  onPress={onPressTxpBadge}>
+                  <ProposalBadge>{pendingTxps.length}</ProposalBadge>
+                </ProposalBadgeContainer>
+              ) : null}
+              {key?.methods.isPrivKeyEncrypted() ? (
+                <CogIconContainer
+                  onPress={() =>
+                    navigation.navigate('KeySettings', {
+                      key,
+                    })
+                  }
+                  activeOpacity={ActiveOpacity}>
+                  <Icons.Cog />
+                </CogIconContainer>
+              ) : (
+                <>
+                  <Settings
+                    onPress={() => {
+                      setShowKeyOptions(true);
+                    }}
+                  />
+                </>
+              )}
+            </HeaderRightContainer>
           </>
         );
       },
@@ -452,6 +481,13 @@ const KeyOverview: React.FC<KeyOverviewScreenProps> = ({navigation, route}) => {
     });
   }
 
+  const onPressTxpBadge = useMemo(
+    () => () => {
+      navigation.navigate('TransactionProposalNotifications', {keyId: key.id});
+    },
+    [],
+  );
+
   const onRefresh = async () => {
     setRefreshing(true);
     try {