Add resizable history module, add sizes helper

src/components/Chain.tsx

@@ -0,0 +1,69 @@
+/**
+ * @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 Chain.ts
+ * @copyright SKALE Labs 2023-Present
+ */
+
+import ChainIcon from './ChainIcon'
+
+import { cls, cmn, dec } from '../core/css'
+import { getChainAlias } from '../core/metadata'
+import { SkaleNetwork, Size } from '../core/interfaces'
+
+export default function Chain(props: {
+  skaleNetwork: SkaleNetwork
+  chainName: string
+  className?: string
+  bold?: boolean
+  app?: string
+  size?: Size
+  decIcon?: boolean
+}) {
+  const size = props.size ?? 'sm'
+  return (
+    <div className={cls(cmn.flex, cmn.flexcv)}>
+      <ChainIcon
+        skaleNetwork={props.skaleNetwork}
+        chainName={props.chainName}
+        app={props.app}
+        size={props.decIcon ? dec(props.size) : props.size}
+      />
+      <p
+        className={cls(
+          cmn.p,
+          [cmn.p4, size === 'xs'],
+          [cmn.p3, size === 'sm'],
+          [cmn.p2, size === 'md'],
+          [cmn.p1, size === 'lg'],
+          [cmn.mleft5, size === 'xs'],
+          [cmn.mleft10, size === 'sm'],
+          [cmn.mleft10, size === 'md'],
+          [cmn.mleft15, size === 'lg'],
+          [cmn.p600, !props.bold],
+          [cmn.p700, props.bold],
+          cmn.cap,
+          cmn.pPrim
+        )}
+      >
+        {getChainAlias(props.skaleNetwork, props.chainName, props.app)}
+      </p>
+    </div>
+  )
+}

src/components/ChainsList.tsx

@@ -2,13 +2,13 @@ import React from 'react'
 import Accordion from '@mui/material/Accordion'
 import AccordionDetails from '@mui/material/AccordionDetails'
 import AccordionSummary from '@mui/material/AccordionSummary'
-import Typography from '@mui/material/Typography'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import Button from '@mui/material/Button'
 import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded'
 
 import ChainApps from './ChainApps'
 import ChainIcon from './ChainIcon'
+import Chain from './Chain'
 
 import { MetaportConfig } from '../core/interfaces'
 
