chore: add loading feedback content

HathorNetwork · Jun 14, 2024 · 7068889 · 7068889
1 parent 8952d16
commit 7068889
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 49 deletions.
diff --git a/src/components/FeedbackContent.js b/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,8 @@ 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 }) => (
+  <View style={[styles.container, !offcard && styles.card, offmargin && styles.offMargin]}>
     <View style={styles.wrapper}>
       <View style={styles.content}>
         {icon
@@ -55,16 +56,20 @@ const styles = StyleSheet.create({
     alignSelf: 'stretch',
     marginTop: 16,
     marginBottom: 45,
-    backgroundColor: COLORS.backgroundColor,
     marginHorizontal: 16,
-  },
+    backgroundColor: COLORS.backgroundColor,
+  }, 
   card: {
     borderRadius: 16,
     shadowOffset: { height: 2, width: 0 },
     shadowRadius: 4,
     shadowColor: COLORS.textColor,
     shadowOpacity: 0.08,
   },
+  offMargin: {
+    marginHorizontal: 0,
+    marginVertical: 0,
+  },
   wrapper: {
     overflow: 'scroll',
   },

diff --git a/src/components/WalletConnect/NewNanoContractTransactionModal.js b/src/components/WalletConnect/NewNanoContractTransactionModal.js
@@ -14,8 +14,8 @@ import {
 import { t } from 'ttag';
 import { useNavigation } from '@react-navigation/native';
 import { COLORS } from '../../styles/themes';
-import { CircleInfoIcon } from '../Icon/CircleInfo.icon';
-import { ModalBase } from '../ModalBase.component';
+import { CircleInfoIcon } from '../Icons/CircleInfo.icon';
+import { ModalBase } from '../ModalBase';
 import SimpleButton from '../SimpleButton';
 import { useDispatch, useSelector } from 'react-redux';
 import { setNewNanoContractTransactionModal, walletWalletReject } from '../../actions';

diff --git a/src/components/WalletConnect/NewNanoContractTransactionRequest.js b/src/components/WalletConnect/NewNanoContractTransactionRequest.js
@@ -23,28 +23,51 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
 import { t } from 'ttag';
 import {
-  fetchTokensMetadata,
   tokensFetchMetadataRequest,
   walletConnectAccept,
   walletWalletReject
 } from '../../actions';
 import { COLORS } from '../../styles/themes';
-import { renderValue } from '../../utils';
+import { getShortHash, renderValue } from '../../utils';
 import { HathorFlatList } from '../HathorFlatList';
-import { NanoContractIcon } from '../Icon/NanoContract.icon';
-import { PenIcon } from '../Icon/Pen.icon';
-import { ReceivedIcon } from '../Icon/Received.icon';
-import { SentIcon } from '../Icon/Sent.icon';
-import { ModalBase } from '../ModalBase.component';
+import { NanoContractIcon } from '../Icons/NanoContract.icon';
+import { PenIcon } from '../Icons/Pen.icon';
+import { ReceivedIcon } from '../Icons/Received.icon';
+import { SentIcon } from '../Icons/Sent.icon';
+import { ModalBase } from '../ModalBase';
 import NewHathorButton from '../NewHathorButton';
 import { SelectAddressModal } from '../NanoContract/SelectAddressModal.component';
 import { commonStyles } from './theme';
+import { FeedbackContent } from '../FeedbackContent';
 
 const actionTitleMap = (tokenSymbol) => ({
   deposit: t`${tokenSymbol} Deposit`,
   withdrawal: t`${tokenSymbol} Withdrawal`,
 });
 
+/**
+ * Get action title depending on the action type.
+ * @param {Object} tokens A map of token metadata by token uid
+ * @param {Object} action An action object
+ *
+ * @example
+ * getActionTitle({ '123': { ..., symbol: 'STR' }}, { ..., token: '123', type: 'deposit' })
+ * >>> 'STR Deposit'
+ *
+ * @example
+ * getActionTitle({}, { ..., token: '1234...5678', type: 'deposit' })
+ * >>> '1234...5678 Deposit'
+ */
+const getActionTitle = (tokens, action) => {
+  const tokenMetadata = tokens[action.token]; 
+  if (tokenMetadata) {
+    return actionTitleMap(tokenMetadata.symbol)[action.type];
+  }
+  else {
+    return actionTitleMap(getShortHash(action.token))[action.type];
+  }
+};
+
 /**
  * @param {Object} props
  * @param {Object} props.ncTxRequest
@@ -59,20 +82,16 @@ export const NewNanoContractTransactionRequest = ({ ncTxRequest }) => {
   const { nc, dapp } = ncTxRequest;
   const dispatch = useDispatch();
   const navigation = useNavigation();
-  const { blueprintName } = useSelector((state) => state.nanoContract.registered[nc.ncId]);
+  const { blueprintName, address } = useSelector((state) => state.nanoContract.registered[nc.ncId]);
   const registeredTokensMetadata = useSelector((state) => state.tokenMetadata);
   // Use it to add loading feedback
   const metadataLoaded = useSelector((state) => state.metadataLoaded);
 
   const [showSelectAddressModal, setShowSelectAddressModal] = useState(false);
   const [showDeclineModal, setShowDeclineModal] = useState(false);
-  const [ncAddress, setNcAddress] = useState(registeredNc.address);
+  const [ncAddress, setNcAddress] = useState(address);
   const ncToAccept = useMemo(() => ({ ...nc, caller: ncAddress }), [ncAddress])
 
-  if (!blueprintName) {
-    throw new Error(`Nano Contract ${nc.ncId} not registered.`);
-  }
-
   // Controle SelectAddressModal
   const toggleSelectAddressModal = () => setShowSelectAddressModal(!showSelectAddressModal);
   const handleAddressSelection = (newAddress) => {
@@ -97,6 +116,10 @@ export const NewNanoContractTransactionRequest = ({ ncTxRequest }) => {
   };
 
   useEffect(() => {
+    if (!blueprintName) {
+      throw new Error(`Nano Contract ${nc.ncId} not registered.`);
+    }
+
     // Get tokens metadata
     const tokensUid = nc.actions.map((each) => each.token);
     const tokensMetadataToDownload = [];
@@ -114,34 +137,45 @@ export const NewNanoContractTransactionRequest = ({ ncTxRequest }) => {
 
   return (
     <>
-      <ScrollView>
+      <ScrollView style={styles.wide}>
         <TouchableWithoutFeedback>
           <View style={styles.wrapper}>
-            <DappContainer dapp={dapp} />
-            <NanoContractExecInfo
-              nc={ncToAccept}
-              blueprintName={blueprintName}
-              onSelectAddress={toggleSelectAddressModal}
-            />
-            <NanoContractActions
-              ncActions={nc.actions}
-              tokens={registeredTokensMetadata}
-            />
-            <NanoContractMethodParams ncArgs={nc.args} />
-
-            {/* User actions */}
-            <View style={styles.actionContainer}>
-              <NewHathorButton
-                title={t`Accept Transaction`}
-                onPress={onAcceptTransaction}
-              />
-              <NewHathorButton
-                title={t`Decline Transaction`}
-                onPress={onDeclineTransaction}
-                secondary
-                danger
+            {!metadataLoaded && (
+              <FeedbackContent
+                title={t`Loading`}
+                message={t`Loading transaction information.`}
+                offmargin
               />
-            </View>
+            )}
+            {metadataLoaded && (
+              <View style={styles.content}>
+                <DappContainer dapp={dapp} />
+                <NanoContractExecInfo
+                  nc={ncToAccept}
+                  blueprintName={blueprintName}
+                  onSelectAddress={toggleSelectAddressModal}
+                />
+                <NanoContractActions
+                  ncActions={nc.actions}
+                  tokens={registeredTokensMetadata}
+                />
+                <NanoContractMethodParams ncArgs={nc.args} />
+
+                {/* User actions */}
+                <View style={styles.actionContainer}>
+                  <NewHathorButton
+                    title={t`Accept Transaction`}
+                    onPress={onAcceptTransaction}
+                  />
+                  <NewHathorButton
+                    title={t`Decline Transaction`}
+                    onPress={onDeclineTransaction}
+                    secondary
+                    danger
+                  />
+                </View>
+              </View>
+            )}
           </View>
         </TouchableWithoutFeedback>
       </ScrollView>
@@ -301,7 +335,7 @@ const NanoContractActions = ({ ncActions, tokens }) => {
           <View style={[commonStyles.cardSplit, commonStyles.listItem]}>
             <Icon type={item.type} />
             <View style={commonStyles.cardSplitContent}>
-              <Text style={styles.action}>{actionTitleMap(tokens[item.token].symbol)[item.type]}</Text>
+              <Text style={styles.action}>{getActionTitle(tokens, item)}</Text>
               {item.address
                 && (
                 <View>
@@ -426,12 +460,19 @@ const Amount = ({ amount, isNft }) => {
 };
 
 const styles = StyleSheet.create({
+  wide: {
+    width: '100%'
+  },
   wrapper: {
+    flex: 1,
+    paddingHorizontal: 16,
+    backgroundColor: COLORS.lowContrastDetail, // Defines an outer area on the main list content
+  },
+  content: {
     flex: 1,
     rowGap: 24,
     width: '100%',
     paddingVertical: 16,
-    paddingHorizontal: 16,
   },
   balanceReceived: {
     color: 'hsla(180, 85%, 34%, 1)',

diff --git a/src/reducers/reducer.js b/src/reducers/reducer.js
@@ -259,8 +259,41 @@ const initialState = {
      * }}
      */
     newNanoContractTransactionModal: {
-      show: false,
-      data: null,
+      show: true,
+      data: {
+        dapp: {
+          icon: 'https://qph.cf2.quoracdn.net/main-thumb-ti-2174223-200-zpswkyqiurzmngorexexesldvqomzydm.jpeg',
+          proposer: 'dApp name',
+          url: '',
+          description: '',
+        },
+        nc: {
+          network: 'mainnet',
+          ncId: '0000184ed96ae566ca5e667fcb6731534ed2a88b6add6a90abc2b8c6c7ed3c9a',
+          blueprintId: '3cb032600bdf7db784800e4ea911b10676fa2f67591f82bb62628c234e771595',
+          method: 'bet',
+          caller: 'HTeZeYTCv7cZ8u7pBGHkWsPwhZAuoq5j3V',
+          actions: [
+            {
+              type: 'withdrawal',
+              token: '00',
+              amount: 323,
+              address: 'HTeZeYTCv7cZ8u7pBGHkWsPwhZAuoq5j3V',
+            },
+            {
+              type: 'deposit',
+              token: '00',
+              amount: 892,
+            },
+          ],
+          args: [
+            'AAA',
+            'WZhKusv57pvzotZrf4s7yt7P7PXEqyFTHk',
+            '1231200',
+            '1x0'
+          ],
+        },
+      },
     },
     connectionFailed: false,
     sessions: {},
@@ -295,7 +328,14 @@ const initialState = {
      *   },
      * }
      */
-    registered: {},
+    registered: {
+      '0000184ed96ae566ca5e667fcb6731534ed2a88b6add6a90abc2b8c6c7ed3c9a': {
+          address: 'HTeZeYTCv7cZ8u7pBGHkWsPwhZAuoq5j3V',
+          ncId: '0000184ed96ae566ca5e667fcb6731534ed2a88b6add6a90abc2b8c6c7ed3c9a',
+          blueprintId: '3cb032600bdf7db784800e4ea911b10676fa2f67591f82bb62628c234e771595',
+          blueprintName: 'Bet',
+      },
+    },
     /**
      * history {{
      *   [ncId: string]: {