Merge pull request #272 from skalenetwork/develop

Metaport 2.3 Beta

.github/workflows/publish.yml

@@ -19,7 +19,7 @@ jobs:
           submodules: true
       - uses: actions/setup-node@v3
         with:
-          node-version: '18.x'
+          node-version: '20.x'
           registry-url: 'https://registry.npmjs.org'
       - name: Prepare metadata
         run: |

.github/workflows/test.yml

@@ -6,7 +6,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [18]
+        node: [20]
     env:
       TEST: true
     steps:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skalenetwork/metaport",
-  "version": "2.1.1",
+  "version": "3.0.0",
   "description": "SKALE Metaport Widget",
   "keywords": [
     "skale",
@@ -21,7 +21,7 @@
     "./dist/style.css": "./dist/style.css"
   },
   "engines": {
-    "node": "18"
+    "node": "20"
   },
   "scripts": {
     "dev": "storybook dev -p 6006",
@@ -75,17 +75,18 @@
     "vitest": "0.34.1"
   },
   "dependencies": {
-    "@mui/material": "^5.15.6",
-    "@mui/lab": "^5.0.0-alpha.162",
-    "@mui/icons-material": "^5.15.6",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@rainbow-me/rainbowkit": "^1.3.6",
+    "@mui/icons-material": "^5.15.6",
+    "@mui/lab": "^5.0.0-alpha.162",
+    "@mui/material": "^5.15.6",
+    "@rainbow-me/rainbowkit": "^2.1.4",
     "@skalenetwork/ima-js": "2.0.2-develop.0",
+    "@tanstack/react-query": "^5.51.23",
     "coingecko-api-v3": "^0.0.29",
     "react-jazzicon": "^1.0.4",
-    "viem": "^1.21.4",
-    "wagmi": "^1.4.13",
+    "viem": "2.x",
+    "wagmi": "^2.12.5",
     "zustand": "^4.5.0"
   },
   "peerDependencies": {

src/components/AddToken.tsx

@@ -22,7 +22,7 @@
  */
 
 import { useState } from 'react'
-import { useWalletClient, useSwitchNetwork } from 'wagmi'
+import { useWalletClient, useSwitchChain } from 'wagmi'
 import { MainnetChain, SChain } from '@skalenetwork/ima-js'
 
 import Button from '@mui/material/Button'
@@ -43,7 +43,7 @@ export default function AddToken(props: {
   const [loading, setLoading] = useState<boolean>(false)
 
   const { data: walletClient } = useWalletClient()
-  const { switchNetworkAsync } = useSwitchNetwork()
+  const { switchChainAsync } = useSwitchChain()
 
   function getIconUrl(token: TokenData) {
     return `${ICONS_BASE_URL}${token.meta.symbol}.png`
@@ -73,7 +73,7 @@ export default function AddToken(props: {
       await enforceNetwork(
         chainId,
         walletClient,
-        switchNetworkAsync,
+        switchChainAsync,
         props.mpc.config.skaleNetwork,
         props.destChainName
       )

src/components/ChainAppBtn.tsx

@@ -0,0 +1,98 @@
+/**
+ * @license
+ * SKALE Metaport
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser 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 Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/**
+ * @file ChainAppBtn.ts
+ * @copyright SKALE Labs 2024-Present
+ */
+
+import { Button } from '@mui/material'
+import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded'
+
+import { cls, cmn, styles } from '../core/css'
+import { SkaleNetwork } from '../core/interfaces'
+import { getChainAlias } from '../core/metadata'
+
+import ChainIcon from './ChainIcon'
+
+export default function ChainAppBtn(props: {
+  skaleNetwork: SkaleNetwork
+  appName: string
+  chainName: string
+  handle?: (schainName: string, app?: string) => void
+  size?: 'sm' | 'md'
+  prim?: boolean
+}) {
+  const size = props.size ?? 'sm'
+  const iconSize = props.size === 'sm' ? 'xs' : 'sm'
+  const prim = props.prim ?? size === 'md'
+
+  return (
+    <Button
+      key={props.appName}
+      onClick={() => props.handle(props.chainName, props.appName)}
+      size="small"
+      color="inherit"
+      className={cls([cmn.mleft10, size === 'sm'], [cmn.mleft20, size === 'md'], cmn.mbott5)}
+    >
+      <div
+        className={cls(
+          cmn.flex,
+          cmn.flexcv,
+          cmn.mri5,
+          [cmn.mleft5, size === 'sm'],
+          [cmn.mleft10, size === 'md'],
+          [cmn.mbott5, size === 'sm'],
+          [cmn.mtop5, size === 'sm'],
+          [cmn.mbott10, size === 'md'],
+          [cmn.mtop10, size === 'md']
+        )}
+      >
+        <ChainIcon
+          className={cls(cmn.mleft20d)}
+          skaleNetwork={props.skaleNetwork}
+          chainName={props.chainName}
+          app={props.appName}
+          size={iconSize}
+        />
+        <p
+          className={cls(
+            cmn.p,
+            [cmn.p3, size === 'md'],
+            [cmn.p4, size === 'sm'],
+            [cmn.pSec, !prim],
+            [cmn.pPrim, prim],
+            cmn.p600,
+            cmn.mleft10
+          )}
+        >
+          {getChainAlias(props.skaleNetwork, props.chainName, props.appName)}
+        </p>
+        <div className={cls(cmn.flex, cmn.flexg)}></div>
+        <KeyboardArrowRightRoundedIcon
+          className={cls(
+            cmn.pSec,
+            [styles.chainIconxs, size === 'sm'],
+            [styles.chainIcons, size === 'md'],
+            [cmn.mleft5, size === 'md']
+          )}
+        />
+      </div>
+    </Button>
+  )
+}

src/components/ChainApps.tsx

@@ -1,11 +1,38 @@
+/**
+ * @license
+ * SKALE Metaport
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser 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 Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/**
+ * @file ChainApps.ts
+ * @copyright SKALE Labs 2024-Present
+ */
+
+import { ReactElement, useState } from 'react'
 import { Button } from '@mui/material'
-import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded'
+import AddCircleRoundedIcon from '@mui/icons-material/AddCircleRounded'
+import RemoveCircleRoundedIcon from '@mui/icons-material/RemoveCircleRounded'
 
 import { cls, cmn, styles } from '../core/css'
 import { SkaleNetwork } from '../core/interfaces'
-import { getChainAppsMeta, getChainAlias } from '../core/metadata'
+import { getChainAppsMeta } from '../core/metadata'
+
+import ChainAppBtn from './ChainAppBtn'
 
-import ChainIcon from './ChainIcon'
+import { sortObjectByKeys } from '../core/helper'
 
 export default function ChainApps(props: {
   skaleNetwork: SkaleNetwork
@@ -14,30 +41,45 @@ export default function ChainApps(props: {
   size?: 'sm' | 'md'
   prim?: boolean
 }) {
+  const [show, setShow] = useState<boolean>(false)
+
   const apps = getChainAppsMeta(props.chainName, props.skaleNetwork)
   if (!apps || !Object.keys(apps) || Object.keys(apps).length === 0) return <div></div>
 
   const size = props.size ?? 'sm'
-  const iconSize = props.size === 'sm' ? 'xs' : 'sm'
 
-  const prim = props.prim ?? size === 'md'
+  const appButtons: ReactElement[] = []
+
+  for (const appName in sortObjectByKeys(apps)) {
+    appButtons.push(
+      <ChainAppBtn
+        skaleNetwork={props.skaleNetwork}
+        chainName={props.chainName}
+        appName={appName}
+        handle={props.handle}
+        size={size}
+        prim={props.prim}
+      />
+    )
+  }
 
   return (
     <div className={cls(styles.sk__chainApps, cmn.mri10, cmn.flex, cmn.flexcv)}>
       <div className={cls(cmn.mtop10, cmn.mbott10)}>
-        {Object.keys(apps).map((key, _) => (
+        {show ? appButtons : appButtons.length === 4 ? appButtons : appButtons.slice(0, 3)}
+        {appButtons.length > 4 && (
           <Button
-            key={key}
-            onClick={() => props.handle(props.chainName, key)}
+            onClick={() => {
+              setShow(!show)
+            }}
             size="small"
-            color="inherit"
             className={cls([cmn.mleft10, size === 'sm'], [cmn.mleft20, size === 'md'], cmn.mbott5)}
           >
             <div
               className={cls(
                 cmn.flex,
                 cmn.flexcv,
-                cmn.mri5,
+                cmn.mri10,
                 [cmn.mleft5, size === 'sm'],
                 [cmn.mleft10, size === 'md'],
                 [cmn.mbott5, size === 'sm'],
@@ -46,38 +88,39 @@ export default function ChainApps(props: {
                 [cmn.mtop10, size === 'md']
               )}
             >
-              <ChainIcon
-                className={cls(cmn.mleft20d)}
-                skaleNetwork={props.skaleNetwork}
-                chainName={props.chainName}
-                app={key}
-                size={iconSize}
-              />
+              {show ? (
+                <RemoveCircleRoundedIcon
+                  className={cls(
+                    cmn.pPrim,
+                    [styles.chainIconxs, size === 'sm'],
+                    [styles.chainIconsm, size === 'md']
+                  )}
+                />
+              ) : (
+                <AddCircleRoundedIcon
+                  className={cls(
+                    cmn.pPrim,
+                    [styles.chainIconxs, size === 'sm'],
+                    [styles.chainIconsm, size === 'md']
+                  )}
+                />
+              )}
+
               <p
                 className={cls(
                   cmn.p,
                   [cmn.p3, size === 'md'],
                   [cmn.p4, size === 'sm'],
-                  [cmn.pSec, !prim],
-                  [cmn.pPrim, prim],
+                  cmn.pPrim,
                   cmn.p600,
                   cmn.mleft10
                 )}
               >
-                {getChainAlias(props.skaleNetwork, props.chainName, key)}
+                Show {show ? 'less' : 'more'} apps
               </p>
-              <div className={cls(cmn.flex, cmn.flexg)}></div>
-              <KeyboardArrowRightRoundedIcon
-                className={cls(
-                  [cmn.pSec, !prim],
-                  [cmn.pPrim, prim],
-                  [styles.chainIconxs, size === 'sm'],
-                  [styles.chainIcons, size === 'md']
-                )}
-              />
             </div>
           </Button>
-        ))}
+        )}
       </div>
     </div>
   )

src/components/CommunityPool.tsx

@@ -23,7 +23,7 @@
 
 import React, { useEffect } from 'react'
 
-import { useAccount, useWalletClient, useSwitchNetwork } from 'wagmi'
+import { useAccount, useWalletClient, useSwitchChain } from 'wagmi'
 
 import Accordion from '@mui/material/Accordion'
 import AccordionSummary from '@mui/material/AccordionSummary'
@@ -57,7 +57,7 @@ import { Collapse } from '@mui/material'
 
 export default function CommunityPool() {
   const { data: walletClient } = useWalletClient()
-  const { switchNetworkAsync } = useSwitchNetwork()
+  const { switchChainAsync } = useSwitchChain()
 
   const cpData = useCPStore((state) => state.cpData)
   const loading = useCPStore((state) => state.loading)
@@ -144,7 +144,7 @@ export default function CommunityPool() {
       chainName,
       cpData.balance,
       address,
-      switchNetworkAsync,
+      switchChainAsync,
       setLoading,
       setErrorMessage,
       async () => {
@@ -161,7 +161,7 @@ export default function CommunityPool() {
       chainName,
       amount,
       address,
-      switchNetworkAsync,
+      switchChainAsync,
       setLoading,
       setErrorMessage,
       async () => {