Feat/kadena implementation

.env

@@ -0,0 +1,57 @@
+CHAIN_ID=1790
+CHAINWEB_CHAIN_ID=20
+SUBNETWORK=Chain${CHAIN_ID}
+NEXT_PUBLIC_NETWORK_ID=${CHAIN_ID}
+NEXT_PUBLIC_NETWORK_NAME="Chainweb EVM"
+BLOCKSCOUT_DB_NAME=blockscout_${CHAIN_ID}
+STATS_DB_NAME=stats_${CHAIN_ID}
+EXPLORER_MAIN_URL=chain-${CHAINWEB_CHAIN_ID}.evm.kadena.internal
+CHAIN_PUBLIC_URL=chain-${CHAINWEB_CHAIN_ID}.evm.kadena.internal
+BLOCKSCOUT_BACKEND_URL=http://chain-${CHAINWEB_CHAIN_ID}.evm.kadena.internal
+PROXY_UI_PORT=8008
+PROXY_STATS_PORT=8080
+PROXY_VISUALIZER_PORT=8081
+NEXT_PUBLIC_APP_PORT=${PROXY_UI_PORT}
+NEXT_PUBLIC_API_PORT=8000
+NEXT_PUBLIC_STATS_API_HOST=${BLOCKSCOUT_BACKEND_URL}:${PROXY_STATS_PORT}
+NEXT_PUBLIC_VISUALIZE_API_HOST=http://${EXPLORER_MAIN_URL}:${PROXY_VISUALIZER_PORT}
+NEXT_PUBLIC_API_HOST=${CHAIN_PUBLIC_URL}
+NEXT_PUBLIC_APP_HOST=chain-${CHAINWEB_CHAIN_ID}.evm.kadena.internal
+BLOCKSCOUT_DB_URL=postgresql://blockscout:ceWb1MeLBEeOIfk65gU8EjF8@db:5432/${BLOCKSCOUT_DB_NAME}
+JSONRPC_HTTP=http://chain-${CHAINWEB_CHAIN_ID}.evm.kadena.internal:1848/chainweb/0.0/evm-development/${CHAINWEB_CHAIN_ID}/evm/rpc/
+JSONRPC_WS_URL=ws://chain-${CHAINWEB_CHAIN_ID}.evm.kadena.internal:1848/chainweb/0.0/evm-development/${CHAINWEB_CHAIN_ID}/evm/rpc/
+ETHEREUM_JSONRPC_HTTP_URL=${JSONRPC_HTTP}
+ETHEREUM_JSONRPC_WS_URL=${JSONRPC_WS_URL}
+ETHEREUM_JSONRPC_TRACE_URL=${JSONRPC_HTTP}
+USER_OPS_INDEXER__INDEXER__RPC_URL=${JSONRPC_WS_URL}
+NEXT_PUBLIC_API_PROTOCOL=http
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+NEXT_PUBLIC_NETWORK_SHORT_NAME=KdaEvmDevnet
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Kadena
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=KDA
+NEXT_PUBLIC_NETWORK_CURRENCY_WEI_NAME=stu
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=mining
+NEXT_PUBLIC_IS_TESTNET=true
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_HOMEPAGE_CHARTS=["daily_txs"]
+# NEXT_PUBLIC_HOMEPAGE_STATS=["total_blocks","average_block_time","total_txs","wallet_addresses","gas_tracker","btc_locked"]
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_AD_BANNER_PROVIDER=none
+NEXT_PUBLIC_PROMOTE_BLOCKSCOUT_IN_TITLE=false
+NEXT_PUBLIC_AD_TEXT_PROVIDER=none
+NEXT_PUBLIC_NETWORK_LOGO=https://www.kadena.io/_next/static/media/logo_sm.76a6235e.svg
+NEXT_PUBLIC_NETWORK_ICON=https://www.kadena.io/_next/static/media/logo_sm.76a6235e.svg
+NEXT_PUBLIC_APP_NAME=Chainweb EVM Explorer
+NEXT_PUBLIC_APP_SHORT_NAME=EVM Explorer
+NEXT_PUBLIC_APP_VERSION=0.1.0
+
+NEXT_PUBLIC_FEATURED_BASE_NETWORK=mainnet
+# [{"title":"Mainnet","id":"mainnet","url":"http://chain-%s.evm.kadena.internal:8000/","isActive":true,"icon":"https://www.kadena.io/favicon.ico"},{"title":"Devnet","id":"devnet","url":"http://chain-%s.evm.kadena.internal:8000/","isActive":true,"icon":"https://www.kadena.io/favicon.ico"},{"title":"Testnet","id":"testnet","url":"http://chain-%s.evm.kadena.internal:8000/","isActive":false,"icon":"https://www.kadena.io/favicon.ico"}]
+NEXT_PUBLIC_FEATURED_NETWORKS=/assets/configs/networks.json
+# [{"title":"Chain 20","url":"http://chain-20.evm.kadena.internal:8000/","group":"mainnet","icon":"https://www.kadena.io/favicon.ico"},{"title":"Chain 21","url":"http://chain-21.evm-devnet.kadena.internal:8000/","group":"devnet","icon":"https://www.kadena.io/favicon.ico"},{"title":"Chain 22","url":"http://chain-22.evm-mainnet.kadena.internal:8000/","group":"mainnet","icon":"https://www.kadena.io/favicon.ico"},{"title":"Chain 23","url":"http://chain-23.evm.kadena.internal:8000/","group":"mainnet","icon":"https://www.kadena.io/favicon.ico"},{"title":"Chain 24","url":"http://chain-24.evm-testnet.kadena.internal:8000/","group":"testnet","icon":"https://www.kadena.io/favicon.ico"}]
+NEXT_PUBLIC_FEATURED_CHAINS=/assets/configs/chains.json
+
+NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=123456
+NEXT_PUBLIC_NETWORK_RPC_URL=https://evm-testnet.chainweb.com/chainweb/0.0/evm-testnet/${CHAINWEB_CHAIN_ID}/evm/rpc/

