From 0f3ebd3c05987a22e4e6155ddcf8fe6c01e9fe63 Mon Sep 17 00:00:00 2001 From: Dmytro Date: Mon, 2 Oct 2023 12:28:55 +0100 Subject: [PATCH] Add resizable history module, add sizes helper --- src/components/Chain.tsx | 69 +++++++++ src/components/ChainsList.tsx | 75 ++-------- src/components/CommunityPool.tsx | 123 ++++++++-------- src/components/History.tsx | 186 +++++++++++++++++++++++++ src/components/HistorySection.tsx | 77 ++++++++++ src/components/MetaportProvider.tsx | 17 ++- src/components/SFuelWarning.tsx | 2 + src/components/Stepper/SkStepper.tsx | 6 +- src/components/TransactionsHistory.tsx | 173 ----------------------- src/components/TransferETA.tsx | 2 +- src/components/TransferETF.tsx | 2 +- src/components/WidgetBody.tsx | 2 +- src/components/WrappedTokens.tsx | 2 + src/core/constants.ts | 6 +- src/core/css.ts | 13 ++ src/core/interfaces/Config.ts | 1 + src/core/interfaces/index.ts | 3 + src/index.ts | 10 +- src/styles/cmn.module.scss | 6 +- 19 files changed, 454 insertions(+), 321 deletions(-) create mode 100644 src/components/Chain.tsx create mode 100644 src/components/History.tsx create mode 100644 src/components/HistorySection.tsx delete mode 100644 src/components/TransactionsHistory.tsx diff --git a/src/components/Chain.tsx b/src/components/Chain.tsx new file mode 100644 index 0000000..2ae10eb --- /dev/null +++ b/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 . + */ + +/** + * @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 ( +
+ +

+ {getChainAlias(props.skaleNetwork, props.chainName, props.app)} +

+
+ ) +} diff --git a/src/components/ChainsList.tsx b/src/components/ChainsList.tsx index 2bfc3c8..2facb75 100644 --- a/src/components/ChainsList.tsx +++ b/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 ? (
-
- -
-

- {getChainAlias(props.config.skaleNetwork, props.chain, props.app)} -

+
{props.app ? ( @@ -139,7 +115,7 @@ export default function ChainsList(props: { style={{ marginLeft: '8px' }} > {schainNames.map((name) => ( - +
@@ -200,7 +147,7 @@ export default function ChainsList(props: { size={size} />
- +
))} diff --git a/src/components/CommunityPool.tsx b/src/components/CommunityPool.tsx index 86186c3..214014a 100644 --- a/src/components/CommunityPool.tsx +++ b/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() { /> - - - -
-
- -
-

- ETH -

-
- -
- + +
+
+
-
- -
- - +

+ ETH +

+
+ +
+ +
+
+ +
diff --git a/src/components/History.tsx b/src/components/History.tsx new file mode 100644 index 0000000..b11aab2 --- /dev/null +++ b/src/components/History.tsx @@ -0,0 +1,186 @@ +/** + * @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 . + */ + +/** + * @file History.ts + * @copyright SKALE Labs 2023-Present + */ + +import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded' + +import TokenIcon from './TokenIcon' +import TransactionData from './TransactionData' +import SkPaper from './SkPaper' +import Chain from './Chain' + +import { useMetaportStore } from '../store/MetaportStore' +import { cls, cmn, styles } from '../core/css' + +import * as interfaces from '../core/interfaces' + +export default function History(props: { size?: interfaces.SimplifiedSize }) { + const transactionsHistory = useMetaportStore((state) => state.transactionsHistory) + const transfersHistory = useMetaportStore((state) => state.transfersHistory) + + const mpc = useMetaportStore((state) => state.mpc) + + const size = props.size ?? 'sm' + const network = mpc.config.skaleNetwork + + if (transactionsHistory.length === 0 && transfersHistory.length === 0) return + return ( +
+ {transactionsHistory.length !== 0 ? ( + +

+ Current transfer +

+ + {transactionsHistory.map((transactionData: interfaces.TransactionHistory) => ( + + ))} + + + ) : null} +
+ {transfersHistory.map((transfer: interfaces.TransferHistory, key: number) => ( + +
+
+ + + +
+
+ +
+
+ +
+

+ {transfer.amount} {transfer.tokenKeyname} +

+

+ •{' '} + {transfer.address.substring(0, 6) + + '...' + + transfer.address.substring(transfer.address.length - 4)} +

+
+
+ + + {transfer.transactions.map((transactionData: interfaces.TransactionHistory) => ( + + ))} + + + ))} +
+
+ ) +} diff --git a/src/components/HistorySection.tsx b/src/components/HistorySection.tsx new file mode 100644 index 0000000..118ea98 --- /dev/null +++ b/src/components/HistorySection.tsx @@ -0,0 +1,77 @@ +/** + * @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 . + */ + +/** + * @file HistorySection.ts + * @copyright SKALE Labs 2023-Present + */ + +import { Collapse } from '@mui/material' +import Button from '@mui/material/Button' + +import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded' +import CloseRoundedIcon from '@mui/icons-material/CloseRounded' + +import History from './History' + +import { useMetaportStore } from '../store/MetaportStore' +import { useCollapseStore } from '../store/Store' +import { cls, styles, cmn } from '../core/css' + +export default function TransactionsHistory() { + const transactionsHistory = useMetaportStore((state) => state.transactionsHistory) + const transfersHistory = useMetaportStore((state) => state.transfersHistory) + + const clearTransactionsHistory = useMetaportStore((state) => state.clearTransactionsHistory) + const expandedTH = useCollapseStore((state) => state.expandedTH) + const setExpandedTH = useCollapseStore((state) => state.setExpandedTH) + + function clearTransferHistory() { + clearTransactionsHistory() + setExpandedTH(false) + } + + if (transactionsHistory.length === 0 && transfersHistory.length === 0) return + return ( + +
+ + +
+ + + ) +} diff --git a/src/components/MetaportProvider.tsx b/src/components/MetaportProvider.tsx index d82327a..0e43de3 100644 --- a/src/components/MetaportProvider.tsx +++ b/src/components/MetaportProvider.tsx @@ -73,15 +73,20 @@ export default function MetaportProvider(props: { ] ) + const wallets = [ + enkryptWallet({ chains }), + injectedWallet({ chains }), + coinbaseWallet({ chains, appName: 'SKALE Metaport' }) + ] + + if (props.config.projectId) { + wallets.push(metaMaskWallet({ chains, projectId: props.config.projectId })) + } + const connectors = connectorsForWallets([ { groupName: 'Supported Wallets', - wallets: [ - metaMaskWallet({ chains, projectId: '' }), - enkryptWallet({ chains }), - injectedWallet({ chains }), - coinbaseWallet({ chains, appName: 'SKALE Metaport' }) - ] + wallets: wallets } ]) diff --git a/src/components/SFuelWarning.tsx b/src/components/SFuelWarning.tsx index a2af73f..c7eb653 100644 --- a/src/components/SFuelWarning.tsx +++ b/src/components/SFuelWarning.tsx @@ -30,6 +30,7 @@ import Button from '@mui/material/Button' import LoadingButton from '@mui/lab/LoadingButton' import { Collapse } from '@mui/material' import LinearProgress from '@mui/material/LinearProgress' +import ArrowOutwardRoundedIcon from '@mui/icons-material/ArrowOutwardRounded' import { BALANCE_UPDATE_INTERVAL_MS, MAINNET_CHAIN_NAME, SFUEL_TEXT } from '../core/constants' import { Station } from '../core/sfuel' @@ -205,6 +206,7 @@ export default function SFuelWarning(props: {}) { {mining ? ( } loadingPosition="start" size="small" variant="contained" diff --git a/src/components/Stepper/SkStepper.tsx b/src/components/Stepper/SkStepper.tsx index 1dca463..0c3f916 100644 --- a/src/components/Stepper/SkStepper.tsx +++ b/src/components/Stepper/SkStepper.tsx @@ -11,6 +11,7 @@ import LoadingButton from '@mui/lab/LoadingButton' import Collapse from '@mui/material/Collapse' import SettingsBackupRestoreRoundedIcon from '@mui/icons-material/SettingsBackupRestoreRounded' +import ArrowOutwardRoundedIcon from '@mui/icons-material/ArrowOutwardRounded' import { getRandom } from '../../core/helper' import { getChainAlias } from '../../core/metadata' @@ -63,8 +64,8 @@ export default function SkStepper(props: { skaleNetwork: SkaleNetwork }) { {stepsMetadata.map((step, i) => ( -
-
+
+

{step.headline}

} loadingPosition="start" variant="contained" color="primary" diff --git a/src/components/TransactionsHistory.tsx b/src/components/TransactionsHistory.tsx deleted file mode 100644 index 579e418..0000000 --- a/src/components/TransactionsHistory.tsx +++ /dev/null @@ -1,173 +0,0 @@ -/** - * @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 . - */ - -/** - * @file TransactionsHistory.ts - * @copyright SKALE Labs 2023-Present - */ - -import { Collapse } from '@mui/material' -import Button from '@mui/material/Button' - -import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded' -import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded' -import CloseRoundedIcon from '@mui/icons-material/CloseRounded' - -import TokenIcon from './TokenIcon' -import ChainIcon from './ChainIcon' -import TransactionData from './TransactionData' -import SkPaper from './SkPaper' - -import { useMetaportStore } from '../store/MetaportStore' -import { useCollapseStore } from '../store/Store' -import { cls, styles, cmn } from '../core/css' - -import { getChainAlias } from '../core/metadata' - -import * as interfaces from '../core/interfaces' - -export default function TransactionsHistory() { - const transactionsHistory = useMetaportStore((state) => state.transactionsHistory) - const transfersHistory = useMetaportStore((state) => state.transfersHistory) - - const clearTransactionsHistory = useMetaportStore((state) => state.clearTransactionsHistory) - const mpc = useMetaportStore((state) => state.mpc) - const expandedTH = useCollapseStore((state) => state.expandedTH) - const setExpandedTH = useCollapseStore((state) => state.setExpandedTH) - - function clearTransferHistory() { - clearTransactionsHistory() - setExpandedTH(false) - } - - if (transactionsHistory.length === 0 && transfersHistory.length === 0) return - return ( - -
- - -
- {transactionsHistory.length !== 0 ? ( - -

- Current transfer -

- - {transactionsHistory.map((transactionData: any) => ( - - ))} - - - ) : null} -
- {transfersHistory.map((transferHistory: interfaces.TransferHistory, key: number) => ( - -
- -

- {getChainAlias(mpc.config.skaleNetwork, transferHistory.chainName1)} -

- - -

- {getChainAlias(mpc.config.skaleNetwork, transferHistory.chainName2)} -

-
-
-
- -
-

- {transferHistory.amount} {transferHistory.tokenKeyname} -

-

- •{' '} - {transferHistory.address.substring(0, 6) + - '...' + - transferHistory.address.substring(transferHistory.address.length - 4)} -

-
- - {transferHistory.transactions.map((transactionData: any) => ( - - ))} - - - ))} -
- - ) -} diff --git a/src/components/TransferETA.tsx b/src/components/TransferETA.tsx index 71d4885..4adb897 100644 --- a/src/components/TransferETA.tsx +++ b/src/components/TransferETA.tsx @@ -36,7 +36,7 @@ export default function TransferETA(props: { token: TokenData; toChain: string } return (
-
+

ETA

diff --git a/src/components/TransferETF.tsx b/src/components/TransferETF.tsx index f19a309..df1a97b 100644 --- a/src/components/TransferETF.tsx +++ b/src/components/TransferETF.tsx @@ -35,7 +35,7 @@ export default function TransferETF(props: { fromChain: string }) { return (
-
+

Estimated Transaction Fee

diff --git a/src/components/WidgetBody.tsx b/src/components/WidgetBody.tsx index dedaf37..34b2f10 100644 --- a/src/components/WidgetBody.tsx +++ b/src/components/WidgetBody.tsx @@ -19,7 +19,7 @@ import CommunityPool from './CommunityPool' import SFuelWarning from './SFuelWarning' import SkConnect from './SkConnect' import WrappedTokens from './WrappedTokens' -import TransactionsHistory from './TransactionsHistory' +import TransactionsHistory from './HistorySection' import HistoryButton from './HistoryButton' import { cls, cmn } from '../core/css' diff --git a/src/components/WrappedTokens.tsx b/src/components/WrappedTokens.tsx index fb26b7a..8bc8fe4 100644 --- a/src/components/WrappedTokens.tsx +++ b/src/components/WrappedTokens.tsx @@ -32,6 +32,7 @@ import LoadingButton from '@mui/lab/LoadingButton' import Button from '@mui/material/Button' import ExpandMoreIcon from '@mui/icons-material/ExpandMore' import ErrorIcon from '@mui/icons-material/Error' +import ArrowOutwardRoundedIcon from '@mui/icons-material/ArrowOutwardRounded' import SkPaper from './SkPaper' import TokenBalance from './TokenBalance' @@ -178,6 +179,7 @@ export default function WrappedTokens() { {loading ? ( } loadingPosition="start" variant="contained" color="primary" diff --git a/src/core/constants.ts b/src/core/constants.ts index 563a53d..9641de5 100644 --- a/src/core/constants.ts +++ b/src/core/constants.ts @@ -66,9 +66,9 @@ export const BASE_EXPLORER_URLS: { [skaleNetwork: string]: string } = { export const MAINNET_WS_ENDPOINTS: { [skaleNetwork: string]: string } = { mainnet: 'https://eth.llamarpc.com', - staging: 'wss://goerli-light.eth.linkpool.io/ws', - legacy: 'wss://goerli-light.eth.linkpool.io/ws', - regression: 'wss://goerli-light.eth.linkpool.io/ws' + staging: 'wss://ethereum-goerli.publicnode.com', + legacy: 'wss://ethereum-goerli.publicnode.com ', + regression: 'wss://ethereum-goerli.publicnode.com ' } // ETA constants diff --git a/src/core/css.ts b/src/core/css.ts index b4c3c07..25f6b53 100644 --- a/src/core/css.ts +++ b/src/core/css.ts @@ -21,6 +21,7 @@ * @copyright SKALE Labs 2023-Present */ +import { Size } from './interfaces' import styles from '../styles/styles.module.scss' import cmn from '../styles/cmn.module.scss' @@ -33,3 +34,15 @@ export function cls(...args: any): string { }) return filteredArgs.join(' ') } + +const sizes: Size[] = ['xs', 'sm', 'md', 'lg'] + +export function inc(currentSize: Size): Size { + const currentIndex = sizes.indexOf(currentSize) + return currentIndex < sizes.length - 1 ? sizes[currentIndex + 1] : currentSize +} + +export function dec(currentSize: Size): Size { + const currentIndex = sizes.indexOf(currentSize) + return currentIndex > 0 ? sizes[currentIndex - 1] : currentSize +} diff --git a/src/core/interfaces/Config.ts b/src/core/interfaces/Config.ts index 2e6a7d8..9f15d77 100644 --- a/src/core/interfaces/Config.ts +++ b/src/core/interfaces/Config.ts @@ -33,6 +33,7 @@ export interface MetaportConfig { skaleNetwork: SkaleNetwork mainnetEndpoint?: string + projectId?: string chains: string[] tokens: TokenMetadataMap diff --git a/src/core/interfaces/index.ts b/src/core/interfaces/index.ts index b64abb8..df24428 100644 --- a/src/core/interfaces/index.ts +++ b/src/core/interfaces/index.ts @@ -35,3 +35,6 @@ export * from './ActionStateUpdate' export * from './ActionState' export type AddressType = `0x${string}` + +export type Size = 'xs' | 'sm' | 'md' | 'lg' +export type SimplifiedSize = 'sm' | 'md' diff --git a/src/index.ts b/src/index.ts index 1b5ab17..86749dd 100644 --- a/src/index.ts +++ b/src/index.ts @@ -29,8 +29,7 @@ import ErrorMessage from './components/ErrorMessage' import CommunityPool from './components/CommunityPool' import SFuelWarning from './components/SFuelWarning' import WrappedTokens from './components/WrappedTokens' -import HistoryButton from './components/HistoryButton' -import TransactionsHistory from './components/TransactionsHistory' +import History from './components/History' import { CHAINS_META, getChainAlias } from './core/metadata' import { cls, styles, cmn } from './core/css' @@ -42,6 +41,7 @@ import { toWei, fromWei } from './core/convertation' import { getWidgetTheme as getMetaportTheme } from './core/themes' import { useAccount as useWagmiAccount } from 'wagmi' +import { ConnectButton as RainbowConnectButton } from '@rainbow-me/rainbowkit' import { PROXY_ENDPOINTS } from './core/network' @@ -67,8 +67,7 @@ export { CommunityPool, SFuelWarning, WrappedTokens, - TransactionsHistory, - HistoryButton, + History, cls, styles, cmn, @@ -82,5 +81,6 @@ export { BASE_EXPLORER_URLS, CHAINS_META, chainBg, - getChainAlias + getChainAlias, + RainbowConnectButton } diff --git a/src/styles/cmn.module.scss b/src/styles/cmn.module.scss index ff6b1ba..50a7023 100644 --- a/src/styles/cmn.module.scss +++ b/src/styles/cmn.module.scss @@ -22,7 +22,7 @@ flex-grow: 1; } -.flexRow { +.flexw { flex-direction: row; flex-wrap: wrap; } @@ -157,6 +157,10 @@ padding-top: 15px !important; } +.ptop25 { + padding-top: 25px !important; +} + .nop { padding: 0 !important; }