Update apps metadata, fix await in S2M

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,70 +41,78 @@ 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, _) => (
-          <Button
-            key={key}
-            onClick={() => props.handle(props.chainName, key)}
-            size="small"
-            color="inherit"
-            className={cls([cmn.mleft10, size === 'sm'], [cmn.mleft20, size === 'md'], cmn.mbott5)}
+        {show ? appButtons : appButtons.length === 4 ? appButtons : appButtons.slice(0, 3)}
+        <Button
+          onClick={() => {
+            setShow(!show)
+          }}
+          size="small"
+          className={cls([cmn.mleft10, size === 'sm'], [cmn.mleft20, size === 'md'], cmn.mbott5)}
+        >
+          <div
+            className={cls(
+              cmn.flex,
+              cmn.flexcv,
+              cmn.mri10,
+              [cmn.mleft5, size === 'sm'],
+              [cmn.mleft10, size === 'md'],
+              [cmn.mbott5, size === 'sm'],
+              [cmn.mtop5, size === 'sm'],
+              [cmn.mbott10, size === 'md'],
+              [cmn.mtop10, size === 'md']
+            )}
           >
-            <div
+            {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.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']
+                cmn.p,
+                [cmn.p3, size === 'md'],
+                [cmn.p4, size === 'sm'],
+                cmn.pPrim,
+                cmn.p600,
+                cmn.mleft10
               )}
             >
-              <ChainIcon
-                className={cls(cmn.mleft20d)}
-                skaleNetwork={props.skaleNetwork}
-                chainName={props.chainName}
-                app={key}
-                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, key)}
-              </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>
-        ))}
+              Show {show ? 'less' : 'more'} apps
+            </p>
+          </div>
+        </Button>
       </div>
     </div>
   )

src/core/actions/erc20.ts

@@ -287,7 +287,7 @@ export class TransferERC20M2S extends Action {
     log('TransferERC20M2S:execute - tx completed %O', tx)
     await this.sChain2.waitERC20BalanceChange(this.destToken, this.address, balanceOnDestination)
     this.updateState('received')
-    log('TransferERC20M2S:execute - tokens received to destination chain')
+    log('TransferERC20M2S:execute - tokens received on destination chain')
   }
 
   async preAction() {
@@ -339,9 +339,9 @@ export class TransferERC20S2M extends Action {
     const block = await sChain.provider.getBlock(tx.blockNumber)
     this.updateState('transferDone', tx.hash, block.timestamp)
     log('TransferERC20S2M:execute - tx completed %O', tx)
-    this.mainnet.waitERC20BalanceChange(this.destToken, this.address, balanceOnDestination)
+    await this.mainnet.waitERC20BalanceChange(this.destToken, this.address, balanceOnDestination)
     this.updateState('received')
-    log('TransferERC20S2M:execute - tokens received to destination chain')
+    log('TransferERC20S2M:execute - tokens received on destination chain')
   }
 
   async preAction() {

src/core/helper.ts

@@ -56,3 +56,14 @@ export function getRandom(list: Array<any>) {
 export async function sleep(ms: number): Promise<any> {
   return await new Promise((resolve) => setTimeout(resolve, ms))
 }
+
+export function sortObjectByKeys(obj: { [key: string]: any }): { [key: string]: any } {
+  const sortedKeys = Object.keys(obj).sort()
+  const sortedObject: { [key: string]: any } = {}
+
+  for (const key of sortedKeys) {
+    sortedObject[key] = obj[key]
+  }
+
+  return sortedObject
+}

src/styles/styles.module.scss

@@ -366,6 +366,10 @@ button {
 
 .inputAmount {
 
+    img {
+        border-radius: 50%;
+    }
+
     :global .MuiInput-root::after {
         border-bottom: none !important;
     }
@@ -396,7 +400,7 @@ button {
     }
 }
 
-.smallTable{
+.smallTable {
     code {
         font-size: 0.7rem;
         display: block;