wip: working on NewNanoContractTransactionContent

feat: implement address selection modal

feat: prepare for wallet connect integration

feat: set show modal mechanics

chore: rename modal

chore: rename content to request

feat: break down components

package.json

@@ -22,7 +22,7 @@
     "@fortawesome/free-solid-svg-icons": "6.4.0",
     "@fortawesome/react-native-fontawesome": "0.2.7",
     "@hathor/unleash-client": "0.1.0",
-    "@hathor/wallet-lib": "1.0.1",
+    "@hathor/wallet-lib": "1.5.0",
     "@notifee/react-native": "5.7.0",
     "@react-native-async-storage/async-storage": "1.19.0",
     "@react-native-firebase/app": "16.7.0",

src/App.js

@@ -89,6 +89,8 @@ import { NetworkStatusBar } from './components/NetworkSettings/NetworkStatusBar'
 import { NanoContractTransactions } from './screens/NanoContract/NanoContractTransactions.screen';
 import { NanoContractTransaction } from './screens/NanoContract/NanoContractTransaction.screen';
 import { NanoContractRegister } from './screens/NanoContract/NanoContractRegister.screen';
+import { NewNanoContractTransaction } from './screens/WalletConnect/NewNanoContractTransaction.screen';
+import { NewNanoContractTransactionModal } from './components/WalletConnect/NewNanoContractTransactionModal';
 
 /**
  * This Stack Navigator is exhibited when there is no wallet initialized on the local storage.
@@ -387,6 +389,7 @@ const AppStack = () => {
         <Stack.Screen name='WalletConnectList' component={WalletConnectList} />
         <Stack.Screen name='WalletConnectManual' component={WalletConnectManual} />
         <Stack.Screen name='WalletConnectScan' component={WalletConnectScan} />
+        <Stack.Screen name='NewNanoContractTransaction' component={NewNanoContractTransaction} />
         <Stack.Screen name='PushNotification' component={PushNotification} />
         <Stack.Screen name='ChangePin' component={ChangePin} />
         <Stack.Screen
@@ -733,6 +736,7 @@ const App = () => (
         >
           <NetworkStatusBar />
           <RootStack />
+          <NewNanoContractTransactionModal />
         </NavigationContainer>
         <WalletConnectModal />
         <GlobalErrorHandler />

src/actions.js

@@ -113,6 +113,9 @@ export const types = {
   SET_WALLET_CONNECT: 'SET_WALLET_CONNECT',
   SET_WALLET_CONNECT_MODAL: 'SET_WALLET_CONNECT_MODAL',
   SET_WALLET_CONNECT_SESSIONS: 'SET_WALLET_CONNECT_SESSIONS',
+  WALLET_CONNECT_ACCEPT: 'WALLET_CONNECT_ACCEPT',
+  WALLET_CONNECT_REJECT: 'WALLET_CONNECT_REJECT',
+  SET_NEW_NANO_CONTRACT_TRANSACTION_MODAL: 'SET_NEW_NANO_CONTRACT_TRANSACTION_MODAL',
   SET_UNLEASH_CLIENT: 'SET_UNLEASH_CLIENT',
   WC_URI_INPUTTED: 'WC_URI_INPUTTED',
   WC_CANCEL_SESSION: 'WC_CANCEL_SESSION',
@@ -217,6 +220,30 @@ export const walletConnectCancelSession = (sessionKey) => ({
   payload: sessionKey,
 });
 
+/**
+ * @param {Object} data Data that the user has accepted.
+ */
+export const walletConnectAccept = (data) => ({
+  type: types.WALLET_CONNECT_ACCEPT,
+  payload: data,
+});
+
+export const walletWalletReject = () => ({
+  type: types.WALLET_CONNECT_REJECT,
+});
+
+/**
+ * @param {Object} ncRequest
+ * @param {boolean} ncRequest.show
+ * @param {Object} ncRequest.data
+ * @param {Object} ncRequest.data.nc
+ * @param {Object} ncRequest.data.dapp
+ */
+export const setNewNanoContractTransactionModal = (ncRequest) => ({
+  type: types.SET_NEW_NANO_CONTRACT_TRANSACTION_MODAL,
+  payload: ncRequest
+});
+
 /**
  * isShowingPinScreen {bool}
  * */

src/components/HathorFlatList.js

@@ -15,7 +15,7 @@ import { COLORS } from '../styles/themes';
  * param {FlatListProps} props
  */
 export const HathorFlatList = (props) => (
-  <View style={styles.wrapper}>
+  <View style={[styles.wrapper, props.wrapperStyle]}>
     <FlatList
       ItemSeparatorComponent={ItemSeparator}
       // Introduced last to allow overwrite

src/components/Icon/CircleInfo.icon.js

@@ -19,7 +19,7 @@ export const CircleInfoIcon = ({ size = 20, color = '#000' }) => (
   >
     <G clipPath='url(#a)'>
       <Path
-        fill='#004F7E'
+        fill={color}
         d='M9.167 5.833h1.666V7.5H9.167V5.833Zm0 3.334h1.666v5H9.167v-5Zm.833-7.5A8.336 8.336 0 0 0 1.667 10c0 4.6 3.733 8.333 8.333 8.333S18.333 14.6 18.333 10 14.6 1.667 10 1.667Zm0 15A6.675 6.675 0 0 1 3.333 10 6.676 6.676 0 0 1 10 3.333 6.676 6.676 0 0 1 16.667 10 6.675 6.675 0 0 1 10 16.667Z'
       />
     </G>

src/components/NanoContract/NanoContractTransactionBalanceList.component.js

@@ -6,14 +6,14 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import { StyleSheet, View, FlatList } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { useSelector } from 'react-redux';
 import { transactionUtils } from '@hathor/wallet-lib';
 import { t } from 'ttag';
 
 import { COLORS } from '../../styles/themes';
 import { NanoContractTransactionBalanceListItem } from './NanoContractTransactionBalanceListItem.component';
-import { HathorFlatList } from '../HathorFlatList.component';
+import { HathorFlatList } from '../HathorFlatList';
 
 /**
  * Calculate the balance of a transaction

src/components/NanoContract/NanoContractTransactionHeader.component.js

@@ -17,7 +17,7 @@ import { ArrowDownIcon } from '../Icon/ArrowDown.icon';
 import { ArrowUpIcon } from '../Icon/ArrowUp.icon';
 import { TextValue } from '../TextValue.component';
 import { TextLabel } from '../TextLabel.component';
-import { TransactionStatusLabel } from '../TransactionStatusLabel.component';
+import { TransactionStatusLabel } from '../TransactionStatusLabel';
 
 export const NanoContractTransactionHeader = ({ tx }) => {
   const [isShrank, toggleShrank] = useState(true);