Refactoring/zerg rush (#1140)

Co-authored-by: dimakorzhovnik <[email protected]>

Author: dasein108

codegen.ts

@@ -0,0 +1,24 @@
+import { CodegenConfig } from '@graphql-codegen/cli';
+
+const schemaUrl = 'https://index.bostrom.cybernode.ai/v1/graphql'; //process.env.NEXT_PUBLIC_GRAPHQL_HOST;
+
+const config: CodegenConfig = {
+  overwrite: true,
+  schema: schemaUrl,
+  documents: ['src/**/*.graphql'],
+  config: {
+    withHooks: true,
+    skipTypename: true,
+  },
+  generates: {
+    'src/generated/graphql.ts': {
+      plugins: [
+        'typescript',
+        'typescript-operations',
+        'typescript-react-apollo',
+      ],
+    },
+  },
+};
+
+export default config;

docker-compose.yml

@@ -9,10 +9,14 @@ services:
     environment:
       - NODE_OPTIONS=--max-old-space-size=8192
       - CHAIN_ID=bostrom
-      - CYBER_NODE_URL_API=https://rpc.bostrom.cybernode.ai
-      - CYBER_NODE_URL_WS=wss://rpc.bostrom.cybernode.ai/websocket
-      - CYBER_NODE_URL_LCD=https://lcd.bostrom.cybernode.ai
-      - CYBER_INDEX_HTTPS=https://index.bostrom.cybernode.ai/v1/graphql
-      - CYBER_INDEX_WEBSOCKET=wss://index.bostrom.cybernode.ai/v1/graphql
+      - RPC_URL=https://rpc.bostrom.cybernode.ai
+      - LCD_URL=https://lcd.bostrom.cybernode.ai
+      - WEBSOCKET_URL=wss://rpc.bostrom.cybernode.ai/websocket
+      - INDEX_HTTPS=https://index.bostrom.cybernode.ai/v1/graphql
+      - INDEX_WEBSOCKET=wss://index.bostrom.cybernode.ai/v1/graphql
       - CYBER_GATEWAY=https://gateway.bostrom.cybernode.ai
+      - BASE_DENOM=boot
+      - DENOM_LIQUID=hydrogen
+      - BECH32_PREFIX=bostrom
+
     command: npx serve -s build

package.json

@@ -21,12 +21,13 @@
     "stylelint:lint": "stylelint \"**/*.*css\"",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test": "jest --transformIgnorePatterns --verbose"
+    "test": "jest --transformIgnorePatterns --verbose",
+    "generate-graphql-types": "yarn graphql-codegen --config ./codegen.ts"
   },
   "browserslist": "> 0.5%, last 2 versions, not dead",
   "license": "ISC",
   "devDependencies": {
-    "@babel/core": "7.21.0",
+    "@babel/core": "^7.24.3",
     "@babel/eslint-parser": "^7.16.5",
     "@babel/helper-compilation-targets": "^7.21.4",
     "@babel/plugin-proposal-class-properties": "7.18.6",
@@ -36,6 +37,10 @@
     "@babel/preset-typescript": "^7.21.0",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
+    "@graphql-codegen/cli": "^5.0.2",
+    "@graphql-codegen/typescript": "^4.0.6",
+    "@graphql-codegen/typescript-operations": "^4.2.0",
+    "@graphql-codegen/typescript-react-apollo": "^4.3.0",
     "@keplr-wallet/types": "^0.11.52",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@rjsf/core": "^3.2.1",
@@ -82,6 +87,7 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-typescript": "^0.14.0",
     "file-loader": "^6.2.0",
+    "graphql-tag": "^2.12.6",
     "history": "^4.9.0",
     "html-webpack-plugin": "^5.5.0",
     "https-browserify": "^1.0.0",
@@ -139,14 +145,15 @@
     "@chainsafe/libp2p-noise": "^13.0.1",
     "@chainsafe/libp2p-yamux": "^5.0.0",
     "@confio/relayer": "0.4.0",
+    "@cosmjs/cosmwasm-stargate": "^0.30.0",
     "@cosmjs/crypto": "0.29.0",
     "@cosmjs/encoding": "0.29.0",
     "@cosmjs/launchpad": "^0.27.1",
     "@cosmjs/math": "^0.29.0",
     "@cosmjs/proto-signing": "0.29.0",
     "@cosmjs/stargate": "0.32.0",
     "@cosmjs/tendermint-rpc": "0.29.0",
-    "@cybercongress/cyber-js": "0.3.6",
+    "@cybercongress/cyber-js": "^0.3.9",
     "@cybercongress/gravity": "0.0.15",
     "@ethersproject/providers": "^5.7.2",
     "@helia/unixfs": "^1.4.2",

src/components/AmountDenom/AmountDenom.tsx

@@ -10,12 +10,12 @@ type Props = {
 };
 
 function AmountDenom({ amountValue, denom, styleValue }: Props) {
-  const { traseDenom } = useIbcDenom();
+  const { tracesDenom } = useIbcDenom();
 
   let amount = 0;
 
   if (amountValue && amountValue > 0) {
-    const [{ coinDecimals }] = traseDenom(denom);
+    const [{ coinDecimals }] = tracesDenom(denom);
     amount = convertAmount(amountValue, coinDecimals);
   }
 

src/components/BandwidthBar/index.tsx

@@ -3,18 +3,17 @@ import { Battery, Pane, Text } from '@cybercongress/gravity';
 import { Link } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { useQueryClient } from 'src/contexts/queryClient';
+import { Networks } from 'src/types/networks';
+import { routes } from 'src/routes';
+import { CHAIN_ID, BASE_DENOM } from 'src/constants/config';
 import Tooltip from '../tooltip/tooltip';
-import { CYBER } from '../../utils/config';
 import {
   coinDecimals,
   convertResources,
   formatCurrency,
   reduceBalances,
 } from '../../utils/utils';
 import { setBandwidth } from '../../redux/actions/bandwidth';
-import { useSigningClient } from 'src/contexts/signerClient';
-import { Networks } from 'src/types/networks';
-import { routes } from 'src/routes';
 
 const PREFIXES = [
   {
@@ -55,26 +54,26 @@ function ContentTooltip({ bwRemained, bwMaxValue, amounPower, countLink }) {
           {text}
           <Link
             to={
-              CYBER.CHAIN_ID === Networks.BOSTROM
+              CHAIN_ID === Networks.BOSTROM
                 ? routes.search.getLink('get BOOT')
                 : routes.teleport.path
             }
           >
-            Get {CYBER.DENOM_CYBER.toUpperCase()}
+            Get {BASE_DENOM.toUpperCase()}
           </Link>
         </Text>
       </Pane>
     </Pane>
   );
 }
 
-function BandwidthBar({ tooltipPlacement }) // bwRemained = 0,
-// bwMaxValue = 0,
-// countLink = 0,
-// amounPower,
-// ...props
+function BandwidthBar({ tooltipPlacement }) {
+  // bwRemained = 0,
+  // bwMaxValue = 0,
+  // countLink = 0,
+  // amounPower,
+  // ...props
 
-{
   const [linkPrice] = useState(4);
 
   const queryClient = useQueryClient();

src/components/ContentItem/contentItem.tsx

@@ -3,8 +3,12 @@ import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { $TsFixMe } from 'src/types/tsfix';
 import useQueueIpfsContent from 'src/hooks/useQueueIpfsContent';
-import { IpfsContentType } from 'src/utils/ipfs/ipfs';
-import { IPFSContentDetails } from 'src/services/ipfs/ipfs';
+import type {
+  IpfsContentType,
+  IPFSContentDetails,
+} from 'src/services/ipfs/types';
+import { LinksType } from 'src/containers/Search/types';
+
 import { parseArrayLikeToDetails } from 'src/services/ipfs/utils/content';
 
 import SearchItem from '../SearchItem/searchItem';
@@ -18,6 +22,7 @@ type ContentItemProps = {
   grade?: $TsFixMe;
   className?: string;
   parent?: string;
+  linkType: LinksType;
   setType?: (type: IpfsContentType) => void;
 };
 

src/components/MusicalAddress/utils.js

@@ -1,13 +1,13 @@
 /* eslint-disable no-restricted-syntax */
 import * as Tone from 'tone';
 import {
+  PATTERN_CYBER,
   PATTERN_ETH,
   PATTERN_COSMOS,
   PATTERN_OSMOS,
   PATTERN_TERRA,
   PATTERN_CYBER_VALOPER,
-} from '../../utils/config';
-import { PATTERN_CYBER } from 'src/constants/app';
+} from 'src/constants/patterns';
 
 const DICTIONARY_ABC = {
   a: { note: 'E3', height: 16, gain: 1, color: '#36D6AE' },

src/components/Row/Row.module.scss

@@ -0,0 +1,21 @@
+.container {
+  display: grid;
+  grid-template-columns: 240px 1fr;
+  align-items: center;
+  line-height: 20px;
+  font-size: 16px;
+
+  .value {
+    text-transform: none !important;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
+}
+
+
+
+.rowsContainer {
+  display: grid;
+  gap: 10px;
+}

src/components/Row/Row.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import styles from './Row.module.scss';
+
+function Row({ value, title }: { title: ReactNode; value: ReactNode }) {
+  return (
+    <div className={styles.container}>
+      <span className={styles.key}>{title}:</span>
+      <span className={styles.value}>{value}</span>
+    </div>
+  );
+}
+
+export function RowsContainer({ children }: { children: ReactNode }) {
+  return <div className={styles.rowsContainer}>{children}</div>;
+}
+
+export default Row;

src/components/SearchItem/searchItem.tsx

@@ -1,6 +1,7 @@
 import styles from './styles.module.scss';
 import Status, { StatusType } from './status';
 import Display from '../containerGradient/Display/Display';
+import { LinksType } from 'src/containers/Search/types';
 
 const gradeColorRank = (grade) => {
   let classColor = 'grey';
@@ -34,6 +35,7 @@ type Props = {
   grade?: {
     value: number;
   };
+  linkType: LinksType;
   children: React.ReactNode;
 };