Conflux Scan

Blockchain Explorer for Conflux Network.

Source code of Conflux Scan

environment

node >= 18.18.2
npm >= 9.8.1

install

yarn install

development

# espace-mainnet: REACT_APP_EVM_MAINNET=true
yarn start:evm

# espace-testnet: REACT_APP_EVM_TESTNET=true
yarn start:evm-testnet

# espace-devnet: REACT_APP_EVM_DEVNET=true
yarn start:evm:devnet

build

yarn build

After building, the config will be identified through the domain name, and if necessary, you can also specify environment variables to fix the use of a certain configuration.

specify config

Note: Please ensure that the deployed domain name is not matched, or disable the domain name matching logic in the src/env/env-constants.ts

yarn build REACT_APP_EVM_TESTNET=true

config

the config file is in src/env/espace/xxx.ts & src/env/espace/base.ts

// src/env/espace/xxx.ts
export const ENV_NETWORK_ID = 1030;
export const ENV_NETWORK_TYPE = NETWORK_TYPES.EVM_MAINNET;
export const ENV_API_HOST =
  API_HOST_MAP.openAPIHost ||
  (IS_STAGE
    ? `https://evmapi-stage.confluxscan${DOMAIN}`
    : `https://evmapi.confluxscan${DOMAIN}`);
export const ENV_CORE_API_HOST =
  API_HOST_MAP.secondaryOpenAPIHost ||
  (IS_STAGE
    ? `https://api-stage.confluxscan${DOMAIN}`
    : `https://api.confluxscan${DOMAIN}`);
export const ENV_CORE_SCAN_HOST =
  API_HOST_MAP.secondaryBackendAPIHost ||
  (IS_STAGE
    ? `https://www-stage.confluxscan${DOMAIN}`
    : `https://www.confluxscan${DOMAIN}`);
export const ENV_RPC_SERVER =
  API_HOST_MAP.rpcHost || 'https://evm-cfxbridge.confluxrpc.com';
export const ENV_WALLET_CONFIG = {
  chainId: ENV_NETWORK_ID,
  chainName: 'Conflux eSpace',
  rpcUrls: ['https://evm.confluxrpc.com'],
  blockExplorerUrls: ['https://evm.confluxscan.io/'],
  nativeCurrency: {
    name: 'Conflux',
    symbol: 'CFX',
    decimals: 18,
  },
};
export const ENV_LOGO = logo;
// if you want to change i18n, you can override the default i18n config by export ENV_LOCALES_EN & ENV_LOCALES_CN
export const ENV_LOCALES_EN = {};
export const ENV_LOCALES_CN = {};

// src/env/espace/base.ts
const baseColor = '#17B38A';
export const ENV_THEME = {
  primary: baseColor,
  antdPrimaryButtonBg: '#7789D3',
  buttonBg: 'rgba(0, 84, 254, 0.8)',
  outlineColor: '#7789D3',
  shadowColor: 'rgba(30, 61, 228, 0.2)',
  searchButtonBg: '#AFE9D2',
  searchButtonHoverBg: baseColor,
  gasPriceLineBg: '#F0F4F3',
  footerBg: '#05343F',
  footerHighLightColor: '#AFE9D2',
  linkColor: '#1e3de4',
  linkHoverColor: '#0f23bd',
  chartColors: [
    '#7cb5ec',
    '#434348',
    '#f7a35c',
    '#2b908f',
    '#91e8e1',
    '#90ed7d',
    '#8085e9',
    '#f15c80',
    '#e4d354',
    '#f45b5b',
  ] as const,
  mixedChartColors: ['#7cb5ec', '#90ed7d', '#434348'] as const,
  pieChartColors: [
    '#7cb5ec',
    '#434348',
    '#f7a35c',
    '#2b908f',
    '#91e8e1',
    '#90ed7d',
    '#8085e9',
    '#f15c80',
    '#e4d354',
    '#f45b5b',
  ] as const,
  chartTitleColor: '#7789D3',
  chartDetailLinkColor: '#1e3de4',
};
export const ENV_ICONS = {
  imgArrow,
};

add chain

Note: only support evm network

