Release: v1.1.1

.github/labeler.yml

@@ -9,7 +9,7 @@ workflow:
 'chore':
   - dependencies/**/*
   - public/**/*
-  - package.json
+  - '*.lock'
   - '*'
 
 'BREAKING CHANGES':

.github/release-drafter.yml

@@ -9,16 +9,18 @@ categories:
   - title: '🚀 Features'
     labels:
       - 'feat'
+      - 'feature'
       - 'enhancement'
-      - 'styles'
   - title: '🐛 Bug Fixes'
     labels:
       - 'fix'
       - 'bug'
   - title: '🧰 Maintenance'
     labels:
       - 'chore'
+      - 'styles'
       - 'styles:global'
+      - 'ui'
       - 'refactor'
       - 'workflow'
   - title: '🧺 Miscellaneous' #Everything except ABAP

.github/workflows/pull-request.yml

@@ -0,0 +1,67 @@
+name: Pull-Request
+
+on:
+  pull_request:
+    # Only following types are handled by the action, but one can default to all as well
+    # pull_request event is required only for autolabeler
+    types: [opened, reopened, synchronize]
+
+jobs:
+  danger-js:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use NodeJS 16
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+          cache: 'yarn'
+      - run: yarn install
+      - name: Run Danger JS
+        run: yarn danger ci
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN}}
+
+  # Dependency Review Action
+  #
+  # This Action will scan dependency manifest files that change as part of a Pull Reqest, surfacing known-vulnerable versions of the packages declared or updated in the PR. Once installed, if the workflow run is marked as required, PRs introducing known-vulnerable packages will be blocked from merging.
+  #
+  # Source repository: https://github.com/actions/dependency-review-action
+  # Public documentation: https://docs.github.com/en/code-security/supply-chain-security/understanding-your-software-supply-chain/about-dependency-review#dependency-review-enforcement
+  dependency-review:
+    permissions:
+      contents: read
+    runs-on: ubuntu-latest
+    steps:
+      - name: 'Checkout Repository'
+        uses: actions/checkout@v3
+      - name: 'Dependency Review'
+        uses: actions/dependency-review-action@v1
+
+  labeler:
+    needs: dependency-review
+    name: labeler
+    permissions:
+      contents: read
+      pull-requests: write
+    runs-on: ubuntu-latest
+    if: ${{github.event.pull_request.base.ref != 'main' && github.event.pull_request.head.ref != 'develop' }}
+    steps:
+      - name: 'Pull request labeler'
+        uses: actions/labeler@v4
+        with:
+          repo-token: '${{ secrets.GITHUB_TOKEN }}'
+
+  auto_labeler:
+    needs: labeler
+    name: auto-label
+    runs-on: ubuntu-latest
+    if: ${{github.event.pull_request.base.ref != 'main' && github.event.pull_request.head.ref != 'develop' }}
+    permissions:
+      contents: read
+      pull-requests: write # for release-drafter/release-drafter to add label to PR
+    steps:
+      - name: 'Pull request auto-labeler'
+        uses: release-drafter/release-drafter@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release-drafter.yml

@@ -5,31 +5,16 @@ on:
     # branches to consider in the event; optional, defaults to all
     branches:
       - main
-  # pull_request event is required only for autolabeler
-  pull_request:
-    # Only following types are handled by the action, but one can default to all as well
-    types: [opened, reopened, synchronize]
 
 permissions:
   contents: read
 
 jobs:
-  auto_labeler:
-    name: auto-label
-    runs-on: ubuntu-latest
-    if: ${{ github.ref != 'refs/heads/main' }}
-    permissions:
-      contents: write # for release-drafter/release-drafter to create a github release
-      pull-requests: write # for release-drafter/release-drafter to add label to PR
-    steps:
-      - uses: release-drafter/release-drafter@v5
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
   update_release_draft:
     name: release-drafter
     runs-on: ubuntu-latest
-    if: ${{github.ref == 'refs/heads/main' || github.ref == 'refs/heads/staging'}}
+    # check pull request from develop to main
+    if: ${{github.event.pull_request.base.ref == 'main' && github.event.pull_request.head.ref == 'develop' }}
     permissions:
       contents: write # for release-drafter/release-drafter to create a github release
       pull-requests: write # for release-drafter/release-drafter to add label to PR

.vscode/settings.json

@@ -6,5 +6,25 @@
   },
   "python.linting.pylintEnabled": false,
   "python.linting.flake8Enabled": true,
-  "python.linting.enabled": true
+  "python.linting.enabled": true,
+  "workbench.colorCustomizations": {
+    "activityBar.activeBackground": "#024369",
+    "activityBar.background": "#024369",
+    "activityBar.foreground": "#e7e7e7",
+    "activityBar.inactiveForeground": "#e7e7e799",
+    "activityBarBadge.background": "#000000",
+    "activityBarBadge.foreground": "#e7e7e7",
+    "commandCenter.border": "#e7e7e799",
+    "sash.hoverBorder": "#024369",
+    "statusBar.background": "#012337",
+    "statusBar.foreground": "#e7e7e7",
+    "statusBarItem.hoverBackground": "#024369",
+    "statusBarItem.remoteBackground": "#012337",
+    "statusBarItem.remoteForeground": "#e7e7e7",
+    "titleBar.activeBackground": "#012337",
+    "titleBar.activeForeground": "#e7e7e7",
+    "titleBar.inactiveBackground": "#01233799",
+    "titleBar.inactiveForeground": "#e7e7e799"
+  },
+  "peacock.color": "#012337"
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "nexus-explorer-next",
   "private": true,
-  "version": "1.1.0",
+  "version": "1.1.1",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -52,4 +52,4 @@
       "prettier --write --ignore-unknown"
     ]
   }
