Merge pull request #217 from skalenetwork/fix-eth-token-balance

Update chains display conditions, add sorting to tokens
skalenetwork · Nov 1, 2023 · 571ccd8 · 571ccd8
2 parents 4968d6c + ccb71e7
commit 571ccd8
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 21 deletions.
diff --git a/skale-network b/skale-network
diff --git a/src/components/Chain.tsx b/src/components/Chain.tsx
@@ -35,8 +35,10 @@ export default function Chain(props: {
   app?: string
   size?: Size
   decIcon?: boolean
+  prim?: boolean
 }) {
   const size = props.size ?? 'sm'
+  const prim = props.prim ?? true
   return (
     <div className={cls(cmn.flex, cmn.flexcv)}>
       <ChainIcon
@@ -59,7 +61,8 @@ export default function Chain(props: {
           [cmn.p600, !props.bold],
           [cmn.p700, props.bold],
           cmn.cap,
-          cmn.pPrim
+          [cmn.pPrim, prim],
+          [cmn.pSec, !prim]
         )}
       >
         {getChainAlias(props.skaleNetwork, props.chainName, props.app)}

diff --git a/src/components/ChainApps.tsx b/src/components/ChainApps.tsx
@@ -11,14 +11,17 @@ export default function ChainApps(props: {
   skaleNetwork: SkaleNetwork
   chainName: string
   handle?: (schainName: string, app?: string) => void
-  size?: 'sm' | 'md'
+  size?: 'sm' | 'md',
+  prim?: boolean
 }) {
   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'
+
   return (
     <div className={cls(styles.sk__chainApps, cmn.mri10, cmn.flex, cmn.flexcv)}>
       <div className={cls(cmn.mtop10, cmn.mbott10)}>
@@ -55,8 +58,8 @@ export default function ChainApps(props: {
                   cmn.p,
                   [cmn.p3, size === 'md'],
                   [cmn.p4, size === 'sm'],
-                  [cmn.pSec, size === 'sm'],
-                  [cmn.pPrim, size === 'md'],
+                  [cmn.pSec, !prim],
+                  [cmn.pPrim, prim],
                   cmn.p600,
                   cmn.mleft10
                 )}
@@ -66,8 +69,8 @@ export default function ChainApps(props: {
               <div className={cls(cmn.flex, cmn.flexg)}></div>
               <KeyboardArrowRightRoundedIcon
                 className={cls(
-                  [cmn.pSec, size === 'sm'],
-                  [cmn.pPrim, size === 'md'],
+                  [cmn.pSec, !prim],
+                  [cmn.pPrim, prim],
                   [styles.chainIconxs, size === 'sm'],
                   [styles.chainIcons, size === 'md']
                 )}

diff --git a/src/components/ChainsList.tsx b/src/components/ChainsList.tsx
@@ -4,7 +4,9 @@ import AccordionDetails from '@mui/material/AccordionDetails'
 import AccordionSummary from '@mui/material/AccordionSummary'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import Button from '@mui/material/Button'
+import Tooltip from '@mui/material/Tooltip'
 import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded'
+import MotionPhotosOffRoundedIcon from '@mui/icons-material/MotionPhotosOffRounded'
 
 import ChainApps from './ChainApps'
 import ChainIcon from './ChainIcon'
@@ -30,6 +32,7 @@ export default function ChainsList(props: {
   from?: boolean
   disabled?: boolean
   size?: 'sm' | 'md'
+  destChains?: string[]
 }) {
   const handleChange = (panel: string) => (_: React.SyntheticEvent, isExpanded: boolean) => {
     props.setExpanded(isExpanded ? panel : false)
@@ -134,9 +137,32 @@ export default function ChainsList(props: {
                       cmn.fullWidth
                     )}
                   >
-                    <Chain skaleNetwork={props.config.skaleNetwork} chainName={name} size={size} />
+                    <Chain
+                      skaleNetwork={props.config.skaleNetwork}
+                      chainName={name}
+                      size={size}
+                      bold={props.destChains?.includes(name)}
+                      prim={props.destChains?.includes(name)}
+                    />
                     <div className={cls(cmn.flex, cmn.flexg)}></div>
-                    <KeyboardArrowRightRoundedIcon className={cls(cmn.mri5, cmn.pPrim)} />
+                    {props.destChains && !props.destChains?.includes(name) ? (
+                      <Tooltip
+                        arrow
+                        title="Current token is not available on this chain."
+                        placement="top"
+                      >
+                        <MotionPhotosOffRoundedIcon
+                          className={cls(cmn.mri10, cmn.pSec, styles.chainIconxs)}
+                        />
+                      </Tooltip>
+                    ) : null}
+                    <KeyboardArrowRightRoundedIcon
+                      className={cls(
+                        cmn.mri5,
+                        [cmn.pPrim, props.destChains?.includes(name)],
+                        [cmn.pSec, !props.destChains?.includes(name)]
+                      )}
+                    />
                   </div>
                 </Button>
                 <div className={cls([cmn.mleft5, size === 'md'])}>
@@ -145,6 +171,7 @@ export default function ChainsList(props: {
                     chainName={name}
                     handle={handle}
                     size={size}
+                    prim={props.destChains?.includes(name)}
                   />
                 </div>
               </div>

diff --git a/src/components/Debug.tsx b/src/components/Debug.tsx
@@ -37,6 +37,7 @@ import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded'
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded'
 import ExpandRoundedIcon from '@mui/icons-material/ExpandRounded'
 
+import { useCPStore } from '../store/CommunityPoolStore'
 import { useMetaportStore } from '../store/MetaportStore'
 import { cls, cmn, styles } from '../core/css'
 import { ActionStateUpdate } from '../core/interfaces'
@@ -99,7 +100,7 @@ export default function Debug() {
 
   const { queue, enqueue, empty } = useQueue()
 
-  const { queue: queueAction, enqueue: enqueueAction, empty: emptyAction } = useQueue();
+  const { queue: queueAction, enqueue: enqueueAction, empty: emptyAction } = useQueue()
 
   const [expanded, setExpanded] = useState<boolean>(false)
 
@@ -114,12 +115,15 @@ export default function Debug() {
   const tokenContracts = useMetaportStore((state) => state.tokenContracts)
   const tokens = useMetaportStore((state) => state.tokens)
 
+  const cpData = useCPStore((state) => state.cpData)
+
   const getRows = () => [
     { name: 'chainName1', value: chainName1 },
     { name: 'chainName2', value: chainName2 },
     { name: 'token', value: JSON.stringify(token) },
     { name: 'tokenBalances', value: stringifyBigInt(tokenBalances) },
     { name: 'destTokenBalance', value: stringifyBigInt(destTokenBalance) },
+    { name: 'cpData', value: stringifyBigInt(cpData) },
     {
       name: 'tokenContracts',
       value:
@@ -137,7 +141,6 @@ export default function Debug() {
     window.addEventListener('metaport_actionStateUpdated', actionStateUpdated, false)
   }, [])
 
-
   function actionStateUpdated(e: CustomEvent) {
     const actionStateUpdate: ActionStateUpdate = e.detail
     enqueueAction({
@@ -172,7 +175,8 @@ export default function Debug() {
     tokenBalances,
     destTokenBalance,
     tokenContracts,
-    tokens
+    tokens,
+    cpData
   ])
 
   return (

diff --git a/src/components/TokenListSection.tsx b/src/components/TokenListSection.tsx
@@ -31,7 +31,7 @@ export default function TokenListSection(props: {
       >
         {props.type}
       </p>
-      {Object.keys(props.tokens).map((key, _) => (
+      {Object.keys(props.tokens).sort().map((key, _) => (
         <Button
           key={key}
           color="secondary"

diff --git a/src/components/WidgetBody.tsx b/src/components/WidgetBody.tsx
@@ -147,7 +147,8 @@ export function WidgetBody(props) {
             expanded={expandedTo}
             setExpanded={setExpandedTo}
             chain={chainName2}
-            chains={destChains}
+            chains={props.config.chains}
+            destChains={destChains}
             setChain={setChainName2}
             setApp={setAppName2}
             app={appName2}

diff --git a/src/core/constants.ts b/src/core/constants.ts
@@ -66,7 +66,7 @@ export const BASE_EXPLORER_URLS: { [skaleNetwork: string]: string } = {
 }
 
 export const MAINNET_WS_ENDPOINTS: { [skaleNetwork: string]: string } = {
-  mainnet: 'https://eth.llamarpc.com',
+  mainnet: 'wss://ethereum.publicnode.com',
   staging: 'wss://ethereum-goerli.publicnode.com',
   legacy: 'wss://ethereum-goerli.publicnode.com	',
   regression: 'wss://ethereum-goerli.publicnode.com	'

diff --git a/src/core/dataclasses/TokenData.ts b/src/core/dataclasses/TokenData.ts
@@ -22,19 +22,19 @@
  */
 
 import { DEFAULT_ERC20_DECIMALS } from '../constants'
-import { TokenMetadata, ConnectedChainMap } from '../interfaces'
+import { TokenMetadata, ConnectedChainMap, AddressType } from '../interfaces'
 import { TokenType } from './TokenType'
 
 export class TokenData {
-  address: string
+  address: AddressType
   keyname: string
   type: TokenType
   meta: TokenMetadata
   connections: ConnectedChainMap
   chain: string
 
   constructor(
-    address: string,
+    address: AddressType,
     type: TokenType,
     tokenKeyname: string,
     metadata: TokenMetadata,

diff --git a/src/core/interfaces/Tokens.ts b/src/core/interfaces/Tokens.ts
@@ -21,18 +21,21 @@
  * @copyright SKALE Labs 2022-Present
  */
 
+import { AddressType } from "."
+
+
 export interface EthToken {
   chains: ConnectedChainMap
 }
 
 export interface Token {
-  address?: string
+  address?: AddressType
   chains: ConnectedChainMap
 }
 
 export interface ConnectedChain {
   hub?: string
-  wrapper?: `0x${string}`
+  wrapper?: AddressType
   wrapsSFuel?: boolean
   clone?: boolean
 }

diff --git a/src/styles/styles.module.scss b/src/styles/styles.module.scss
@@ -403,6 +403,5 @@ button {
         max-width: 400px;
         white-space: nowrap;
         overflow: auto;
-        text-overflow: ellipsis;
     }
 }
+6 −0		metadata/mainnet/chains.json
+4 −0		metadata/mainnet/icons/green-giddy-denebola-motodex.svg