Add max button, minor ui changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skalenetwork/metaport",
-  "version": "3.0.1",
+  "version": "3.2.0",
   "description": "SKALE Metaport Widget",
   "keywords": [
     "skale",
@@ -80,13 +80,13 @@
     "@mui/icons-material": "^5.15.6",
     "@mui/lab": "^5.0.0-alpha.162",
     "@mui/material": "^5.15.6",
-    "@rainbow-me/rainbowkit": "^2.1.5",
+    "@rainbow-me/rainbowkit": "^2.2.1",
     "@skalenetwork/ima-js": "2.0.2-develop.0",
     "@tanstack/react-query": "^5.54.1",
     "coingecko-api-v3": "^0.0.29",
     "react-jazzicon": "^1.0.4",
-    "viem": "2.21.1",
-    "wagmi": "^2.12.8",
+    "viem": "2.21.54",
+    "wagmi": "^2.13.3",
     "zustand": "^4.5.0"
   },
   "peerDependencies": {
@@ -101,4 +101,4 @@
       "prettier -w"
     ]
   }
-}
+}

src/components/AmountInput.tsx

@@ -2,8 +2,12 @@ import React from 'react'
 import { useAccount } from 'wagmi'
 
 import TextField from '@mui/material/TextField'
+import { Button } from '@mui/material'
 
 import { cls, cmn, styles } from '../core/css'
+import { formatBalance, toWei } from '../core/convertation'
+import { SFUEL_RESERVE_AMOUNT } from '../core/constants'
+import { TokenType } from '../core/dataclasses'
 
 import TokenList from './TokenList'
 import { useMetaportStore } from '../store/MetaportStore'