@@ -68,36 +68,12 @@ export default function ChainsList(props: {
         >
           {props.chain ? (
             <div className={cls(cmn.flex, cmn.fullWidth, cmn.flexcv)}>
-              <div
-                className={cls(
-                  cmn.flex,
-                  cmn.flexc,
-                  [cmn.mri10, size === 'sm'],
-                  [cmn.mri15, size === 'md']
-                )}
-              >
-                <ChainIcon
-                  skaleNetwork={props.config.skaleNetwork}
-                  chainName={props.chain}
-                  size={size}
-                  app={props.app}
-                />
-              </div>
-              <p
-                className={cls(
-                  cmn.p,
-                  [cmn.p2, size === 'md'],
-                  [cmn.p3, size === 'sm'],
-                  [cmn.p700, size === 'md'],
-                  [cmn.p600, size === 'sm'],
-                  cmn.cap,
-                  cmn.pPrim,
-                  cmn.mri10,
-                  cmn.pWrap
-                )}
-              >
-                {getChainAlias(props.config.skaleNetwork, props.chain, props.app)}
-              </p>
+              <Chain
+                skaleNetwork={props.config.skaleNetwork}
+                chainName={props.chain}
+                size={size}
+                app={props.app}
+              />
               <div className={cls(cmn.flex, cmn.flexg)}></div>
               <div className={cls(cmn.flex, cmn.flexc)}>
                 {props.app ? (
@@ -139,7 +115,7 @@ export default function ChainsList(props: {
             style={{ marginLeft: '8px' }}
           >
             {schainNames.map((name) => (
-              <Typography key={name}>
+              <div key={name}>
                 <Button
                   color="secondary"
                   size="medium"
@@ -150,44 +126,15 @@ export default function ChainsList(props: {
                     className={cls(
                       cmn.flex,
                       cmn.flexcv,
+                      cmn.mleft10,
                       [cmn.mtop5, size === 'sm'],
                       [cmn.mbott5, size === 'sm'],
                       [cmn.mtop10, size === 'md'],
                       [cmn.mbott10, size === 'md'],
                       cmn.fullWidth
                     )}
                   >
-                    <div
-                      className={cls(
-                        cmn.flex,
-                        cmn.flexc,
-                        [cmn.mri10, size === 'sm'],
-                        [cmn.mri15, size === 'md'],
-                        cmn.mleft10,
-                        cmn.pPrim
-                      )}
-                    >
-                      <ChainIcon
-                        skaleNetwork={props.config.skaleNetwork}
-                        chainName={name}
-                        size={size}
-                      />
-                    </div>
-                    <p
-                      className={cls(
-                        cmn.flex,
-                        cmn.p,
-                        [cmn.p2, size === 'md'],
-                        [cmn.p3, size === 'sm'],
-                        [cmn.p700, size === 'md'],
-                        [cmn.p600, size === 'sm'],
-                        cmn.cap,
-                        cmn.pPrim,
-                        cmn.mri10
-                      )}
-                    >
-                      {getChainAlias(props.config.skaleNetwork, name)}
-                    </p>
+                    <Chain skaleNetwork={props.config.skaleNetwork} chainName={name} size={size} />
                     <div className={cls(cmn.flex, cmn.flexg)}></div>
                     <KeyboardArrowRightRoundedIcon className={cls(cmn.mri5, cmn.pPrim)} />
                   </div>
@@ -200,7 +147,7 @@ export default function ChainsList(props: {
                     size={size}
                   />
                 </div>
-              </Typography>
+              </div>
             ))}
           </div>
         </AccordionDetails>

src/components/CommunityPool.tsx

@@ -28,7 +28,6 @@ import { useAccount, useWalletClient, useSwitchNetwork } from 'wagmi'
 import Accordion from '@mui/material/Accordion'
 import AccordionSummary from '@mui/material/AccordionSummary'
 import AccordionDetails from '@mui/material/AccordionDetails'
-import Grid from '@mui/material/Grid'
 import TextField from '@mui/material/TextField'
 
 import SkPaper from './SkPaper'
@@ -217,70 +216,66 @@ export default function CommunityPool() {
                 />
               </div>
             </div>
-            <Grid container spacing={0} className={cmn.ptop20}>
-              <Grid className={cmn.mtop20s} item xs={12}>
-                <SkPaper gray className={cmn.mtop10}>
-                  <div className={cls(cmn.flex, cmn.flexcv)}>
-                    <div className={cls(cmn.flex, cmn.flexg)}>
-                      <TextField
-                        className={styles.inputAmount}
-                        type="number"
-                        variant="standard"
-                        placeholder="0.00"
-                        value={amount}
-                        onChange={handleAmountChange}
-                        disabled={!!loading}
-                      />
-                    </div>
-                    <p
-                      className={cls(
-                        cmn.p,
-                        cmn.p1,
-                        cmn.p700,
-                        cmn.pPrim,
-                        [cmn.pDisabled, loading],
-                        cmn.flex,
-                        cmn.mri20
-                      )}
-                    >
-                      ETH
-                    </p>
-                  </div>
-                </SkPaper>
-                <div className={cls(cmn.mtop10)}>
-                  <Button
-                    variant="contained"
-                    color="primary"
-                    size="medium"
-                    className={cls(styles.btnAction, cmn.mtop5)}
-                    onClick={rechargeCP}
-                    disabled={
-                      !!loading ||
-                      !cpData.accountBalance ||
-                      Number(amount) > Number(accountBalanceEther) ||
-                      amount === '' ||
-                      amount === '0' ||
-                      !amount ||
-                      !chainName
-                    }
-                  >
-                    {getRechargeBtnText()}
-                  </Button>
+            <SkPaper gray className={cls(cmn.mtop20)}>
+              <div className={cls(cmn.flex, cmn.flexcv)}>
+                <div className={cls(cmn.flex, cmn.flexg)}>
+                  <TextField
+                    className={styles.inputAmount}
+                    type="number"
+                    variant="standard"
+                    placeholder="0.00"
+                    value={amount}
+                    onChange={handleAmountChange}
+                    disabled={!!loading}
+                  />
                 </div>
-                <div className={cls(cmn.mtop5, cmn.mbott10)}>
-                  <Button
-                    variant="text"
-                    color="warning"
-                    size="small"
-                    className={cls(styles.btnAction, cmn.mtop5)}
-                    onClick={withdrawCP}
-                    disabled={!!loading || !chainName}
-                  >
-                    {getWithdrawBtnText()}
-                  </Button>
-                </div>
-              </Grid>
-            </Grid>
+                <p
+                  className={cls(
+                    cmn.p,
+                    cmn.p1,
+                    cmn.p700,
+                    cmn.pPrim,
+                    [cmn.pDisabled, loading],
+                    cmn.flex,
+                    cmn.mri20
+                  )}
+                >
+                  ETH
+                </p>
+              </div>
+            </SkPaper>
+            <div className={cls(cmn.mtop10)}>
+              <Button
+                variant="contained"
+                color="primary"
+                size="medium"
+                className={cls(styles.btnAction, cmn.mtop5)}
+                onClick={rechargeCP}
+                disabled={
+                  !!loading ||
+                  !cpData.accountBalance ||
+                  Number(amount) > Number(accountBalanceEther) ||
+                  amount === '' ||
+                  amount === '0' ||
+                  !amount ||
+                  !chainName
+                }
+              >
+                {getRechargeBtnText()}
+              </Button>
+            </div>
+            <div className={cls(cmn.mtop5, cmn.mbott10)}>
+              <Button
+                variant="text"
+                color="warning"
+                size="small"
+                className={cls(styles.btnAction, cmn.mtop5)}
+                onClick={withdrawCP}
+                disabled={!!loading || !chainName}
+              >
+                {getWithdrawBtnText()}
+              </Button>
+            </div>
           </SkPaper>
         </AccordionDetails>
       </Accordion>