Merge branch 'chore/stake-pool-components-with-graphql' of github.com…

…:input-output-hk/cardano-explorer-app into chore/stake-pool-components-with-graphql

CHANGELOG.md

@@ -1,9 +1,23 @@
 Changelog
 =========
 
+## 1.2.0
+
+### Compatible with:
+
+- [`cardano-graphql`: `2.2.0`](https://github.com/input-output-hk/cardano-graphql/releases/tag/2.2.0)
+
+### Features
+- [show deposits and reclaims when present in transaction](https://github.com/input-output-hk/cardano-explorer-app/pull/361)
+- [add withdrawals to TransactionInfo](https://github.com/input-output-hk/cardano-explorer-app/pull/363)
+- [resolve stake address searches based on withdrawals](https://github.com/input-output-hk/cardano-explorer-app/pull/363)
+- [use stake pool hash over slot leader reference](https://github.com/input-output-hk/cardano-explorer-app/pull/364)
+### Chores
+- [use new combined cardano-graphql schema from client package, removing local build step](https://github.com/input-output-hk/cardano-explorer-app/pull/362)
+
 ## 1.1.0
 ### Features
-- [Split slots & blocks into separate columns](https://github.com/input-output-hk/cardano-explorer-app/pull/338)
+- [Split slots & blocks into separate columns](https://github.com/input-output-hk/cardano-explorer-app/pull/347)
 - [Add package.json version to footer](https://github.com/input-output-hk/cardano-explorer-app/pull/348)
 ### Chores
 - [Dynamically calc Byron epochs length](https://github.com/input-output-hk/cardano-explorer-app/pull/334)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cardano-explorer-app",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Cardano Explorer App",
   "author": "Daedalus Team @ Input Output HK",
   "license": "Apache-2.0",
@@ -72,7 +72,7 @@
     "@babel/plugin-transform-react-display-name": "7.8.3",
     "@babel/plugin-transform-react-jsx-self": "7.9.0",
     "@babel/plugin-transform-react-jsx-source": "7.9.0",
-    "@cardano-graphql/client-ts": "2.2.0-beta",
+    "@cardano-graphql/client-ts": "2.2.0",
     "@cypress/webpack-preprocessor": "4.1.1",
     "@graphql-codegen/cli": "1.2.0",
     "@graphql-codegen/typescript": "1.2.0",

source/features/address/api/transformers.ts

@@ -1,15 +1,36 @@
 import { Currency } from 'cardano-js';
-import { SearchForAddressQuery } from '../../../../generated/typings/graphql-schema';
-import { IAddressSummary } from '../types';
+import {
+  SearchForPaymentAddressQuery,
+  SearchForStakeAddressQuery,
+} from '../../../../generated/typings/graphql-schema';
+import { IPaymentAddressSummary, IStakeAddressSummary } from '../types';
 
-export const addressDetailTransformer = (
+export const paymentAddressDetailTransformer = (
   address: string,
-  s: SearchForAddressQuery
-): IAddressSummary => ({
-  address,
-  finalBalance: Currency.Util.lovelacesToAda(
-    s.utxos_aggregate?.aggregate?.sum?.value || '0'
-  ),
-  transactionsCount:
-    s.transactions_aggregate?.aggregate?.count.toString() || '0',
-});
+  s: SearchForPaymentAddressQuery
+): IPaymentAddressSummary => {
+  return {
+    address,
+    finalBalance: Currency.Util.lovelacesToAda(
+      s.utxos_aggregate?.aggregate?.sum?.value || '0'
+    ),
+    transactionsCount:
+      s.transactions_aggregate?.aggregate?.count.toString() || '0'
+  }
+};
+
+export const stakeAddressDetailTransformer = (
+  address: string,
+  s: SearchForStakeAddressQuery
+): IStakeAddressSummary => {
+  return {
+    address,
+    totalWithdrawals:
+      s.withdrawals_aggregate?.aggregate?.count.toString() || '0',
+    totalWithdrawn: Currency.Util.lovelacesToAda(
+      s.withdrawals_aggregate?.aggregate?.sum?.amount || '0'
+    ),
+    transactionsCount:
+      s.transactions_aggregate?.aggregate?.count.toString() || '0'
+  }
+};

source/features/address/types.ts

@@ -1,5 +1,13 @@
 export interface IAddressSummary {
   address: string;
-  finalBalance: string;
   transactionsCount: string;
 }
+
+export interface IPaymentAddressSummary extends IAddressSummary {
+  finalBalance: string;
+}
+
+export interface IStakeAddressSummary extends IAddressSummary {
+  totalWithdrawals: string;
+  totalWithdrawn: string;
+}

source/features/address/ui/AddressSummary.tsx

@@ -6,12 +6,30 @@ import styles from './AddressSummary.module.scss';
 
 export interface IAddressSummaryProps {
   address: string;
-  finalBalance: string;
   title: string;
   transactionsCount: string;
 }
 
-const AddressSummary = (props: IAddressSummaryProps) => {
+export interface IPaymentAddressSummaryProps extends IAddressSummaryProps {
+  finalBalance: string;
+}
+
+export interface IStakeAddressSummaryProps extends IAddressSummaryProps {
+  totalWithdrawn: string;
+  totalWithdrawals: string;
+}
+
+type AddressSummaryProps = IPaymentAddressSummaryProps | IStakeAddressSummaryProps
+
+function isPaymentAddress (props: AddressSummaryProps): props is IPaymentAddressSummaryProps {
+  return (props as IPaymentAddressSummaryProps).finalBalance !== undefined;
+}
+
+function isStakeAddress (props: AddressSummaryProps): props is IStakeAddressSummaryProps {
+  return (props as IStakeAddressSummaryProps).totalWithdrawn !== undefined;
+}
+
+const AddressSummary = (props: AddressSummaryProps) => {
   const { translate } = useI18nFeature().store;
   return (
     <div className={styles.addressSummaryContainer}>
@@ -32,12 +50,30 @@ const AddressSummary = (props: IAddressSummaryProps) => {
             </div>
             <div className={styles.infoValue}>{props.transactionsCount}</div>
           </div>
-          <div className={styles.infoRow}>
-            <div className={styles.infoLabel}>
-              {translate('address.summaryBalanceLabel')}
+          {isPaymentAddress(props) && (
+            <div className={styles.infoRow}>
+              <div className={styles.infoLabel}>
+                {translate('address.summaryBalanceLabel')}
+              </div>
+              <div className={styles.infoValue}>{props.finalBalance} ADA</div>
             </div>
-            <div className={styles.infoValue}>{props.finalBalance} ADA</div>
-          </div>
+          )}
+          {isStakeAddress(props) && (
+            <>
+              <div className={styles.infoRow}>
+                <div className={styles.infoLabel}>
+                  {translate('withdrawals')}
+                </div>
+                <div className={styles.infoValue}>{props.totalWithdrawals}</div>
+              </div>
+              <div className={styles.infoRow}>
+                <div className={styles.infoLabel}>
+                  {translate('address.totalWithdrawn')}
+                </div>
+                <div className={styles.infoValue}>{props.totalWithdrawn} ADA</div>
+              </div>
+            </>
+          )}
         </div>
         <div className={styles.qrcode}>
           <QRCode

source/features/blocks/api/BlockOverview.graphql

@@ -2,6 +2,9 @@ fragment BlockOverview on Block {
   forgedAt
   slotLeader {
     description
+    stakePool {
+      hash
+    }
   }
   epochNo,
   hash

source/features/blocks/api/transformers.ts

@@ -16,10 +16,13 @@ export const blockOverviewTransformer = (
   } else {
     epoch = b.epochNo;
   }
+  const createdBy = b.slotLeader.stakePool?.hash !== undefined ?
+    shortenCreatedBy(b.slotLeader.stakePool.hash) :
+    formatSlotLeaderDescription(b.slotLeader.description)
   return {
     ...b,
     createdAt: b.forgedAt,
-    createdBy: formatCreatedBy(b.slotLeader.description),
+    createdBy,
     epoch,
     id: b.hash,
     number: b.number || '-',
@@ -50,7 +53,11 @@ export const blockDetailsTransformer = (
     .map(transactionDetailsTransformer),
 });
 
-function formatCreatedBy(value: IBlockOverview['createdBy']): string {
+function shortenCreatedBy (createdBy: string) {
+  return createdBy.substring(0, 7)
+}
+
+function formatSlotLeaderDescription (value: IBlockOverview['createdBy']): string {
   switch (value) {
     case 'Genesis slot leader':
       return 'Genesis';
@@ -61,7 +68,7 @@ function formatCreatedBy(value: IBlockOverview['createdBy']): string {
       if (!Array.isArray(selection)) {
         return '';
       }
-      return selection[1].substring(0, 7);
+      return shortenCreatedBy(selection[1]);
   }
 }
 

source/features/i18n/translations/de.json

@@ -4,7 +4,8 @@
     "pageTitle": "$t(address.addressLabel) | $t(productTitle)",
     "summaryAddressLabel": "$t(address.addressLabel)",
     "summaryBalanceLabel": "Insgesamt",
-    "summaryTransactionsLabel": "Transaktionen"
+    "summaryTransactionsLabel": "Transaktionen",
+    "totalWithdrawn": "Insgesamt Ausbezahlt"
   },
   "block": {
     "blocks": "Blöcke",
@@ -152,6 +153,8 @@
   "transaction": {
     "block": "Block",
     "confirmations": "Konfirmationen",
+    "deposit": "Kaution",
+    "depositReclaim": "Kautionsrückforderung",
     "epoch": "Epoche",
     "fee": "Transaktionsgebühr",
     "from": "Input-Adressen",
@@ -165,5 +168,6 @@
     "totalOutput": "Output Insgesamt",
     "transactionLabel": "Transaktion",
     "transactionsLabel": "Transaktionen"
-  }
+  },
+  "withdrawals": "Abhebungen"
 }

source/features/i18n/translations/en.json

@@ -4,7 +4,8 @@
     "pageTitle": "Address | $t(productTitle)",
     "summaryAddressLabel": "Address",
     "summaryBalanceLabel": "Final Balance",
-    "summaryTransactionsLabel": "Transactions"
+    "summaryTransactionsLabel": "Transactions",
+    "totalWithdrawn": "Total Withdrawn"
   },
   "block": {
     "blocks": "Blocks",
@@ -153,6 +154,8 @@
   "transaction": {
     "block": "Block",
     "confirmations": "Confirmations",
+    "deposit": "Deposit",
+    "depositReclaim": "Deposit Reclaim",
     "epoch": "Epoch",
     "fee": "Transaction Fee",
     "from": "From addresses",
@@ -166,5 +169,6 @@
     "totalOutput": "Total Output",
     "transactionLabel": "Transaction",
     "transactionsLabel": "Transactions"
-  }
+  },
+  "withdrawals": "Withdrawals"
 }

source/features/i18n/translations/ja.json

@@ -4,7 +4,8 @@
     "pageTitle": "アドレス | $t(productTitle)",
     "summaryAddressLabel": "アドレス",
     "summaryBalanceLabel": "最終残高",
-    "summaryTransactionsLabel": "トランザクション"
+    "summaryTransactionsLabel": "トランザクション",
+    "totalWithdrawn": "全額引き出し"
   },
   "block": {
     "blocks": "ブロック",
@@ -152,6 +153,8 @@
   "transaction": {
     "block": "ブロック",
     "confirmations": "確認",
+    "deposit": "デポジット",
+    "depositReclaim": "デポジットの返還",
     "epoch": "エポック",
     "fee": "トランザクション手数料",
     "from": "送信元",
@@ -165,5 +168,6 @@
     "totalOutput": "総アウトプット",
     "transactionLabel": "トランザクション",
     "transactionsLabel": "トランザクション"
-  }
+  },
+  "withdrawals": "引き出し"
 }

source/features/search/api/index.ts

@@ -3,22 +3,30 @@ import { GraphQLRequest } from '../../../lib/graphql/GraphQLRequest';
 import {
   SearchByIdQuery,
   SearchByIdQueryVariables,
-  SearchForAddressQuery,
-  SearchForAddressQueryVariables,
   SearchForBlockByNumberQuery,
   SearchForBlockByNumberQueryVariables,
   SearchForEpochByNumberQuery,
   SearchForEpochByNumberQueryVariables,
+  SearchForPaymentAddressQuery,
+  SearchForPaymentAddressQueryVariables,
+  SearchForStakeAddressQuery,
+  SearchForStakeAddressQueryVariables
 } from '../../../typings/graphql-schema';
 import searchByIdQuery from './searchById.graphql';
-import searchForAddressQuery from './searchForAddress.graphql';
 import searchForBlockByNumberQuery from './searchForBlockByNumber.graphql';
 import searchForEpochByNumberQuery from './searchForEpochByNumber.graphql';
+import searchForPaymentAddressQuery from './searchForPaymentAddress.graphql';
+import searchForStakeAddressQuery from './searchForStakeAddress.graphql';
 
 export class SearchApi {
-  public searchForAddressQuery: GraphQLRequest<
-    SearchForAddressQuery,
-    SearchForAddressQueryVariables
+  public searchForPaymentAddressQuery: GraphQLRequest<
+    SearchForPaymentAddressQuery,
+    SearchForPaymentAddressQueryVariables
+  >;
+
+  public searchForStakeAddressQuery: GraphQLRequest<
+    SearchForStakeAddressQuery,
+    SearchForStakeAddressQueryVariables
   >;
 
   public searchByIdQuery: GraphQLRequest<
@@ -37,9 +45,13 @@ export class SearchApi {
   >;
 
   constructor(client: GraphQLClient) {
-    this.searchForAddressQuery = new GraphQLRequest(
+    this.searchForPaymentAddressQuery = new GraphQLRequest(
+      client,
+      searchForPaymentAddressQuery
+    );
+    this.searchForStakeAddressQuery = new GraphQLRequest(
       client,
-      searchForAddressQuery
+      searchForStakeAddressQuery
     );
     this.searchByIdQuery = new GraphQLRequest(client, searchByIdQuery);
     this.searchForBlockByNumberQuery = new GraphQLRequest(

source/features/search/api/searchForAddress.graphql → source/features/search/api/searchForPaymentAddress.graphql

@@ -1,4 +1,4 @@
-query searchForAddress(
+query searchForPaymentAddress(
   $address: String!
 ) {
     utxos_aggregate (