@@ -17,6 +21,11 @@ export default function AmountInput() {
   const amount = useMetaportStore((state) => state.amount)
   const expandedTokens = useCollapseStore((state) => state.expandedTokens)
 
+  const tokenBalances = useMetaportStore((state) => state.tokenBalances)
+  const token = useMetaportStore((state) => state.token)
+
+  const maxAmount = tokenBalances[token?.keyname]
+
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (parseFloat(event.target.value) < 0) {
       setAmount('', address)
@@ -32,6 +41,16 @@ export default function AmountInput() {
     setAmount(event.target.value, address)
   }
 
+  const setMaxAmount = () => {
+    let maxAmountWei: bigint = maxAmount
+    if (token.type === TokenType.eth) {
+      const reserveAmountEth = toWei(SFUEL_RESERVE_AMOUNT.toString(), token.meta.decimals)
+      maxAmountWei = maxAmount - reserveAmountEth
+    }
+    const balanceEther = formatBalance(maxAmountWei, token.meta.decimals)
+    setAmount(balanceEther, address)
+  }
+
   return (
     <div className={cls(cmn.flex, styles.inputAmount)}>
       {expandedTokens ? null : (
@@ -45,6 +64,14 @@ export default function AmountInput() {
             disabled={transferInProgress || currentStep !== 0}
             style={{ width: '100%' }}
           />
+          <Button
+            size="small"
+            disabled={transferInProgress || currentStep !== 0 || maxAmount === 0n}
+            className={cls(styles.paperGrey, styles.btnXs, cmn.flex, cmn.flexcv, cmn.p5)}
+            onClick={setMaxAmount}
+          >
+            MAX
+          </Button>
         </div>
       )}
       <div className={cls([cmn.fullWidth, expandedTokens])}>

src/components/Chain.tsx

@@ -56,8 +56,8 @@ export default function Chain(props: {
           [cmn.p1, size === 'lg'],
           [cmn.mleft5, size === 'xs'],
           [cmn.mleft10, size === 'sm'],
-          [cmn.mleft10, size === 'md'],
-          [cmn.mleft15, size === 'lg'],
+          [cmn.mleft15, size === 'md'],
+          [cmn.mleft20, size === 'lg'],
           [cmn.p600, !props.bold],
           [cmn.p700, props.bold],
           cmn.cap,

src/components/ChainsList.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import Accordion from '@mui/material/Accordion'
 import AccordionDetails from '@mui/material/AccordionDetails'
 import AccordionSummary from '@mui/material/AccordionSummary'
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import ExpandMoreRoundedIcon from '@mui/icons-material/ExpandMoreRounded'
 import Button from '@mui/material/Button'
 import Tooltip from '@mui/material/Tooltip'
 import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded'
@@ -64,7 +64,7 @@ export default function ChainsList(props: {
         elevation={0}
       >
         <AccordionSummary
-          expandIcon={<ExpandMoreIcon />}
+          expandIcon={<ExpandMoreRoundedIcon />}
           aria-controls="panel1bh-content"
           id="panel1bh-header"
           className={styles.accordionSummary}

src/components/CommunityPool.tsx

@@ -35,7 +35,7 @@ import TokenBalance from './TokenBalance'
 
 import Button from '@mui/material/Button'
 
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import ExpandMoreRoundedIcon from '@mui/icons-material/ExpandMoreRounded'
 
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'
 import ErrorIcon from '@mui/icons-material/Error'
@@ -181,7 +181,7 @@ export default function CommunityPool() {
       >
         <AccordionSummary
           className={cls(styles.accordionSummary, styles.accordionSm)}
-          expandIcon={<ExpandMoreIcon />}
+          expandIcon={<ExpandMoreRoundedIcon />}
           aria-controls="panel1a-content"
           id="panel1a-header"
         >

src/components/ErrorMessage.tsx

@@ -15,7 +15,7 @@ import SentimentDissatisfiedRoundedIcon from '@mui/icons-material/SentimentDissa
 import ErrorRoundedIcon from '@mui/icons-material/ErrorRounded'
 import HourglassTopRoundedIcon from '@mui/icons-material/HourglassTopRounded'
 import CrisisAlertRoundedIcon from '@mui/icons-material/CrisisAlertRounded'
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import ExpandMoreRoundedIcon from '@mui/icons-material/ExpandMoreRounded'
 import HourglassBottomRoundedIcon from '@mui/icons-material/HourglassBottomRounded'
 import AvTimerRoundedIcon from '@mui/icons-material/AvTimerRounded'
 import RestartAltRoundedIcon from '@mui/icons-material/RestartAltRounded'
@@ -129,7 +129,7 @@ export default function Error(props: { errorMessage: ErrorMessage }) {
       <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
         <AccordionSummary
           className={cls(styles.accordionSummarySm, styles.accordionSm)}
-          expandIcon={<ExpandMoreIcon />}
+          expandIcon={<ExpandMoreRoundedIcon />}
           aria-controls="panel1a-content"
           id="panel1a-header"
         >

src/components/HistoryButton.tsx

@@ -23,7 +23,7 @@
 
 import Button from '@mui/material/Button'
 
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import ExpandMoreRoundedIcon from '@mui/icons-material/ExpandMoreRounded'
 import HistoryRoundedIcon from '@mui/icons-material/HistoryRounded'
 
 import { useMetaportStore } from '../store/MetaportStore'
@@ -52,7 +52,7 @@ export default function TransactionsHistory() {
           <HistoryRoundedIcon className={styles.chainIconxs} />
         </div>
         History ({totalCount})
-        <ExpandMoreIcon className={cls(styles.chainIconxs, [cmn.rotate180, expandedTH])} />
+        <ExpandMoreRoundedIcon className={cls(styles.chainIconxs, [cmn.rotate180, expandedTH])} />
       </Button>
     </div>
   )

src/components/SkConnect.tsx

@@ -24,7 +24,7 @@ import { ConnectButton } from '@rainbow-me/rainbowkit'
 import Jazzicon, { jsNumberForAddress } from 'react-jazzicon'
 
 import Button from '@mui/material/Button'
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import ExpandMoreRoundedIcon from '@mui/icons-material/ExpandMoreRounded'
 
 import { cls, cmn, styles } from '../core/css'
 
@@ -104,7 +104,7 @@ export default function SkConnect() {
                         <Jazzicon diameter={16} seed={jsNumberForAddress(account.address)} />
                       </div>
                       {account.displayName}
-                      <ExpandMoreIcon className={styles.chainIconxs} />
+                      <ExpandMoreRoundedIcon className={styles.chainIconxs} />
                     </Button>
                   </div>
                 </div>

src/components/SkPaper.tsx

@@ -28,7 +28,7 @@ import { useUIStore } from '../store/Store'
 
 export default function SkPaper(props: {
   className?: string
-  children?: ReactElement | ReactElement[]
+  children?: ReactElement | ReactElement[] | undefined | null
   background?: string
   gray?: boolean
   rounded?: boolean

src/components/TokenBalance.tsx

@@ -1,17 +1,5 @@
-import { formatUnits } from 'ethers'
 import { cls, cmn } from '../core/css'
-import { DEFAULT_ERC20_DECIMALS } from '../core/constants'
-
-function formatBalance(balance: bigint, decimals?: string): string {
-  const tokenDecimals = decimals ?? DEFAULT_ERC20_DECIMALS
-  return formatUnits(balance, parseInt(tokenDecimals))
-}
-
-function truncateDecimals(input: string, numDecimals: number): string {
-  const delimiter = input.includes(',') ? ',' : '.'
-  const [integerPart, decimalPart = ''] = input.split(delimiter)
-  return `${integerPart}${delimiter}${decimalPart.slice(0, numDecimals)}`
-}
+import { formatBalance, truncateDecimals } from '../core/convertation'
 
 export default function TokenBalance(props: {
   balance: bigint

src/components/TokenList.tsx

@@ -7,7 +7,7 @@ import Accordion from '@mui/material/Accordion'
 import AccordionDetails from '@mui/material/AccordionDetails'
 import AccordionSummary from '@mui/material/AccordionSummary'
 
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import ExpandMoreRoundedIcon from '@mui/icons-material/ExpandMoreRounded'
 
 import { getAvailableTokensTotal, getDefaultToken } from '../core/tokens/helper'
 
@@ -76,7 +76,7 @@ export default function TokenList() {
       className={cmn.fullWidth}
     >
       <AccordionSummary
-        expandIcon={<ExpandMoreIcon />}
+        expandIcon={<ExpandMoreRoundedIcon />}
         aria-controls="panel1bh-content"
         id="panel1bh-header"
         className={styles.accordionSummaryTokens}

src/components/WidgetBody.tsx

@@ -79,7 +79,7 @@ export function WidgetBody(props) {
 
   const sourceBg = theme.vibrant ? chainBg(mpc.config.skaleNetwork, chainName1, appName1) : GRAY_BG
   const destBg = theme.vibrant ? chainBg(mpc.config.skaleNetwork, chainName2, appName2) : GRAY_BG
-  const overlayBg = theme.vibrant ? 'rgb(0 0 0 / 30%)' : 'transparent'
+  const overlayBg = theme.vibrant ? 'rgb(0 0 0 / 40%)' : 'transparent'
 
   return (
     <div>

src/components/WrappedTokens.tsx

@@ -30,7 +30,7 @@ import AccordionSummary from '@mui/material/AccordionSummary'
 import AccordionDetails from '@mui/material/AccordionDetails'
 import LoadingButton from '@mui/lab/LoadingButton'
 import Button from '@mui/material/Button'
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import ExpandMoreRoundedIcon from '@mui/icons-material/ExpandMoreRounded'
 import ErrorIcon from '@mui/icons-material/Error'
 import ArrowOutwardRoundedIcon from '@mui/icons-material/ArrowOutwardRounded'
 
@@ -116,7 +116,7 @@ export default function WrappedTokens() {
       >
         <AccordionSummary
           className={cls(styles.accordionSummary, styles.accordionSm)}
-          expandIcon={<ExpandMoreIcon />}
+          expandIcon={<ExpandMoreRoundedIcon />}
           aria-controls="panel1a-content"
           id="panel1a-header"
         >

src/core/convertation.ts

@@ -22,6 +22,7 @@
  */
 
 import { formatUnits, parseUnits, BigNumberish } from 'ethers'
+import { DEFAULT_ERC20_DECIMALS } from './constants'
 
 export function toWei(value: string, decimals: string): bigint {
   return parseUnits(value, parseInt(decimals as string))
@@ -30,3 +31,14 @@ export function toWei(value: string, decimals: string): bigint {
 export function fromWei(value: BigNumberish, decimals: string): string {
   return formatUnits(value, parseInt(decimals as string))
 }
+
+export function formatBalance(balance: bigint, decimals?: string): string {
+  const tokenDecimals = decimals ?? DEFAULT_ERC20_DECIMALS
+  return formatUnits(balance, parseInt(tokenDecimals))
+}
+
+export function truncateDecimals(input: string, numDecimals: number): string {
+  const delimiter = input.includes(',') ? ',' : '.'
+  const [integerPart, decimalPart = ''] = input.split(delimiter)
+  return `${integerPart}${delimiter}${decimalPart.slice(0, numDecimals)}`
+}

src/index.ts

@@ -45,7 +45,6 @@ import { ERC_ABIS } from './core/contracts'
 import { sendTransaction } from './core/transactions'
 import { Station, StationData } from './core/sfuel'
 
-
 import { getWidgetTheme as getMetaportTheme } from './core/themes'
 
 import {

src/styles/styles.module.scss

@@ -317,6 +317,9 @@ button {
     letter-spacing: 0.02857em;
 }
 
+.btnXs {
+    min-width: 46px;
+}
 
 @keyframes resize {