.gitignore

@@ -61,4 +61,7 @@ yarn-error.log*
 
 # build outputs
 /tools/preset-sync/index.js
-/toolkit/package/dist
+/toolkit/package/dist
+
+toolkit/theme/example
+designid.config.js

configs/app/app.ts

@@ -14,6 +14,9 @@ const isPw = getEnvValue('NEXT_PUBLIC_APP_INSTANCE') === 'pw';
 const spriteHash = getEnvValue('NEXT_PUBLIC_ICON_SPRITE_HASH');
 
 const app = Object.freeze({
+  name: getEnvValue('NEXT_PUBLIC_APP_NAME') || 'Chainweb EVM Explorer',
+  shortName: getEnvValue('NEXT_PUBLIC_APP_SHORT_NAME') || 'EVM Explorer',
+  version: getEnvValue('NEXT_PUBLIC_APP_VERSION') || '0.0.1',
   isDev,
   isPw,
   protocol: appSchema,

configs/app/index.ts

@@ -3,11 +3,13 @@ import app from './app';
 import chain from './chain';
 import * as features from './features';
 import meta from './meta';
+import network from './network';
 import services from './services';
 import UI from './ui';
 
 const config = Object.freeze({
   app,
+  network,
   chain,
   apis,
   UI,

configs/app/network.ts

@@ -0,0 +1,9 @@
+import { getEnvValue } from './utils';
+
+const name = getEnvValue('NEXT_PUBLIC_KADENA_NETWORK_NAME') ?? 'devnet';
+
+const network = Object.freeze({
+  name,
+});
+
+export default network;

configs/app/ui.ts

@@ -65,7 +65,10 @@ const UI = Object.freeze({
     hiddenLinks,
     highlightedRoutes,
     otherLinks: parseEnvJson<Array<NavItemExternal>>(getEnvValue('NEXT_PUBLIC_OTHER_LINKS')) || [],
-    featuredNetworks: getExternalAssetFilePath('NEXT_PUBLIC_FEATURED_NETWORKS'),
+    baseNetwork: getEnvValue('NEXT_PUBLIC_FEATURED_BASE_NETWORK') || 'mainnet',
+    baseChain: getEnvValue('CHAINWEB_CHAIN_ID') || 20,
+    featuredNetworks: getExternalAssetFilePath('NEXT_PUBLIC_FEATURED_NETWORKS') ?? '/assets/configs/networks.json',
+    featuredChains: getExternalAssetFilePath('NEXT_PUBLIC_FEATURED_CHAINS') ?? '/assets/configs/chains.json',
     layout: (getEnvValue('NEXT_PUBLIC_NAVIGATION_LAYOUT') || 'vertical') as NavigationLayout,
   },
   footer: {

deploy/scripts/download_assets.sh

@@ -20,6 +20,7 @@ ASSETS_ENVS=(
     "NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL"
     "NEXT_PUBLIC_MARKETPLACE_GRAPH_LINKS_URL"
     "NEXT_PUBLIC_FEATURED_NETWORKS"
+    "NEXT_PUBLIC_FEATURED_CHAINS"
     "NEXT_PUBLIC_FOOTER_LINKS"
     "NEXT_PUBLIC_NETWORK_LOGO"
     "NEXT_PUBLIC_NETWORK_LOGO_DARK"

deploy/tools/envs-validator/index.ts

@@ -37,6 +37,7 @@ async function validateEnvs(appEnvs: Record<string, string>) {
     // replace ENVs with external JSON files content
     const envsWithJsonConfig = [
       'NEXT_PUBLIC_FEATURED_NETWORKS',
+      'NEXT_PUBLIC_FEATURED_CHAINS',
       'NEXT_PUBLIC_MARKETPLACE_CONFIG_URL',
       'NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL',
       'NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL',

deploy/tools/envs-validator/schema.ts

@@ -32,7 +32,7 @@ import { SUPPORTED_WALLETS } from '../../../types/client/wallets';
 import type { CustomLink, CustomLinksGroup } from '../../../types/footerLinks';
 import { CHAIN_INDICATOR_IDS, HOME_STATS_WIDGET_IDS } from '../../../types/homepage';
 import type { ChainIndicatorId, HeroBannerButtonState, HeroBannerConfig, HomeStatsWidgetId } from '../../../types/homepage';
-import { type NetworkVerificationTypeEnvs, type NetworkExplorer, type FeaturedNetwork, NETWORK_GROUPS } from '../../../types/networks';
+import { type NetworkVerificationTypeEnvs, type NetworkExplorer, type FeaturedNetwork, NETWORK_GROUPS, FeaturedChain } from '../../../types/networks';
 import { COLOR_THEME_IDS } from '../../../types/settings';
 import type { FontFamily } from '../../../types/ui';
 import type { AddressFormat, AddressViewId } from '../../../types/views/address';
@@ -552,6 +552,17 @@ const featuredNetworkSchema: yup.ObjectSchema<FeaturedNetwork> = yup
     invertIconInDarkMode: yup.boolean(),
   });
 
+const featuredChainsSchema: yup.ObjectSchema<FeaturedChain> = yup
+  .object()
+  .shape({
+    title: yup.string().required(),
+    url: yup.string().test(urlTest).required(),
+    group: yup.string().oneOf(NETWORK_GROUPS).required(),
+    icon: yup.string().test(urlTest),
+    isActive: yup.boolean(),
+    invertIconInDarkMode: yup.boolean(),
+  });
+
 const navItemExternalSchema: yup.ObjectSchema<NavItemExternal> = yup
   .object({
     text: yup.string().required(),
@@ -815,6 +826,10 @@ const schema = yup
       .array()
       .json()
       .of(featuredNetworkSchema),
+    NEXT_PUBLIC_FEATURED_CHAINS: yup
+      .array()
+      .json()
+      .of(featuredChainsSchema),
     NEXT_PUBLIC_OTHER_LINKS: yup
       .array()
       .transform(replaceQuotes)

designid.config.ts

@@ -0,0 +1,86 @@
+import type { TConfigFile } from '@designid/tokens';
+
+const $fonts = [ 100, 400, 600, 800, 900 ].reduce((acc, weight) => ([
+  ...(acc ?? []),
+  {
+    family: '"Inter", sans-serif',
+    style: 'Normal',
+    faceStyle: 'normal',
+    weight,
+    linkHref: `https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,${ weight }&display=swap`,
+    format: 'woff2',
+  },
+  {
+    family: '"Inter", sans-serif',
+    style: 'Italic',
+    faceStyle: 'italic',
+    weight,
+    linkHref: `https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@1,14..32,${ weight }&display=swap`,
+    format: 'woff2',
+  },
+  {
+    family: '"Kode Mono", monospace',
+    style: 'Normal',
+    faceStyle: 'normal',
+    weight,
+    linkHref: `https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,${ weight }&family=Kode+Mono:wght@400..700&display=swap`,
+    format: 'woff2',
+  },
+]), [] as TConfigFile['$fonts']);
+
+const config: TConfigFile = {
+  $name: 'Kadena Design System Tokens',
+  $version: '0.0.1',
+  $paths: {
+    baseDir: './toolkit/theme/design-system',
+    distDir: './dist',
+    buildDir: './build',
+    tokensDir: './tokens',
+    assets: {
+      icons: {
+        sourceDir: '../../../icons',
+      },
+      fonts: {
+        sourceDir: './assets/fonts',
+      },
+    },
+  },
+  $modes: {
+
+    'default': 'light',
+    dark: 'dark',
+  },
+  $fonts,
+  $metaData: {
+    tokenNamespace: 'kda',
+    colorspace: 'hex',
+    fontNamespace: 'font',
+    tokens: {
+      css: {
+        mediaQuery: {
+          match: '.',
+          separateThemeFiles: false,
+        },
+        hooks: {
+          shortenName: {
+            enabled: true,
+            prefix: [
+              {
+                find: 'kda-foundation-',
+                replace: 'kda-',
+              },
+            ],
+            suffix: [
+              {
+                find: '-default',
+                replace: '',
+              },
+            ],
+          },
+        },
+      },
+    },
+  },
+};
+
+export default config;

eslint.config.mjs

@@ -67,6 +67,8 @@ export default tseslint.config(
     'public/',
     '.git/',
     'next.config.js',
+    './toolkit/theme/design-system/dist',
+    './toolkit/theme/design-system/build',
   ] },
 
   { languageOptions: { globals: { ...globals.browser, ...globals.node } } },

lib/date/dayjs.ts

@@ -9,10 +9,10 @@ import weekOfYear from 'dayjs/plugin/weekOfYear';
 
 import { nbsp } from 'toolkit/utils/htmlEntities';
 
-const relativeTimeConfig = {
+export const relativeTimeConfig = {
   thresholds: [
     { l: 's', r: 1 },
-    { l: 'ss', r: 59, d: 'second' },
+    { l: 'ss', r: 59, d: 'secondasdfasdf' },
     { l: 'm', r: 1 },
     { l: 'mm', r: 59, d: 'minute' },
     { l: 'h', r: 1 },
@@ -42,7 +42,7 @@ dayjs.updateLocale('en', {
   },
   relativeTime: {
     s: '1s',
-    ss: '%ds',
+    ss: '%d seconds',
     future: 'in %s',
     past: '%s ago',
     m: '1m',