switch network

config/webpack.common.js

@@ -94,6 +94,12 @@ module.exports = {
           },
         },
       },
+      {
+	    test: /\.html$/i,
+	    use: {
+	    	loader: 'html-loader',
+	    }
+	  }
     ],
   },
   resolve: {

package.json

@@ -4,10 +4,12 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "webpack-dev-server --config=webpack.config.dev.js --hot --https -d --disable-host-check",
-    "build": "webpack --config=webpack.config.prod.js -p && ncp build/index.html build/404.html && echo 'rebyc.cyber.page' > build/CNAME",
+    "start": "webpack serve --config=webpack.config.dev.js ",
+    "build": "webpack --config=webpack.config.prod.js --mode production &&  echo 'rebyc.cyber.page' > build/CNAME",
     "devserver": "parcel serve src/index.html -p 8001 --no-cache",
     "upgradeDep": "yarn upgrade-interactive --latest",
+    "build-report": "webpack --config=webpack.config.prod.js --profile --json > stats.json",
+    "watch-report": "webpack-bundle-analyzer stats.json",
     "lint": "eslint src/"
   },
   "browserslist": "> 0.5%, last 2 versions, not dead",
@@ -23,13 +25,17 @@
     "@commitlint/config-conventional": "^11.0.0",
     "@rjsf/core": "^3.2.1",
     "ajv": "^8.8.2",
+    "assert": "^2.0.0",
     "axios": "^0.21.1",
     "babel-loader": "8.2.3",
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^7.0.0",
+    "browserify-zlib": "^0.2.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "constants-browserify": "^1.0.0",
+    "copy-webpack-plugin": "^11.0.0",
     "cosmjs-types": "^0.4.0",
     "cross-env": "^6.0.3",
     "css-loader": "^5.0.1",
+    "css-minimizer-webpack-plugin": "^4.0.0",
     "esbuild-loader": "2.18.0",
     "eslint": "^6.6.0",
     "eslint-config-airbnb": "^18.0.1",
@@ -41,13 +47,15 @@
     "file-loader": "^2.0.0",
     "gsap": "^3.8.0",
     "history": "^4.9.0",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^5.5.0",
+    "https-browserify": "^1.0.0",
     "husky": "^4.3.8",
     "it-all": "^1.0.5",
-    "mini-css-extract-plugin": "^0.8.0",
+    "mini-css-extract-plugin": "^2.6.1",
     "ncp": "^2.0.0",
     "node-sass": "^5.0.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
+    "os-browserify": "^0.3.0",
+    "path-browserify": "^1.0.1",
     "postcss-loader": "^4.1.0",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.0.5",
@@ -70,6 +78,8 @@
     "rehype-stringify": "^9.0.2",
     "remark-gfm": "^3.0.1",
     "sass-loader": "^10.1.1",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
     "style-loader": "^2.0.0",
     "swr": "^1.0.1",
     "terser-webpack-plugin": "4.2.3",
@@ -79,10 +89,12 @@
     "uniforms-semantic": "^3.7.0",
     "uniforms-unstyled": "^3.7.0",
     "uuid": "^8.3.2",
