Add sfuel-based tokens support, update metaport to the latest version

env/mainnet/chainsData.json

@@ -368,6 +368,20 @@
             "address": "0xBE3530a3eDf9472693065041B8c9155C7FeCB8e5"
           }
         }
+      },
+      "frayed-decent-antares": {
+        "tokens": {
+          "brawl": {
+            "keyname": "_BRAWL_0xE0A107a0010930Ac218ED0a50937b50D5633EB3e",
+            "recommendedValues": [
+              "100",
+              "200",
+              "500",
+              "1000"
+            ],
+            "address": "0x28c6ac22aB738BB01FC6CBA75804dC088aae6193"
+          }
+        }
       }
     }
   },
@@ -626,5 +640,26 @@
         }
       }
     }
+  },
+  "frayed-decent-antares": {
+    "type": "game",
+    "chains": {
+      "elated-tan-skat": {
+        "app": "ruby",
+        "tokens": {
+          "brawl": {
+            "keyname": "_BRAWL_0xE0A107a0010930Ac218ED0a50937b50D5633EB3e",
+            "recommendedValues": [
+              "100",
+              "200",
+              "500",
+              "1000"
+            ],
+            "address": "",
+            "wrapsSFuel": true
+          }
+        }
+      }
+    }
   }
 }

env/mainnet/metaportConfig.json

