From 10d79c743eb669f088550b6a607f84d15a84a6a9 Mon Sep 17 00:00:00 2001 From: Dmytro Date: Thu, 29 Aug 2024 15:41:41 +0100 Subject: [PATCH 1/2] Minor UI fixes, update ToS, update metaport --- bun.lockb | Bin 587276 -> 587276 bytes package.json | 2 +- src/App.scss | 1 - src/SkDrawer.tsx | 26 ++++----- src/components/Headline.tsx | 45 +++++++++++--- src/components/HomeComponents.tsx | 4 +- src/components/Paymaster.tsx | 6 +- src/components/delegation/Delegations.tsx | 6 +- src/components/ecosystem/Categories.tsx | 2 +- src/components/ecosystem/NewApps.tsx | 1 + src/components/ecosystem/TrendingApps.tsx | 68 +++++++++------------- src/core/ecosystem/categories.ts | 22 ++++++- src/core/ecosystem/utils.ts | 4 +- src/data/terms-of-service.mdx | 21 +++++++ src/pages/Ecosystem.tsx | 4 +- src/pages/StakeAmount.tsx | 12 +++- src/pages/Staking.tsx | 12 +++- 17 files changed, 156 insertions(+), 80 deletions(-) diff --git a/bun.lockb b/bun.lockb index 0335c210217a32d02e22fa2832805bf689495f24..7ae63c3a05495499cc9b65a8f43298b3407ce02b 100755 GIT binary patch delta 189 zcmV;u07Cza>?4fqBakj2T+%<9=)~fb7ZL=xccreahm`;W0ylt-Z1Qu4Nnf*au}&(9 z2u8NbO0)xhj+1~~7=xIJx0s0mb;Cdkr~^3#!ZUnMc->b`HX%|AV7CFTufL3q8^sk| z>k|hB$+b{o`V5QLrO2(eXVw#UD9nyuZD>s`zw$p3XWg%dO-%xaO-%!bO-%%cO-%*2 rO-%-h)B!cO*dYgjI+r3O2OO7Rfd~$lgIot90X2uFTnD$NTnJ{Fu=q|W delta 191 zcmV;w06_nY>?4fqBakj2DLS2B*#H!H&_!EOu>Aj%nkQ##-&e1jBu6(pT7A$;u}&(9 z2&e3AKZE3upOb)G7=xIJx0s0mb;Cd&C^#1TNetwork - + - + - + +
+

NEW

+
- + - + - -
-

NEW

-
+ diff --git a/src/components/Headline.tsx b/src/components/Headline.tsx index a0d136b..2677af8 100644 --- a/src/components/Headline.tsx +++ b/src/components/Headline.tsx @@ -21,18 +21,45 @@ * @copyright SKALE Labs 2024-Present */ -import { cls, cmn } from '@skalenetwork/metaport' -import { type ReactElement } from 'react' +import React from 'react' +import { cls, cmn, styles } from '@skalenetwork/metaport' -export default function Headline(props: { +interface HeadlineProps { text: string - className?: string | undefined - icon?: ReactElement | undefined -}) { + className?: string + icon?: React.ReactElement + size?: 'small' | 'medium' +} + +const Headline: React.FC = ({ text, className, icon, size = 'medium' }) => { + const commonClasses = cls(cmn.flex, cmn.flexcv, cmn.flexg, className) + + const textElement = + size === 'small' ? ( +

{text}

+ ) : ( +

{text}

+ ) + + const iconElement = icon && ( +
+ {icon} +
+ ) + return ( -
- {props.icon} -

{props.text}

+
+ {iconElement} + {textElement}
) } + +export default Headline diff --git a/src/components/HomeComponents.tsx b/src/components/HomeComponents.tsx index 388d12e..d27634f 100644 --- a/src/components/HomeComponents.tsx +++ b/src/components/HomeComponents.tsx @@ -23,7 +23,7 @@ import SwapHorizontalCircleOutlinedIcon from '@mui/icons-material/SwapHorizontalCircleOutlined' import PublicOutlinedIcon from '@mui/icons-material/PublicOutlined' import FavoriteRoundedIcon from '@mui/icons-material/FavoriteRounded' -import LabelImportantRoundedIcon from '@mui/icons-material/LabelImportantRounded' +import StarRoundedIcon from '@mui/icons-material/StarRounded' import RocketLaunchRoundedIcon from '@mui/icons-material/RocketLaunchRounded' import TrendingUpRoundedIcon from '@mui/icons-material/TrendingUpRounded' import LinkRoundedIcon from '@mui/icons-material/LinkRounded' @@ -37,7 +37,7 @@ interface SectionIcons { export const SECTION_ICONS: SectionIcons = { explore: , favorites: , - new: , + new: , trending: , categories: } diff --git a/src/components/Paymaster.tsx b/src/components/Paymaster.tsx index 3537f27..5c00101 100644 --- a/src/components/Paymaster.tsx +++ b/src/components/Paymaster.tsx @@ -38,7 +38,8 @@ import { walletClientToSigner, sendTransaction, getChainAlias, - toWei + toWei, + styles } from '@skalenetwork/metaport' import ConnectWallet from './ConnectWallet' @@ -184,8 +185,9 @@ export default function Paymaster(props: { mpc: MetaportCore; name: string }) { } className={cls(cmn.mtop20, cmn.mbott10)} + icon={} + size="small" /> {!address ? ( diff --git a/src/components/delegation/Delegations.tsx b/src/components/delegation/Delegations.tsx index 90b8256..0916b35 100644 --- a/src/components/delegation/Delegations.tsx +++ b/src/components/delegation/Delegations.tsx @@ -63,7 +63,11 @@ export default function Delegations(props: { props.si[DelegationType.ESCROW2]?.delegations.length === 0) return (
- } /> + } + />
{!loaded ? (
diff --git a/src/components/ecosystem/Categories.tsx b/src/components/ecosystem/Categories.tsx index ad1ac38..b24f6ad 100644 --- a/src/components/ecosystem/Categories.tsx +++ b/src/components/ecosystem/Categories.tsx @@ -206,7 +206,7 @@ const CategoryDisplay: React.FC = ({ /> } label={ - + {highlightMatch(data.name, searchTerm)} } diff --git a/src/components/ecosystem/NewApps.tsx b/src/components/ecosystem/NewApps.tsx index 42e7412..d04e14c 100644 --- a/src/components/ecosystem/NewApps.tsx +++ b/src/components/ecosystem/NewApps.tsx @@ -54,6 +54,7 @@ const NewApps: React.FC = ({ appName={app.appName} chainsMeta={chainsMeta} trending={getTrendingRank(trendingAppIds, appId)} + isNew={true} /> ) } diff --git a/src/components/ecosystem/TrendingApps.tsx b/src/components/ecosystem/TrendingApps.tsx index c3aa48e..0536076 100644 --- a/src/components/ecosystem/TrendingApps.tsx +++ b/src/components/ecosystem/TrendingApps.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useMemo } from 'react' import { type types } from '@/core' import AppCard from './AppCardV2' import { Box, Grid } from '@mui/material' @@ -22,28 +22,28 @@ const TrendingApps: React.FC = ({ newApps, trendingApps }) => { - const renderAppCards = () => { - return trendingApps.map((app) => { - const isNew = isNewApp({ chain: app.chain, app: app.appName }, newApps) - if (!getAppMeta(chainsMeta, app.chain, app.appName)) return null + const filteredApps = useMemo( + () => trendingApps.filter((app) => getAppMeta(chainsMeta, app.chain, app.appName)), + [trendingApps, chainsMeta] + ) - return ( - - - - - - ) - }) + const renderAppCard = (app: types.AppWithChainAndName) => { + const isNew = isNewApp({ chain: app.chain, app: app.appName }, newApps) + return ( + + + + ) } - if (trendingApps.length === 0) { + if (filteredApps.length === 0) { return (
@@ -56,32 +56,18 @@ const TrendingApps: React.FC = ({ } if (useCarousel) { - return ( - - {trendingApps.map((app) => { - const isNew = isNewApp({ chain: app.chain, app: app.appName }, newApps) - if (!getAppMeta(chainsMeta, app.chain, app.appName)) return null - return ( - - - - ) - })} - - ) + return {filteredApps.map(renderAppCard)} } return ( - {renderAppCards()} + {filteredApps.map((app) => ( + + {renderAppCard(app)} + + ))} ) } -export default TrendingApps +export default React.memo(TrendingApps) diff --git a/src/core/ecosystem/categories.ts b/src/core/ecosystem/categories.ts index d872353..27b1230 100644 --- a/src/core/ecosystem/categories.ts +++ b/src/core/ecosystem/categories.ts @@ -86,5 +86,25 @@ export const categories: Categories = { tools: { name: 'Tools', subcategories: {} }, wallet: { name: 'Wallet', subcategories: {} }, metaverse: { name: 'Metaverse', subcategories: {} }, - web3: { name: 'Web3', subcategories: {} } + web3: { name: 'Web3', subcategories: {} }, + pretge: { name: 'Pre-TGE', subcategories: {} } +} + +export const sortCategories = (categories: Categories): Categories => { + const sortedEntries = Object.entries(categories).sort(([, a], [, b]) => + a.name.localeCompare(b.name) + ) + return Object.fromEntries( + sortedEntries.map(([key, category]) => [ + key, + { + ...category, + subcategories: Object.fromEntries( + Object.entries(category.subcategories).sort(([, a], [, b]) => + a.name.localeCompare(b.name) + ) + ) + } + ]) + ) } diff --git a/src/core/ecosystem/utils.ts b/src/core/ecosystem/utils.ts index 0f2c1ad..c63f232 100644 --- a/src/core/ecosystem/utils.ts +++ b/src/core/ecosystem/utils.ts @@ -22,7 +22,7 @@ */ import { type types } from '@/core' -import { categories } from './categories' +import { categories, sortCategories } from './categories' export interface ExpandedItems { [key: string]: boolean @@ -48,7 +48,7 @@ export const getSelectedCategoriesCount = (checkedItems: string[]): number => { } export const filterCategories = (searchTerm: string) => { - return Object.entries(categories).filter(([_, data]) => { + return Object.entries(sortCategories(categories)).filter(([_, data]) => { const categoryMatch = data.name.toLowerCase().includes(searchTerm.toLowerCase()) const subcategoryMatch = typeof data.subcategories === 'object' && diff --git a/src/data/terms-of-service.mdx b/src/data/terms-of-service.mdx index 1e81e37..e1cb3ba 100644 --- a/src/data/terms-of-service.mdx +++ b/src/data/terms-of-service.mdx @@ -66,6 +66,27 @@ Some jurisdictions may not allow the exclusion or limitation of incidental or consequential damages, so the above exclusions shall only apply to the extent permissible under applicable law. +### DATA COLLECTION AND USAGE + +Purpose of Data Collection +By using the SKALE Portal, you consent to the collection and storage of certain data related to your usage of the platform. This includes the ability to save your preferences such as favorite decentralized applications (dApps) and a history of your recent dApp interactions after connecting your wallet. + +Scope of Data Collection +The data collected may include: + +- Information on the dApps you interact with through the platform. +- Preferences or settings that you choose to save, such as your favorite dApps. + +Use of Collected Data +The collected data is used solely to enhance your experience on the platform by allowing you to: + +- Quickly access your favorite dApps. +- View your recent dApp activities for convenience. +- We do not share your data with third parties, except as required by law, or use it for purposes other than those stated above. + +Data Security +We employ industry-standard security measures to protect the data we collect. However, you acknowledge that no system can guarantee absolute security, and we are not responsible for unauthorized access to your data resulting from circumstances beyond our control. + ### INDEMNIFICATION _You will be responsible for and will pay us, our affiliates, and our diff --git a/src/pages/Ecosystem.tsx b/src/pages/Ecosystem.tsx index e86c73b..d58194b 100644 --- a/src/pages/Ecosystem.tsx +++ b/src/pages/Ecosystem.tsx @@ -25,7 +25,7 @@ import { Helmet } from 'react-helmet' import { Container, Stack, Box, Tab, Tabs, Button } from '@mui/material' import GridViewRoundedIcon from '@mui/icons-material/GridViewRounded' import FavoriteRoundedIcon from '@mui/icons-material/FavoriteRounded' -import TimelineRoundedIcon from '@mui/icons-material/TimelineRounded' +import TrendingUpRoundedIcon from '@mui/icons-material/TrendingUpRounded' import StarRoundedIcon from '@mui/icons-material/StarRounded' import AddCircleOutlineRoundedIcon from '@mui/icons-material/AddCircleOutlineRounded' @@ -196,7 +196,7 @@ export default function Ecosystem(props: { /> } + icon={} iconPosition="start" className={cls('btn', 'btnSm', cmn.mri5, cmn.mleft5, 'tab', 'fwmobile')} /> diff --git a/src/pages/StakeAmount.tsx b/src/pages/StakeAmount.tsx index b7ba8bb..5d1f931 100644 --- a/src/pages/StakeAmount.tsx +++ b/src/pages/StakeAmount.tsx @@ -24,7 +24,14 @@ import { useState, useEffect } from 'react' import { type Signer } from 'ethers' import { useParams } from 'react-router-dom' -import { cmn, cls, type MetaportCore, SkPaper, type interfaces } from '@skalenetwork/metaport' +import { + cmn, + cls, + type MetaportCore, + SkPaper, + type interfaces, + styles +} from '@skalenetwork/metaport' import Container from '@mui/material/Container' import ArrowBackIosNewRoundedIcon from '@mui/icons-material/ArrowBackIosNewRounded' @@ -146,8 +153,9 @@ export default function StakeAmount(props: { } + icon={} className={cls(cmn.mtop20, cmn.mbott10)} + size="small" /> {props.address ? ( - } /> + } + size="small" + /> @@ -310,7 +314,11 @@ export default function Staking(props: { /> - } /> + } + size="small" + />
From 5483c918c9b66d4d54a14b6ed281bd7480e9db1d Mon Sep 17 00:00:00 2001 From: Dmytro Date: Thu, 29 Aug 2024 16:40:10 +0100 Subject: [PATCH 2/2] Update metaport configs for mainnet and testnet --- config/mainnet.ts | 2 +- config/testnet.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/config/mainnet.ts b/config/mainnet.ts index 7dac593..1e614b0 100644 --- a/config/mainnet.ts +++ b/config/mainnet.ts @@ -116,7 +116,7 @@ export const METAPORT_CONFIG: interfaces.MetaportConfig = { iconUrl: "https://assets.coingecko.com/coins/images/37476/standard/Screenshot_2024-05-04_004346.png" }, wct1: { - name: "Wrapped Curio Ferrari F12tdf", + name: "Wrapped Car Token 1", symbol: "wCT1", iconUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/12648.png", decimals: "2" diff --git a/config/testnet.ts b/config/testnet.ts index b7ebe61..3d1ac5e 100644 --- a/config/testnet.ts +++ b/config/testnet.ts @@ -140,7 +140,7 @@ export const METAPORT_CONFIG: interfaces.MetaportConfig = { // Calypso connections eth: { eth: { - address: '0x', + address: '0x2aebcdc4f9f9149a50422fff86198cb0939ea165', chains: { 'juicy-low-small-testnet': { clone: true