Merge pull request #10 from blockcoders/feature/syncing-toast

add syncing toast

__test__/components/infoCard.test.tsx

@@ -20,6 +20,17 @@ jest.mock('../../generated', () => ({
       data: { version },
     }
   }),
+  useGetSyncQuery: jest.fn(() => {
+    return {
+      data: {
+        getSync: {
+          status: 'syncing',
+          lastSynced: 100,
+        },
+      },
+      refetch: jest.fn(),
+    }
+  }),
 }))
 
 jest.mock('binance-api-node', () => {

__test__/pages/blocks.test.tsx

@@ -26,6 +26,7 @@ jest.mock('../../generated', () => ({
       data: {
         getBlocks: getBlocks.slice(variables?.skip || 0, variables?.skip + variables?.take || 10),
       },
+      loading: true,
     }
   }),
 }))

__test__/pages/contract-transactions.test.tsx

@@ -1,10 +1,10 @@
 import '@testing-library/jest-dom'
 import { fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { contractTransactionsMocks } from '../../_mocks/contracts-mocks'
-import ContractTransactions from '../../pages/contracts/transactions/[address]'
 import { IntlProvider } from 'react-intl'
+import { contractTransactionsMocks } from '../../_mocks/contracts-mocks'
 import { messages } from '../../pages/_app'
+import ContractTransactions from '../../pages/contracts/transactions/[address]'
 
 userEvent.setup()
 
@@ -90,6 +90,14 @@ describe('Contract transactions', () => {
     expect(tbody.children.length).toBe(5)
   })
 
+  it('should show first page', async () => {
+    const prevBtn = await screen.getByTestId('prev-btn')
+    await fireEvent.click(prevBtn)
+
+    const tbody = await screen.getByTestId('tbody')
+    expect(tbody.children.length).toBe(5)
+  })
+
   it('should order by timestap', async () => {
     const timeHeader = await screen.getByText('Time')
 

__test__/pages/contracts.test.tsx

@@ -22,6 +22,7 @@ jest.mock('../../generated', () => ({
       data: {
         getContracts: getContracts.slice(variables?.skip || 0, variables?.skip + variables?.take || 10),
       },
+      loading: true,
     }
   }),
 }))

__test__/pages/transactions.test.tsx

@@ -22,6 +22,7 @@ jest.mock('../../generated', () => ({
       data: {
         getTransactions: getTransactions.slice(variables?.skip || 0, variables?.skip + variables?.take || 10),
       },
+      loading: true,
     }
   }),
 }))

components/Header/Header.tsx

@@ -5,11 +5,12 @@ import { useEffect, useState } from 'react'
 import { Col, Dropdown, DropdownButton, InputGroup, Row } from 'react-bootstrap'
 import LanguageIcon from '../../assets/img/language.svg'
 import { useFormatIntl } from '../../hooks/useFormatIntl'
+import withApollo from '../../lib/withApollo'
 import { getTitle } from '../../utils/pagetitile'
 import InfoCard from '../InfoCard/InfoCard'
 import Searchbar from '../SearchBar/SearchBar'
 
-export const Header = () => {
+export const Header = withApollo(() => {
   const { format } = useFormatIntl()
   const [title, setTitle] = useState('')
   const router = useRouter()
@@ -60,4 +61,4 @@ export const Header = () => {
       </Col>
     </>
   )
-}
+})

components/InfoCard/InfoCard.tsx

@@ -3,9 +3,11 @@ import { get } from 'lodash'
 import Image from 'next/future/image'
 import { useRouter } from 'next/router'
 import { useState, useEffect } from 'react'
+import { toast } from 'react-toastify'
 import time from '../../assets/img/bxs_time.svg'
 import coin from '../../assets/img/ph_coin-vertical-fill.svg'
 import { useGetLastBlockQuery, GetLastBlockQuery, useVersionQuery, VersionQuery } from '../../generated'
+import { useGetSyncQuery } from '../../generated/index'
 import { useFormatIntl } from '../../hooks/useFormatIntl'
 import { getTimeAgo } from '../../lib/utils'
 import withApollo from '../../lib/withApollo'
@@ -17,6 +19,9 @@ function InfoCard() {
   const { data } = useGetLastBlockQuery({ variables: { skip: 0, take: 1 } })
   const blocks = get(data, 'getBlocks', []) as GetLastBlockQuery['getBlocks']
   const { data: versionData } = useVersionQuery()
+  const { data: syncData, refetch } = useGetSyncQuery()
+  const [isSyncing, setIsSyncing] = useState(false)
+  const [syncingFromBlock, setSyncingFromBlock] = useState(0)
   const version = get(versionData, 'version', []) as VersionQuery['version']
   const token = 'DOT'
 
@@ -32,6 +37,40 @@ function InfoCard() {
         console.log(err)
       })
   }, [])