-}
+}

src/components/Header/PageHeader/Og-Bot.jsx

@@ -1,7 +1,8 @@
 import { intlNum } from 'utils/converter';
 
 export const OGBotImage = ({ contract, fishName, fishEmoji }) => {
-  const bg = `${process.env.NEXT_PUBLIC_DOMAIN_BASE_URL}/og_meta_image_bot.jpg`;
+  const bg = `${process.env.NEXT_PUBLIC_DOMAIN_BASE_URL}/nexus_water_mark.png`;
+  const faviconSvg = `${process.env.NEXT_PUBLIC_DOMAIN_BASE_URL}/favicon.svg`;
 
   return (
     <div
@@ -11,36 +12,71 @@ export const OGBotImage = ({ contract, fishName, fishEmoji }) => {
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
-        backgroundColor: 'hsla(202, 97%, 52%, 1)',
+        justifyContent: 'space-around',
+        backgroundColor: 'hsla(202, 87%, 25%,1)',
         backgroundImage: `url(${bg})`,
+        backgroundSize: '1600 630',
+        backgroundRepeat: 'no-repeat',
         fontSize: 36,
         color: 'white',
+        padding: '1rem',
       }}>
-      <h2
+      <div style={{ display: 'flex' }}>
+        <div
+          style={{
+            // marginLeft: 0,
+            padding: '5px 5px',
+            borderRadius: 16,
+            // backgroundColor: '#fff',
+            display: 'flex',
+          }}>
+          <img
+            style={{
+              height: '6rem',
+              width: '6rem',
+            }}
+            src={faviconSvg}
+          />
+        </div>
+        <div
+          style={{
+            marginLeft: 600,
+            padding: 20,
+            borderRadius: 16,
+            backgroundColor: '#012235',
+          }}>
+          {contract.OP}
+        </div>
+      </div>
+      <div
         style={{
-          marginTop: 72,
-          marginLeft: 500,
-          padding: 10,
-          borderRadius: 16,
-          backgroundColor: '#012235',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          background: '#fff',
+          padding: '1rem 5rem',
+          borderRadius: 999,
+          color: '#39f',
         }}>
-        {contract.OP}
-      </h2>
-      {contract.from && <h2>From - {contract.from}</h2>}
-      <span style={{ fontSize: 48 }}>{fishName}</span>
-      <span style={{ fontSize: 96 }}>{fishEmoji}</span>
-      <h1 style={{ fontSize: 72 }}>
-        {intlNum(contract.amount)} {contract.ticker}
-      </h1>
+        <div style={{ fontSize: 128 }}>{fishEmoji}</div>
+        <div style={{ fontSize: 32 }}>{fishName}</div>
+        <div style={{ display: 'flex', fontSize: 64 }}>
+          {intlNum(contract.amount)} {contract.ticker}
+        </div>
+      </div>
+
       <div
         style={{
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
-          color: '#aaa',
+          color: '#fff',
+          background: '#012235',
+          borderRadius: 10,
+          padding: 10,
           fontSize: 24,
-          marginTop: 16,
         }}>
+        {contract.from && <span>From - {contract.from}</span>}
         {contract.proof && <span>Proof - {contract.proof}</span>}
         {contract.to && <span>To - {contract.to}</span>}
       </div>

src/components/Panel1/Panel1.jsx

@@ -2,7 +2,6 @@ import { NE_SmallCard } from '../common/NE_Card/NE_SmallCard';
 import styles from 'components/Panel1/Panel1.module.scss';
 import ChartsApex from 'components/common/NE_Chart/ChartApexArea';
 import { useState, useEffect } from 'react';
-import Shimmer from 'components/common/NE_Shimmer';
 import { GrStackOverflow } from 'react-icons/gr';
 import { BsPersonCheckFill } from 'react-icons/bs';
 import { AiOutlineStock } from 'react-icons/ai';
@@ -33,21 +32,6 @@ function Panel1(props) {
     }
   }, [metricsRQ.data, infoRQ.data]);
 
-  //  * majority of data is coming from miningRQ , hence we use loader state of metrics for this panel
-  if (miningRQ.isLoading)
-    return (
-      <article className={styles.container}>
-        <section className={styles.cardsContainer}>
-          {[...'four'].map((_, idx) => (
-            <Shimmer key={idx} minWidth="14.5rem" minHeight="6.25rem" />
-          ))}
-        </section>
-        <section className={styles.chartContainer}>
-          <Shimmer height="12.4rem" />
-        </section>
-      </article>
-    );
-
   if (metricsRQ.isError)
     return (
       <p>
@@ -69,25 +53,29 @@ function Panel1(props) {
             router.push(`/scan/${state.blocks}`);
           }}
           icon={<GrStackOverflow />}
+          isLoading={miningRQ.isLoading || isNaN(state.blocks)}
         />
         <NE_SmallCard
           label="Total Supply"
           value={new Intl.NumberFormat('en-US').format(state.totalSupply)}
           unit="NXS"
           icon={<FaCoins />}
+          isLoading={miningRQ.isLoading || isNaN(state.blocks)}
         />
         <NE_SmallCard
           label="Signature Chains"
           sublabel="Users"
           value={new Intl.NumberFormat().format(state.sigChains)}
           icon={<BsPersonCheckFill />}
+          isLoading={miningRQ.isLoading || isNaN(state.blocks)}
         />
         <NE_SmallCard
           label="Inflation Rate"
           sublabel="Annual"
           value={state.inflationRate}
           unit="%"
           icon={<AiOutlineStock />}
+          isLoading={miningRQ.isLoading || isNaN(state.blocks)}
         />
       </section>
       <section title="chart container" className={styles.chartContainer}>