@@ -1,6 +1,7 @@
 {
   "skaleNetwork": "mainnet",
   "autoLookup": true,
+  "openButton": true,
   "chains": [
     "mainnet",
     "elated-tan-skat",
@@ -9,45 +10,9 @@
     "turbulent-unique-scheat",
     "green-giddy-denebola",
     "wan-red-ain",
-    "adorable-quaint-bellatrix"
+    "adorable-quaint-bellatrix",
+    "frayed-decent-antares"
   ],
-  "chainsMetadata": {
-    "elated-tan-skat": {
-      "alias": "Europa Hub",
-      "apps": {
-        "ruby": {
-          "alias": "Ruby Exchange",
-          "background": "#02001f",
-          "url": "https://ruby.exchange/"
-        }
-      }
-    },
-    "honorable-steel-rasalhague": {
-      "alias": "Calypso Hub",
-      "apps": {
-        "nftrade": {
-          "alias": "NFTrade",
-          "background": "#ffffff",
-          "url": "https://nftrade.com/"
-        }
-      }
-    },
-    "affectionate-immediate-pollux": {
-      "alias": "CryptoBlades"
-    },
-    "turbulent-unique-scheat": {
-      "alias": "Razor Network"
-    },
-    "green-giddy-denebola": {
-      "alias": "Nebula"
-    },
-    "wan-red-ain": {
-      "alias": "Human Protocol"
-    },
-    "adorable-quaint-bellatrix": {
-      "alias": "StreamMyScreen"
-    }
-  },
   "tokens": {
     "mainnet": {
       "eth": {
@@ -117,6 +82,17 @@
         }
       }
     },
+    "frayed-decent-antares": {
+      "erc20": {
+        "_BRAWL_0xE0A107a0010930Ac218ED0a50937b50D5633EB3e": {
+          "address": "0xE0A107a0010930Ac218ED0a50937b50D5633EB3e",
+          "name": "BRAWL",
+          "symbol": "BRAWL",
+          "iconUrl": "https://ruby.exchange/images/tokens/brawl-square.png",
+          "wrapsSFuel": true
+        }
+      }
+    },
     "elated-tan-skat": {
       "erc20": {
         "_ETH_0xa5274efA35EbeFF47C1510529D9a8812F95F5735": {

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-develop.1",
+    "@skalenetwork/metaport": "1.2.0-beta.3",
     "@skaleproject/pow-ethers": "0.2.4",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",

src/App.scss

@@ -1,4 +1,14 @@
-$border-color: rgba(131, 131, 131, 0.35);
+@import './variables';
+
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif !important;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 
 .textPage {
   p {
@@ -474,7 +484,19 @@ h4 {
   line-height: 1.7 !important;
   border-radius: 15px !important;
   font-weight: 600 !important;
+}
+
+
+.bridge__action_btn {
   box-shadow: none !important;
+  font-size: 0.7525rem !important;
+  line-height: 1.6 !important;
+  letter-spacing: 0.02857em !important;
+  font-weight: 600 !important;
+  padding-top: 0.8em !important;
+  padding-bottom: 0.8em !important;
+  min-height: $sk-btn-height !important;
+  border-radius: $sk-border-radius !important;
 }
 
 .bridge__btnLoading {
@@ -766,9 +788,21 @@ li a {
   border-radius: 50%;
 }
 
+
+.mp__iconHub {
+  img {
+    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;
@@ -1074,6 +1108,10 @@ body::-webkit-scrollbar {
   background-image: linear-gradient(160deg, #237bc3 0%, #1a3b94 100%);
 }
 
+.br__action_wrapsfuel {
+  background-image: linear-gradient(160deg, #237bc3 0%, #1a3b94 100%);
+}
+
 .br__action_unwrap {
   background-image: linear-gradient(160deg, #1a3b94 0%, #237bc3 100%);
   // background-image: linear-gradient(135deg, #31a385 0%, #25648a 100%);

src/Router.tsx

@@ -51,6 +51,20 @@ export default function Router(props: any) {
                             // element={<TransferV2 address={props.address} metaport={props.metaport} theme={props.theme} />}
                             />
                         </Route>
+                        <Route path="transferv2" >
+                            <Route
+                                path=":from"
+                                element={<TransferTo address={props.address} metaport={props.metaport} theme={props.theme} />}
+                            />
+                            <Route
+                                path=":from/:to"
+                                element={<TransferV2
+                                    address={props.address}
+                                    metaport={props.metaport}
+                                    theme={props.theme}
+                                />}
+                            />
+                        </Route>
                     </Route>
 
                     <Route path="other" >

src/_variables.scss

@@ -0,0 +1,9 @@
+$sk-border-radius: 15px;
+
+$sk-paper-color: rgb(136 135 135 / 15%);
+$sk-gray-background-color: rgba(161, 161, 161, 0.2);
+
+
+$sk-btn-height: 47px;
+
+$border-color: rgba(131, 131, 131, 0.35);

src/components/ChainCard/ChainCard.tsx

@@ -26,6 +26,7 @@ import Jazzicon, { jsNumberForAddress } from 'react-jazzicon'
 import { CHAINS_META } from '../../core/constants';
 
 import TokensPreview from '../TokensPreview';
+import HubIcon from '../HubIcon';
 import { getChainName } from '../ActionCard/helper';
 
 import './ChainCard.scss';
@@ -108,8 +109,13 @@ export default function ChainCard(props: any) {
         <div className='br__tileLogo mp__flex mp__flexCentered'>
           {getIcon(chain, props.chain.app)}
         </div>
-        <div className="br__tileBott">
-          <TokensPreview tokens={tokens} chain={chain} />
+        <div className="br__tileBott mp__flex mp__flexCentered fullWidth">
+          <div className="mp__flex mp__flexGrow">
+            <TokensPreview tokens={tokens} chain={chain} />
+          </div>
+          <div className="mp__flex">
+            {props.chain.app ? <HubIcon chains_meta={CHAINS_META} chain={chain} /> : null}
+          </div>
         </div>
       </div>
       <p className="schain-name mp__flex mp__flexCentered undec mp__noMargBott">

src/components/ChainOverview/ChainOverview.tsx

@@ -112,7 +112,8 @@ export default function ChainOverview(props: any) {
       dataclasses.TokenType.erc20,
       tokenKeyname
     );
-    const balanceWei = await getBalance(web3, tokenContract, props.address, props.chainName);
+    const balanceWei = await getBalance(
+      web3, tokenContract, props.address, props.chainName, tokens[token as string].wrapsSFuel);
     return fromWei(balanceWei as string, decimals);
   }
 

src/components/HubIcon/HubIcon.tsx

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * SKALE bridge-ui
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/**
+ * @file HubIcon.js
+ * @copyright SKALE Labs 2023-Present
+*/
+
+import Tooltip from '@mui/material/Tooltip';
+import { getChainName, getChainIcon } from '../ActionCard/helper';
+
+import { CHAINS_META } from '../../core/constants';
+
+
+export default function HubIcon(props: {
+  chains_meta: any,
+  chain: string
+}) {
+
+  const chainName = getChainName(CHAINS_META, props.chain);
+  const chainIcon = getChainIcon(props.chain, true);
+
+  return (
+    <div className='br__tileBottIcons mp__flex mp__flexCenteredVert'>
+      <Tooltip title={'This app is located on ' + chainName}>
+        <div className='mp__iconHub mp__flex mp__flexCenteredVert'>
+          {chainIcon}
+        </div>
+      </Tooltip>
+    </div>
+  );
+}

src/components/HubIcon/index.ts

@@ -0,0 +1 @@
+export { default } from "./HubIcon";

src/components/TermsModal/TermsModal.tsx

@@ -92,7 +92,7 @@ export default function TermsModal(props: any) {
                                 onClick={() => { props.setTermsAccepted(true); }}
                                 variant="contained"
                                 disabled={!scrolled}
-                                className='mp__margTop20 bridge__btn'
+                                className='mp__margTop20 bridge__btn bridge__action_btn'
                                 size='large'
                             >
                                 {getAgreeButtonText()}

src/components/TokensPreview/TokensPreview.tsx

@@ -25,7 +25,7 @@ import Tooltip from '@mui/material/Tooltip';
 import { iconPath } from '../ActionCard/helper';
 
 
-const MAX_TOKENS = 6;
+const MAX_TOKENS = 4;
 
 
 export default function TokensPreview(props: any) {

src/components/TransactionData/TransactionData.tsx

@@ -44,6 +44,7 @@ const actionIcons: { [actionName: string]: ReactElement; } = {
     'withdraw': <LogoutIcon />,
     'approve': <DoneRoundedIcon />,
     'approveWrap': <DoneRoundedIcon />,
+    'wrapsfuel': <MoveDownIcon />,
 }