Feat/autz experiment: DO NOT MERGE

codegen.ts

@@ -0,0 +1,23 @@
+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,
+  },
+  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,14 @@
     "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",
+    "generate-lcd-types": "npx swagger-typescript-api -p https://lcd.bostrom.cybernode.ai/swagger/swagger.yaml -o ./src/generated -n lcd.ts --axios --modular "
   },
   "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 +38,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 +88,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",
@@ -122,6 +129,7 @@
     "stylelint-config-standard": "^33.0.0",
     "stylelint-config-standard-scss": "^9.0.0",
     "stylelint-order": "^6.0.3",
+    "swagger-typescript-api": "^13.0.3",
     "swr": "^1.0.1",
     "terser-webpack-plugin": "4.2.3",
     "ts-migrate": "^0.1.35",
@@ -176,6 +184,7 @@
     "bignumber.js": "^9.0.0",
     "blockstore-core": "^4.3.4",
     "blockstore-idb": "^1.1.4",
+    "buffer": "^6.0.3",
     "cjs-to-es6": "^2.0.1",
     "classnames": "^2.3.1",
     "comlink": "^4.4.1",

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/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/TableTxs/ActionTx.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+function ActionTx() {
+  return (
+    <div>
+
+    </div>
+  )
+}
+
+export default ActionTx

src/components/TableTxs/TableTxs.tsx

@@ -0,0 +1,99 @@
+import InfiniteScroll from 'react-infinite-scroll-component';
+import { MessagesByAddressQuery } from 'src/generated/graphql';
+import { useMemo } from 'react';
+import statusTrueImg from 'src/image/ionicons_svg_ios-checkmark-circle.svg';
+import statusFalseImg from 'src/image/ionicons_svg_ios-close-circle.svg';
+import { getNowUtcTime, timeSince, trimString } from 'src/utils/utils';
+import { Link } from 'react-router-dom';
+import { routes } from 'src/routes';
+import Display from '../containerGradient/Display/Display';
+import Table from '../Table/Table';
+import { Dots } from '../ui/Dots';
+import TextTable from '../text/textTable';
+import MsgType from '../msgType/msgType';
+
+type Props = {
+  hasMore: boolean;
+  fetchMoreData: () => void;
+  data: MessagesByAddressQuery | undefined;
+  accountUser: string;
+};
+
+enum ColumnsTable {
+  status = 'status',
+  type = 'type',
+  timestamp = 'timestamp',
+  tx = 'tx',
+  action = 'action',
+}
+
+function TableTxs({ hasMore, fetchMoreData, data, accountUser }: Props) {
+  const tableData = useMemo(() => {
+    return data?.messages_by_address.map((item) => {
+      let typeTx = item.type;
+      if (
+        typeTx.includes('MsgSend') &&
+        item?.value?.to_address === accountUser
+      ) {
+        typeTx = 'Receive';
+      }
+      const timeAgoInMS =
+        getNowUtcTime() - Date.parse(item.transaction.block.timestamp);
+
+      return {
+        [ColumnsTable.status]: (
+          <TextTable>
+            <img
+              style={{ width: '20px', height: '20px', marginRight: '5px' }}
+              src={item.transaction.success ? statusTrueImg : statusFalseImg}
+              alt="status"
+            />
+          </TextTable>
+        ),
+        [ColumnsTable.type]: (
+          <div style={{ maxWidth: '100px' }}>
+            <MsgType type={typeTx} />
+          </div>
+        ),
+        [ColumnsTable.timestamp]: (
+          <TextTable>{timeSince(timeAgoInMS)} ago</TextTable>
+        ),
+        [ColumnsTable.tx]: (
+          <TextTable>
+            <Link to={routes.txExplorer.getLink(item.transaction_hash)}>
+              {trimString(item.transaction_hash, 6, 6)}
+            </Link>
+          </TextTable>
+        ),
+        // [ColumnsTable.action]: (),
+      };
+    });
+  }, []);
+
+  return (
+    <Display noPaddingX>
+      <InfiniteScroll
+        dataLength={(data?.messages_by_address || []).length}
+        next={fetchMoreData}
+        hasMore={hasMore}
+        loader={
+          <p>
+            Loading <Dots />
+          </p>
+        }
+        style={{ display: 'grid', gap: '15px' }}
+      >
+        <Table
+          data={tableData}
+          columns={Object.values(ColumnsTable).map((item) => ({
+            header: item,
+            accessorKey: item,
+            cell: (info) => info.getValue(),
+          }))}
+        />
+      </InfiniteScroll>
+    </Display>
+  );
+}
+
+export default TableTxs;

src/components/TokenChange/TokenChange.tsx

