From 49864f365ac11549204f585cfb8a386c18b17a6d Mon Sep 17 00:00:00 2001 From: devtealeaf Date: Sat, 12 Oct 2024 16:34:22 +0300 Subject: [PATCH 1/4] upd: platform tables update --- package.json | 2 +- public/github.svg | 14 + src/constants/index.ts | 12 +- src/constants/tables.ts | 76 +++++- src/modules/Platform/components/Assets.tsx | 87 ++++-- src/modules/Platform/components/Chain.tsx | 131 ---------- .../Platform/components/Chains/Chain.tsx | 148 +++++++++++ .../{Chains.tsx => Chains/index.tsx} | 4 +- .../Platform/components/Integrations.tsx | 201 +++++++------- .../components/{ => Network}/Node.tsx | 0 .../{Network.tsx => Network/index.tsx} | 0 .../Platform/components/Strategies.tsx | 192 +++++++------- src/modules/Platform/constants/index.ts | 44 +++- src/modules/Platform/index.tsx | 247 ++++++++---------- src/modules/Platform/ui/ProtocolBadge.tsx | 27 ++ src/modules/Platform/ui/StrategyStatus.tsx | 18 ++ src/modules/Platform/ui/index.ts | 4 +- .../components/modals/PlatformModal.tsx | 25 +- src/modules/index.ts | 4 +- src/types/index.ts | 44 +++- src/ui/CountersBlockCompact.tsx | 15 +- src/ui/TableColumnSort.tsx | 11 +- src/ui/index.ts | 2 + src/utils/functions/formatNumber.ts | 5 + src/utils/functions/sortTable.ts | 6 +- 25 files changed, 780 insertions(+), 539 deletions(-) create mode 100644 public/github.svg delete mode 100644 src/modules/Platform/components/Chain.tsx create mode 100644 src/modules/Platform/components/Chains/Chain.tsx rename src/modules/Platform/components/{Chains.tsx => Chains/index.tsx} (98%) rename src/modules/Platform/components/{ => Network}/Node.tsx (100%) rename src/modules/Platform/components/{Network.tsx => Network/index.tsx} (100%) create mode 100644 src/modules/Platform/ui/ProtocolBadge.tsx create mode 100644 src/modules/Platform/ui/StrategyStatus.tsx diff --git a/package.json b/package.json index 924433b8..93d3eec0 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "stability-ui", "type": "module", - "version": "0.12.22-alpha", + "version": "0.12.23-alpha", "scripts": { "dev": "astro dev", "start": "astro dev", diff --git a/public/github.svg b/public/github.svg new file mode 100644 index 00000000..54e30717 --- /dev/null +++ b/public/github.svg @@ -0,0 +1,14 @@ + + + \ No newline at end of file diff --git a/src/constants/index.ts b/src/constants/index.ts index 11095a22..1d9506c6 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -1,6 +1,13 @@ import { chains } from "@stabilitydao/stability"; -import { TABLE_FILTERS, TABLE, CHAINS_TABLE } from "./tables"; +import { + TABLE_FILTERS, + TABLE, + CHAINS_TABLE, + ASSETS_TABLE, + INTEGRATIONS_TABLE, + STRATEGIES_TABLE, +} from "./tables"; import { USDC, @@ -282,4 +289,7 @@ export { DEFAULT_ERROR, IL, ZERO_BigInt, + ASSETS_TABLE, + INTEGRATIONS_TABLE, + STRATEGIES_TABLE, }; diff --git a/src/constants/tables.ts b/src/constants/tables.ts index 04eccb65..c5446675 100644 --- a/src/constants/tables.ts +++ b/src/constants/tables.ts @@ -101,4 +101,78 @@ const CHAINS_TABLE: TTableColumn[] = [ }, ]; -export { TABLE_FILTERS, TABLE, CHAINS_TABLE }; +const ASSETS_TABLE: TTableColumn[] = [ + { + name: "Symbol", + keyName: "symbol", + sortType: "none", + dataType: "string", + }, + { + name: "Website", + keyName: "website", + sortType: "none", + dataType: "string", + }, + { + name: "Addresses", + keyName: "addresses", + sortType: "none", + dataType: "number", + }, +]; +const INTEGRATIONS_TABLE: TTableColumn[] = [ + { + name: "Organization", + keyName: "name", + sortType: "none", + dataType: "string", + }, + { + name: "Links", + keyName: "website", + sortType: "none", + dataType: "string", + }, + { + name: "Protocols", + keyName: "protocolsLength", + sortType: "none", + dataType: "number", + }, +]; +const STRATEGIES_TABLE: TTableColumn[] = [ + { + name: "Id", + keyName: "shortId", + sortType: "none", + dataType: "string", + }, + { + name: "Name", + keyName: "id", + sortType: "none", + dataType: "string", + }, + { + name: "State", + keyName: "state", + sortType: "none", + dataType: "string", + }, + { + name: "Issue", + keyName: "contractGithubId", + sortType: "none", + dataType: "number", + }, +]; + +export { + TABLE_FILTERS, + TABLE, + CHAINS_TABLE, + ASSETS_TABLE, + INTEGRATIONS_TABLE, + STRATEGIES_TABLE, +}; diff --git a/src/modules/Platform/components/Assets.tsx b/src/modules/Platform/components/Assets.tsx index 7286af1e..5a058388 100644 --- a/src/modules/Platform/components/Assets.tsx +++ b/src/modules/Platform/components/Assets.tsx @@ -1,10 +1,35 @@ +import { useState, useEffect } from "react"; + import { assets } from "@stabilitydao/stability"; -import { Breadcrumbs } from "@ui"; +import { sortTable } from "@utils"; + +import { Breadcrumbs, TableColumnSort } from "@ui"; + +import { ASSETS_TABLE } from "@constants"; + +import type { TTableColumn, TAssetData } from "@types"; const Assets = (): JSX.Element => { + const [tableStates, setTableStates] = useState(ASSETS_TABLE); + const [tableData, setTableData] = useState([]); + + const initTableData = async () => { + if (assets) { + const assetsData = assets.map(({ symbol, website, addresses }) => ({ + symbol, + website, + addresses: Object.keys(addresses).length, + })); + setTableData(assetsData); + } + }; + + useEffect(() => { + initTableData(); + }, []); return ( -
+

Assets

@@ -12,34 +37,42 @@ const Assets = (): JSX.Element => { - - - + {tableStates.map((value: TTableColumn, index: number) => ( + + ))} - {assets.map(({ addresses, symbol, website }) => ( - - - - - - ))} + {!!tableData.length && + tableData.map(({ addresses, symbol, website }) => ( + + + + + + ))}
SymbolWebsiteAddresses
{symbol} - - Website - - - {Object.keys(addresses).length} -
{symbol} + + Website + + {addresses}
diff --git a/src/modules/Platform/components/Chain.tsx b/src/modules/Platform/components/Chain.tsx deleted file mode 100644 index 5b71507b..00000000 --- a/src/modules/Platform/components/Chain.tsx +++ /dev/null @@ -1,131 +0,0 @@ -import {type ApiMainReply, chains, getChainBridges, getChainProtocols, integrations} from "@stabilitydao/stability"; - -import { useStore } from "@nanostores/react"; - -import { apiData } from "@store"; - -import { Breadcrumbs } from "@ui"; - -import { ChainStatus } from "../ui"; -import {numberWithSpaces} from "../index.tsx"; - -interface IProps { - chain: number; -} - -const Chain: React.FC = ({ chain }) => { - const $apiData: ApiMainReply | undefined = useStore(apiData); - - const chainData = { - ...chains[chain], - tvl: $apiData?.total.chainTvl[chain] || 0, - }; - - const bridges = getChainBridges(chainData.name); - - const protocols = getChainProtocols(chain.toString()) - - return ( -
- - -
-
-

- {chainData.name} -

- -
- {[ - ['Chain ID', chain], - ['Status', ,], - ['TVL', `\$${numberWithSpaces($apiData?.total.chainTvl[chain.toString()] ? $apiData?.total.chainTvl[chain.toString()].toFixed(0) : '-')}`,], - ].map((t) => ( -
-
{t[1]}
-
- {t[0]} -
-
- ))} -
-
- -
-

Bridges

- -
- {bridges.map(bridge => - - {bridge.name} - {bridge.name} - - )} -
- -
- - {protocols.length > 0 && -
-

Protocols

-
- {protocols.map(protocol => ( -
- {protocol.name} - {protocol.name} -
- ))} -
-
- } - - {chainData.multisig && -
-

Treasury

-
{chainData.multisig}
-
} - - {chainData.chainLibGithubId && - - } - -
- -
- ); -}; - -export {Chain}; diff --git a/src/modules/Platform/components/Chains/Chain.tsx b/src/modules/Platform/components/Chains/Chain.tsx new file mode 100644 index 00000000..84600488 --- /dev/null +++ b/src/modules/Platform/components/Chains/Chain.tsx @@ -0,0 +1,148 @@ +import { + type ApiMainReply, + chains, + getChainBridges, + getChainProtocols, + integrations, +} from "@stabilitydao/stability"; + +import { useStore } from "@nanostores/react"; + +import { apiData } from "@store"; + +import { formatNumber } from "@utils"; + +import { Breadcrumbs } from "@ui"; + +import { ChainStatus } from "../../ui"; + +interface IProps { + chain: number; +} + +const Chain: React.FC = ({ chain }) => { + const $apiData: ApiMainReply | undefined = useStore(apiData); + + const chainData = { + ...chains[chain], + tvl: $apiData?.total.chainTvl[chain] || 0, + }; + + const bridges = getChainBridges(chainData.name); + + const protocols = getChainProtocols(chain.toString()); + + const chainInfo = [ + { name: "Chain ID", content: chain }, + { name: "Status", content: }, + { + name: "TVL", + content: `\$${formatNumber($apiData?.total.chainTvl[chain.toString()] ? $apiData?.total.chainTvl[chain.toString()].toFixed(0) : "-", "withSpaces")}`, + }, + ]; + + return ( +
+ + +
+
+

+ {" "} + {chainData.name} +

+ +
+ {chainInfo.map(({ name, content }) => ( +
+
+ {content} +
+
+ {name} +
+
+ ))} +
+
+ +
+

Bridges

+ +
+ {bridges.map((bridge) => ( + + {bridge.name} + {bridge.name} + + ))} +
+
+ + {protocols.length > 0 && ( +
+

Protocols

+
+ {protocols.map((protocol) => ( +
+ {protocol.name} + {protocol.name} +
+ ))} +
+
+ )} + + {chainData.multisig && ( +
+

Treasury

+
{chainData.multisig}
+
+ )} + + {chainData.chainLibGithubId && ( + + )} +
+
+ ); +}; + +export { Chain }; diff --git a/src/modules/Platform/components/Chains.tsx b/src/modules/Platform/components/Chains/index.tsx similarity index 98% rename from src/modules/Platform/components/Chains.tsx rename to src/modules/Platform/components/Chains/index.tsx index aa4ab2a8..ab479ba6 100644 --- a/src/modules/Platform/components/Chains.tsx +++ b/src/modules/Platform/components/Chains/index.tsx @@ -8,13 +8,13 @@ import { apiData } from "@store"; import { Breadcrumbs, TableColumnSort } from "@ui"; -import { BridgesList, ChainStatus } from "../ui"; +import { BridgesList, ChainStatus } from "../../ui"; import { formatNumber, sortTable, getShortAddress } from "@utils"; import { CHAINS_TABLE } from "@constants"; -import { CHAINS_INFO } from "../constants"; +import { CHAINS_INFO } from "../../constants"; import type { TTableColumn, IChainData } from "@types"; diff --git a/src/modules/Platform/components/Integrations.tsx b/src/modules/Platform/components/Integrations.tsx index ecffa1af..fa5f4d1f 100644 --- a/src/modules/Platform/components/Integrations.tsx +++ b/src/modules/Platform/components/Integrations.tsx @@ -1,27 +1,38 @@ -import { DefiCategory, integrations } from "@stabilitydao/stability"; +import { useState, useEffect } from "react"; -import { Breadcrumbs } from "@ui"; +import { integrations } from "@stabilitydao/stability"; -const ProtocolBadge: React.FC<{ - name: string; - category: DefiCategory; - supportedChains: number; -}> = ({ name, category, supportedChains }) => { - let categoryFont = "text-[16px]"; - return ( -
- - {category} - - {name} - - {supportedChains} - -
- ); -}; +import { ProtocolBadge } from "../ui"; + +import { Breadcrumbs, TableColumnSort } from "@ui"; + +import { sortTable } from "@utils"; + +import { INTEGRATIONS_TABLE } from "@constants"; + +import type { TTableColumn } from "@types"; + +import type { DeFiOrganization } from "@stabilitydao/stability"; const Integrations = (): JSX.Element => { + const [tableStates, setTableStates] = useState(INTEGRATIONS_TABLE); + const [tableData, setTableData] = useState([]); + + const initTableData = async () => { + if (integrations) { + const integrationsData = Object.entries(integrations).map( + (integration) => ({ + ...integration[1], + protocolsLength: Object.keys(integration[1].protocols).length, + }) + ); + setTableData(integrationsData); + } + }; + + useEffect(() => { + initTableData(); + }, []); return (
@@ -31,93 +42,97 @@ const Integrations = (): JSX.Element => { - - - - + {tableStates.map((value: TTableColumn, index: number) => ( + + ))} - {Object.entries(integrations).map(([, organization]) => ( - - - + + + - - - - ))} + ))} + + + + ) + )}
OrganizationLinksProtocolsUsage
-
- {organization.name} - {organization.name} -
- 		-
+
Website - - {organization.github ? ( + {name} +
+ 		+
Github - ) : ( - - )} - {organization.defiLlama ? ( - - DefiLlama + Github + + ) : ( + + )} + {defiLlama ? ( + + DefiLlama + + ) : ( + + )} +
+ 		+
+ {Object.keys(protocols).map((propocolId) => ( + - - ) : ( - - )} -
- 		-
- {Object.keys(organization.protocols).map((propocolId) => ( - - ))} -
-
diff --git a/src/modules/Platform/components/Node.tsx b/src/modules/Platform/components/Network/Node.tsx similarity index 100% rename from src/modules/Platform/components/Node.tsx rename to src/modules/Platform/components/Network/Node.tsx diff --git a/src/modules/Platform/components/Network.tsx b/src/modules/Platform/components/Network/index.tsx similarity index 100% rename from src/modules/Platform/components/Network.tsx rename to src/modules/Platform/components/Network/index.tsx diff --git a/src/modules/Platform/components/Strategies.tsx b/src/modules/Platform/components/Strategies.tsx index 9aa46953..f53e65f1 100644 --- a/src/modules/Platform/components/Strategies.tsx +++ b/src/modules/Platform/components/Strategies.tsx @@ -1,55 +1,41 @@ -import { - getStrategiesTotals, - strategies, - type StrategyShortId, -} from "@stabilitydao/stability"; +import { useState, useEffect } from "react"; -import { Breadcrumbs } from "@ui"; +import { strategies } from "@stabilitydao/stability"; -const StrategyStatus: React.FC<{ - state: string; -}> = ({ state }) => { - let bg = "bg-gray-800"; - let text = "text-white"; - if (state === "LIVE") { - bg = "bg-green-800"; - } else if (state === "DEPLOYMENT") { - bg = "bg-violet-800"; - } else if (state === "DEVELOPMENT") { - bg = "bg-blue-700"; - } else if (state === "AWAITING") { - bg = "bg-orange-900"; - } else if (state === "BLOCKED") { - bg = "bg-red-900"; - } else if (state === "PROPOSAL") { - bg = "bg-yellow-800"; - } +import { Breadcrumbs, TableColumnSort } from "@ui"; + +import { StrategyStatus } from "../ui"; + +import { sortTable } from "@utils"; + +import { STRATEGIES_TABLE } from "@constants"; + +import { STRATEGIES_INFO } from "../constants"; + +import type { TStrategyState, TTableColumn, TTableStrategy } from "@types"; - return ( - - { - state - /*.replace("AWAITING_DEPLOYMENT", "Awaiting deployment") - .replace("NOT_SUPPORTED", "Not supported") - .replace("SUPPORTED", "Supported") - .replace("AWAITING_ISSUE_CREATION", "Awaiting issue creation")*/ - } - - ); -}; const Strategies = (): JSX.Element => { - const strategiesTotals = getStrategiesTotals(); + const [tableStates, setTableStates] = useState(STRATEGIES_TABLE); + const [tableData, setTableData] = useState([]); + + const initTableData = async () => { + if (strategies) { + const strategiesData = Object.entries(strategies).map((strategy) => ({ + id: strategy[1].id, + shortId: strategy[1].shortId, + state: strategy[1].state, + contractGithubId: strategy[1].contractGithubId, + color: strategy[1].color, + bgColor: strategy[1].bgColor, + })); + + setTableData(strategiesData); + } + }; - const strategiesInfo = [ - ["Live", strategiesTotals.LIVE, "text-green-400"], - ["Awaiting deployment", strategiesTotals.DEPLOYMENT, "text-violet-400"], - ["Development", strategiesTotals.DEVELOPMENT, "text-blue-400"], - ["Awaiting developer", strategiesTotals.AWAITING, "text-yellow-200"], - ["Blocked", strategiesTotals.BLOCKED, "text-red-200"], - ["Proposal", strategiesTotals.PROPOSAL, "text-orange-300"], - ]; + useEffect(() => { + initTableData(); + }, []); return (
@@ -57,14 +43,14 @@ const Strategies = (): JSX.Element => {

Strategies

- {strategiesInfo.map((info) => ( + {STRATEGIES_INFO.map(({ name, state, color }) => (
-
{info[1]}
+
{state}
- {info[0]} + {name}
))} @@ -73,55 +59,65 @@ const Strategies = (): JSX.Element => { - - - - + {tableStates.map((value: TTableColumn, index: number) => ( + + ))} - {Object.keys(strategies).map((shortId: string) => { - const strategy = strategies[shortId as StrategyShortId]; - return ( - - - - - - - ); - })} + {!!tableData.length && + tableData.map( + ({ id, shortId, state, contractGithubId, color, bgColor }) => { + return ( + + + + + + + ); + } + )}
IDNameStateIssue
-
- - {strategy.shortId} - -
- 		{strategy.id} -
- -
- 		-
- - Github - -
-
+
+ + {shortId} + +
+ 		{id} +
+ +
+ 		+
+ + Github + +
+
diff --git a/src/modules/Platform/constants/index.ts b/src/modules/Platform/constants/index.ts index 2aadc0f9..6ec71a0d 100644 --- a/src/modules/Platform/constants/index.ts +++ b/src/modules/Platform/constants/index.ts @@ -1,7 +1,13 @@ -import { chains, getChainsTotals } from "@stabilitydao/stability"; +import { + chains, + getChainsTotals, + getStrategiesTotals, +} from "@stabilitydao/stability"; const TOTAL_CHAINS = getChainsTotals(); +const TOTAL_STRATEGIES = getStrategiesTotals(); + const CHAINS_INFO = [ { name: "Total", @@ -36,4 +42,38 @@ const CHAINS_INFO = [ }, ]; -export { CHAINS_INFO }; +const STRATEGIES_INFO = [ + { name: "Live", state: TOTAL_STRATEGIES.LIVE, color: "text-green-400" }, + { + name: "Awaiting deployment", + state: TOTAL_STRATEGIES.DEPLOYMENT, + color: "text-violet-400", + }, + { + name: "Development", + state: TOTAL_STRATEGIES.DEVELOPMENT, + color: "text-blue-400", + }, + { + name: "Awaiting developer", + state: TOTAL_STRATEGIES.AWAITING, + color: "text-yellow-200", + }, + { name: "Blocked", state: TOTAL_STRATEGIES.BLOCKED, color: "text-red-200" }, + { + name: "Proposal", + state: TOTAL_STRATEGIES.PROPOSAL, + color: "text-orange-300", + }, +]; + +const STATE_COLORS = { + LIVE: "bg-green-800", + DEPLOYMENT: "bg-violet-800", + DEVELOPMENT: "bg-blue-700", + AWAITING: "bg-orange-900", + BLOCKED: "bg-red-900", + PROPOSAL: "bg-yellow-800", +}; + +export { CHAINS_INFO, STRATEGIES_INFO, STATE_COLORS }; diff --git a/src/modules/Platform/index.tsx b/src/modules/Platform/index.tsx index 5e773457..bbc52984 100644 --- a/src/modules/Platform/index.tsx +++ b/src/modules/Platform/index.tsx @@ -9,21 +9,16 @@ import { getStrategiesTotals, integrations, seeds, - strategies, - StrategyShortId, - StrategyState, } from "@stabilitydao/stability"; -import tokenlist from "@stabilitydao/stability/out/stability.tokenlist.json"; +import { formatNumber } from "@utils"; + +import { CountersBlockCompact } from "@ui"; import { apiData, currentChainID, platformVersions } from "@store"; +import tokenlist from "@stabilitydao/stability/out/stability.tokenlist.json"; import packageJson from "../../../package.json"; -import { CountersBlockCompact } from "../../ui/CountersBlockCompact.tsx"; - -function numberWithSpaces(x: number | string) { - return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " "); -} const Platform = (): JSX.Element => { const $currentChainID = useStore(currentChainID); @@ -33,39 +28,98 @@ const Platform = (): JSX.Element => { const chainsTotals = getChainsTotals(); const strategiesTotals = getStrategiesTotals(); - const strategyStatus = { - live: 0, - dev: 0, - awaiting: 0, - proposed: 0, - }; - // @ts-ignore - Object.keys(strategies).forEach((shortId: StrategyShortId) => { - const status = strategies[shortId].state; - if (status === StrategyState.LIVE) { - strategyStatus.live++; - } - if (status === StrategyState.DEVELOPMENT) { - strategyStatus.dev++; - } - if (status === StrategyState.AWAITING) { - strategyStatus.awaiting++; - } - if ( - status === StrategyState.POSSIBLE || - status === StrategyState.PROPOSAL - ) { - strategyStatus.proposed++; - } - }); - - // const capitalize = (s: string) => (s && s[0].toUpperCase() + s.slice(1)) || "" - let protocolsTotal = 0; for (const defiOrgCode of Object.keys(integrations)) { protocolsTotal += Object.keys(integrations[defiOrgCode].protocols).length; } + const platformInfo = [ + { + name: "AUM", + content: `\$${formatNumber($apiData?.total.tvl || 0, "withSpaces")}`, + }, + { + name: "Users earned", + content: `\$${formatNumber($apiData?.total.usersEarned.toFixed(0) || 0, "withSpaces")}`, + }, + { name: "Vaults", content: $apiData?.total.activeVaults }, + ]; + + const strategiesInfo = [ + { name: "Live", value: strategiesTotals.LIVE.toString(), color: "#4FAE2D" }, + { + name: "Awaiting deployment", + value: strategiesTotals.DEPLOYMENT.toString(), + color: "#612FFB", + }, + { + name: "Development", + value: strategiesTotals.DEVELOPMENT.toString(), + color: "#2D67FB", + }, + { + name: "Awaiting developer", + value: strategiesTotals.AWAITING.toString(), + color: "#E1E114", + }, + { + name: "Blocked", + value: strategiesTotals.BLOCKED.toString(), + color: "#E01A1A", + }, + { + name: "Proposal", + value: strategiesTotals.PROPOSAL.toString(), + color: "#FB8B13", + }, + ]; + + const chainsInfo = Object.keys(chainStatusInfo).map((status) => ({ + color: chainStatusInfo[status as ChainStatus].color, + name: chainStatusInfo[status as ChainStatus].title, + value: chainsTotals[status as ChainStatus].toString(), + })); + + const integrationInfo = [ + { + name: "Organizations", + value: Object.keys(integrations).length.toString(), + color: "#612FFB", + }, + { name: "Protocols", value: protocolsTotal.toString(), color: "#05B5E1" }, + ]; + + const assetsInfo = [ + { name: "Assets", value: assets.length.toString(), color: "#E1E114" }, + { + name: "Tokenlist items", + value: tokenlist.tokens.length.toString(), + color: "#2D67FB", + }, + ]; + + const networksInfo = [ + { + name: "Nodes", + value: Object.keys($apiData?.network.nodes || []).length.toString(), + color: "#2D67FB", + }, + { name: "Seed nodes", value: seeds.length.toString(), color: "#4FAE2D" }, + ]; + + const factoryInfo = [ + { + name: "Available for building", + value: $apiData?.total.vaultForBuilding.toString() || "-", + color: "#2D67FB", + }, + { + name: "Farms", + value: $apiData?.total.farms.toString() || "-", + color: "#4FAE2D", + }, + ]; + return (

Platform

@@ -100,22 +154,15 @@ const Platform = (): JSX.Element => {
-
- {[ - ["AUM", `\$${numberWithSpaces($apiData?.total.tvl || 0)}`], - [ - "Users earned", - `\$${numberWithSpaces($apiData?.total.usersEarned.toFixed(0) || 0)}`, - ], - ["Vaults", $apiData?.total.activeVaults], - ].map((t) => ( +
+ {platformInfo.map(({ name, content }) => (
-
{t[1]}
+
{content}
- {t[0]} + {name}
))} @@ -126,105 +173,42 @@ const Platform = (): JSX.Element => { title="Strategies" link="/strategies" linkTitle="Go to strategies" - counters={[ - ["Live", strategiesTotals.LIVE, "#4FAE2D"], - ["Awaiting deployment", strategiesTotals.DEPLOYMENT, "#612FFB"], - ["Development", strategiesTotals.DEVELOPMENT, "#2D67FB"], - ["Awaiting developer", strategiesTotals.AWAITING, "#E1E114"], - ["Blocked", strategiesTotals.BLOCKED, "#E01A1A"], - ["Proposal", strategiesTotals.PROPOSAL, "#FB8B13"], - ].map((t) => { - return { - color: t[2].toString(), - name: t[0].toString(), - value: t[1].toString(), - }; - })} + counters={strategiesInfo} /> { - return { - color: chainStatusInfo[status as ChainStatus].color, - name: chainStatusInfo[status as ChainStatus].title, - value: chainsTotals[status as ChainStatus].toString(), - }; - })} + counters={chainsInfo} /> { - return { - color: t[2].toString(), - name: t[0].toString(), - value: t[1].toString(), - }; - })} + counters={integrationInfo} /> { - return { - color: t[2].toString(), - name: t[0].toString(), - value: t[1].toString(), - }; - })} + counters={assetsInfo} /> { - return { - color: t[2].toString(), - name: t[0].toString(), - value: t[1].toString(), - }; - })} + counters={networksInfo} /> { - return { - color: t[2].toString(), - name: t[0].toString(), - value: t[1].toString(), - }; - })} + counters={factoryInfo} />
@@ -237,7 +221,7 @@ const Platform = (): JSX.Element => { target="_blank" title="Go to smart contracts source code on Github" > - + GitHub 💎 Stability Platform {$platformVersions[$currentChainID]} @@ -249,7 +233,7 @@ const Platform = (): JSX.Element => { target="_blank" title="Go to library source code on Github" > - + GitHub 📦 Stability Integration Library{" "} {packageJson.dependencies["@stabilitydao/stability"].replace( @@ -265,7 +249,7 @@ const Platform = (): JSX.Element => { target="_blank" title="Go to UI source code on Github" > - + GitHub 👩‍🚀 Stability User Interface {packageJson.version} @@ -276,23 +260,4 @@ const Platform = (): JSX.Element => { ); }; -const GitHub: React.FC<{}> = () => { - return ( - - - - ); -}; - -export { Platform, numberWithSpaces }; +export { Platform }; diff --git a/src/modules/Platform/ui/ProtocolBadge.tsx b/src/modules/Platform/ui/ProtocolBadge.tsx new file mode 100644 index 00000000..b6f7d3aa --- /dev/null +++ b/src/modules/Platform/ui/ProtocolBadge.tsx @@ -0,0 +1,27 @@ +import type { DefiCategory } from "@stabilitydao/stability"; + +type TProps = { + name: string; + category: DefiCategory; + supportedChains: number; +}; + +const ProtocolBadge: React.FC = ({ + name, + category, + supportedChains, +}) => { + return ( +
+ + {category} + + {name} + + {supportedChains} + +
+ ); +}; + +export { ProtocolBadge }; diff --git a/src/modules/Platform/ui/StrategyStatus.tsx b/src/modules/Platform/ui/StrategyStatus.tsx new file mode 100644 index 00000000..a8366aac --- /dev/null +++ b/src/modules/Platform/ui/StrategyStatus.tsx @@ -0,0 +1,18 @@ +import { STATE_COLORS } from "../constants"; + +import type { TStrategyState } from "@types"; + +type TProps = { + state: TStrategyState; +}; + +const StrategyStatus: React.FC = ({ state }) => { + const bgColor = STATE_COLORS[state] || "bg-gray-800"; + + const baseClasses = + "inline-flex text-[12px] px-3 py-1 rounded-2xl justify-center w-[120px] whitespace-nowrap text-white font-bold"; + + return {state}; +}; + +export { StrategyStatus }; diff --git a/src/modules/Platform/ui/index.ts b/src/modules/Platform/ui/index.ts index c68302fd..6df5b1f4 100644 --- a/src/modules/Platform/ui/index.ts +++ b/src/modules/Platform/ui/index.ts @@ -1,4 +1,6 @@ import { BridgesList } from "./BridgesList"; import { ChainStatus } from "./ChainStatus"; +import { ProtocolBadge } from "./ProtocolBadge"; +import { StrategyStatus } from "./StrategyStatus"; -export { BridgesList, ChainStatus }; +export { BridgesList, ChainStatus, ProtocolBadge, StrategyStatus }; diff --git a/src/modules/Vaults/components/modals/PlatformModal.tsx b/src/modules/Vaults/components/modals/PlatformModal.tsx index 86a1b1fb..b8f02191 100644 --- a/src/modules/Vaults/components/modals/PlatformModal.tsx +++ b/src/modules/Vaults/components/modals/PlatformModal.tsx @@ -12,25 +12,6 @@ interface IProps { setModalState: React.Dispatch>; } -const GitHub: React.FC<{}> = () => { - return ( - - - - ); -}; - const TheGraph: React.FC<{}> = () => { return (
@@ -244,7 +225,7 @@ const PlatformModal: React.FC = ({ setModalState }) => { title="Smart contracts source code" className="flex items-center gap-1 hover:bg-[#2a2c49]" > - + GitHub stability-contracts
@@ -259,7 +240,7 @@ const PlatformModal: React.FC = ({ setModalState }) => { title="Github repository with User interface source code" className="flex items-center gap-1 hover:bg-[#2a2c49]" > - + GitHub stability-ui v{packageJson.version}
@@ -273,7 +254,7 @@ const PlatformModal: React.FC = ({ setModalState }) => { title="Github repository with Subgraph source code" className="inline-flex items-center gap-1 hover:bg-[#2a2c49]" > - + GitHub stability-subgraph > + | Dispatch> + | Dispatch> + | Dispatch>; + type TSort = { table: TTableColumn[]; setTable: Dispatch>; - tableData: IChainData[]; - setTableData: Dispatch>; + tableData: TTableData | any; + setTableData: TDispatchedTableData; }; //// API @@ -571,4 +604,9 @@ export type { TLocalStorageToken, IChainData, TSort, + TAssetData, + TTableData, + TDispatchedTableData, + TStrategyState, + TTableStrategy, }; diff --git a/src/ui/CountersBlockCompact.tsx b/src/ui/CountersBlockCompact.tsx index fbb30b55..b8471d69 100644 --- a/src/ui/CountersBlockCompact.tsx +++ b/src/ui/CountersBlockCompact.tsx @@ -1,5 +1,6 @@ -import { type ICounterProps } from "./Counter.tsx"; -import { CounterListItem } from "./CounterListItem.tsx"; +import { CounterListItem } from "./CounterListItem"; + +import type { ICounterProps } from "./Counter"; interface IProps { title: string; @@ -42,12 +43,12 @@ const CountersBlockCompact: React.FC = ({
- {counters.map((t) => ( + {counters.map((counter) => ( ))}
diff --git a/src/ui/TableColumnSort.tsx b/src/ui/TableColumnSort.tsx index 548fd7c6..ce299def 100644 --- a/src/ui/TableColumnSort.tsx +++ b/src/ui/TableColumnSort.tsx @@ -1,6 +1,11 @@ import { Dispatch, SetStateAction } from "react"; -import type { TTableColumn, IChainData, TSort } from "@types"; +import type { + TTableColumn, + TSort, + TTableData, + TDispatchedTableData, +} from "@types"; type TProps = { index: number; @@ -8,8 +13,8 @@ type TProps = { sort: ({ table, setTable, tableData, setTableData }: TSort) => void; table: TTableColumn[]; setTable: Dispatch>; - tableData: IChainData[]; - setTableData: Dispatch>; + tableData: TTableData; + setTableData: TDispatchedTableData; }; const TableColumnSort: React.FC = ({ diff --git a/src/ui/index.ts b/src/ui/index.ts index 20026628..ef1bde2f 100644 --- a/src/ui/index.ts +++ b/src/ui/index.ts @@ -12,6 +12,7 @@ import { Breadcrumbs } from "./Breadcrumbs"; import { ColorIndicator } from "./ColorIndicator"; import { RiskIndicator } from "./RiskIndicator"; import { CountersBlock } from "./CountersBlock"; +import { CountersBlockCompact } from "./CountersBlockCompact"; import { Checkbox } from "./Checkbox"; import { HeadingText } from "./HeadingText"; import { FieldValue } from "./FieldValue"; @@ -41,6 +42,7 @@ export { RiskIndicator, ColorIndicator, CountersBlock, + CountersBlockCompact, Checkbox, HeadingText, FieldValue, diff --git a/src/utils/functions/formatNumber.ts b/src/utils/functions/formatNumber.ts index 4506f95b..fd253329 100644 --- a/src/utils/functions/formatNumber.ts +++ b/src/utils/functions/formatNumber.ts @@ -156,6 +156,11 @@ export const formatNumber = ( changedValue = smallFormattedValue; break; + case "withSpaces": + value = String(value); + + changedValue = value.replace(/\B(?=(\d{3})+(?!\d))/g, " "); + break; default: break; } diff --git a/src/utils/functions/sortTable.ts b/src/utils/functions/sortTable.ts index f428804a..3dba7d6d 100644 --- a/src/utils/functions/sortTable.ts +++ b/src/utils/functions/sortTable.ts @@ -2,8 +2,6 @@ import { dataSorter } from "./dataSorter"; import type { TTableColumn, TSort } from "@types"; -import type { Chain } from "@stabilitydao/stability"; - const sortTable = ({ table, setTable, @@ -16,8 +14,8 @@ const sortTable = ({ if (state.sortType !== "none") { sortedVaults = [...sortedVaults].sort((a, b) => dataSorter( - String(a[state.keyName as keyof Chain]), - String(b[state.keyName as keyof Chain]), + String(a[state.keyName]), + String(b[state.keyName]), state.dataType, state.sortType ) From d8720a969f217b6f9b77c563d54a31380c57c1df Mon Sep 17 00:00:00 2001 From: devtealeaf Date: Sat, 12 Oct 2024 18:42:26 +0300 Subject: [PATCH 2/4] fix: chains table links --- src/modules/Platform/components/Chains/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/modules/Platform/components/Chains/index.tsx b/src/modules/Platform/components/Chains/index.tsx index ab479ba6..18cbbb2e 100644 --- a/src/modules/Platform/components/Chains/index.tsx +++ b/src/modules/Platform/components/Chains/index.tsx @@ -128,6 +128,7 @@ const Chains = (): JSX.Element => { href={`https://github.com/stabilitydao/stability-contracts/issues/${chainLibGithubId}`} target="_blank" title="Go to chain library issue page on Github" + onClick={(event) => event.stopPropagation()} > Date: Sat, 12 Oct 2024 19:13:40 +0300 Subject: [PATCH 3/4] Adding unsortable property to table column --- src/constants/tables.ts | 10 ++++++---- src/types/index.ts | 1 + src/ui/TableColumnSort.tsx | 40 +++++++++++++++++++++----------------- 3 files changed, 29 insertions(+), 22 deletions(-) diff --git a/src/constants/tables.ts b/src/constants/tables.ts index c5446675..1feaa309 100644 --- a/src/constants/tables.ts +++ b/src/constants/tables.ts @@ -110,9 +110,10 @@ const ASSETS_TABLE: TTableColumn[] = [ }, { name: "Website", - keyName: "website", + keyName: "", sortType: "none", - dataType: "string", + dataType: "", + unsortable: true, }, { name: "Addresses", @@ -130,9 +131,10 @@ const INTEGRATIONS_TABLE: TTableColumn[] = [ }, { name: "Links", - keyName: "website", + keyName: "", sortType: "none", - dataType: "string", + dataType: "", + unsortable: true, }, { name: "Protocols", diff --git a/src/types/index.ts b/src/types/index.ts index 66e6b85a..d2704ca6 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -283,6 +283,7 @@ type TTableColumn = { keyName: string; sortType: string; dataType: string; + unsortable?: boolean; }; type TTAbleFiltersVariant = { diff --git a/src/ui/TableColumnSort.tsx b/src/ui/TableColumnSort.tsx index ce299def..14eb2c67 100644 --- a/src/ui/TableColumnSort.tsx +++ b/src/ui/TableColumnSort.tsx @@ -27,6 +27,8 @@ const TableColumnSort: React.FC = ({ setTableData, }) => { const tabController = () => { + if (table[index].unsortable) return; + let nextCase: string = ""; switch (table[index].sortType) { case "none": @@ -57,7 +59,7 @@ const TableColumnSort: React.FC = ({ return (

= ({ {value}

- - - + {!table[index].unsortable && ( + + + + )} ); }; From b8d6fa200a95a8fa6b928550e836100938d03267 Mon Sep 17 00:00:00 2001 From: devtealeaf Date: Sun, 13 Oct 2024 00:43:17 +0300 Subject: [PATCH 4/4] upd: chains table --- src/constants/tables.ts | 26 +++++++++---------- .../Platform/components/Chains/index.tsx | 13 +++++----- 2 files changed, 20 insertions(+), 19 deletions(-) diff --git a/src/constants/tables.ts b/src/constants/tables.ts index 1feaa309..71d637d3 100644 --- a/src/constants/tables.ts +++ b/src/constants/tables.ts @@ -80,22 +80,22 @@ const CHAINS_TABLE: TTableColumn[] = [ sortType: "none", dataType: "number", }, - { - name: "Treasury", - keyName: "multisig", - sortType: "none", - dataType: "string", - }, - { - name: "Issue", - keyName: "chainLibGithubId", - sortType: "none", - dataType: "number", - }, + // { + // name: "Treasury", + // keyName: "multisig", + // sortType: "none", + // dataType: "string", + // }, + // { + // name: "Issue", + // keyName: "chainLibGithubId", + // sortType: "none", + // dataType: "number", + // }, { name: "Status", keyName: "status", sortType: "none", dataType: "string" }, { name: "Bridges", - keyName: "chainId", //temp + keyName: "bridgesCount", sortType: "none", dataType: "number", }, diff --git a/src/modules/Platform/components/Chains/index.tsx b/src/modules/Platform/components/Chains/index.tsx index 18cbbb2e..6cd2e101 100644 --- a/src/modules/Platform/components/Chains/index.tsx +++ b/src/modules/Platform/components/Chains/index.tsx @@ -1,6 +1,6 @@ import { useState, useEffect } from "react"; -import { chains } from "@stabilitydao/stability"; +import { chains, getChainBridges } from "@stabilitydao/stability"; import { useStore } from "@nanostores/react"; @@ -10,7 +10,7 @@ import { Breadcrumbs, TableColumnSort } from "@ui"; import { BridgesList, ChainStatus } from "../../ui"; -import { formatNumber, sortTable, getShortAddress } from "@utils"; +import { formatNumber, sortTable } from "@utils"; import { CHAINS_TABLE } from "@constants"; @@ -35,6 +35,7 @@ const Chains = (): JSX.Element => { const chainsData = Object.entries(chains).map((chain) => ({ ...chain[1], chainId: Number(chain[1].chainId), + bridgesCount: getChainBridges(chain[1].name).length, tvl: $apiData?.total.chainTvl[chain[0]] || 0, })); @@ -90,8 +91,8 @@ const Chains = (): JSX.Element => { name, status, img, - multisig, - chainLibGithubId, + // chainLibGithubId, + // multisig, tvl, }) => ( { {formatNumber(tvl, "abbreviate")} - + {/*
{multisig && {getShortAddress(multisig)}}
@@ -138,7 +139,7 @@ const Chains = (): JSX.Element => { )}
- + */}