Merge pull request #3297 from Emurgo/feat/YOEXT-799/cip95-UI

add cip 95 UI

packages/yoroi-extension/app/connector/components/signin/CardanoSignTxPage.js

@@ -395,6 +395,7 @@ class SignTxPage extends Component<Props, State> {
                 id="walletPassword"
               />
             }
+            cip95Info={txData.cip95Info}
           />
         </Box>
       );

packages/yoroi-extension/app/connector/components/signin/cardano/SignTx.js

@@ -1,6 +1,6 @@
 // @flow
 import type { Node, ComponentType } from 'react';
-import type { ConnectorIntl } from '../../../types';
+import type { ConnectorIntl, Cip95Info } from '../../../types';
 import type { SummaryAssetsData } from '../CardanoSignTxPage';
 import BigNumber from 'bignumber.js';
 import { injectIntl } from 'react-intl';
@@ -37,6 +37,7 @@ type Props = {|
   passwordFormField: Node,
   hwWalletError: ?LocalizableError,
   walletType: string,
+  cip95Info: Array<Cip95Info>,
 |};
 
 function CardanoSignTx({
@@ -46,13 +47,18 @@ function CardanoSignTx({
   passwordFormField,
   hwWalletError,
   walletType,
+  cip95Info,
 }: Props & ConnectorIntl): Node {
   const { total, isOnlyTxFee, sent, received } = txAssetsData;
   const isSendingNativeToken = Number(total.amount) < 0;
   const isReceivingNativeToken = Number(total.amount) > 0;
 
   return (
     <Box>
+      <Box>
+        <RenderCip95Info cip95Info={cip95Info} />
+        <br />
+      </Box>
       <CardanoSignTxSummary
         renderExplorerHashLink={renderExplorerHashLink}
         txAssetsData={txAssetsData}
@@ -186,3 +192,182 @@ const Panel = ({ children }): Node => (
     {children}
   </Box>
 );
+
+const RenderCip95Info = ({
+  cip95Info
+}): Node => {
+  function renderCoin(c) {
+    try {
+      return new BigNumber(c).div(1_000_000).toString();
+    } catch (e) {
+      console.error(e);
+      return String(c);
+    }
+  }
+  return [
+    ...cip95Info.filter(c => c.type === 'StakeRegistrationCert').map((c, i) => {
+      if (c.type !== 'StakeRegistrationCert') {
+        throw new Error('unexpected type');
+      }
+      return (
+        <div key={`StakeRegistrationCert${i}`}>
+          <span>Register stake credential</span>
+          {c.coin && (
+            <span>with {renderCoin(c.coin)} ADA deposit</span>
+          )}
+        </div>
+      );
+    }),
+    ...cip95Info.filter(c => c.type === 'StakeDeregistrationCert').map((c, i) => {
+      if (c.type !== 'StakeDeregistrationCert') {
+        throw new Error('unexpected type');
+      }
+      return (
+        <div key={`StakeDeregistrationCert${i}`}>
+          <span>Deregister stake credential</span>
+          {c.coin && (
+            <span>and return {renderCoin(c.coin)} ADA deposit</span>
+          )}
+        </div>
+      );
+    }),
+    ...cip95Info.filter(c => c.type === 'StakeDelegationCert').map((c, i) => {
+      if (c.type !== 'StakeDelegationCert') {
+        throw new Error('unexpected type');
+      }
+      return (
+        <div key={`StakeDelegationCert${i}`}>Stake delegation to the pool: {c.poolKeyHash}</div>
+      );
+    }),
+    ...cip95Info.filter(c => c.type === 'VoteDelegCert').map((c, i) => {
+      if (c.type !== 'VoteDelegCert') {
+        throw new Error('unexpected type');
+      }
+      return (
+        <div key={`VoteDelegCert${i}`}>Vote delegation to DRep: {c.drep}</div>
+      );
+    }),
+    ...cip95Info.filter(c => c.type === 'StakeVoteDelegCert').map((c, i) => {
+      if (c.type !== 'StakeVoteDelegCert') {
+        throw new Error('unexpected type');
+      }
+      return (
+        <div key={`StakeVoteDelegCert${i}`}>
+          <div>Delegate to the stake pool ${c.poolKeyHash}</div>
+          <div>and DRep ${c.drep}</div>
+        </div>
+      );
+    }),
+    ...cip95Info.filter(c => c.type === 'StakeRegDelegCert').map((c, i) => {
+      if (c.type !== 'StakeRegDelegCert') {
+        throw new Error('unexpected type');
+      }
+      return (
+        <div key={`StakeRegDelegCert${i}`}>
+          <div>Register your stake credential with deposit of {renderCoin(c.coin)} ADA and delegate to stake pool</div>
+          <div>${c.poolKeyHash}</div>
+        </div>
+      );
+    }),
+    ...cip95Info.filter(c => c.type === 'VoteRegDelegCert').map((c, i) => {
+      if (c.type !== 'VoteRegDelegCert') {
+        throw new Error('unexpected type');
+      }
+      return (
+        <div key={`VoteRegDelegCert${i}`}>
+          <div>Register your stake credential with deposit of {renderCoin(c.coin)} ADA and delegate to the DRep</div>
+          <div>${c.drep}</div>
+        </div>
+      );
+    }),
+    ...cip95Info.filter(c => c.type === 'StakeVoteRegDelegCert').map((c, i) => {
+      if (c.type !== 'StakeVoteRegDelegCert') {
+        throw new Error('unexpected type');
+      }
+      return (
+        <div key={`StakeVoteRegDelegCert${i}`}>
+          <div>Register your stake credential with deposit of {renderCoin(c.coin)} ADA and delegate to the DRep</div>
+          <div>${c.drep} and the stake pool</div>
+          <div>${c.poolKeyHash}</div>
+        </div>
+      );
+    }),
+    ...cip95Info.filter(c => c.type === 'RegDrepCert').map((c, i) => {
+      if (c.type !== 'RegDrepCert') {
+        throw new Error('unexpected type');
+      }
+      return (
+        <div key={`RegDrepCert${i}`}>
+          <div>Register DRep credential with deposit {renderCoin(c.coin)} ADA</div>
+          {c.anchor && (
+            <>
+              <div>URL: {c.anchor.url}</div>
+              <div>Hash: {c.anchor.dataHash}</div>
+            </>
+          )}
+        </div>
+      );
+    }),
+    ...cip95Info.filter(c => c.type === 'UnregDrepCert').map((c, i) => {
+      if (c.type !== 'UnregDrepCert') {
+        throw new Error('unexpected type');
+      }
+      return (
+        <div key={`UnregDrepCert${i}`}>
+          Unregister DRep credential and return {renderCoin(c.coin)} ADA deposit
+        </div>
+      );
+    }),
+    ...cip95Info.filter(c => c.type === 'UpdateDrepCert').map((c, i) => {
+      if (c.type !== 'UpdateDrepCert') {
+        throw new Error('unexpected type');
+      }
+      return (
+        <div key={`UpdateDrepCert${i}`}>
+          <div>Update DRep credential</div>
+          {c.anchor && (
+            <>
+              <div>URL: {c.anchor.url}</div>
+              <div>Hash: {c.anchor.dataHash}</div>
+            </>
+          )}
+        </div>
+      );
+    }),
+    ...cip95Info.filter(c => c.type === 'TreasuryValue').map((c, i) => {
+      if (c.type !== 'TreasuryValue') {
+        throw new Error('unexpected type');
+      }
+      return (
+        <div key={`TreasuryValue${i}`}>Treasury value: {renderCoin(c.coin)} ADA</div>
+      );
+    }),
+    ...cip95Info.filter(c => c.type === 'TreasuryDonation').map((c, i) => {
+      if (c.type !== 'TreasuryDonation') {
+        throw new Error('unexpected type');
+      }
+      return (
+        <div key={`TreasuryDonation${i}`}>Treasury donation: {renderCoin(c.positiveCoin)} ADA</div>
+      );
+    }),
+    ...cip95Info.filter(c => c.type === 'VotingProcedure').map((c, i) => {
+      if (c.type !== 'VotingProcedure') {
+        throw new Error('unexpected type');
+      }
+      return (
+        <div key={`VotingProcedure${i}`}>
+          <div>Voter: {c.voterHash}</div>
+          <div>Governance action transaction: {c.govActionTxId}</div>
+          <div>Governance action index: {c.govActionIndex}</div>
+          <div>Vote: {['no', 'yes', 'abstain'][c.vote]}</div>
+          {c.anchor && (
+            <div>
+              <div>URL: {c.anchor.url}</div>
+              <div>Hash: {c.anchor.dataHash}</div>
+            </div>
+          )}
+        </div>
+      );
+    }),
+ ];
+}