Merge pull request #79 from skalenetwork/develop

New beta version

env/legacy/chainsData.json

@@ -0,0 +1,38 @@
+{
+  "mainnet": {
+    "hub": "ethereum",
+    "chains": {
+      "elated-tan-skat": {
+        "tokens": {
+          "eth": {
+            "keyname": "eth",
+            "recommendedValues": [
+              "0.01",
+              "0.1",
+              "0.2",
+              "0.5"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "elated-tan-skat": {
+    "chains": {
+      "mainnet": {
+        "tokens": {
+          "eth": {
+            "keyname": "eth",
+            "recommendedValues": [
+              "0.01",
+              "0.1",
+              "0.2",
+              "0.5"
+            ],
+            "address": "0xD2Aaa00700000000000000000000000000000000"
+          }
+        }
+      }
+    }
+  }
+}

env/legacy/faucet.json

@@ -0,0 +1,2 @@
+{
+}

env/legacy/metaportConfig.json

@@ -0,0 +1,32 @@
+{
+  "skaleNetwork": "legacy",
+  "autoLookup": false,
+  "openOnLoad": false,
+  "openButton": true,
+  "debug": false,
+  "chains": [
+    "mainnet",
+    "elated-tan-skat"
+  ],
+  "chainsMetadata": {
+  },
+  "tokens": {
+    "mainnet": {
+      "eth": {
+        "chains": [
+          "elated-tan-skat"
+        ]
+      },
+      "erc20": {
+      },
+      "erc721meta": {
+      },
+      "erc1155": {
+      }
+    }
+
+  },
+  "theme": {
+    "mode": "dark"
+  }
+}

package.json

@@ -12,7 +12,7 @@
     "@mui/lab": "^5.0.0-alpha.120",
     "@mui/material": "^5.11.4",
     "@skalenetwork/ima-js": "1.1.2-develop.3",
-    "@skalenetwork/metaport": "1.2.0-preview.0",
+    "@skalenetwork/metaport": "1.2.0-develop.1",
     "@skaleproject/pow-ethers": "0.2.4",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",

public/index.html

@@ -8,6 +8,13 @@
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="SKALE Bridge" />
   <meta name="robots" content="noindex">
+
+  <!-- Start of skalelabs Zendesk Widget script -->
+  <script id="ze-snippet"
+    src="https://static.zdassets.com/ekr/snippet.js?key=3a800d63-155b-4add-9207-8562e05d29eb">
+  </script>
+  <!-- End of skalelabs Zendesk Widget script -->
+
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/App.scss

@@ -1,3 +1,5 @@
+$border-color: rgba(131, 131, 131, 0.35);
+
 .textPage {
   p {
     font-size: 0.9rem;
@@ -243,6 +245,10 @@ h4 {
   vertical-align: middle;
 }
 
+.mp__flexWrap {
+  flex-wrap: wrap;
+}
+
 .fl-right {
   justify-content: end;
 }
@@ -623,12 +629,6 @@ input::-webkit-inner-spin-button {
   }
 }
 
-.dappCard {
-  .chainIcon {
-    width: 40px !important;
-    height: 40px !important;
-  }
-}
 
 .fade-enter {
   opacity: 0;
@@ -734,18 +734,6 @@ li a {
   text-align: center;
 }
 
-
-// cards
-
-.dappCard.MuiGrid-item {
-  transition: transform .2s;
-}
-
-.dappCard.MuiGrid-item:hover {
-  transform: scale(1.1);
-}
-
-
 .chainInfoIcon {
   width: 12pt !important;
   color: #0000008a !important;
@@ -755,56 +743,6 @@ li a {
   color: #0000008a !important;
 }
 
-.app-bott {
-  border-bottom-left-radius: 25px !important;
-  border-bottom-right-radius: 25px !important;
-
-  border-bottom: 1px #292929 solid !important;
-  border-right: 1px #292929 solid !important;
-  border-left: 1px #292929 solid !important;
-
-  background-color: #191919;
-
-  margin-top: -1px; // hotfix for Safari
-}
-
-.app-bott-ins {
-  backdrop-filter: brightness(0.6);
-  width: 100%;
-  padding: 5pt 0;
-}
-
-.app-bott h6,
-.app-bott svg {
-  color: #000000cc !important;
-}
-
-.app-bott-dark h6,
-.app-bott-dark svg {
-  color: #ffffffc9 !important;
-}
-
-
-
-.app-icon {
-  width: 100%;
-  height: 95px;
-  border-top-left-radius: 25px !important;
-  border-top-right-radius: 25px !important;
-
-  border-bottom-left-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-
-
-  border-top: 1px #292929 solid !important;
-  border-right: 1px #292929 solid !important;
-  border-left: 1px #292929 solid !important;
-
-  svg {
-    color: white !important;
-  }
-}
-
 
 .schain-name {
   font-weight: bold;
@@ -821,9 +759,21 @@ li a {
 
 
 .mp__iconToken {
-  width: 20px;
-  height: 20px;
-  margin-right: -5px;
+  width: 25px;
+  height: 25px;
+  margin-right: -10px;
+  border: 1px $border-color solid !important;
+  border-radius: 50%;
+}
+
+.mp__iconTokenMore {
+  margin-left: 10px !important;
+  background: #00000081;
+  p {
+    color: white !important;
+    font-weight: bold;
+    font-size: 0.6rem;
+  }
 }
 
 .mp__iconTokenBig {
@@ -1162,4 +1112,60 @@ body::-webkit-scrollbar {
     width: 15px !important;
     height: 15px !important
   }
-}
+}
+
+
+
+.tile-container {
+  perspective: 500px;
+}
+
+.br__tile {
+  box-shadow: 0px -4px 6px rgba(255, 255, 255, 0.05);
+  transform-style: preserve-3d;
+  transition: all 0.3s ease;
+}
+
+.br__tile:hover {
+  box-shadow: 0px -4px 6px rgba(255, 255, 255, 0.1);
+  transform: scale(1.1) rotateX(15deg);
+}
+
+.br__tile {
+  position: relative;
+  width: 100%;
+  height: 130px;
+  border-radius: 25px !important;
+  border: 1px $border-color solid !important;
+}
+
+.br__tileLogo {
+  height: 95px;
+
+  img {
+    max-height: 80%;
+    max-width: 80%;
+    text-align: center;
+  }
+}
+
+.br__tileBottIcons {
+  padding: 12pt 15pt;
+}
+
+
+.br__tileBott {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+}
+
+// .br__tileTop {
+//   position: absolute;
+//   top: 0;
+//   right: 0;
+//   z-index: 2;
+
+//   padding: 12pt 15pt;
+// }

src/Header.js

@@ -29,6 +29,7 @@ import { Link } from "react-router-dom";
 
 import logo from './skale_lg.svg';
 
+import HelpZen from './components/HelpZen';
 import MoreMenu from './components/MoreMenu';
 import AccountMenu from './components/AccountMenu';
 
@@ -44,6 +45,7 @@ export default class Header extends React.Component {
             </Link>
           </div>
           <AccountMenu address={this.props.address} connectMetamask={this.props.connectMetamask} />
+          <HelpZen />
           <MoreMenu />
         </Toolbar>
       </AppBar>

src/components/ChainCard/ChainCard.scss

@@ -2,4 +2,17 @@
     max-height: 80%;
     max-width: 80%;
     text-align: center;
+}
+
+.br__tileDefaultLogo {
+    padding: 10px 10px 20px 10px;
+    height: 100%;
+    width: 100%;
+
+    .paper {
+        text-align: center !important;
+        border-radius: 20px !important;
+        height: 100% !important;
+        width: 100% !important;
+    }
 }