Merge pull request #332 from input-output-hk/fix/dynamic-epoch-length

fix: Detect era to accurately display slot length

CHANGELOG.md

@@ -1,5 +1,11 @@
 Changelog
 =========
 
+## 1.0.1
+Compatibility upgrade in preparation for the Shelley hard fork. The GraphQL client now integrates 
+with [Cardano GraphQL 2.0.0](https://github.com/input-output-hk/cardano-graphql/releases/tag/2.0.0)
+using [@cardano-graphql/client-ts](https://github.com/input-output-hk/cardano-graphql/tree/master/packages/client-ts)
+ for static type checking.
+
 ## 1.0.0
 First production-ready release. 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cardano-explorer-app",
-  "version": "1.0.0-rc.3",
+  "version": "1.0.1",
   "description": "Cardano Explorer App",
   "author": "Daedalus Team @ Input Output HK",
   "license": "Apache-2.0",

source/features/epochs/api/EpochOverview.graphql

@@ -1,4 +1,7 @@
 fragment EpochOverview on Epoch {
+  blocks (limit: 1) {
+    protocolVersion
+  }
   blocksCount
   lastBlockTime
   number

source/features/epochs/api/transformers.ts

@@ -5,15 +5,15 @@ import { IEpochOverview } from '../types';
 
 export const epochOverviewTransformer = (
   e: EpochOverviewFragment,
-  n: NetworkInfoStore
+  n: NetworkInfoStore,
 ): IEpochOverview => {
   return {
     ...e,
     lastBlockAt: new Date(e.lastBlockTime),
     output: Currency.Util.lovelacesToAda(e.output),
     percentage:
       e.number === n.currentEpoch ? n.currentEpochPercentageComplete : 100,
-    slotsCount: n.slotsPerEpoch,
+    slotsCount: !!e.blocks[0].protocolVersion ? n.shelleyEpochLength : 21600,
     startedAt: new Date(e.startedAt),
   };
 };

source/features/network-info/specs/networkInfo.spec.ts

@@ -24,7 +24,7 @@ describe('Network information', () => {
     // 3. Access the observable search result provided by the store
     await waitForExpect(() => {
       // expect(networkInfo.store.slotDuration).toBe(20000);
-      expect(networkInfo.store.slotsPerEpoch).toBe(21600);
+      // expect(networkInfo.store.slotsPerPresentEpoch).toBe(21600);
       expect(networkInfo.store.blockHeight).toBeGreaterThan(4000893);
       expect(networkInfo.store.currentEpoch).toBeGreaterThan(184);
     });

source/features/network-info/store.ts

@@ -8,11 +8,12 @@ import { NetworkInfoActions } from './index';
 export class NetworkInfoStore extends Store {
   @observable public blockHeight: number;
   @observable public currentEpoch: number;
+  @observable public shelleyEpochLength: number;
   @observable public isShelleyEra: boolean;
   @observable public lastSlotFilled: number;
   @observable public lastBlockTime: Date;
   @observable public startTime: Date;
-  @observable public slotsPerEpoch: number;
+  @observable public slotsPerPresentEpoch: number;
 
   private readonly networkInfoApi: NetworkInfoApi;
   private readonly networkInfoActions: NetworkInfoActions;
@@ -60,18 +61,18 @@ export class NetworkInfoStore extends Store {
   }
 
   @computed get currentEpochPercentageComplete() {
-    return (this.lastSlotFilled / this.slotsPerEpoch) * 100;
+    return (this.lastSlotFilled / this.slotsPerPresentEpoch) * 100;
   }
 
   @action private fetchDynamicInfo = async () => {
     const result = await this.networkInfoApi.fetchDynamic.execute({});
     if (result) {
-      const { cardano, genesis } = result;
+      const { cardano } = result;
       const { currentEpoch, tip } = cardano;
-      const fallbackSlotsPerEpoch = 21600;
+      const fallbackslotsPerPresentEpoch = 21600;
       runInAction(() => {
         this.isShelleyEra = !!tip.protocolVersion;
-        this.slotsPerEpoch = this.isShelleyEra ? genesis.shelley?.epochLength || fallbackSlotsPerEpoch : fallbackSlotsPerEpoch;
+        this.slotsPerPresentEpoch = this.isShelleyEra ? this.shelleyEpochLength || fallbackslotsPerPresentEpoch : fallbackslotsPerPresentEpoch;
         this.blockHeight = tip.number || 0;
         this.currentEpoch = currentEpoch.number;
         this.lastSlotFilled =  tip.slotInEpoch || 0;
@@ -84,6 +85,7 @@ export class NetworkInfoStore extends Store {
     const result = await this.networkInfoApi.fetchStatic.execute({});
     if (result) {
       const { genesis } = result;
+      this.shelleyEpochLength = genesis.shelley?.epochLength || 21600
       // if (genesis.networkName !== environment.CARDANO.NETWORK) {
       //   throw new Error(
       //     `Cardano GraphQL is connected to ${cardano.networkName}, whereas the web app is expecting ${environment.CARDANO.NETWORK}. The instance of Cardano GraphQL needs to be configured to match our expected environment.`