-    "webpack": "4.41.2",
-    "webpack-cli": "3.1.2",
-    "webpack-dev-server": "3.10.3",
-    "webpack-merge": "^5.7.3"
+    "webpack": "^5.74.0",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.10.0",
+    "webpack-merge": "^5.7.3",
+    "worker-loader": "^3.0.8"
   },
   "dependencies": {
     "@apollo/react-hooks": "^3.1.3",
@@ -94,7 +106,7 @@
     "@cosmjs/proto-signing": "^0.28.4",
     "@cosmjs/stargate": "^0.28.4",
     "@cosmjs/tendermint-rpc": "^0.28.4",
-    "@cybercongress/cyber-js": "0.3.0",
+    "@cybercongress/cyber-js": "0.3.1",
     "@cybercongress/gravity": "0.0.15",
     "@ledgerhq/hw-transport-u2f": "^4.72.1",
     "@ledgerhq/hw-transport-webusb": "5.53.0",
@@ -122,7 +134,7 @@
     "eslint-plugin-react-hooks": "^2.2.0",
     "ethers": "^5.0.26",
     "file-type": "^14.1.3",
-    "graphql": "^14.6.0",
+    "graphql": "^16.5.0",
     "graphql-tag": "^2.10.1",
     "highlight.js": "^10.0.3",
     "ipfs": "0.54.3",

src/components/ButtonNetwork/index.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styles from './styles.scss';
+
+const cx = require('classnames');
+
+function ButtonNetwork({ children, onClick, disabled, network }) {
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={onClick}
+      className={cx(styles.buttonNetwork, {
+        [styles.buttonNetworkBostrom]: network === 'bostrom',
+        [styles.buttonNetworkSpacePussy]: network === 'space-pussy',
+      })}
+    >
+      <span className={styles.buttonNetworkSpan}>Switch to </span>
+      {network}
+    </button>
+  );
+}
+
+export default ButtonNetwork;

src/components/ButtonNetwork/styles.scss

@@ -0,0 +1,26 @@
+.buttonNetwork {
+  background: transparent;
+  color: #fff;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 0 5px;
+  font-size: 16px;
+
+  &:disabled {
+    color: #C4C4C4;
+    cursor: none;
+  }
+
+  &Bostrom {
+    color: #36D6AE;
+  }
+
+  &SpacePussy {
+    color: #F62BFD;
+  }
+
+  &Span {
+    color: #fff;
+  }
+}

src/components/denom/denomArr.jsx

@@ -4,28 +4,55 @@ import coinDecimalsConfig from '../../utils/configToken';
 
 const denonFnc = (text) => {
   let denom = text;
-  const validDenom = text.includes('ibc') || text.includes('pool');
+
   if (
     Object.prototype.hasOwnProperty.call(coinDecimalsConfig, text) &&
-    validDenom
+    text.includes('ibc')
   ) {
     denom = coinDecimalsConfig[text].denom;
   }
+
+  if (
+    Object.prototype.hasOwnProperty.call(coinDecimalsConfig, text) &&
+    text.includes('pool')
+  ) {
+    const poolDenoms = coinDecimalsConfig[text].denom;
+    denom = [denonFnc(poolDenoms[0]), denonFnc(poolDenoms[1])];
+  }
   return denom;
 };
 