1. You can copy the src/env/espace folder, name it the chain you plan to add, and modify its configuration.

   // src/env/demo/mainnet.ts
   export const ENV_NETWORK_ID = 11111111;
   export const ENV_NETWORK_TYPE = NETWORK_TYPES.DEMO_MAINNET;
   export const ENV_API_HOST =
     API_HOST_MAP.openAPIHost ||
     (IS_STAGE
       ? `https://demoapi-stage.confluxscan${DOMAIN}`
       : `https://demoapi.confluxscan${DOMAIN}`);
   export const ENV_CORE_API_HOST =
     API_HOST_MAP.secondaryOpenAPIHost ||
     (IS_STAGE
       ? `https://api-stage.confluxscan${DOMAIN}`
       : `https://api.confluxscan${DOMAIN}`);
   export const ENV_CORE_SCAN_HOST =
     API_HOST_MAP.secondaryBackendAPIHost ||
     (IS_STAGE
       ? `https://www-stage.confluxscan${DOMAIN}`
       : `https://www.confluxscan${DOMAIN}`);
   export const ENV_RPC_SERVER =
     API_HOST_MAP.rpcHost || 'https://demo-cfxbridge.confluxrpc.com';
   export const ENV_WALLET_CONFIG = {
     chainId: ENV_NETWORK_ID,
     chainName: 'Conflux Demo Space',
     rpcUrls: ['https://demo.confluxrpc.com'],
     blockExplorerUrls: ['https://demo.confluxscan.io/'],
     nativeCurrency: {
       name: 'Conflux Demo',
       symbol: 'CDS',
       decimals: 18,
     },
   };
   export const ENV_LOGO = logo;
   export const ENV_LOCALES_EN = {};
   export const ENV_LOCALES_CN = {};
   
   // src/env/demo/base.ts
   const baseColor = '#FFFFFF';
   export const ENV_THEME = {
     primary: baseColor,
     antdPrimaryButtonBg: '#7789D3',
     buttonBg: 'rgba(0, 84, 254, 0.8)',
     outlineColor: '#7789D3',
     shadowColor: 'rgba(30, 61, 228, 0.2)',
     searchButtonBg: '#AFE9D2',
     searchButtonHoverBg: baseColor,
     gasPriceLineBg: '#F0F4F3',
     footerBg: '#05343F',
     footerHighLightColor: '#AFE9D2',
     linkColor: '#1e3de4',
     linkHoverColor: '#0f23bd',
     chartColors: [
       '#7cb5ec',
       '#434348',
       '#f7a35c',
       '#2b908f',
       '#91e8e1',
       '#90ed7d',
       '#8085e9',
       '#f15c80',
       '#e4d354',
       '#f45b5b',
     ] as const,
     mixedChartColors: ['#7cb5ec', '#90ed7d', '#434348'] as const,
     pieChartColors: [
       '#7cb5ec',
       '#434348',
       '#f7a35c',
       '#2b908f',
       '#91e8e1',
       '#90ed7d',
       '#8085e9',
       '#f15c80',
       '#e4d354',
       '#f45b5b',
     ] as const,
     chartTitleColor: '#7789D3',
     chartDetailLinkColor: '#1e3de4',
   };
   export const ENV_ICONS = {
     imgArrow,
   };

2. add environment variables in package.json's scripts for development

   "scripts": {
     "start:demo": "REACT_APP_DEMO_MAINNET=true yarn start:base",
   },

3. use the chain config in the src/env/index.ts file

   const ENV_CONFIG = (() => {
     export const IS_DEMO_MAINNET =
       process.env.REACT_APP_DEMO_MAINNET === 'true' ||
       /^demo[.-]/.test(window.location.hostname);
     if (IS_DEMO_MAINNET) {
       return DEMO_MAINNET_CONFIG;
     }
     // ...
     return DEFAULT_NETWORK_CONFIG;
   })();

4. set network option in src/utils/constants.ts

   export const NETWORK_OPTIONS = lodash.compact([
     // demo
     {
       name: 'Demo Mainnet',
       id: 11111111,
       url: `//demo.confluxscan${DOMAIN}`,
     },
     {
       name: 'Demo Testnet',
       id: 11111112,
       url: IS_STAGE
         ? '//testnet-stage.demoscan.net'
         : `//demo-testnet.confluxscan${DOMAIN}`,
     },
     IS_DEVNET && {
       name: 'Demo Devnet',
       id: 11111113,
       url: `//demo-devnet.confluxscan${DOMAIN}`,
     },
   ]);

5. setup proxy in src/setupProxy.js for development

   const configs = {
     demo_mainnet_url: 'https://demo.confluxscan.net/',
     demo_testnet_url: 'https://demo-testnet.confluxscan.io/',
     demo_devnet_url: 'https://demo-devnet.confluxscan.net/',
   };
   let url = configs.demo_mainnet_url;
   if (process.env.REACT_APP_DEMO_TESTNET === 'true') {
     url = configs.demo_testnet_url;
   } else if (process.env.REACT_APP_DEMO_DEVNET === 'true') {
     url = configs.demo_devnet_url;
   }

6. start development

   yarn start:demo

Run with Docker

1. nginx Modify the value of proxy_pass in docker/nginx.conf to your Conflux eSpace backend URL.

2. config.example

Modify the config.example file with your needed.

What can I do?

Conflux Scan is still in its early stages compared to Etherscan. So there's a lot features and improvements waiting there. You can find bugs, request new features, send PRs to improve the code and docs. Don't forget to check out the Conflux Bounty to earn reward while improving scan.

Contributing

Please make sure to read the Contributing Guide before making a pull request.

License

MIT