Merge pull request #394 from input-output-hk/feature/show-slot-number…

…-update-footer

Feature/show slot number update footer

package.json

@@ -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": "^4.0.0-rc1",
+    "@cardano-graphql/client-ts": "^4.0.0",
     "@cypress/webpack-preprocessor": "4.1.1",
     "@graphql-codegen/cli": "1.2.0",
     "@graphql-codegen/typescript": "1.2.0",

source/constants.ts

@@ -10,7 +10,8 @@ export enum BrandType {
 
 export enum SearchType {
   EPOCH = 'epoch',
-  BLOCK = 'block',
+  BLOCK_BY_NUMBER = 'blockByNumber',
+  BLOCK_BY_SLOT_NUMBER = 'blockBySlotNumber',
 }
 
 export enum CardanoNetwork {

source/features/blocks/api/BlockOverview.graphql

@@ -7,7 +7,7 @@ fragment BlockOverview on Block {
   hash
   number
   size
-  slotInEpoch
+  slotNo
   transactions_aggregate {
     aggregate {
       count

source/features/blocks/api/transformers.ts

@@ -26,7 +26,7 @@ export const blockOverviewTransformer = (
     output: Currency.Util.lovelacesToAda(
       b.transactions_aggregate?.aggregate?.sum?.totalOutput || '0'
     ),
-    slotWithinEpoch: formatSlotWithinEpoch(b.slotInEpoch),
+    slotNo: formatSlot(b.slotNo),
     transactionsCount:
       b.transactions_aggregate?.aggregate?.count.toString() || '0',
   };
@@ -65,9 +65,9 @@ function formatCreatedBy(value: IBlockOverview['createdBy']): string {
   }
 }
 
-function formatSlotWithinEpoch(
-  value: BlockOverviewFragment['slotInEpoch']
-): IBlockOverview['slotWithinEpoch'] {
+function formatSlot(
+  value: BlockOverviewFragment['slotNo']
+): IBlockOverview['slotNo'] {
   switch (value) {
     case 0:
       return value;

source/features/blocks/specs/getLatestBlocks.spec.ts

@@ -35,7 +35,7 @@ describe('Blocks feature', () => {
       await waitForExpect(() => {
         expect(blocks.store.latestBlocks.length).toBe(10);
         expect(blocks.store.latestBlocks[0].number).toBeDefined();
-        expect(blocks.store.latestBlocks[0].slotWithinEpoch).toBeDefined();
+        expect(blocks.store.latestBlocks[0].slotNo).toBeDefined();
         expect(blocks.store.latestBlocks[4].transactionsCount).toBeDefined();
         expect(blocks.store.latestBlocks[1].number).toBeDefined();
       });

source/features/blocks/types.ts

@@ -8,7 +8,7 @@ export interface IBlockOverview {
   number: number | '-';
   output: string;
   size: number;
-  slotWithinEpoch: number | '-';
+  slotNo: number | '-';
   transactionsCount: string;
 }
 

source/features/blocks/ui/BlockList.module.scss

@@ -3,11 +3,15 @@
 
   :global {
     .epoch {
-      width: 120px;
+      width: 40px;
+    }
+
+    .slotNo {
+      width: 80px;
     }
 
     .blocksSlots {
-      width: 100px;
+      width: 80px;
     }
 
     .createdAt {

source/features/blocks/ui/BlockList.tsx

@@ -27,21 +27,35 @@ const columns = (
   return [
     {
       cellRender: (row: IBlockOverview) => {
-        const content = `${row.epoch} / ${row.slotWithinEpoch}`;
         return isNumber(row.epoch) &&
-          isNumber(row.slotWithinEpoch) &&
           !linksDisabled ? (
           <LocalizedLink href={getEpochRoute(row.epoch)}>
-            {content}
+            {row.epoch}
           </LocalizedLink>
         ) : (
-          <span>{content}</span>
+          <span>{row.epoch}</span>
         );
       },
       cellValue: (row: IBlockOverview) => row,
       cssClass: 'epoch',
-      head: 'block.epochSlotTitle',
-      key: 'epochsSlots',
+      head: 'block.epochTitle',
+      key: 'epoch',
+    },
+    {
+      cellRender: (row: IBlockOverview) => {
+        return isNumber(row.slotNo) &&
+          !linksDisabled ? (
+          <LocalizedLink href={getBlockRoute(row.id)}>
+            {row.slotNo}
+          </LocalizedLink>
+        ) : (
+          <span>{row.slotNo}</span>
+        );
+      },
+      cellValue: (row: IBlockOverview) => row,
+      cssClass: 'slotNo',
+      head: 'block.slotNo',
+      key: 'slot',
     },
     {
       cellRender: (row: IBlockOverview) => (

source/features/blocks/ui/BlockSummary.tsx

@@ -76,6 +76,12 @@ const BlockSummary = (props: BlockSummaryProps) => {
             </div>
             <div className={styles.infoValue}>{props.number}</div>
           </div>
+          <div className={styles.infoRow}>
+            <div className={styles.infoLabel}>
+              {translate('blockSummary.slot')}
+            </div>
+            <div className={styles.infoValue}>{props.slotNo}</div>
+          </div>
           <div className={styles.infoRow}>
             <div className={styles.infoLabel}>
               {translate('blockSummary.confirmations')}

source/features/epochs/api/transformers.ts

@@ -14,7 +14,7 @@ export const epochOverviewTransformer = (
     percentage:
       e.number === n.currentEpoch ? n.currentEpochPercentageComplete : 100,
     slotsCount:
-      (!!e.blocks[0].protocolVersion
+      (e.blocks[0].protocolVersion.major > 1
         ? n.shelleyEpochLength
         : n.byronSlotsPerEpoch) || 21600,
     startedAt: new Date(e.startedAt),

source/features/epochs/specs/helpers/latestEpochsExample.ts

@@ -11,7 +11,7 @@ export const latestEpochsExample = [
         number: 31070,
         output: '0',
         size: 666,
-        slotWithinEpoch: 9486,
+        slotNo: 9486,
         transactionsCount: '0',
       },
     ] as IBlockOverview[],
@@ -34,7 +34,7 @@ export const latestEpochsExample = [
         number: 31070,
         output: '0',
         size: 666,
-        slotWithinEpoch: 9486,
+        slotNo: 9486,
         transactionsCount: '0',
       },
     ] as IBlockOverview[],

source/features/epochs/ui/EpochSummary.tsx

@@ -42,9 +42,13 @@ const EpochSummary = ({ title, epoch }: IEpochSummaryProps) => {
             <div className={styles.infoLabel}>
               {translate('epochSummary.numberOfBlocks')}
             </div>
-            <div className={styles.infoValue}>
-              {epoch.blocksCount} / {epoch.slotsCount}
+            <div className={styles.infoValue}>{epoch.blocksCount}</div>
+          </div>
+          <div className={styles.infoRow}>
+            <div className={styles.infoLabel}>
+              {translate('epochSummary.numberOfSlots')}
             </div>
+            <div className={styles.infoValue}>{epoch.slotsCount}</div>
           </div>
           <div className={styles.infoRow}>
             <div className={styles.infoLabel}>

source/features/i18n/translations/de.json

@@ -15,10 +15,11 @@
     "blockTitle": "Block",
     "createdAtTitle": "Erzeugt",
     "createdByTitle": "Erzeugt von",
-    "epochSlotTitle": "Epoche / Slot",
+    "epochTitle": "Epoche",
     "outputTitle": "Output (₳)",
     "pageTitle": "Block | $t(productTitle)",
     "sizeTitle": "Größe (Bytes)",
+    "slot": "Slot",
     "summary": "Block Übersicht",
     "transactionsTitle": "Transaktionen"
   },
@@ -32,6 +33,7 @@
     "nextBlock": "Nächster Block",
     "previousBlock": "Voriger Block",
     "size": "Größe",
+    "slot": "Slot",
     "time": "Zeitpunkt",
     "transactions": "Transaktionen"
   },
@@ -62,6 +64,7 @@
     "epochSummaryTitle": "Epoche Übersicht",
     "lastBlockAt": "Letzter Block",
     "numberOfBlocks": "Anzahl an Blöcken",
+    "numberOfSlots": "Anzahl an Slots",
     "startedAt": "Gestartet",
     "totalOutput": "Output insgesamt",
     "transactions": "Transaktionen"
@@ -87,6 +90,7 @@
     "ouroborosAlgorithm": "Ouroboros Algorythmus",
     "project": "Projekt.",
     "shellyExplorer": "Shelley Explorer",
+    "submitASupportRequest": "Senden Sie eine Supportanfrage",
     "textTitle": "Cardano ist ein",
     "whyCardano": "Warum Cardano"
   },
@@ -128,7 +132,8 @@
     "notExist": "Adresse existiert nicht:",
     "notFound": "Es tut uns Leid, wir konnten keine Ergebnisse finden zu:",
     "placeholder": "Suche nach Epochen, Blöcken, Addressen und Transaktionen",
-    "suggestion_block": "Suche nach einem Block",
+    "suggestion_block_by_number": "Suchen Sie nach einem Block nach Nummer",
+    "suggestion_block_by_slot": "Suchen Sie nach einem Block nach Slot",
     "suggestion_epoch": "Suche nach einer Epoche",
     "title": "Suche"
   },

source/features/i18n/translations/en.json

@@ -15,10 +15,11 @@
     "blockTitle": "Block",
     "createdAtTitle": "Created At",
     "createdByTitle": "Created By",
-    "epochSlotTitle": "Epoch / Slot",
+    "epochTitle": "Epoch",
     "outputTitle": "Output (₳)",
     "pageTitle": "Block | $t(productTitle)",
     "sizeTitle": "Size (Bytes)",
+    "slotNo": "Slot",
     "summary": "Block Summary",
     "transactionsTitle": "Transactions"
   },
@@ -32,6 +33,7 @@
     "nextBlock": "Next block",
     "previousBlock": "Previous block",
     "size": "Size",
+    "slot": "Slot",
     "time": "Time",
     "transactions": "Transactions"
   },
@@ -62,6 +64,7 @@
     "epochSummaryTitle": "Epoch Summary",
     "lastBlockAt": "Last Block at",
     "numberOfBlocks": "# of blocks",
+    "numberOfSlots": "# of slots",
     "startedAt": "Started at",
     "totalOutput": "Total output",
     "transactions": "Transactions"
@@ -87,6 +90,7 @@
     "ouroborosAlgorithm": "Ouroboros Algorithm",
     "project": "project.",
     "shellyExplorer": "Shelley Explorer",
+    "submitASupportRequest": "Submit a Support Request",
     "textTitle": "Cardano is an",
     "whyCardano": "Why Cardano"
   },
@@ -128,7 +132,8 @@
     "notExist": "Address does not exist:",
     "notFound": "Sorry, we could not find any results matching:",
     "placeholder": "Search for epochs, blocks, addresses and transactions",
-    "suggestion_block": "Search for a block",
+    "suggestion_block_by_number": "Search for a block by number",
+    "suggestion_block_by_slot": "Search for a block by slot",
     "suggestion_epoch": "Search for an epoch",
     "title": "Search"
   },

source/features/i18n/translations/ja.json

@@ -15,10 +15,11 @@
     "blockTitle": "ブロック",
     "createdAtTitle": "生成時",
     "createdByTitle": "生成者",
-    "epochSlotTitle": "エポック/スロット",
+    "epochTitle": "エポック",
     "outputTitle": "アウトプット (₳)",
     "pageTitle": "ブロック | $t(productTitle)",
     "sizeTitle": "サイズ（バイト）",
+    "slot": "スロット",
     "summary": "ブロック概要",
     "transactionsTitle": "トランザクション"
   },
@@ -32,6 +33,7 @@
     "nextBlock": "次のブロック",
     "previousBlock": "前のブロック",
     "size": "サイズ",
+    "slot": "スロット",
     "time": "時間",
     "transactions": "トランザクション"
   },
@@ -62,6 +64,7 @@
     "epochSummaryTitle": "エポック概要",
     "lastBlockAt": "最終ブロック",
     "numberOfBlocks": "ブロック数",
+    "numberOfSlots": "スロット数",
     "startedAt": "開始時間",
     "totalOutput": "総アウトプット",
     "transactions": "トランザクション"
@@ -87,6 +90,7 @@
     "ouroborosAlgorithm": "Ouroborosアルゴリズム",
     "project": "プロジェクトです",
     "shellyExplorer": "Shelleyエクスプローラー",
+    "submitASupportRequest": "サポートリクエストを送信する",
     "textTitle": "Cardanoは",
     "whyCardano": "なぜCardanoを構築するのか"
   },
@@ -128,7 +132,8 @@
     "notExist": "アドレスが見つかりません",
     "notFound": "一致する検索結果はありません",
     "placeholder": "エポック、ブロック、アドレス、トランザクションを検索する",
-    "suggestion_block": "ブロックを検索",
+    "suggestion_block_by_number": "ブロックを番号で検索する",
+    "suggestion_block_by_slot": "ブロックをスロット番号で検索する",
     "suggestion_epoch": "エポックを検索",
     "title": "検索"
   },

source/features/network-info/api/cardanoDynamic.graphql

@@ -3,6 +3,7 @@ query cardanoDynamic {
     tip {
       number
       slotInEpoch
+      slotNo
       forgedAt
       protocolVersion
     }

source/features/network-info/store.ts

@@ -16,6 +16,7 @@ export class NetworkInfoStore extends Store {
   @observable public byronSlotsPerEpoch?: number;
   @observable public shelleyEpochLength?: number;
   @observable public slotsPerPresentEpoch: number;
+  @observable public slotNo: number;
 
   private readonly networkInfoApi: NetworkInfoApi;
   private readonly networkInfoActions: NetworkInfoActions;
@@ -81,6 +82,7 @@ export class NetworkInfoStore extends Store {
         this.currentEpoch = currentEpoch.number;
         this.lastSlotFilled = tip.slotInEpoch || 0;
         this.lastBlockTime = new Date(tip.forgedAt);
+        this.slotNo = tip.slotNo || 0;
       });
     }
   };

source/features/search/api/index.ts

@@ -5,6 +5,8 @@ import {
   SearchByIdQueryVariables,
   SearchForBlockByNumberQuery,
   SearchForBlockByNumberQueryVariables,
+  SearchForBlockBySlotNumberQuery,
+  SearchForBlockBySlotNumberQueryVariables,
   SearchForEpochByNumberQuery,
   SearchForEpochByNumberQueryVariables,
   SearchForPaymentAddressQuery,
@@ -14,6 +16,7 @@ import {
 } from '../../../typings/graphql-schema';
 import searchByIdQuery from './searchById.graphql';
 import searchForBlockByNumberQuery from './searchForBlockByNumber.graphql';
+import searchForBlockBySlotNumberQuery from './searchForBlockBySlotNumber.graphql';
 import searchForEpochByNumberQuery from './searchForEpochByNumber.graphql';
 import searchForPaymentAddressQuery from './searchForPaymentAddress.graphql';
 import searchForStakeAddressQuery from './searchForStakeAddress.graphql';
@@ -39,6 +42,11 @@ export class SearchApi {
     SearchForBlockByNumberQueryVariables
   >;
 
+  public searchForBlockBySlotNumberQuery: GraphQLRequest<
+    SearchForBlockBySlotNumberQuery,
+    SearchForBlockBySlotNumberQueryVariables
+  >;
+
   public searchForEpochByNumberQuery: GraphQLRequest<
     SearchForEpochByNumberQuery,
     SearchForEpochByNumberQueryVariables
@@ -58,6 +66,10 @@ export class SearchApi {
       client,
       searchForBlockByNumberQuery
     );
+    this.searchForBlockBySlotNumberQuery = new GraphQLRequest(
+      client,
+      searchForBlockBySlotNumberQuery
+    );
     this.searchForEpochByNumberQuery = new GraphQLRequest(
       client,
       searchForEpochByNumberQuery