-function DenomArr({ denomValue, ...props }) {
+function DenomArr({ denomValue, onlyText, onlyImg, ...props }) {
   const useDenomValue = useMemo(() => {
     const resultDenom = denonFnc(denomValue);
     if (typeof resultDenom === 'string') {
-      return <Denom {...props} denomValue={resultDenom} />;
+      return (
+        <Denom
+          {...props}
+          onlyImg={onlyImg}
+          onlyText={onlyText}
+          denomValue={resultDenom}
+        />
+      );
     }
 
     if (typeof resultDenom === 'object') {
       return (
         <div style={{ display: 'flex' }}>
-          <Denom denomValue={resultDenom[0]} {...props} />
-          <Denom denomValue={resultDenom[1]} {...props} />
+          <Denom
+            denomValue={resultDenom[0]}
+            onlyImg={onlyImg}
+            onlyText={onlyText}
+            {...props}
+          />
+          {onlyText ? '-' : ''}
+          <Denom
+            denomValue={resultDenom[1]}
+            marginContainer={onlyImg ? '0px 0px 0px -12px' : '0px'}
+            onlyImg={onlyImg}
+            onlyText={onlyText}
+            {...props}
+          />
         </div>
       );
     }

src/components/denom/index.jsx

@@ -30,11 +30,20 @@ function useGetDenom(denomValue) {
   return { denom, type };
 }
 
-function Denom({ denomValue, ...props }) {
+function Denom({ denomValue, onlyText, onlyImg, marginContainer, ...props }) {
   try {
     const { denom, type } = useGetDenom(denomValue);
 
-    return <ValueImg text={denom} type={type} {...props} />;
+    return (
+      <ValueImg
+        onlyText={onlyText}
+        onlyImg={onlyImg}
+        marginContainer={marginContainer}
+        text={denom}
+        type={type}
+        {...props}
+      />
+    );
   } catch (error) {
     return <div>{denomValue}</div>;
   }

src/components/index.js

@@ -48,6 +48,7 @@ import NumberCurrency from './numberCurrency';
 import SearchSnippet from './searchSnippet';
 import Denom from './denom';
 import DenomArr from './denom/denomArr';
+import ButtonNetwork from './ButtonNetwork';
 
 export {
   GovernanceChangeParam,
@@ -98,6 +99,7 @@ export {
   SearchSnippet,
   Denom,
   DenomArr,
+  ButtonNetwork,
 };
 
 export { Nums } from './ui/Numbers';

src/components/ledger/stageActionBar.jsx

@@ -91,7 +91,9 @@ const imgKeplr = require('../../image/keplr-icon.svg');
 const imgMetaMask = require('../../image/mm-logo.svg');
 const imgRead = require('../../image/duplicate-outline.svg');
 const imgEth = require('../../image/Ethereum_logo_2014.svg');
-const imgCyber = require('../../image/large-green.png');
+const imgCyber = require('../../image/large-purple-circle.png');
+const imgBostrom = require('../../image/large-green.png');
+const imgSpace = require('../../image/large-purple-circle.png');
 const imgCosmos = require('../../image/cosmos-2.svg');
 
 const T = new LocalizedStrings(i18n);
@@ -1472,8 +1474,8 @@ export const ConnectAddress = ({
                 <ButtonIcon
                   onClick={() => selectNetworkFunc('cyber')}
                   active={selectNetwork === 'cyber'}
-                  img={imgCyber}
-                  text="bostrom"
+                  img={CYBER.CHAIN_ID === 'bostrom' ? imgBostrom : imgSpace}
+                  text={CYBER.CHAIN_ID}
                 />
               )}
               {cosmosNetwork && (

src/components/loader/loader.css

@@ -0,0 +1,70 @@
+html, body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Play';
+}
+
+@font-face {
+    font-family: 'Play';
+    src: url('../../fonts/Play-Regular.ttf');
+    font-weight: 400;
+    font-style: normal;
+  }
+
+#bootloader-container {
+    background: #000;
+    background-size: cover;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+img.logo-container {
+    width: 180px;
+    height: 90px;
+    content: url('../../image/logo-bulb.svg');
+}
+
+
+#progress-data
+{
+    color: #FFFFFF;
+    font-size: 14pt;
+    text-align: center;
+}
+
+#progress-data .span {
+    letter-spacing: 0.2em;
+    font-size:20pt;
+}
+
+progress {
+    width: 42rem;
+    height: 3px;
+    margin: 0;
+    border: 1px solid rgba(159, 162, 185, .5);
+    border-radius: 3px;
+    background: #9c9eb1;
+    box-sizing: border-box;
+}
+
+progress[value]::-webkit-progress-bar {
+    background-color: #9c9eb1;
+}
+
+progress[value]::-webkit-progress-value {
+    box-shadow: 0 0 10px 2px #f78160;
+    background: linear-gradient(to left, #f1846a 0%, #fac1b2 50%, #f48163 100%);
+    transition: width 0.45s ease;
+}
+
+progress[value]::-moz-progress-bar {
+    box-shadow: 0 0 10px 2px #f78160;
+    background: linear-gradient(to left, #f1846a 0%, #fac1b2 50%, #f48163 100%);
+    transition: width 0.45s ease;
+}