fix: transaction details amount

internetmusic · Nov 14, 2020 · 282d19e · 282d19e
1 parent 7a4e16b
commit 282d19e
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 13 deletions.
diff --git a/src/components/common/TransactionRow/TransactionRow.tsx b/src/components/common/TransactionRow/TransactionRow.tsx
@@ -73,7 +73,7 @@ export const TransactionRow: FunctionComponent<Props> = ({ signature, publicKey
   );
 
   const { mint } = tokenAccount?.parsed || { amount: 0 };
-  let { symbol } = usePopulateTokenInfo({ mint: mint?.toBase58(), includeSol: true });
+  let { symbol } = usePopulateTokenInfo({ mint: mint?.toBase58() });
 
   const { type, lamports } = useDecodeSystemProgramInstructions(
     transaction?.transaction.instructions,

diff --git a/src/components/modals/TransactionDetailsModal/TransactionDetailsModal.tsx b/src/components/modals/TransactionDetailsModal/TransactionDetailsModal.tsx
@@ -6,8 +6,10 @@ import { styled } from 'linaria/react';
 import { rgba } from 'polished';
 
 import { Icon } from 'components/ui';
-import { RootState } from 'store/types';
+import { RootState, TokenAccount } from 'store/types';
 import { useDecodeSystemProgramInstructions } from 'utils/hooks/instructions/useDecodeSystemProgramInstructions';
+import { useDecodeTokenRegInstructions } from 'utils/hooks/instructions/useDecodeTokenRegInstractions';
+import { usePopulateTokenInfo } from 'utils/hooks/usePopulateTokenInfo';
 
 const Wrapper = styled.div`
   position: relative;
@@ -134,15 +136,32 @@ export const TransactionDetailsModal: FunctionComponent<Props> = ({ signature, c
   const transaction = useSelector(
     (state: RootState) => state.entities.transactionsNormalized[signature],
   );
+  const transactionAuthor = transaction?.transaction.signatures[0].publicKey.toBase58();
+  const tokenAccount: TokenAccount = useSelector(
+    (state: RootState) => state.entities.tokens.items[transactionAuthor],
+  );
+  const { mint } = tokenAccount?.parsed || { amount: 0 };
+  let { symbol } = usePopulateTokenInfo({ mint: mint?.toBase58() });
 
   const { type, fromPubkey, lamports, toPubkey } = useDecodeSystemProgramInstructions(
     transaction?.transaction.instructions,
   );
 
+  const { transfer } = useDecodeTokenRegInstructions(transaction?.transaction.instructions);
+
   if (!transaction) {
     return null;
   }
 
+  // TODO: dirty
+  let amount = 0;
+  if (type) {
+    symbol = 'SOL';
+    amount = (lamports || 0) / web3.LAMPORTS_PER_SOL;
+  } else if (transfer) {
+    amount = (transfer.amount || 0) / web3.LAMPORTS_PER_SOL;
+  }
+
   return (
     <Wrapper>
       <Header>
@@ -157,8 +176,9 @@ export const TransactionDetailsModal: FunctionComponent<Props> = ({ signature, c
       </Header>
       <Content>
         <StatusWrapper>
-          {/* <Value>+ 0,00344 BTC</Value> */}
-          <Value>{(lamports || 0) / web3.LAMPORTS_PER_SOL}</Value>
+          <Value>
+            {amount} {symbol}
+          </Value>
           <Status>Completed</Status>
         </StatusWrapper>
         <FieldsWrapper>
@@ -168,18 +188,18 @@ export const TransactionDetailsModal: FunctionComponent<Props> = ({ signature, c
           </FieldWrapper>
           <FieldWrapper>
             <FieldTitle>Amount</FieldTitle>
-            <FieldValue>{(lamports || 0) / web3.LAMPORTS_PER_SOL}</FieldValue>
+            <FieldValue>{amount}</FieldValue>
             {/* <FieldValue>0,00344 BTC at 12 902, 07 US$</FieldValue> */}
           </FieldWrapper>
           <FieldWrapper>
             <FieldTitle>Value</FieldTitle>
-            <FieldValue>{(lamports || 0) / web3.LAMPORTS_PER_SOL}</FieldValue>
+            <FieldValue>{amount}</FieldValue>
             {/* <FieldValue>0,00344 BTC at 12 902, 07 US$</FieldValue> */}
           </FieldWrapper>
           {transaction.meta ? (
             <FieldWrapper>
               <FieldTitle>Fee</FieldTitle>
-              <FieldValue>{transaction.meta.fee}</FieldValue>
+              <FieldValue>{transaction.meta.fee} SOL</FieldValue>
               {/* <FieldValue>0,00009492 BTC</FieldValue> */}
             </FieldWrapper>
           ) : null}

diff --git a/src/components/pages/send/ResultWidget/ResultWidget.tsx b/src/components/pages/send/ResultWidget/ResultWidget.tsx
@@ -12,8 +12,10 @@ import { Button, Icon } from 'components/ui';
 import { openModal } from 'store/actions/modals';
 import { getConfirmedTransaction } from 'store/actions/solana';
 import { SHOW_MODAL_TRANSACTION_DETAILS } from 'store/constants/modalTypes';
-import { RootState } from 'store/types';
+import { RootState, TokenAccount } from 'store/types';
 import { useDecodeSystemProgramInstructions } from 'utils/hooks/instructions/useDecodeSystemProgramInstructions';
+import { useDecodeTokenRegInstructions } from 'utils/hooks/instructions/useDecodeTokenRegInstractions';
+import { usePopulateTokenInfo } from 'utils/hooks/usePopulateTokenInfo';
 
 const WrapperCard = styled(Card)`
   display: flex;
@@ -50,6 +52,13 @@ const ArrowIcon = styled(Icon)`
   transform: rotate(180deg);
 `;
 
+const InfoWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 32px;
+`;
+
 const Value = styled.div`
   color: #000000;
   font-weight: 500;
@@ -74,8 +83,6 @@ const Status = styled.div`
 `;
 
 const Details = styled.div`
-  margin-bottom: 32px;
-
   color: ${rgba('#000', 0.5)};
   font-size: 14px;
   line-height: 140%;
@@ -94,10 +101,19 @@ export const ResultWidget: FunctionComponent<Props> = (props) => {
     (state: RootState) => state.entities.transactionsNormalized[signature],
   );
 
+  const transactionAuthor = transaction?.transaction.signatures[0].publicKey.toBase58();
+  const tokenAccount: TokenAccount = useSelector(
+    (state: RootState) => state.entities.tokens.items[transactionAuthor],
+  );
+  const { mint } = tokenAccount?.parsed || { amount: 0 };
+  let { symbol } = usePopulateTokenInfo({ mint: mint?.toBase58() });
+
   const { type, fromPubkey, lamports, toPubkey } = useDecodeSystemProgramInstructions(
     transaction?.transaction.instructions,
   );
 
+  const { transfer } = useDecodeTokenRegInstructions(transaction?.transaction.instructions);
+
   useEffect(() => {
     dispatch(getConfirmedTransaction(signature));
   }, []);
@@ -106,15 +122,32 @@ export const ResultWidget: FunctionComponent<Props> = (props) => {
     dispatch(openModal(SHOW_MODAL_TRANSACTION_DETAILS, { signature }));
   };
 
+  // TODO: dirty
+  let amount = 0;
+  if (type) {
+    symbol = 'SOL';
+    amount = (lamports || 0) / web3.LAMPORTS_PER_SOL;
+  } else if (transfer) {
+    amount = (transfer.amount || 0) / web3.LAMPORTS_PER_SOL;
+  }
+
   return (
     <WrapperCard>
       <HeaderImage />
       <CircleWrapper>
         <ArrowIcon name="arrow-angle" />
       </CircleWrapper>
-      <Value>{lamports / web3.LAMPORTS_PER_SOL}</Value>
-      <Status>Processed</Status>
-      <Details onClick={handleDetailsClick}>Transaction details</Details>
+      <InfoWrapper>
+        {transaction ? (
+          <Value>
+            {amount} {symbol}
+          </Value>
+        ) : undefined}
+        <Status>{transaction ? 'Processed' : 'Processing'}</Status>
+        {transaction ? (
+          <Details onClick={handleDetailsClick}>Transaction details</Details>
+        ) : undefined}
+      </InfoWrapper>
       <Button primary big full as={Link} to={`/wallet/${fromPubkey}`}>
         Go back to wallet
       </Button>