Merge pull request #66 from CudoVentures/cudos-dev

merging for version Explorer v1.2.3.2

Dockerfile-dev

@@ -26,6 +26,7 @@ ARG NEXT_PUBLIC_CHAIN_STATUS
 ARG NODE_ENV
 ARG PORT=3000
 
+
 # Generate env file
 ENV NEXT_PUBLIC_GRAPHQL_URL ${NEXT_PUBLIC_GRAPHQL_URL}
 ENV NEXT_PUBLIC_GRAPHQL_WS ${NEXT_PUBLIC_GRAPHQL_WS}
@@ -34,6 +35,8 @@ ENV NEXT_PUBLIC_WS_CHAIN_URL ${NEXT_PUBLIC_WS_CHAIN_URL}
 ENV NEXT_PUBLIC_CHAIN_STATUS ${NEXT_PUBLIC_CHAIN_STATUS}
 ENV NODE_ENV ${NODE_ENV}
 ENV PORT ${PORT}
+ENV NODE_OPTIONS="--max-old-space-size=8192"
+
 
 #
 # Update schema

Dockerfile-prod

@@ -40,6 +40,7 @@ ENV NEXT_PUBLIC_CHAIN_STATUS ${NEXT_PUBLIC_CHAIN_STATUS}
 ENV NEXT_PUBLIC_CHAIN_TYPE ${NEXT_PUBLIC_CHAIN_TYPE}
 ENV NODE_ENV ${NODE_ENV}
 ENV PORT ${PORT}
+ENV NODE_OPTIONS="--max-old-space-size=8192"
 
 # Update schema
 # RUN npm run graphql:codegen

docker-compose-dev.yml

@@ -1,6 +1,7 @@
 version: '3.6'
 services:
   big-dipper-2:
+    container_name: explorer-v2
     build:
       context: .
       dockerfile: Dockerfile-dev

docker-compose-prod.yml

@@ -1,6 +1,7 @@
 version: '3.6'
 services:
   big-dipper-2:
+    container_name: explorer-v2
     build:
       context: .
       dockerfile: Dockerfile-prod

i18n.js

@@ -12,6 +12,7 @@ module.exports = {
     'rgx:^/validators': ['validators', 'transactions', 'accounts', 'message_labels', 'message_contents'],
     'rgx:^/accounts': ['accounts', 'transactions', 'validators', 'message_labels', 'message_contents'],
     'rgx:^/params': ['params'],
+    'rgx:^/token': ['token', 'transactions'],
   },
   loadLocaleFrom: (lang, ns) => import(`./public/locales/${lang}/${ns}.json`).then((m) => m.default),
 };

public/locales/en/accounts.json

@@ -39,5 +39,6 @@
   "label": "Label",
   "codeId": "Code Id",
   "instaBlock": "Instantiated At Block",
-  "collateralTransactions": "Collateral Transactions"
+  "collateralTransactions": "Collateral Transactions",
+  "cw20tokens": "CW20 Tokens"
 }

public/locales/en/token.json

@@ -0,0 +1,10 @@
+{
+  "overview": "CW20 Token Details",
+  "name": "Name",
+  "denom": "Denom",
+  "exponent": "Exponent",
+  "circulatingSupply": "Circulating Supply",
+  "minter": "Minter",
+  "maxSupply": "Maximum Supply",
+  "projectUrl": "Project URL"
+}

sample_configs/aura-pool/.env-big-dipper-2

@@ -0,0 +1,8 @@
+NEXT_PUBLIC_GRAPHQL_URL=http://34.68.222.131:8080/v1/graphql
+NEXT_PUBLIC_GRAPHQL_WS=wss://34.68.222.131/v1/graphql
+NODE_ENV=production
+PORT=3000
+NEXT_PUBLIC_URL=http://34.68.222.131:3000
+NEXT_PUBLIC_WS_CHAIN_URL=ws://34.121.218.76:26657/websocket
+NEXT_PUBLIC_CHAIN_STATUS=testnet
+LOGGING_DRIVER=gcplogs

sample_configs/mainnet/.env-big-dipper-2

@@ -0,0 +1,8 @@
+NEXT_PUBLIC_GRAPHQL_URL=https://explorer-gql.cudos.org/v1/graphql
+NEXT_PUBLIC_GRAPHQL_WS=wss://explorer-gql.cudos.org/v1/graphql
+NODE_ENV=production
+PORT=3000
+NEXT_PUBLIC_URL=https://explorer.cudos.org
+NEXT_PUBLIC_WS_CHAIN_URL=wss://mainnet-full-node-01.gcp.service.cudo.org:36657/websocket
+NEXT_PUBLIC_CHAIN_STATUS=mainnet
+LOGGING_DRIVER=gcplogs

sample_configs/private-testnet/.env-big-dipper-2