+
+  useEffect(() => {
+    if (syncData) {
+      const data = syncData.getSync
+      if (!syncingFromBlock) setSyncingFromBlock(syncData?.getSync?.lastSynced)
+
+      if (data?.status) {
+        if (data?.status?.toLocaleLowerCase().includes('syncing') && syncingFromBlock) {
+          setIsSyncing(true)
+          toast.info(`${format('syncing')} ${syncingFromBlock}...`, {
+            position: 'bottom-right',
+            isLoading: true,
+            closeButton: false,
+            draggable: false,
+            autoClose: false,
+            closeOnClick: false,
+            toastId: 'syncing',
+          })
+
+          setTimeout(() => {
+            refetch()
+          }, 60000)
+        } else if (isSyncing) {
+          toast.dismiss()
+          toast.success(format('all_block_synced'), {
+            position: 'bottom-right',
+            closeOnClick: false,
+            toastId: 'synced',
+          })
+        }
+      }
+    }
+  }, [syncData, syncingFromBlock])
+
   return (
     <>
       <div className="ink_infocard">

components/SearchBar/SearchBar.tsx

@@ -16,7 +16,6 @@ function Searchbar() {
   }
 
   const handleKeyPress = (e: any) => {
-    console.log('presiona')
     if (e.key === 'Enter') {
       handleSubmit()
     }

generated/index.tsx

@@ -96,6 +96,7 @@ export type Query = {
   getContracts: Array<Contract>;
   getEvent: Event;
   getEvents: Array<Event>;
+  getSync: Sync;
   getTransaction: Transaction;
   getTransactions: Array<Transaction>;
   getTransactionsByContract: Array<Transaction>;
@@ -167,6 +168,14 @@ export type QueryGetTransactionsByContractArgs = {
   take?: InputMaybe<Scalars['Int']>;
 };
 
+export type Sync = {
+  __typename?: 'Sync';
+  id: Scalars['Float'];
+  lastSynced: Scalars['Float'];
+  status: Scalars['String'];
+  timestamp: Scalars['String'];
+};
+
 export type Transaction = {
   __typename?: 'Transaction';
   args?: Maybe<Scalars['String']>;
@@ -305,6 +314,11 @@ export type DecodeEventMutationVariables = Exact<{
 
 export type DecodeEventMutation = { __typename?: 'Mutation', decodeEvent: string };
 
+export type GetSyncQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type GetSyncQuery = { __typename?: 'Query', getSync: { __typename?: 'Sync', lastSynced: number, status: string } };
+
 
 export const GetBlocksDocument = gql`
     query getBlocks($skip: Int!, $take: Int!, $orderByNumber: Boolean, $orderAsc: Boolean) {
@@ -935,4 +949,39 @@ export function useDecodeEventMutation(baseOptions?: Apollo.MutationHookOptions<
       }
 export type DecodeEventMutationHookResult = ReturnType<typeof useDecodeEventMutation>;
 export type DecodeEventMutationResult = Apollo.MutationResult<DecodeEventMutation>;
-export type DecodeEventMutationOptions = Apollo.BaseMutationOptions<DecodeEventMutation, DecodeEventMutationVariables>;
+export type DecodeEventMutationOptions = Apollo.BaseMutationOptions<DecodeEventMutation, DecodeEventMutationVariables>;
+export const GetSyncDocument = gql`
+    query getSync {
+  getSync {
+    lastSynced
+    status
+  }
+}
+    `;
+
+/**
+ * __useGetSyncQuery__
+ *
+ * To run a query within a React component, call `useGetSyncQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetSyncQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetSyncQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useGetSyncQuery(baseOptions?: Apollo.QueryHookOptions<GetSyncQuery, GetSyncQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetSyncQuery, GetSyncQueryVariables>(GetSyncDocument, options);
+      }
+export function useGetSyncLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetSyncQuery, GetSyncQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetSyncQuery, GetSyncQueryVariables>(GetSyncDocument, options);
+        }
+export type GetSyncQueryHookResult = ReturnType<typeof useGetSyncQuery>;
+export type GetSyncLazyQueryHookResult = ReturnType<typeof useGetSyncLazyQuery>;
+export type GetSyncQueryResult = Apollo.QueryResult<GetSyncQuery, GetSyncQueryVariables>;

graphql/queries.ts

@@ -210,3 +210,11 @@ export const DECODE_EVENT_MUTATION = gql`
     decodeEvent(contractAddress: $contractAddress, id: $id)
   }
 `
+export const GET_SYNC_QUERY = gql`
+  query getSync {
+    getSync {
+      lastSynced
+      status
+    }
+  }
+`

i18n/en.ts

@@ -97,4 +97,7 @@ export const en = {
 
   english: 'English',
   spanish: 'Spanish',
+
+  syncing: 'Syncing from block',
+  all_block_synced: 'All blocks synced',
 }

i18n/es.ts

@@ -97,4 +97,7 @@ export const es = {
 
   english: 'Inglés',
   spanish: 'Español',
+
+  syncing: 'Sincronizando desde bloque',
+  all_block_synced: 'Todos los bloques fueron sincronizados',
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ink-substrate-explorer-frontend",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Ink Explorer is an application that provides Ink contracts related information on Substrate based blockchains.",
   "author": "Blockcoders <[email protected]>",
   "license": "MIT",