Add Creditcoin EVM support, #1043

backend/packages/backend/src/consts/networks.js

@@ -31,9 +31,15 @@ const networks = Object.freeze({
   rococo: "rococo",
   stafi: "stafi",
   creditcoin: "creditcoin",
+  creditcoin_evm: "creditcoin_evm",
 });
 
-const evmNetworks = [networks.moonbeam, networks.moonriver, networks.ethereum];
+const evmNetworks = [
+  networks.moonbeam,
+  networks.moonriver,
+  networks.ethereum,
+  networks.creditcoin_evm,
+];
 
 module.exports = {
   networks,

backend/packages/backend/src/scripts/spaces/creditcoin.js

@@ -20,6 +20,17 @@ const config = {
         },
       ],
     },
+    {
+      network: networks.creditcoin_evm,
+      assets: [
+        {
+          type: "native",
+          symbol: "CTC",
+          decimals: 18,
+          votingThreshold: "1000000000000000000",
+        },
+      ],
+    },
   ],
   proposeThreshold: "1000000000000000000000",
   weightStrategy: [strategies.balanceOf, strategies.quadraticBalanceOf],

backend/packages/node-api/src/constants.js

@@ -43,6 +43,7 @@ const evmChains = Object.freeze({
   moonriver: "moonriver",
   moonbeam: "moonbeam",
   ethereum: "ethereum",
+  creditcoin_evm: "creditcoin_evm",
 });
 
 const chainBlockTime = {
@@ -74,6 +75,7 @@ const chainBlockTime = {
   [evmChains.moonriver]: twelveSecond,
   [evmChains.moonbeam]: twelveSecond,
   [evmChains.ethereum]: thirteenSecond,
+  [evmChains.creditcoin_evm]: twelveSecond,
 };
 
 const symbols = {

backend/packages/node-api/src/features/evm/getNativeBalance.js

@@ -0,0 +1,48 @@
+const { evmChains } = require("../../constants");
+const { getProviders } = require("./providers");
+
+async function queryBalanceFromOneProvider(provider, address, blockTag) {
+  try {
+    const balance = await provider.getBalance(address, blockTag);
+    return {
+      balance: balance.toString(),
+    };
+  } catch (e) {
+    return {};
+  }
+}
+
+function queryNativeBalance(network, address, blockTag) {
+  const providers = getProviders(network);
+  let promises = [];
+  for (const provider of providers) {
+    promises = [
+      ...promises,
+      queryBalanceFromOneProvider(provider, address, blockTag),
+    ];
+  }
+
+  return Promise.any(promises);
+}
+
+async function getNativeBalance(ctx) {
+  const { chain, address, blockHeight } = ctx.params;
+  if (!evmChains[chain]) {
+    ctx.throw(400, `Invalid chain: ${chain}`);
+    return;
+  }
+
+  try {
+    ctx.body = await queryNativeBalance(
+      chain,
+      address,
+      blockHeight ? parseInt(blockHeight) : "latest",
+    );
+  } catch (e) {
+    ctx.throw(500, e.message);
+  }
+}
+
+module.exports = {
+  getNativeBalance,
+};

backend/packages/node-api/src/features/evm/providers.js

@@ -20,6 +20,8 @@ const ethUrls = [
   `https://mainnet.infura.io/v3/${process.env.INFURA_KEY}`,
 ];
 
+const creditcoinEvmUrls = [`https://mainnet3.creditcoin.network`];
+
 function createProvider(url = "", network) {
   try {
     if (url.startsWith("wss")) {
@@ -34,6 +36,7 @@ function createProvider(url = "", network) {
 
 const movrChainId = 1285;
 const glmrChainId = 1284;
+const creditcoinEvmChainId = 102030;
 const movrNetwork = {
   chainId: movrChainId,
   name: evmChains.moonriver,
@@ -46,10 +49,17 @@ const ethNetwork = {
   chainId: 1,
   name: "homestead",
 };
+const creditcoinEvmNetwork = {
+  chainId: creditcoinEvmChainId,
+  name: evmChains.creditcoin_evm,
+};
 
 function initProviders() {
   const movrProviders = movrUrls.map((url) => createProvider(url, movrNetwork));
   const glmrProviders = glmrUrls.map((url) => createProvider(url, glmrNetwork));
+  const creditcoinEvmProviders = creditcoinEvmUrls.map((url) =>
+    createProvider(url, creditcoinEvmNetwork),
+  );
 
   if (!process.env.INFURA_KEY) {
     throw new Error("INFURA_KEY environment variable not set");
@@ -68,6 +78,7 @@ function initProviders() {
     [evmChains.moonriver]: movrProviders,
     [evmChains.moonbeam]: glmrProviders,
     [evmChains.ethereum]: ethProviders,
+    [evmChains.creditcoin_evm]: creditcoinEvmProviders,
   };
 }
 

backend/packages/node-api/src/features/evm/routes.js

@@ -3,6 +3,7 @@ const erc20Controller = require("./erc20.controller");
 const { getTargetHeight } = require("./height.controller");
 const { getContractMetadata } = require("./getContractMetadata");
 const stellaswapController = require("./stellaswap.controller");
+const { getNativeBalance } = require("./getNativeBalance");
 
 const router = new Router();
 
@@ -18,6 +19,8 @@ router.get(
 
 router.get("/erc20/contract/:contract/metadata", getContractMetadata);
 
+router.get("/native/address/:address/height/:blockHeight", getNativeBalance);
+
 router.get("/height/:timestamp?", getTargetHeight);
 
 module.exports = router;

backend/packages/node-api/src/routes.js

@@ -58,7 +58,7 @@ module.exports = (app) => {
   );
 
   router.use(
-    `/evm/chain/:chain(${Object.keys(evmChains).join("|")})`,
+    `/evm/chain/:chain(${Object.values(evmChains).join("|")})`,
     evmRoutes.routes(),
     evmRoutes.allowedMethods({ throw: true }),
   );

next/components/chainIcon.js

@@ -1,13 +1,15 @@
 import camalCase from "lodash.camelcase";
 import { ChainIcon as _ChainIcon, Tooltip } from "@osn/common-ui";
-import { normalizeChainName } from "frontedUtils/chain";
+import { getChainDisplayName, normalizeChainName } from "frontedUtils/chain";
 
 export function ChainIcon({ chainName, size }) {
-  const normalizedChainName = normalizeChainName(chainName);
   return (
-    <Tooltip content={normalizedChainName}>
+    <Tooltip content={getChainDisplayName(chainName)}>
       <div>
-        <_ChainIcon chainName={camalCase(normalizedChainName)} size={size} />
+        <_ChainIcon
+          chainName={camalCase(normalizeChainName(chainName))}
+          size={size}
+        />
       </div>
     </Tooltip>
   );

next/components/chainSelector.js

@@ -3,7 +3,7 @@ import styled, { css } from "styled-components";
 import { p_14_medium } from "../styles/textStyles";
 import { ChainIcon } from "components/chainIcon";
 import DropdownSelector from "@osn/common-ui/es/DropdownSelector";
-import { normalizeChainName } from "frontedUtils/chain";
+import { getChainDisplayName } from "frontedUtils/chain";
 
 const Wrapper = styled.div`
   margin-bottom: 8px;
@@ -43,7 +43,7 @@ const ChainItem = ({ header, chainName }) => {
     <ItemWrapper header={header}>
       <ChainIcon chainName={chainName} />
       <div>
-        <Text>{normalizeChainName(chainName)}</Text>
+        <Text>{getChainDisplayName(chainName)}</Text>
       </div>
     </ItemWrapper>
   );

next/components/connect/metamask/wrongNetwork.js

@@ -1,12 +1,14 @@
 import { Fragment, memo } from "react";
 import { ActionBar, StyledDescription } from "@/components/connect/styled";
 import CloseButton from "@/components/connect/CloseButton";
+import { getChainDisplayName } from "frontedUtils/chain";
 
 function WrongNetwork({ network }) {
   return (
     <Fragment>
       <StyledDescription>
-        Network not matched on Metamask. Please switch it to {network}.
+        Network not matched on Metamask. Please switch it to{" "}
+        {getChainDisplayName(network)}.
       </StyledDescription>
 
       <ActionBar>

next/components/identityOrAddr.js

@@ -61,6 +61,8 @@ export default function IdentityOrAddr({
     link = `https://moonscan.io/address/${address}`;
   } else if ("creditcoin" === network) {
     link = `https://explorer.creditcoin.org/Account/RecentExtrinsics/${address}`;
+  } else if (evm.creditcoin_evm === network) {
+    link = `https://creditcoin.blockscout.com/address/${address}`;
   }
 
   const isEvm = evmChains.includes(network);

next/components/postCreate/more.js

@@ -21,7 +21,7 @@ import { FlexBetween } from "@osn/common-ui";
 import DropdownSelector from "@osn/common-ui/es/DropdownSelector";
 import { hasSocietyVoteStrategyOnly } from "frontedUtils/strategy";
 import dayjs from "dayjs";
-import { normalizeChainName } from "frontedUtils/chain";
+import { getChainDisplayName } from "frontedUtils/chain";
 
 const Wrapper = styled.div`
   min-width: 302px;
@@ -108,6 +108,7 @@ export default function More({ onPublish, space }) {
   function getMinStartDate() {
     return dayjs().startOf("day").toDate();
   }
+
   function getMinEndDate() {
     if (!authoringStartDate || authoringStartDate < new Date()) {
       return new Date();
@@ -178,7 +179,7 @@ export default function More({ onPublish, space }) {
           <SnapshotHeightPicker space={space} />
           {space.networks?.map((network) => (
             <Snapshot className="snapshot" key={network.network}>
-              <NetworkName>{normalizeChainName(network.network)}</NetworkName>
+              <NetworkName>{getChainDisplayName(network.network)}</NetworkName>
               {snapshotHeights.find(
                 (snapshotHeight) => snapshotHeight.network === network.network,
               )?.height || <TextGrey>-</TextGrey>}

next/components/postDetail/postInfo.js

@@ -10,11 +10,7 @@ import SideSectionTitle from "@/components/sideBar/sideSectionTitle";
 import AssetList from "../assetList";
 import { getSpaceAssets } from "frontedUtils/getSpaceAssets";
 import { hasBalanceStrategy } from "frontedUtils/strategy";
-import { normalizeChainName } from "frontedUtils/chain";
-
-const Capitalize = styled.span`
-  text-transform: capitalize;
-`;
+import { getChainDisplayName } from "frontedUtils/chain";
 
 const Wrapper = styled(Panel)`
   > :not(:first-child) {
@@ -98,12 +94,9 @@ export default function PostInfo({ data, space }) {
                 return (
                   <Tooltip
                     key={networkName}
-                    content={
-                      <Capitalize>
-                        {normalizeChainName(networkName)}{" "}
-                        {height.toLocaleString()}
-                      </Capitalize>
-                    }
+                    content={`${getChainDisplayName(
+                      networkName,
+                    )} ${height.toLocaleString()}`}
                     size="fit"
                   >
                     <div>

next/frontedUtils/chain/index.js

@@ -1,3 +1,4 @@
+import startCase from "lodash.startcase";
 import { networks } from "frontedUtils/consts/chains/networks";
 
 export function normalizeChainName(chainName) {
@@ -6,3 +7,7 @@ export function normalizeChainName(chainName) {
   }
   return chainName;
 }
+
+export function getChainDisplayName(chainName) {
+  return startCase(normalizeChainName(chainName));
+}

next/frontedUtils/consts/chains/index.js

@@ -67,10 +67,17 @@ export const evm = {
   moonbeam: "moonbeam",
   moonriver: "moonriver",
   ethereum: "ethereum",
+  creditcoin_evm: "creditcoin_evm",
 };
-export const evmChains = [evm.moonbeam, evm.moonriver, evm.ethereum];
+export const evmChains = [
+  evm.moonbeam,
+  evm.moonriver,
+  evm.ethereum,
+  evm.creditcoin_evm,
+];
 export const evmChainId = Object.freeze({
   [evm.moonbeam]: 1284,
   [evm.moonriver]: 1285,
   [evm.ethereum]: 1,
+  [evm.creditcoin_evm]: 102030,
 });

next/frontedUtils/consts/chains/networks.js

@@ -31,4 +31,5 @@ export const networks = Object.freeze({
   rococo: "rococo",
   stafi: "stafi",
   creditcoin: "creditcoin",
+  creditcoinEvm: "creditcoin_evm",
 });

next/package.json

@@ -13,7 +13,7 @@
     "@osn/common": "^1.3.5",
     "@osn/common-ui": "^1.24.0",
     "@osn/constants": "^1.1.2",
-    "@osn/icons": "^1.100.0",
+    "@osn/icons": "^1.132.0",
     "@osn/polkadot-react-identicon": "^1.0.10",
     "@osn/previewer": "^1.4.4",
     "@osn/rich-text-editor": "^0.6.6",
@@ -32,6 +32,7 @@
     "lodash.isempty": "^4.4.0",
     "lodash.isnil": "^4.0.0",
     "lodash.pick": "^4.4.0",
+    "lodash.startcase": "^4.4.0",
     "lodash.uniq": "^4.5.0",
     "micromark": "^3.0.10",
     "micromark-extension-gfm": "^2.0.1",