@@ -0,0 +1,8 @@
+NEXT_PUBLIC_GRAPHQL_URL=https://explorer-gql.private-testnet.cudos.org/v1/graphql
+NEXT_PUBLIC_GRAPHQL_WS=wss://explorer-gql.private-testnet.cudos.org/v1/graphql
+NODE_ENV=production
+PORT=3000
+NEXT_PUBLIC_URL=https://explorer.private-testnet.cudos.org/
+NEXT_PUBLIC_WS_CHAIN_URL=wss://sentry-01.hosts.private-testnet.cudos.org:36657/websocket
+NEXT_PUBLIC_CHAIN_STATUS=testnet
+LOGGING_DRIVER=gcplogs

src/components/nav/components/seach_bar/hooks.tsx

@@ -7,12 +7,14 @@ import {
   BLOCK_DETAILS,
   TRANSACTION_DETAILS,
   PROFILE_DETAILS,
+  TOKEN_DETAILS,
 } from '@utils/go_to_page';
 import {
   useRecoilCallback,
 } from 'recoil';
 import { readValidator } from '@recoil/validators';
 import { toast } from 'react-toastify';
+import { fetchCW20TokenInfo } from '@src/screens/token_details/utils';
 
 export const useSearchBar = (t) => {
   const router = useRouter();
@@ -23,7 +25,7 @@ export const useSearchBar = (t) => {
       const validatorRegex = `^(${chainConfig.prefix.validator})`;
       const userRegex = `^(${chainConfig.prefix.account})`;
       const parsedValue = value.replace(/\s+/g, '');
-
+      const tokenInfo = await fetchCW20TokenInfo(parsedValue);
       if (new RegExp(consensusRegex).test(parsedValue)) {
         const validatorAddress = await snapshot.getPromise(readValidator(parsedValue));
         if (validatorAddress) {
@@ -33,6 +35,8 @@ export const useSearchBar = (t) => {
         }
       } else if (new RegExp(validatorRegex).test(parsedValue)) {
         router.push(VALIDATOR_DETAILS(parsedValue));
+      } else if (tokenInfo.name) {
+        router.push(TOKEN_DETAILS(parsedValue));
       } else if (new RegExp(userRegex).test(parsedValue)) {
         router.push(ACCOUNT_DETAILS(parsedValue));
       } else if (/^@/.test(parsedValue)) {

src/configs/chain_config.mainnet.json

@@ -1,6 +1,6 @@
 {
   "title": "Cudos Block Explorer",
-  "network": "cudos-artemis-mainnet",
+  "network": "cudos-1",
   "icon": "https://wallet.cudos.org/img/logo-icon.cb505cad.svg?sanitize=true",
   "logo": {
     "default": "https://wallet.cudos.org/img/logo-dark.e500e625.svg?sanitize=true"

src/configs/chain_config.testnet.json

@@ -1,6 +1,6 @@
 {
   "title": "Cudos Block Explorer",
-  "network": "cudos-testnet-public-2",
+  "network": "cudos-testnet-public-3",
   "icon": "https://wallet.cudos.org/img/logo-icon.cb505cad.svg?sanitize=true",
   "logo": {
     "default": "https://wallet.cudos.org/img/logo-dark.e500e625.svg?sanitize=true"

src/configs/chain_config_temp.json

@@ -5,12 +5,12 @@
     "links": [
         {
             "name": "Testnet",
-            "chain_id": "cudos-testnet-public-2",
+            "chain_id": "cudos-testnet-public-3",
             "url": "https://explorer.testnet.cudos.org/"
         },
         {
             "name": "Mainnet",
-            "chain_id": "TBA",
+            "chain_id": "cudos-1",
             "url": "https://explorer.cudos.org/"
         }
     ]

src/graphql/cw20_tokens.ts

@@ -0,0 +1,28 @@
+export const Cw20TokenBalancesDocument = /* GraphQL */`
+query Cw20TokenBalances($address: String!) {
+  cw20token_balance(where: {address: {_eq: $address}}) {
+    balance
+    cw20token_info {
+      address
+      name
+      symbol
+      decimals
+      logo
+    }
+  }
+}
+`;
+
+export const Cw20TokenInfoDocument = /* GraphQL */`
+query Cw20TokenInfo($address: String!) {
+  cw20token_info_by_pk(address: $address) {
+    circulating_supply
+    decimals
+    max_supply
+    minter
+    name
+    project_url
+    symbol
+  }
+}
+`;

src/pages/token/[address].tsx

@@ -0,0 +1,9 @@
+import TokenDetails from '@src/screens/token_details';
+
+const TokenDetailsPage = () => {
+  return (
+    <TokenDetails />
+  );
+};
+
+export default TokenDetailsPage;

src/screens/account_details/components/cw20_token_balances/components/desktop/index.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import classnames from 'classnames';
+import useTranslation from 'next-translate/useTranslation';
+import {
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableBody,
+} from '@material-ui/core';
+import {
+  AvatarName,
+} from '@components';
+import { formatNumber } from '@utils/format_token';
+import { Cw20TokenBalance } from '@src/screens/account_details/types';
+import { getMiddleEllipsis } from '@utils/get_middle_ellipsis';
+import { TOKEN_DETAILS } from '@src/utils/go_to_page';
+import { columns } from './utils';
+
+const Desktop: React.FC<{
+  className?: string;
+  balances?: Cw20TokenBalance[]
+}> = ({
+  className,
+  balances,
+}) => {
+  const { t } = useTranslation('accounts');
+  const balancesFormatted = balances.map((b) => {
+    const balance = formatNumber(b.balance.toString(), b.exponent);
+    return ({
+      token: (
+        <AvatarName
+          name={`${b.name} (${b.denom.toUpperCase()})`}
+          address={b.tokenAddress}
+          imageUrl={b.logo}
+          href={TOKEN_DETAILS}
+        />
+      ),
+      balance: `${balance} ${b.denom.toUpperCase()}`,
+      address: getMiddleEllipsis(b.tokenAddress, {
+        beginning: 15, ending: 10,
+      }),
+    });
+  });
+
+  return (
+    <div className={classnames(className)}>
+      <Table>
+        <TableHead>
+          <TableRow>
+            {columns.map((column) => {
+              return (
+                <TableCell
+                  key={column.key}
+                  align={column.align}
+                  style={{ width: `${column.width}%` }}
+                >
+                  {t(column.key)}
+                </TableCell>
+              );
+            })}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {balancesFormatted.map((b, i) => (
+            <TableRow key={`holders-row-${i}`}>
+              {columns.map((column) => {
+                return (
+                  <TableCell
+                    key={`holders-row-${i}-${column.key}`}
+                    align={column.align}
+                    style={{ width: `${column.width}%` }}
+                  >
+                    {b[column.key]}
+                  </TableCell>
+                );
+              })}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+
+export default Desktop;

src/screens/account_details/components/cw20_token_balances/components/desktop/utils.ts

@@ -0,0 +1,20 @@
+export const columns:{
+  key: string;
+  align?: 'left' | 'center' | 'right' | 'justify' | 'inherit';
+  width: number;
+}[] = [
+  {
+    key: 'token',
+    width: 40,
+  },
+  {
+    key: 'balance',
+    width: 33,
+  },
+  {
+    key: 'address',
+    width: 33,
+    align: 'right',
+
+  },
+];

src/screens/account_details/components/cw20_token_balances/components/index.ts

@@ -0,0 +1,7 @@
+import Desktop from './desktop';
+import Mobile from './mobile';
+
+export {
+  Desktop,
+  Mobile,
+};

src/screens/account_details/components/cw20_token_balances/components/mobile/index.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import classnames from 'classnames';
+import useTranslation from 'next-translate/useTranslation';
+import {
+  Divider,
+  Typography,
+} from '@material-ui/core';
+import { AvatarName } from '@components';
+import { formatNumber } from '@utils/format_token';
+import { Cw20TokenBalance } from '@src/screens/account_details/types';
+import { getMiddleEllipsis } from '@src/utils/get_middle_ellipsis';
+import { TOKEN_DETAILS } from '@src/utils/go_to_page';
+import { useStyles } from './styles';
+
+const Mobile: React.FC<{
+  className?: string;
+  balances?: Cw20TokenBalance[]
+}> = ({
+  className,
+  balances,
+}) => {
+  const classes = useStyles();
+  const { t } = useTranslation('accounts');
+
+  return (
+    <div className={classnames(className)}>
+      {balances.map((b, i) => {
+        return (
+          <React.Fragment key={`votes-mobile-${i}`}>
+            <div className={classes.list}>
+              <div className={classes.item}>
+                <Typography variant="h4" className="label">
+                  {t('token')}
+                </Typography>
+                <AvatarName
+                  name={`${b.name} (${b.denom.toUpperCase()})`}
+                  address={b.tokenAddress}
+                  imageUrl={b.logo}
+                  href={TOKEN_DETAILS}
+                />
+              </div>
+              <div className={classes.flex}>
+                <div className={classes.item}>
+                  <Typography variant="h4" className="label">
+                    {t('balance')}
+                  </Typography>
+                  <Typography variant="body1" className="value">
+                    {formatNumber(b.balance.toString(), b.exponent)}
+                    {' '}
+                    {b.denom.toUpperCase()}
+                  </Typography>
+                </div>
+              </div>
+              <div className={classes.flex}>
+                <div className={classes.item}>
+                  <Typography variant="h4" className="label">
+                    {t('address')}
+                  </Typography>
+                  <Typography variant="body1" className="value">
+                    {getMiddleEllipsis(b.tokenAddress, {
+                      beginning: 15, ending: 10,
+                    })}
+                  </Typography>
+                </div>
+              </div>
+            </div>
+            {i !== balances.length - 1 && <Divider />}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Mobile;