diff --git a/src/Router.tsx b/src/Router.tsx
index d5ee23c..bc0f985 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -2,23 +2,27 @@ import './App.scss'
import { useState, useEffect } from 'react'
import { Helmet } from 'react-helmet'
-import { useLocation } from 'react-router-dom'
-import { Routes, Route } from 'react-router-dom'
+import { useLocation, Routes, Route } from 'react-router-dom'
import { useMetaportStore, PROXY_ENDPOINTS, type MetaportState } from '@skalenetwork/metaport'
-import Bridge from './components/Bridge'
-import Faq from './components/Faq'
-import Terms from './components/Terms'
-import Network from './components/Network'
-import Schain from './components/Schain'
-import Stats from './components/Stats'
-import Apps from './components/Apps'
+import Bridge from './pages/Bridge'
+import Faq from './pages/Faq'
+import Terms from './pages/Terms'
+import Network from './pages/Chains'
+import Schain from './pages/Schain'
+import Stats from './pages/Stats'
+import Apps from './pages/Apps'
import App from './components/App'
-import History from './components/History'
-import Portfolio from './components/Portfolio'
-import Admin from './components/Admin'
+import History from './pages/History'
+import Portfolio from './pages/Portfolio'
+import Admin from './pages/Admin'
+import Start from './pages/Start'
+import TermsModal from './components/TermsModal'
import { getHistoryFromStorage, setHistoryToStorage } from './core/transferHistory'
+import { BRIDGE_PAGES } from './core/constants'
+import { pricingLaunchTsReached } from './core/paymaster'
+
// import chainsJson from './chainsJson.json';
export default function Router() {
@@ -26,6 +30,7 @@ export default function Router() {
const currentUrl = `${window.location.origin}${location.pathname}${location.search}`
const [schains, setSchains] = useState([])
+ const [termsAccepted, setTermsAccepted] = useState(false)
const mpc = useMetaportStore((state: MetaportState) => state.mpc)
const transfersHistory = useMetaportStore((state) => state.transfersHistory)
@@ -53,13 +58,26 @@ export default function Router() {
setSchains(schains)
}
+ function isBridgePage(): boolean {
+ return BRIDGE_PAGES.some(
+ (pathname) => location.pathname === pathname || location.pathname.includes(pathname)
+ )
+ }
+
+ if (!termsAccepted && isBridgePage()) {
+ return (
+
-
@@ -83,9 +101,11 @@ export default function Router() {
-
+ {pricingLaunchTsReached(mpc.config.skaleNetwork) ? (
+
+
+ ) : null}
)
diff --git a/src/SkBottomNavigation.tsx b/src/SkBottomNavigation.tsx
index 587e2c8..c2e3af6 100644
--- a/src/SkBottomNavigation.tsx
+++ b/src/SkBottomNavigation.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import { useState, useEffect } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import Box from '@mui/material/Box'
@@ -9,7 +9,7 @@ import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined'
import AccountBalanceWalletOutlinedIcon from '@mui/icons-material/AccountBalanceWalletOutlined'
export default function SkBottomNavigation() {
- const [value, setValue] = React.useState(0)
+ const [value, setValue] = useState(0)
const navigate = useNavigate()
const location = useLocation()
diff --git a/src/SkDrawer.tsx b/src/SkDrawer.tsx
index 83315a1..91d84cd 100644
--- a/src/SkDrawer.tsx
+++ b/src/SkDrawer.tsx
@@ -1,5 +1,5 @@
-import { Link, useLocation } from 'react-router-dom'
import { cls, cmn } from '@skalenetwork/metaport'
+import { useLocation, Link } from 'react-router-dom'
import Box from '@mui/material/Box'
@@ -13,7 +13,6 @@ import ListItemIcon from '@mui/material/ListItemIcon'
import ListItemText from '@mui/material/ListItemText'
import SwapHorizontalCircleOutlinedIcon from '@mui/icons-material/SwapHorizontalCircleOutlined'
-import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined'
import PublicOutlinedIcon from '@mui/icons-material/PublicOutlined'
import HistoryIcon from '@mui/icons-material/History'
import InsertChartOutlinedIcon from '@mui/icons-material/InsertChartOutlined'
@@ -21,9 +20,11 @@ import InsertChartOutlinedIcon from '@mui/icons-material/InsertChartOutlined'
// import WalletOutlinedIcon from '@mui/icons-material/WalletOutlined'
import ArrowOutwardRoundedIcon from '@mui/icons-material/ArrowOutwardRounded'
import DonutLargeRoundedIcon from '@mui/icons-material/DonutLargeRounded'
+import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined'
+
import { DUNE_SKALE_URL } from './core/constants'
-const drawerWidth = 240
+const drawerWidth = 220
export default function SkDrawer() {
const location = useLocation()
@@ -42,13 +43,27 @@ export default function SkDrawer() {
>
-
)
diff --git a/src/components/ChainCategories.tsx b/src/components/ChainCategories.tsx
index eb2c1aa..4919d6a 100644
--- a/src/components/ChainCategories.tsx
+++ b/src/components/ChainCategories.tsx
@@ -29,19 +29,29 @@ import { Link } from 'react-router-dom'
export default function ChainCategories(props: {
category: string | string[] | undefined
- className?: string
+ alias: string
}) {
if (!props.category) return
return (
- Bridge
Bridge
+-
+
Network
-
@@ -103,7 +118,9 @@ export default function SkDrawer() {
+
+
+
+
+
+ )
+}
diff --git a/src/components/AccordionSection.tsx b/src/components/AccordionSection.tsx
index eb60916..ae05995 100644
--- a/src/components/AccordionSection.tsx
+++ b/src/components/AccordionSection.tsx
@@ -35,12 +35,13 @@ export default function AccordionSection(props: {
expanded: string | false
panel: string
title: string
+ subtitle?: string
children: ReactElement | ReactElement[]
icon?: ReactElement
className?: string
}) {
return (
-
+ {props.icon ? (
+
+
+ {props.icon}
+
+ ) : null}
+ {props.title}
+
+
props.handleChange(props.panel)}
className={cls(cmn.fullWidth, cmn.flex, cmn.pleft, cmn.bordRad)}
@@ -52,6 +53,7 @@ export default function AccordionSection(props: {
) : null}
-
-
- {props.title}
+{props.subtitle}
{props.expanded === props.panel ? (- {getChainAlias(props.skaleNetwork, props.schain[0], undefined, true)} -
-
-
-
+
+
+
-
+
+
+
+
+ |
+
+
+
+
+ {props.alias}
+
+
{isString(props.category) ? (
-
+
+
+
+
+ )
+}
diff --git a/src/components/CopySurface.tsx b/src/components/CopySurface.tsx
index 8a1a406..6d80ae1 100644
--- a/src/components/CopySurface.tsx
+++ b/src/components/CopySurface.tsx
@@ -59,7 +59,7 @@ export default function CopySurface(props: {
+
+ Connect your wallet to continue
+
+
+
+
+
+ {({ openConnectModal }) => {
+ return (
+
+ )
+ }}
+
+
+
+
{props.tokenMetadata ? (
diff --git a/src/components/Faq/index.ts b/src/components/Faq/index.ts
deleted file mode 100644
index 70d0a8d..0000000
--- a/src/components/Faq/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Faq'
diff --git a/src/components/FaqAccordion/FaqAccordion.tsx b/src/components/FaqAccordion.tsx
similarity index 94%
rename from src/components/FaqAccordion/FaqAccordion.tsx
rename to src/components/FaqAccordion.tsx
index 42f73ef..f15bd1c 100644
--- a/src/components/FaqAccordion/FaqAccordion.tsx
+++ b/src/components/FaqAccordion.tsx
@@ -24,8 +24,8 @@
import { useState } from 'react'
import { cls, cmn, SkPaper } from '@skalenetwork/metaport'
-import AccordionSection from '../AccordionSection'
-import { FAQ } from '../../core/constants'
+import AccordionSection from './AccordionSection'
+import { FAQ } from '../core/constants'
export default function FaqAccordion() {
const [expanded, setExpanded] = useState(false)
diff --git a/src/components/FaqAccordion/index.ts b/src/components/FaqAccordion/index.ts
deleted file mode 100644
index be3051e..0000000
--- a/src/components/FaqAccordion/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './FaqAccordion'
diff --git a/src/components/HelpZen.tsx b/src/components/HelpZen.tsx
new file mode 100644
index 0000000..3db55ac
--- /dev/null
+++ b/src/components/HelpZen.tsx
@@ -0,0 +1,111 @@
+import { Link } from 'react-router-dom'
+
+import { useEffect, useState, MouseEvent } from 'react'
+import Box from '@mui/material/Box'
+import Tooltip from '@mui/material/Tooltip'
+import IconButton from '@mui/material/IconButton'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import QuestionMarkRoundedIcon from '@mui/icons-material/QuestionMarkRounded'
+import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined'
+import MarkUnreadChatAltRoundedIcon from '@mui/icons-material/MarkUnreadChatAltRounded'
+import { cls, styles, cmn } from '@skalenetwork/metaport'
+
+export default function HelpZen() {
+ const [anchorEl, setAnchorEl] = useState(null)
+ const [openZen, setOpenZen] = useState(false)
+
+ const open = Boolean(anchorEl)
+
+ const handleClick = (event: MouseEvent) => {
+ setAnchorEl(event.currentTarget)
+ }
+ const handleClose = () => {
+ setAnchorEl(null)
+ }
+
+ function handleClickZen() {
+ window.zE('messenger', openZen ? 'close' : 'open')
+ }
+
+ useEffect(() => {
+ window.zE('messenger', 'close')
+ window.zE('messenger:on', 'open', () => {
+ setOpenZen(true)
+ })
+ window.zE('messenger:on', 'close', () => {
+ setOpenZen(false)
+ })
+ }, [])
+
+ return (
+ (false)
-
- useEffect(() => {
- window.zE('messenger', 'close')
- window.zE('messenger:on', 'open', () => {
- setOpen(true)
- })
- window.zE('messenger:on', 'close', () => {
- setOpen(false)
- })
- }, [])
-
- function handleClick() {
- window.zE('messenger', open ? 'close' : 'open')
- }
-
- return (
-
-
-
-
-
-
-
- )
-}
diff --git a/src/components/HelpZen/index.ts b/src/components/HelpZen/index.ts
deleted file mode 100644
index 0d91c63..0000000
--- a/src/components/HelpZen/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './HelpZen'
diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
new file mode 100644
index 0000000..78d22f3
--- /dev/null
+++ b/src/components/Loader.tsx
@@ -0,0 +1,40 @@
+/**
+ * @license
+ * SKALE portal
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero 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 Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see (MONTH_RECOMMENDATIONS)
+ const [openCustom, setOpenCustom] = useState(false)
+ const [customPeriod, setCustomPeriod] = useState()
+ const [textPeriod, setTextPeriod] = useState()
+
+ if (!monthRecommendations.includes(props.max) && props.max > 0) {
+ setMonthRecommendations([...monthRecommendations, props.max])
+ }
+
+ if (props.max <= 0) {
+ return (null)
@@ -60,7 +60,7 @@ export default function MoreMenu() {
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
onClick={handleClick}
- className={cls(styles.paperGrey, cmn.pPrim, cmn.mleft10)}
+ className={cls(styles.paperGrey, cmn.pPrim, cmn.mleft5)}
style={{ width: '34px', height: '34px' }}
>
.
+ */
+
+/**
+ * @file PageCard.tsx
+ * @copyright SKALE Labs 2022-Present
+ */
+
+import { Link } from 'react-router-dom'
+import { cmn, cls } from '@skalenetwork/metaport'
+import ArrowForwardIosRoundedIcon from '@mui/icons-material/ArrowForwardIosRounded'
+
+export default function PageCard(props: { name: string; icon: any; description: string }) {
+ return (
+ ()
+ const [errorMsg, setErrorMsg] = useState()
+ const [loading, setLoading] = useState(false)
+ const [inited, setInited] = useState(false)
+
+ const [sklToken, setSklToken] = useState()
+ const [tokenBalance, setTokenBalance] = useState()
+ const [topupPeriod, setTopupPeriod] = useState(DEFAULT_TOPUP_PERIOD)
+ const [info, setInfo] = useState(DEFAULT_PAYMASTER_INFO)
+
+ const { data: walletClient } = useWagmiWalletClient()
+ const { switchNetworkAsync } = useWagmiSwitchNetwork()
+
+ useEffect(() => {
+ loadPaymasterInfo()
+ const intervalId = setInterval(loadPaymasterInfo, DEFAULT_UPDATE_INTERVAL_MS)
+ return () => clearInterval(intervalId)
+ }, [sklToken, address])
+
+ async function loadPaymasterInfo() {
+ const info = await getPaymasterInfo(paymaster, props.name, network)
+ let skl = sklToken
+ if (skl === undefined) {
+ skl = new Contract(info.skaleToken, ERC_ABIS.erc20.abi, paymaster.runner)
+ setSklToken(skl)
+ } else {
+ setTokenBalance(await skl.balanceOf(address))
+ }
+ setInfo(info)
+ setInited(true)
+ }
+
+ async function topupChain() {
+ if (!paymaster.runner?.provider || !walletClient || !switchNetworkAsync) {
+ setErrorMsg('Something is wrong with your wallet, try again')
+ return
+ }
+ setLoading(true)
+ setBtnText(`Switch network to ${getChainAlias(network, paymasterChain)}`)
+ setErrorMsg(undefined)
+ try {
+ const { chainId } = await paymaster.runner.provider.getNetwork()
+ const paymasterAddress = getPaymasterAddress(network)
+
+ await enforceNetwork(chainId, walletClient, switchNetworkAsync, network, paymasterChain)
+ setBtnText('Sending transaction...')
+ const signer = walletClientToSigner(walletClient)
+ const connectedPaymaster = new Contract(paymasterAddress, getPaymasterAbi(), signer)
+ const connectedToken = new Contract(info.skaleToken, ERC_ABIS.erc20.abi, signer)
+
+ const allowance = await connectedToken.allowance(address, paymasterAddress)
+ const totalPriceWei = getTotalPriceWei()
+ if (allowance <= totalPriceWei) {
+ setBtnText('Waiting for approval...')
+ const approveRes = await sendTransaction(connectedToken.approve, [
+ paymasterAddress,
+ totalPriceWei * APPROVE_MULTIPLIER
+ ])
+ if (!approveRes.status) {
+ setErrorMsg(approveRes.err?.name)
+ return
+ }
+ setBtnText('Sending transaction...')
+ }
+ const res = await sendTransaction(connectedPaymaster.pay, [id(props.name), topupPeriod])
+ if (!res.status) {
+ setErrorMsg(res.err?.name)
+ return
+ }
+ await loadPaymasterInfo()
+ } catch (e: any) {
+ console.error(e)
+ setErrorMsg(e.toString())
+ } finally {
+ setLoading(false)
+ setBtnText(undefined)
+ }
+ }
+
+ function getTotalPriceWei() {
+ const chainPriceSkl = divideBigInts(info.schainPricePerMonth, info.oneSklPrice)
+ const totalPriceSkl = chainPriceSkl * topupPeriod
+ return toWei(totalPriceSkl.toString(), DEFAULT_ERC20_DECIMALS)
+ }
+
+ if (!inited) return
-
diff --git a/src/components/Admin.tsx b/src/components/SkStack.tsx
similarity index 51%
rename from src/components/Admin.tsx
rename to src/components/SkStack.tsx
index 45f9364..5ff9d0c 100644
--- a/src/components/Admin.tsx
+++ b/src/components/SkStack.tsx
@@ -17,33 +17,27 @@
*/
/**
- * @file Admin.tsx
+ * @file SkStack.tsx
* @copyright SKALE Labs 2023-Present
*/
-import { useEffect } from 'react'
-import Container from '@mui/material/Container'
+import { ReactElement } from 'react'
import Stack from '@mui/material/Stack'
-import { useParams } from 'react-router-dom'
-
-import { cmn, cls, type MetaportCore, getChainAlias } from '@skalenetwork/metaport'
-
-export default function Admin(props: { mpc: MetaportCore }) {
- let { name } = useParams()
- name = name ?? ''
- const alias = getChainAlias(props.mpc.config.skaleNetwork, name)
-
- useEffect(() => {}, [])
+export default function SkStack(props: {
+ className?: string
+ children?: ReactElement | ReactElement[]
+}) {
return (
-
-
-
-
+
+ {props.children}
+
)
}
diff --git a/src/components/Terms/index.ts b/src/components/Terms/index.ts
deleted file mode 100644
index 99068c1..0000000
--- a/src/components/Terms/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Terms'
diff --git a/src/components/TermsModal.tsx b/src/components/TermsModal.tsx
index e7380dd..e018465 100644
--- a/src/components/TermsModal.tsx
+++ b/src/components/TermsModal.tsx
@@ -21,41 +21,28 @@
* @copyright SKALE Labs 2022-Present
*/
-import React, { type Dispatch, type SetStateAction } from 'react'
-import { useLocation } from 'react-router-dom'
+import { useState, type Dispatch, type SetStateAction } from 'react'
-import Modal from '@mui/material/Modal'
import Container from '@mui/material/Container'
import Button from '@mui/material/Button'
import Link from '@mui/material/Link'
import Grid from '@mui/material/Grid'
import Box from '@mui/material/Box'
-import DesktopMacRoundedIcon from '@mui/icons-material/DesktopMacRounded'
import KeyRoundedIcon from '@mui/icons-material/KeyRounded'
import LockRoundedIcon from '@mui/icons-material/LockRounded'
import GradingRoundedIcon from '@mui/icons-material/GradingRounded'
import { type MetaportCore, SkPaper, cls, cmn, styles } from '@skalenetwork/metaport'
-import { BRIDGE_PAGES, PORTAL_URLS } from '../core/constants'
-import TermsOfService from './Terms/terms-of-service.mdx'
-import logo from '../assets/skale_lg.svg'
-
-const style = {
- width: '100vw',
- height: '100vh',
- outline: 'none',
- backdropFilter: 'blur(10px)',
- WebkitBackdropFilter: 'blur(10px)'
-}
+import { PORTAL_URLS } from '../core/constants'
+import TermsOfService from '../data/terms-of-service.mdx'
export default function TermsModal(props: {
mpc: MetaportCore
termsAccepted: boolean
setTermsAccepted: Dispatch>
}) {
- const location = useLocation()
- const [scrolled, setScrolled] = React.useState(false)
+ const [scrolled, setScrolled] = useState(false)
const portalUrl = PORTAL_URLS[props.mpc.config.skaleNetwork] ?? PORTAL_URLS.mainnet
@@ -64,97 +51,80 @@ export default function TermsModal(props: {
return 'Agree to terms'
}
- function isBridgePage(): boolean {
- return (
- BRIDGE_PAGES.some(
- (pathname) => location.pathname === pathname || location.pathname.includes(pathname)
- ) || location.pathname === '/'
- )
- }
-
function handleTermsScroll(e: any): void {
const diff = e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight
const bottom = Math.abs(diff) < 15
setScrolled(bottom)
}
- if (props.termsAccepted || !isBridgePage()) return null
+ if (props.termsAccepted) return null
return (
-
-
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/HelpZen/HelpZen.tsx b/src/components/HelpZen/HelpZen.tsx
deleted file mode 100644
index 28f6837..0000000
--- a/src/components/HelpZen/HelpZen.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, { useEffect } from 'react'
-import Box from '@mui/material/Box'
-import Button from '@mui/material/Button'
-import Tooltip from '@mui/material/Tooltip'
-import HelpOutlineRoundedIcon from '@mui/icons-material/HelpOutlineRounded'
-
-import { cls, styles, cmn } from '@skalenetwork/metaport'
-
-export default function HelpZen() {
- const [open, setOpen] = React.useState
+
+
+ )
+}
diff --git a/src/components/MonthSelector.tsx b/src/components/MonthSelector.tsx
new file mode 100644
index 0000000..db58ae8
--- /dev/null
+++ b/src/components/MonthSelector.tsx
@@ -0,0 +1,144 @@
+/**
+ * @license
+ * SKALE portal
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero 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 Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see
+
+
+
+
+ {props.text}
+No topup periods available
+ } + + return ( +
+ {monthRecommendations
+ .filter((x) => x <= props.max)
+ .map((month: any, i: number) => (
+
+ ))}
+ {openCustom ? (
+
+ )
+}
diff --git a/src/components/MoreMenu/MoreMenu.tsx b/src/components/MoreMenu.tsx
similarity index 97%
rename from src/components/MoreMenu/MoreMenu.tsx
rename to src/components/MoreMenu.tsx
index 2c459cf..cf7c1cf 100644
--- a/src/components/MoreMenu/MoreMenu.tsx
+++ b/src/components/MoreMenu.tsx
@@ -38,8 +38,8 @@ import InventoryOutlinedIcon from '@mui/icons-material/InventoryOutlined'
import { cls, styles, cmn } from '@skalenetwork/metaport'
-import { DISCORD_INVITE_URL } from '../../core/constants'
-import discordLogo from '../../assets/discord-mark-white.svg'
+import { DISCORD_INVITE_URL } from '../core/constants'
+import discordLogo from '../assets/discord-mark-white.svg'
export default function MoreMenu() {
const [anchorEl, setAnchorEl] = useState
+
+ ) : (
+
+ )}
+
+ ) => {
+ if (
+ parseFloat(event.target.value) < 0 ||
+ !Number.isInteger(Number(event.target.value))
+ ) {
+ setTextPeriod('')
+ return
+ }
+ setTextPeriod(event.target.value)
+ }}
+ className={cls(cmn.mri10, 'monthInput')}
+ placeholder="0"
+ />
+ }
+ className={cls('roundBtn', 'outlined')}
+ onClick={() => {
+ if (
+ textPeriod === undefined ||
+ textPeriod === '' ||
+ !Number.isInteger(Number(textPeriod)) ||
+ Number(textPeriod) <= 0
+ ) {
+ props.setErrorMsg('Incorrect top-up period')
+ return
+ }
+ if (props.max < Number(textPeriod)) {
+ props.setErrorMsg(`Max topup amount: ${formatTimePeriod(props.max, 'month')}`)
+ return
+ }
+ setOpenCustom(false)
+ if (!monthRecommendations.includes(Number(textPeriod))) {
+ setCustomPeriod(Number(textPeriod))
+ }
+ props.setTopupPeriod(Number(textPeriod))
+ props.setErrorMsg(undefined)
+ }}
+ >
+
+ }
+ variant="text"
+ className={cls('roundBtn', cmn.mleft5)}
+ onClick={() => {
+ setOpenCustom(false)
+ }}
+ >
+ Apply
+ +Close
+ +
+
+ )
+}
diff --git a/src/components/Paymaster.tsx b/src/components/Paymaster.tsx
new file mode 100644
index 0000000..acefb60
--- /dev/null
+++ b/src/components/Paymaster.tsx
@@ -0,0 +1,206 @@
+/**
+ * @license
+ * SKALE portal
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero 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 Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see
+
+
+
+
+
+
+
+
+
+
+
+ + {props.name} +
+{props.description}
+
+
+
+
+ )
+}
diff --git a/src/components/PricingInfo.tsx b/src/components/PricingInfo.tsx
new file mode 100644
index 0000000..8c430cb
--- /dev/null
+++ b/src/components/PricingInfo.tsx
@@ -0,0 +1,123 @@
+/**
+ * @license
+ * SKALE portal
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero 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 Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see + Pricing info +
++ Top-up chain +
+ {!address ? ( +
+
+
+
+
+
+ )
+}
diff --git a/src/components/SchainDetails.tsx b/src/components/SchainDetails.tsx
index c42d301..2f0a810 100644
--- a/src/components/SchainDetails.tsx
+++ b/src/components/SchainDetails.tsx
@@ -24,6 +24,7 @@
import { Helmet } from 'react-helmet'
import Button from '@mui/material/Button'
+
import AddCircleRoundedIcon from '@mui/icons-material/AddCircleRounded'
import ArrowOutwardRoundedIcon from '@mui/icons-material/ArrowOutwardRounded'
import WidgetsRoundedIcon from '@mui/icons-material/WidgetsRounded'
@@ -41,10 +42,12 @@ import {
interfaces
} from '@skalenetwork/metaport'
+import SkStack from './SkStack'
import ChainLogo from './ChainLogo'
import CopySurface from './CopySurface'
import ChainAccordion from './ChainAccordion'
import ChainCategories from './ChainCategories'
+import Tile from './Tile'
import { MAINNET_CHAIN_LOGOS } from '../core/constants'
import { getRpcUrl, getExplorerUrl, getChainId, HTTPS_PREFIX } from '../core/chain'
@@ -105,61 +108,71 @@ export default function SchainDetails(props: {
-
- {chainAlias}
-{chainDescription}
-
-
+
-
+ }
+ size="medium"
+ className={cls(styles.btnAction, cmn.mri10)}
+ onClick={addNetwork}
+ >
+ Connect Wallet
+
+
+
-
-
-
- }
- size="large"
- className={styles.btnAction}
- onClick={addNetwork}
- >
- Add network
-
+
+
+
- {props.chainMeta?.url ? (
-
- {chainAlias}
+{chainDescription}
+ {props.chainMeta?.url ? (
+
+ }
+ >
+ Open Website
+
+
+ ) : null}
+
+
+ }
/>
-
-
- Manage {alias}
-Manage your SKALE Chain
- -
-
-
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - This website is for Desktop Use Only -
-
-
- - SKALE will NEVER ask you for your seed phrase or private keys -
-
-
-
- Make sure you are connected to the correct bridge and only use this official
- link:
-
-
- {portalUrl}
-
-
- ('left')
+
+ const handleAlignment = (_: React.MouseEvent, newAlignment: string | null) => {
+ setAlignment(newAlignment)
+ }
+
+ return (
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+ 7
+
+
+ 8
+
+
+ 9
+
+
+ 10
+
+
+ 11
+
+
+ 12
+
+
+ )
+}
diff --git a/src/components/TokenSurface.tsx b/src/components/TokenSurface.tsx
new file mode 100644
index 0000000..e3e888c
--- /dev/null
+++ b/src/components/TokenSurface.tsx
@@ -0,0 +1,107 @@
+/**
+ * @license
+ * SKALE portal
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero 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 Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see
+ btnText: string | undefined
+ errorMsg: string | undefined
+ setErrorMsg: (errorMsg: string | undefined) => void
+ loading: boolean
+}) {
+ if (props.tokenBalance === undefined) return {
+ const rawData = await Promise.all([
+ paymaster.maxReplenishmentPeriod(),
+ paymaster.oneSklPrice(),
+ paymaster.schainPricePerMonth(),
+ paymaster.skaleToken(),
+ paymaster.schains(id(targetChainName))
+ ])
+
+ let effectiveTimestamp
+ if (skaleNetwork === 'legacy') {
+ effectiveTimestamp = await paymaster.effectiveTimestamp()
+ }
+
+ return {
+ maxReplenishmentPeriod: rawData[0],
+ oneSklPrice: rawData[1],
+ schainPricePerMonth: rawData[2],
+ skaleToken: rawData[3],
+ schain: {
+ name: rawData[4][1],
+ paidUntil: rawData[4][2]
+ },
+ effectiveTimestamp
+ }
+}
+
+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)}`
+}
diff --git a/src/core/timeHelper.ts b/src/core/timeHelper.ts
new file mode 100644
index 0000000..57cf6b2
--- /dev/null
+++ b/src/core/timeHelper.ts
@@ -0,0 +1,93 @@
+/**
+ * @license
+ * SKALE portal
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero 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 Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see
+
+
+
+ )
+}
diff --git a/src/components/Apps.tsx b/src/pages/Apps.tsx
similarity index 100%
rename from src/components/Apps.tsx
rename to src/pages/Apps.tsx
diff --git a/src/components/Bridge.tsx b/src/pages/Bridge.tsx
similarity index 98%
rename from src/components/Bridge.tsx
rename to src/pages/Bridge.tsx
index f4bf4ee..60425a8 100644
--- a/src/components/Bridge.tsx
+++ b/src/pages/Bridge.tsx
@@ -41,8 +41,8 @@ import {
TransactionData
} from '@skalenetwork/metaport'
-import Message from './Message'
-import BridgeBody from './BridgeBody'
+import Message from '../components/Message'
+import BridgeBody from '../components/BridgeBody'
import { META_TAGS } from '../core/meta'
diff --git a/src/components/Network.tsx b/src/pages/Chains.tsx
similarity index 96%
rename from src/components/Network.tsx
rename to src/pages/Chains.tsx
index 26b599a..74a0b66 100644
--- a/src/components/Network.tsx
+++ b/src/pages/Chains.tsx
@@ -28,8 +28,8 @@ import Container from '@mui/material/Container'
import Stack from '@mui/material/Stack'
import CircularProgress from '@mui/material/CircularProgress'
-import CategorySection from './CategorySection'
-import { getPrimaryCategory } from './CategoryBadge'
+import CategorySection from '../components/CategorySection'
+import { getPrimaryCategory } from '../components/CategoryBadge'
import { cmn, cls, type MetaportCore, CHAINS_META, type interfaces } from '@skalenetwork/metaport'
diff --git a/src/components/Faq/Faq.tsx b/src/pages/Faq.tsx
similarity index 94%
rename from src/components/Faq/Faq.tsx
rename to src/pages/Faq.tsx
index 42553e9..629ad18 100644
--- a/src/components/Faq/Faq.tsx
+++ b/src/pages/Faq.tsx
@@ -28,8 +28,8 @@ import Stack from '@mui/material/Stack'
import { cmn, cls } from '@skalenetwork/metaport'
-import FaqAccordion from '../FaqAccordion'
-import { META_TAGS } from '../../core/meta'
+import FaqAccordion from '../components/FaqAccordion'
+import { META_TAGS } from '../core/meta'
export default function Faq() {
return (
diff --git a/src/components/History.tsx b/src/pages/History.tsx
similarity index 100%
rename from src/components/History.tsx
rename to src/pages/History.tsx
diff --git a/src/components/Portfolio.tsx b/src/pages/Portfolio.tsx
similarity index 50%
rename from src/components/Portfolio.tsx
rename to src/pages/Portfolio.tsx
index 2bfe329..fb3ffe4 100644
--- a/src/components/Portfolio.tsx
+++ b/src/pages/Portfolio.tsx
@@ -24,13 +24,14 @@
import { useState, useEffect } from 'react'
import Container from '@mui/material/Container'
import Stack from '@mui/material/Stack'
+import Grid from '@mui/material/Grid'
import {
cmn,
cls,
+ styles,
type MetaportCore,
getChainAlias,
- ChainIcon,
TokenIcon,
SkPaper,
dataclasses,
@@ -39,6 +40,9 @@ import {
fromWei
} from '@skalenetwork/metaport'
+import TokenSurface from '../components/TokenSurface'
+import ConnectWallet from '../components/ConnectWallet'
+
export default function Portfolio(props: { mpc: MetaportCore }) {
const { address } = useWagmiAccount()
@@ -86,6 +90,16 @@ export default function Portfolio(props: { mpc: MetaportCore }) {
return tokenMetadata.decimals
}
+ const isTokenInChain = (chain: string, token: string) => {
+ const connection = props.mpc.config.connections[chain]
+ if (!connection) return false
+
+ const hasErc20Token = connection.erc20 && connection.erc20[token]
+ const hasEthToken = connection.eth && connection.eth[token]
+
+ return hasErc20Token || hasEthToken
+ }
+
return (
@@ -94,65 +108,64 @@ export default function Portfolio(props: { mpc: MetaportCore }) {
- Before you use the SKALE Bridge, you must review the terms of service carefully - and confirm below. -
-
-
)
}
diff --git a/src/components/Tile.tsx b/src/components/Tile.tsx
new file mode 100644
index 0000000..947cc75
--- /dev/null
+++ b/src/components/Tile.tsx
@@ -0,0 +1,94 @@
+/**
+ * @license
+ * SKALE portal
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero 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 Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ SKALE Bridge Terms of Use
++ Review the terms of service carefully and confirm +
+
+
+ + SKALE will NEVER ask you for your seed phrase or private keys +
+
+
+ + Make sure you are connected to the correct bridge and only use this official + link: + + {portalUrl} + +
+
+ + Before you use the SKALE Bridge, you must review the terms of service carefully and + confirm below. +
+
+
-
+
+
-
-
-
-
-
+ {props.text ? (
+
+ )
+}
diff --git a/src/components/Toggle.tsx b/src/components/Toggle.tsx
new file mode 100644
index 0000000..6a5b0f8
--- /dev/null
+++ b/src/components/Toggle.tsx
@@ -0,0 +1,58 @@
+import { useState } from 'react'
+import ToggleButton from '@mui/material/ToggleButton'
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
+
+export default function ToggleButtons() {
+ const [alignment, setAlignment] = useState
+ {props.icon ? (
+
+ ) : null}
+ {props.icon}
+ ) : null}
+ {props.text}
+{props.textRi}
+
+ {props.value ? (
+
+ {props.children}
+ + {props.value} +
+ ) : null} + {props.progress ? ( +
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/Topup.tsx b/src/components/Topup.tsx
new file mode 100644
index 0000000..5ada203
--- /dev/null
+++ b/src/components/Topup.tsx
@@ -0,0 +1,151 @@
+/**
+ * @license
+ * SKALE portal
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero 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 Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see
+
+ {copied ? (
+
+ {props.tokenMetadata ? (
+
+
+
+ ) : null}
+
+ {props.chainName && props.skaleNetwork ? (
+
+
+ ) : null}
+ + {props.title} + {props.tokenMetadata + ? ` (${props.tokenMetadata.decimals ?? DEFAULT_ERC20_DECIMALS})` + : null} +
+{props.value}
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/core/constants.ts b/src/core/constants.ts
index 45b55ca..83c5fec 100644
--- a/src/core/constants.ts
+++ b/src/core/constants.ts
@@ -21,14 +21,14 @@
* @copyright SKALE Labs 2022-Present
*/
-import FAQ from '../faq.json'
+import FAQ from '../data/faq.json'
export const MAINNET_CHAIN_NAME = 'mainnet'
export const DASHBOARD_URL = 'https://app.geckoboard.com/v5/dashboards/LISYTRBEVGCVGL57/inception'
export const DUNE_SKALE_URL = 'https://dune.com/projects/SKALE'
-export const BRIDGE_PAGES = ['/transfer', '/bridge/history', '/portfolio', '/other/faq']
+export const BRIDGE_PAGES = ['/bridge', '/transfer', '/bridge/history', '/portfolio', '/other/faq']
export const DEFAULT_ERC20_DECIMALS = '18'
@@ -42,3 +42,9 @@ import * as MAINNET_CHAIN_LOGOS from '../meta/logos'
export { FAQ, MAINNET_CHAIN_LOGOS }
export const DISCORD_INVITE_URL = 'https://discord.com/invite/gM5XBy6'
+
+export const MS_MULTIPLIER = 1000
+export const AVG_MONTH_LENGTH = 30.436875
+
+const _DEFAULT_UPDATE_INTERVAL_SECONDS = 10
+export const DEFAULT_UPDATE_INTERVAL_MS = _DEFAULT_UPDATE_INTERVAL_SECONDS * MS_MULTIPLIER
diff --git a/src/core/paymaster.ts b/src/core/paymaster.ts
new file mode 100644
index 0000000..c2b22f8
--- /dev/null
+++ b/src/core/paymaster.ts
@@ -0,0 +1,120 @@
+/**
+ * @license
+ * SKALE portal
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero 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 Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see
+
+
+
+ {!balanceOk ? (
+
+
+
+ ) : null}
+
+
+
+
+
+
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+ Manage
+
+
+ Manage {alias}
++ This is {alias} admin area - you can manage your chain here. +
+Your assets across all SKALE Chains
+ {!address ?
-
- {props.mpc.config.chains.map((chain: string, index: number) => (
-
-
-
+
-
- - {props.mpc.config.tokens[token].symbol} -
-- {props.mpc.config.tokens[token].name} -
-
-
- - {fromWei(getTotalBalance(token).toString(), getTokenDecimals(token))}{' '} - {props.mpc.config.tokens[token].symbol} -
-On 2 chains
-
-
+ {props.mpc.config.chains
+ .filter((chain: string) => {
+ return isTokenInChain(chain, token)
+ })
+ .map((chain: string, index: number) => (
+
+
+ ))}
+
))}
diff --git a/src/components/Schain.tsx b/src/pages/Schain.tsx
similarity index 87%
rename from src/components/Schain.tsx
rename to src/pages/Schain.tsx
index b38bd4f..1c1d576 100644
--- a/src/components/Schain.tsx
+++ b/src/pages/Schain.tsx
@@ -25,8 +25,7 @@ import { useEffect } from 'react'
import { useParams } from 'react-router-dom'
import Container from '@mui/material/Container'
-import Stack from '@mui/material/Stack'
-import SchainDetails from './SchainDetails'
+import SchainDetails from '../components/SchainDetails'
import CircularProgress from '@mui/material/CircularProgress'
import { cmn, cls, type MetaportCore, CHAINS_META, type interfaces } from '@skalenetwork/metaport'
@@ -58,7 +57,7 @@ export default function Schain(props: { loadSchains: any; schains: any[]; mpc: M
return (
-
+
-
- - {getChainAlias(props.mpc.config.skaleNetwork, chain)} -
-
-
- - {balances[index] && balances[index][token] - ? fromWei(balances[index][token].toString(), getTokenDecimals(token)) // todo: use correct decimals - : '0'}{' '} - {props.mpc.config.tokens[token].symbol} -
-
+
+
+
- ))}
+ + {props.mpc.config.tokens[token].symbol} +
++ {props.mpc.config.tokens[token].name ?? (token === 'eth' ? 'Ethereum' : '')} +
+
+ + {fromWei(getTotalBalance(token).toString(), getTokenDecimals(token))}{' '} + {props.mpc.config.tokens[token].symbol} +
+On 2 chains
+
-
+
@@ -75,14 +74,7 @@ export default function Schain(props: { loadSchains: any; schains: any[]; mpc: M
return (
-
-
+
)
}
diff --git a/src/pages/Start.tsx b/src/pages/Start.tsx
new file mode 100644
index 0000000..f38afed
--- /dev/null
+++ b/src/pages/Start.tsx
@@ -0,0 +1,68 @@
+import Container from '@mui/material/Container'
+import Stack from '@mui/material/Stack'
+import Box from '@mui/material/Box'
+import Grid from '@mui/material/Grid'
+
+import SwapHorizontalCircleOutlinedIcon from '@mui/icons-material/SwapHorizontalCircleOutlined'
+import PublicOutlinedIcon from '@mui/icons-material/PublicOutlined'
+import InsertChartOutlinedIcon from '@mui/icons-material/InsertChartOutlined'
+// import AppsOutlinedIcon from '@mui/icons-material/AppsOutlined'
+// import WalletOutlinedIcon from '@mui/icons-material/WalletOutlined'
+
+import PageCard from '../components/PageCard'
+
+import { cmn, cls } from '@skalenetwork/metaport'
+
+export default function Start() {
+ return (
+
+
+
+
+
+
+
+
+ {/*
+ */}
+
+
+ {/*
+ */}
+
+
+
+
+ )
+}
diff --git a/src/components/Stats.tsx b/src/pages/Stats.tsx
similarity index 100%
rename from src/components/Stats.tsx
rename to src/pages/Stats.tsx
diff --git a/src/components/Terms/Terms.tsx b/src/pages/Terms.tsx
similarity index 90%
rename from src/components/Terms/Terms.tsx
rename to src/pages/Terms.tsx
index 08bb09e..4afcd12 100644
--- a/src/components/Terms/Terms.tsx
+++ b/src/pages/Terms.tsx
@@ -3,7 +3,7 @@ import Stack from '@mui/material/Stack'
import { cmn, cls } from '@skalenetwork/metaport'
-import TermsOfService from './terms-of-service.mdx'
+import TermsOfService from '../data/terms-of-service.mdx'
export default function Terms() {
return (
diff --git a/tests/time.test.ts b/tests/time.test.ts
new file mode 100644
index 0000000..c56aad8
--- /dev/null
+++ b/tests/time.test.ts
@@ -0,0 +1,44 @@
+import { describe, expect, test } from 'bun:test'
+import { daysBetweenTimestamps, monthsBetweenTimestamps, formatTimePeriod } from '../src/core/timeHelper'
+
+const BASE_TS = 1710262826n
+
+describe('test timeHelper functions', () => {
+ test('daysBetweenNowAndTimestamp test', () => {
+ let days: number
+ days = daysBetweenTimestamps(BASE_TS, 1712937626n) // +31 days
+ expect(days).toBe(31)
+ days = daysBetweenTimestamps(BASE_TS, 1710273626n) // +1 hour
+ expect(days).toBe(0)
+ days = daysBetweenTimestamps(BASE_TS, 1710180026n) // -2 hours
+ expect(days).toBe(-1)
+ days = daysBetweenTimestamps(BASE_TS, 1710097226n) // -2 days
+ expect(days).toBe(-2)
+ })
+
+ test('daysBetweenNowAndTimestamp test', () => {
+ let months: number
+ months = monthsBetweenTimestamps(BASE_TS, 1712937626n) // +31 days
+ expect(months).toBe(1)
+ months = monthsBetweenTimestamps(BASE_TS, 1710273626n) // +1 hour
+ expect(months).toBe(0)
+ months = monthsBetweenTimestamps(BASE_TS, 1710097226n) // -2 days
+ expect(months).toBe(-0)
+ months = monthsBetweenTimestamps(BASE_TS, 1741719626n) // +1 year
+ expect(months).toBe(12)
+ months = monthsBetweenTimestamps(BASE_TS, 2025716426n) // +10 years
+ expect(months).toBe(120)
+ })
+
+ test('formatTimePeriod test', () => {
+ let text: string
+ text = formatTimePeriod(2, 'month')
+ expect(text).toBe('2 months')
+ text = formatTimePeriod(-1, 'month')
+ expect(text).toBe('-1 month')
+ text = formatTimePeriod(-0, 'month')
+ expect(text).toBe('>1 month')
+ text = formatTimePeriod(0, 'month')
+ expect(text).toBe('>1 month')
+ })
+})
+
+ SKALE Portal
++ Gateway to the SKALE Ecosystem +
+