@@ -1,8 +1,8 @@
-import { CYBER } from 'src/utils/config';
 import { formatNumber } from 'src/utils/utils';
 import cx from 'classnames';
 import styles from './TokenChange.module.scss';
 import FormatNumberTokens from '../FormatNumberTokens/FormatNumberTokens';
+import { DENOM_LIQUID } from 'src/constants/config';
 
 export type Props = {
   total: number;
@@ -25,7 +25,7 @@ function TokenChange({ total, change = 0, className }: Props) {
         </div>
       )}
 
-      <FormatNumberTokens value={total} text={CYBER.DENOM_LIQUID_TOKEN} />
+      <FormatNumberTokens value={total} text={DENOM_LIQUID} />
     </div>
   );
 }

src/components/account/account.tsx

@@ -5,8 +5,8 @@ import { useQueryClient } from 'src/contexts/queryClient';
 import { routes } from 'src/routes';
 import usePassportByAddress from 'src/features/passport/hooks/usePassportByAddress';
 import cx from 'classnames';
+import { BECH32_PREFIX_VALOPER } from 'src/constants/config';
 import { trimString } from '../../utils/utils';
-import { CYBER } from '../../utils/config';
 import { AvataImgIpfs } from '../../containers/portal/components/avataIpfs';
 import styles from './account.module.scss';
 
@@ -25,9 +25,7 @@ function useGetValidatorInfo(address: string) {
     },
     {
       enabled: Boolean(
-        queryClient &&
-          address &&
-          address.includes(CYBER.BECH32_PREFIX_ACC_ADDR_CYBERVALOPER)
+        queryClient && address && address.includes(BECH32_PREFIX_VALOPER)
       ),
     }
   );
@@ -77,7 +75,7 @@ function Account({
   }, [address, trimAddressParam]);
 
   const linkAddress = useMemo(() => {
-    if (address?.includes(CYBER.BECH32_PREFIX_ACC_ADDR_CYBERVALOPER)) {
+    if (address?.includes(BECH32_PREFIX_VALOPER)) {
       return `/network/bostrom/hero/${address}`;
     }
 

src/components/actionBar/index.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { $TsFixMeFunc } from 'src/types/tsfix';
 
 import { routes } from 'src/routes';
-import { CYBER } from 'src/utils/config';
 import { useLocation } from 'react-router-dom';
 import { Networks } from 'src/types/networks';
 import usePassportByAddress from 'src/features/passport/hooks/usePassportByAddress';
@@ -13,6 +12,7 @@ import styles from './styles.module.scss';
 import Button from '../btnGrd';
 import { useSigningClient } from 'src/contexts/signerClient';
 import { trimString } from 'src/utils/utils';
+import { CHAIN_ID } from 'src/constants/config';
 
 const back = require('../../image/arrow-left-img.svg');
 
@@ -59,7 +59,7 @@ function ActionBar({ children, text, onClickBack, button }: Props) {
   const { passport } = usePassportByAddress(address);
 
   const noAccount = !defaultAccount.account;
-  const noPassport = CYBER.CHAIN_ID === Networks.BOSTROM && !passport;
+  const noPassport = CHAIN_ID === Networks.BOSTROM && !passport;
 
   const exception =
     (location.pathname !== routes.keys.path &&

src/components/contentIpfs/contentIpfs.tsx

@@ -1,5 +1,5 @@
 import { IPFSContentDetails, IPFSContentMaybe } from 'src/services/ipfs/ipfs';
-import { CYBER } from 'src/utils/config';
+import { CYBER_GATEWAY } from 'src/constants/config';
 import VideoPlayerGatewayOnly from '../VideoPlayer/VideoPlayerGatewayOnly';
 import GatewayContent from './component/gateway';
 import TextMarkdown from '../TextMarkdown';
@@ -22,14 +22,14 @@ function OtherItem({
       <TextMarkdown preview={search}>{content || `${cid} (n/a)`}</TextMarkdown>
     );
   }
-  return <GatewayContent url={`${CYBER.CYBER_GATEWAY}/ipfs/${cid}`} />;
+  return <GatewayContent url={`${CYBER_GATEWAY}/ipfs/${cid}`} />;
 }
 
 function DownloadableItem({ cid, search }: { cid: string; search?: boolean }) {
   if (search) {
     return <div>{`${cid} (gateway)`}</div>;
   }
-  return <GatewayContent url={`${CYBER.CYBER_GATEWAY}/ipfs/${cid}`} />;
+  return <GatewayContent url={`${CYBER_GATEWAY}/ipfs/${cid}`} />;
 }
 
 type ContentTabProps = {