feat: nano contract integration with wallet connect

src/App.js

@@ -89,6 +89,8 @@ import { NetworkStatusBar } from './components/NetworkSettings/NetworkStatusBar'
 import { NanoContractDetailsScreen } from './screens/NanoContract/NanoContractDetailsScreen';
 import { NanoContractTransactionScreen } from './screens/NanoContract/NanoContractTransactionScreen';
 import { NanoContractRegisterScreen } from './screens/NanoContract/NanoContractRegisterScreen';
+import { NewNanoContractTransactionScreen } from './screens/WalletConnect/NewNanoContractTransactionScreen';
+import { NewNanoContractTransactionModal } from './components/WalletConnect/NanoContract/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='NewNanoContractTransactionScreen' component={NewNanoContractTransactionScreen} />
         <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

@@ -11,7 +11,7 @@ import {
   metadataApi,
 } from '@hathor/wallet-lib';
 import {
-  METADATA_CONCURRENT_DOWNLOAD,
+  METADATA_CONCURRENT_DOWNLOAD, WALLETCONNECT_NEW_NANOCONTRACT_TX_STATUS,
 } from './constants';
 import { mapToTxHistory } from './utils';
 
@@ -57,6 +57,8 @@ export const types = {
   TOKEN_METADATA_LOADED: 'TOKEN_METADATA_LOADED',
   SET_UNIQUE_DEVICE_ID: 'SET_UNIQUE_DEVICE_ID',
   SET_IS_SHOWING_PIN_SCREEN: 'SET_IS_SHOWING_PIN_SCREEN',
+  /* It initiates download of tokens metadata. */
+  TOKENS_FETCH_METADATA_REQUESTED: 'TOKENS_FETCH_METADATA_REQUESTED',
   TOKEN_FETCH_METADATA_REQUESTED: 'TOKEN_FETCH_METADATA_REQUESTED',
   TOKEN_FETCH_METADATA_SUCCESS: 'TOKEN_FETCH_METADATA_SUCCESS',
   TOKEN_FETCH_METADATA_FAILED: 'TOKEN_FETCH_METADATA_FAILED',
@@ -113,6 +115,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: 'SET_NEW_NANO_CONTRACT_TRANSACTION',
   SET_UNLEASH_CLIENT: 'SET_UNLEASH_CLIENT',
   WC_URI_INPUTTED: 'WC_URI_INPUTTED',
   WC_CANCEL_SESSION: 'WC_CANCEL_SESSION',
@@ -163,6 +168,14 @@ export const types = {
   NANOCONTRACT_UNREGISTER_SUCCESS: 'NANOCONTRACT_UNREGISTER_SUCCESS',
   /* It initiates a process to change the address on registered Nano Contract. */
   NANOCONTRACT_ADDRESS_CHANGE_REQUEST: 'NANOCONTRACT_ADDRESS_CHANGE_REQUEST',
+  /* It triggers a process to fetch blueprint info. */
+  NANOCONTRACT_BLUEPRINTINFO_REQUEST: 'NANOCONTRACT_BLUEPRINTINFO_REQUEST',
+  /* It signals a failure on fetch blueprint info. */
+  NANOCONTRACT_BLUEPRINTINFO_FAILURE: 'NANOCONTRACT_BLUEPRINTINFO_FAILURE',
+  /* It signals a success on fetch blueprint info. */
+  NANOCONTRACT_BLUEPRINTINFO_SUCCESS: 'NANOCONTRACT_BLUEPRINTINFO_SUCCESS',
+  /* It signals the blueprint info state is ready. */
+  NANOCONTRACT_BLUEPRINTINFO_READY: 'NANOCONTRACT_BLUEPRINTINFO_READY',
   /* It triggers a process to fetch all wallet addresses. */
   SELECTADDRESS_ADDRESSES_REQUEST: 'SELECTADDRESS_ADDRESSES_REQUEST',
   /* It signals the fetch has loaded all the addresses with success. */
@@ -175,6 +188,8 @@ export const types = {
   FIRSTADDRESS_SUCCESS: 'FIRSTADDRESS_SUCCESS',
   /* It signals a fetch failure due to an error. */
   FIRSTADDRESS_FAILURE: 'FIRSTADDRESS_FAILURE',
+  /* It updates the redux state of new nano contract transaction status on wallet connect register. */
+  WALLETCONNECT_NEW_NANOCONTRACT_STATUS: 'WALLETCONNECT_NEW_NANOCONTRACT_STATUS',
 };
 
 export const featureToggleInitialized = () => ({
@@ -235,6 +250,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 setNewNanoContractTransaction = (ncRequest) => ({
+  type: types.SET_NEW_NANO_CONTRACT_TRANSACTION,
+  payload: ncRequest
+});
+
 /**
  * isShowingPinScreen {bool}
  * */
@@ -1205,3 +1244,93 @@ export const firstAddressFailure = (failurePayload) => ({
   type: types.FIRSTADDRESS_FAILURE,
   payload: failurePayload,
 });
+
+/**
+ * Request the downalod of token metadata for a list of tokens.
+ * @param {string[]} tokens A list of token uid
+ */
+export const tokensFetchMetadataRequest = (tokens) => ({
+  type: types.TOKENS_FETCH_METADATA_REQUESTED,
+  tokens
+});
+
+/**
+ * Signals update on new nano contract status to ready.
+ */
+export const setNewNanoContractStatusReady = () => ({
+  type: types.WALLETCONNECT_NEW_NANOCONTRACT_STATUS,
+  payload: WALLETCONNECT_NEW_NANOCONTRACT_TX_STATUS.READY,
+});
+
+/**
+ * Signals update on new nano contract status to loading.
+ */
+export const setNewNanoContractStatusLoading = () => ({
+  type: types.WALLETCONNECT_NEW_NANOCONTRACT_STATUS,
+  payload: WALLETCONNECT_NEW_NANOCONTRACT_TX_STATUS.LOADING,
+});
+
+/**
+ * Signals update on new nano contract status to failed.
+ */
+export const setNewNanoContractStatusFailure = () => ({
+  type: types.WALLETCONNECT_NEW_NANOCONTRACT_STATUS,
+  payload: WALLETCONNECT_NEW_NANOCONTRACT_TX_STATUS.FAILED,
+});
+
+/**
+ * Signals update on new nano contract status to successful.
+ */
+export const setNewNanoContractStatusSuccess = () => ({
+  type: types.WALLETCONNECT_NEW_NANOCONTRACT_STATUS,
+  payload: WALLETCONNECT_NEW_NANOCONTRACT_TX_STATUS.SUCCESSFUL,
+});
+
+/**
+ * Blueprint Info request in the context of a Nano Contract.
+ * @param {string} id Blueprint ID.
+ */
+export const nanoContractBlueprintInfoRequest = (id) => ({
+  type: types.NANOCONTRACT_BLUEPRINTINFO_REQUEST,
+  payload: { id },
+});
+
+/**
+ * Signals the bluprint info request has failed.
+ * @param {string} id Blueprint ID.
+ * @param {string} error Request failure reason.
+ */
+export const nanoContractBlueprintInfoFailure = (id, error) => ({
+  type: types.NANOCONTRACT_BLUEPRINTINFO_FAILURE,
+  payload: { id, error },
+});
+
+/**
+ * Signals the blueprint info was fetched with success.
+ * @param {string} id Blueprint ID.
+ * @param {{
+ *   id: string;
+ *   name: string;
+ *   public_methods: {
+ *     [methodName: string]: {
+ *       args: {
+ *         type: string;
+ *         name: string;
+ *       }[];
+ *     };
+ *   };
+ * }} blueprintInfo Raw data response from fullnode.
+ */
+export const nanoContractBlueprintInfoSuccess = (id, blueprintInfo) => ({
+  type: types.NANOCONTRACT_BLUEPRINTINFO_SUCCESS,
+  payload: { id, data: { ...blueprintInfo } },
+});
+
+/**
+ * Signals the blueprint info state is ready.
+ * @param {string} id Blueprint ID.
+ */
+export const nanoContractBlueprintInfoReady = (id) => ({
+  type: types.NANOCONTRACT_BLUEPRINTINFO_READY,
+  payload: { id },
+});

src/components/FeedbackContent.js

@@ -25,6 +25,7 @@ import { COLORS } from '../styles/themes';
  * @param {Object?} props.action A react component or react element containing a call to action,
  * if provided, it renders underneath the content
  * @param {boolean} props.offcard Renders a feedback without card style
+ * @param {boolean} props.offmargin Renders a feedback without margins
  *
  * @example
  * <FeedbackContent
@@ -34,8 +35,22 @@ import { COLORS } from '../styles/themes';
  *   action={<TryAgain ncId={ncId} />}
  * />
  */
-export const FeedbackContent = ({ title, message, icon, action, offcard }) => (
-  <View style={[styles.container, !offcard && styles.card]}>
+export const FeedbackContent = ({
+  title,
+  message,
+  icon,
+  action,
+  offcard,
+  offmargin,
+  offbackground
+}) => (
+  <View style={[
+    styles.container,
+    !offcard && styles.card,
+    offmargin && styles.offMargin,
+    offbackground && styles.offBackground
+  ]}
+  >
     <View style={styles.wrapper}>
       <View style={styles.content}>
         {icon
@@ -55,8 +70,8 @@ const styles = StyleSheet.create({
     alignSelf: 'stretch',
     marginTop: 16,
     marginBottom: 45,
-    backgroundColor: COLORS.backgroundColor,
     marginHorizontal: 16,
+    backgroundColor: COLORS.backgroundColor,
   },
   card: {
     borderRadius: 16,
@@ -65,6 +80,13 @@ const styles = StyleSheet.create({
     shadowColor: COLORS.textColor,
     shadowOpacity: 0.08,
   },
+  offMargin: {
+    marginHorizontal: 0,
+    marginVertical: 0,
+  },
+  offBackground: {
+    backgroundColor: COLORS.lowContrastDetail,
+  },
   wrapper: {
     overflow: 'scroll',
   },

src/components/FeedbackModal.js

@@ -10,6 +10,19 @@ import { Text, View } from 'react-native';
 import PropTypes from 'prop-types';
 import HathorModal from './HathorModal';
 
+/**
+ * It renders a modal with some feedback to user.
+ *
+ * @param {Object} props
+ *
+ * @example
+ * <FeedbackModal
+ *   icon={(<Image source={errorIcon} resizeMode='contain' />)}
+ *   text={t`Error while sending transaction.`}
+ *   onDismiss={handleFeedbackModalDismiss}
+ *   action={(<NewHathorButton discrete title={t`Ok, close`} onPress={handleErrorModalAction} />)}
+ * />
+ */
 const FeedbackModal = (props) => (
   <HathorModal
     onDismiss={props.onDismiss}

src/components/FrozenTextValue.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Hathor Labs and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { TextValue } from './TextValue';
+
+/**
+ * @param {Object} props
+ * @param {boolean} props.title It sets font weight to bold and a larger font size
+ * @param {boolean} props.bold It sets font weight to bold
+ * @param {boolean} props.oneline It sets numberOfLines to 1
+ * @param {boolean} props.shrink It sets flexShrink to 1
+ * @param {boolean} props.pb4 It sets padding bottom to 4
+ */
+export const FrozenTextValue = ({ title, bold, oneline, shrink, pb4, children }) => (
+  <TextValue
+    color='hsla(0, 0%, 38%, 1)'
+    title={title}
+    bold={bold}
+    oneline={oneline}
+    shrink={shrink}
+    pb4={pb4}
+  >
+    {children}
+  </TextValue>
+);

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/Icons/CircleInfo.icon.js

@@ -28,7 +28,7 @@ export const CircleInfoIcon = ({ size = 20, color = COLORS.white }) => (
   >
     <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/NanoContractTransactionHeader.js

@@ -20,6 +20,7 @@
 import { combineURLs, getShortContent, getShortHash, getTimestampFormat } from '../../utils';
 import SimpleButton from '../SimpleButton';
 import { ArrowDownIcon } from '../Icons/ArrowDown.icon';
+import { ArrowUpIcon } from '../Icons/ArrowUp.icon';
 import { TextValue } from '../TextValue';
 import { TextLabel } from '../TextLabel';
 import { TransactionStatusLabel } from '../TransactionStatusLabel';

src/components/TextValue.js

@@ -10,23 +10,28 @@ import {
   StyleSheet,
   Text,
 } from 'react-native';
+import { commonStyles } from './WalletConnect/theme';
 
 /**
  * @param {Object} props
  * @param {boolean} props.title It sets font weight to bold and a larger font size
+ * @param {boolean} props.label It sets font weight to bold and a bottom margin
  * @param {boolean} props.bold It sets font weight to bold
  * @param {boolean} props.oneline It sets numberOfLines to 1
  * @param {boolean} props.shrink It sets flexShrink to 1
  * @param {boolean} props.pb4 It sets padding bottom to 4
+ * @param {string} props.color It sets text color
  */
-export const TextValue = ({ title, bold, oneline, shrink, pb4, children }) => (
+export const TextValue = ({ title, label, bold, oneline, shrink, pb4, color, children }) => (
   <Text style={[
     styles.textValue,
     title && styles.title,
+    label && styles.label,
     oneline && styles.oneline,
     shrink && styles.shrink,
     bold && styles.bold,
     pb4 && styles.pb4,
+    color && { color },
   ]}
   >{children}</Text>
 );
@@ -41,6 +46,10 @@ const styles = StyleSheet.create({
     fontSize: 18,
     fontWeight: 'bold',
   },
+  label: [
+    commonStyles.bold,
+    commonStyles.mb4,
+  ],
   pb4: {
     paddingBottom: 4,
   },