From 4dca40cd013927ec457a4840d1b8bbed4fbebac7 Mon Sep 17 00:00:00 2001 From: Cheslav Zhuravsky Date: Thu, 23 May 2024 13:54:31 +0700 Subject: [PATCH] updates --- src/features/cybernet/ui/Cybernet.tsx | 15 ++-- src/features/cybernet/ui/cybernet.context.tsx | 73 +++++++++++++++++++ src/features/cybernet/ui/cybernetTexts.ts | 68 +++++++++++++++++ .../Delegate.module.scss} | 0 .../Delegator.tsx => Delegate/Delegate.tsx} | 20 ++--- .../DelegateActionBar/DelegateActionBar.tsx} | 4 +- .../cybernet/ui/pages/Delegates/Delegates.tsx | 14 +++- .../DelegatesTable.tsx} | 16 ++-- .../Main/ContractsTable/ContractsTable.tsx | 47 ++++++------ .../cybernet/ui/pages/Main/Main.module.scss | 7 ++ src/features/cybernet/ui/pages/Main/Main.tsx | 35 ++++++--- .../cybernet/ui/pages/Subnets/Subnets.tsx | 5 +- .../Subnets/SubnetsTable/SubnetsTable.tsx | 9 ++- src/features/cybernet/ui/useCybernetTexts.ts | 34 +++++++++ 14 files changed, 279 insertions(+), 68 deletions(-) create mode 100644 src/features/cybernet/ui/cybernet.context.tsx create mode 100644 src/features/cybernet/ui/cybernetTexts.ts rename src/features/cybernet/ui/pages/{Delegator/Delegator.module.scss => Delegate/Delegate.module.scss} (100%) rename src/features/cybernet/ui/pages/{Delegator/Delegator.tsx => Delegate/Delegate.tsx} (90%) rename src/features/cybernet/ui/pages/{Delegator/DelegatorActionBar/DelegatorActionBar.tsx => Delegate/DelegateActionBar/DelegateActionBar.tsx} (96%) rename src/features/cybernet/ui/pages/Delegates/{DelegatorsTable/DelegatorsTable.tsx => DelegatesTable/DelegatesTable.tsx} (92%) create mode 100644 src/features/cybernet/ui/useCybernetTexts.ts diff --git a/src/features/cybernet/ui/Cybernet.tsx b/src/features/cybernet/ui/Cybernet.tsx index bd0f09815..7407909b3 100644 --- a/src/features/cybernet/ui/Cybernet.tsx +++ b/src/features/cybernet/ui/Cybernet.tsx @@ -3,10 +3,11 @@ import { Outlet, Route, Routes } from 'react-router-dom'; import Main from './pages/Main/Main'; import Subnet from './pages/Subnet/Subnet'; import Delegates from './pages/Delegates/Delegates'; -import Delegator from './pages/Delegator/Delegator'; +import Delegate from './pages/Delegate/Delegate'; import Subnets from './pages/Subnets/Subnets'; import MyStake from './pages/MyStake/MyStake'; import { Helmet } from 'react-helmet'; +import CybernetProvider from './cybernet.context'; function Cybernet() { return ( @@ -15,10 +16,12 @@ function Cybernet() { path="/" element={
- - cybernet | cyb - - + + + cybernet | cyb + + +
} > @@ -26,7 +29,7 @@ function Cybernet() { } /> } />u } /> - } /> + } /> } /> diff --git a/src/features/cybernet/ui/cybernet.context.tsx b/src/features/cybernet/ui/cybernet.context.tsx new file mode 100644 index 000000000..157e8990b --- /dev/null +++ b/src/features/cybernet/ui/cybernet.context.tsx @@ -0,0 +1,73 @@ +import React, { useMemo, useState } from 'react'; +import { Networks } from 'src/types/networks'; +import { CYBERNET_CONTRACT_ADDRESS } from '../constants'; + +type ContractType = 'graph' | 'ml'; + +type Contract = { + name: string; + address: string; + apr: number; +}; + +const data = [ + { + name: 'graph', + type: 'graph', + address: CYBERNET_CONTRACT_ADDRESS, + // apr: 35, + // docs: 'https://docs.spacepussy.ai', + network: Networks.SPACE_PUSSY, + }, + { + name: 'ml', + type: 'ml', + address: '-', + // apr: 20, + // docs: 'https://docs.spacepussy.ai', + network: Networks.SPACE_PUSSY, + }, +]; + +const CybernetContext = React.createContext<{ + contracts: Contract[]; + selectContract: (address: string) => void; + selectedContract: string | null; +}>({ + contracts: {}, + selectContract: null, + selectedContract: null, +}); + +export function useCybernet() { + return React.useContext(CybernetContext); +} + +function CybernetProvider({ children }: { children: React.ReactNode }) { + const [selectedContractAddress, setSelectedContractAddress] = useState( + CYBERNET_CONTRACT_ADDRESS + ); + const [contracts] = useState<(typeof CybernetContext)['']>(data); + + const selectedContract = contracts.find( + (contract) => contract.address === selectedContractAddress + ); + + console.debug('selectedContract', selectedContract); + + return ( + { + return { + contracts, + selectContract: setSelectedContractAddress, + selectedContract, + }; + }, [contracts, selectedContract])} + > + {children} + + ); +} + +export default CybernetProvider; diff --git a/src/features/cybernet/ui/cybernetTexts.ts b/src/features/cybernet/ui/cybernetTexts.ts new file mode 100644 index 000000000..89a644c3b --- /dev/null +++ b/src/features/cybernet/ui/cybernetTexts.ts @@ -0,0 +1,68 @@ +export const texts: { + [key: string]: { + default: string | { single: string; plural: string }; + graph: string | { single: string; plural: string }; + }; +} = { + contract: { + default: 'contract', + graph: 'verse', + }, + root: { + default: 'root', + graph: 'board', + }, + subnetwork: { + default: 'subnet', + graph: { + single: 'faculty', + plural: 'faculties', + }, + }, + uid: { + default: 'uid', + graph: 'card', + }, + contractOwner: { + default: 'owner', + graph: 'rector', + }, + subnetOwner: { + default: 'owner', + graph: 'dean', + }, + delegate: { + default: 'delegate', + graph: 'mentor', + }, + delegator: { + default: 'delegator', + graph: 'learner', + }, + validator: { + default: 'validator', + graph: 'professor', + }, + rootValidator: { + default: 'lead', + graph: 'professor', + }, + miner: { + default: 'miner', + graph: 'teacher', + }, +}; + +// fix +export type Texts = + | 'contract' + | 'root' + | 'subnetwork' + | 'uid' + | 'contractOwner' + | 'subnetOwner' + | 'delegate' + | 'delegator' + | 'validator' + | 'rootValidator' + | 'miner'; diff --git a/src/features/cybernet/ui/pages/Delegator/Delegator.module.scss b/src/features/cybernet/ui/pages/Delegate/Delegate.module.scss similarity index 100% rename from src/features/cybernet/ui/pages/Delegator/Delegator.module.scss rename to src/features/cybernet/ui/pages/Delegate/Delegate.module.scss diff --git a/src/features/cybernet/ui/pages/Delegator/Delegator.tsx b/src/features/cybernet/ui/pages/Delegate/Delegate.tsx similarity index 90% rename from src/features/cybernet/ui/pages/Delegator/Delegator.tsx rename to src/features/cybernet/ui/pages/Delegate/Delegate.tsx index 6248113d6..f3a76df2f 100644 --- a/src/features/cybernet/ui/pages/Delegator/Delegator.tsx +++ b/src/features/cybernet/ui/pages/Delegate/Delegate.tsx @@ -1,13 +1,11 @@ /* eslint-disable react/no-unstable-nested-components */ import { Link, useParams } from 'react-router-dom'; -import { Account, AmountDenom, DenomArr, MainContainer } from 'src/components'; +import { Account, AmountDenom, MainContainer } from 'src/components'; import Display from 'src/components/containerGradient/Display/Display'; import DisplayTitle from 'src/components/containerGradient/DisplayTitle/DisplayTitle'; -import useQueryCybernetContract from 'src/features/cybernet/ui/useQueryCybernetContract.refactor'; -import { routes } from 'src/routes'; -import DelegatorActionBar from './DelegatorActionBar/DelegatorActionBar'; -import styles from './Delegator.module.scss'; +import DelegateActionBar from './DelegateActionBar/DelegateActionBar'; +import styles from './Delegate.module.scss'; import { Delegator, Delegator as DelegatorType, @@ -21,6 +19,7 @@ import { createColumnHelper } from '@tanstack/react-table'; import MusicalAddress from 'src/components/MusicalAddress/MusicalAddress'; import subnetStyles from '../Subnet/Subnet.module.scss'; import useDelegate from '../../hooks/useDelegate'; +import useCybernetTexts from '../../useCybernetTexts'; const columnHelper = createColumnHelper(); @@ -45,11 +44,12 @@ function Delegator() { const currentAddress = useAppSelector(selectCurrentAddress); const { loading, data, error, refetch } = useDelegate(id); + const { getText } = useCybernetTexts(); useAdviserTexts({ isLoading: loading, error, - defaultText: 'operator info', + defaultText: `${getText('delegate')} info`, }); const myStake = data?.nominators.find( @@ -63,7 +63,7 @@ function Delegator() { return ( {myStake && data.delegate !== currentAddress && ( - }> + }> {myStake.toLocaleString()} 🟣 )} @@ -137,7 +137,7 @@ function Delegator() { -

Investors

+

{getText('delegator', true)}

@@ -150,7 +150,7 @@ function Delegator() { ( )} - void; }; -function DelegatorActionBar({ address, stakedAmount, onSuccess }: Props) { +function DelegateActionBar({ address, stakedAmount, onSuccess }: Props) { const [step, setStep] = useState(Steps.INITIAL); const currentAddress = useAppSelector(selectCurrentAddress); @@ -158,4 +158,4 @@ function DelegatorActionBar({ address, stakedAmount, onSuccess }: Props) { ); } -export default DelegatorActionBar; +export default DelegateActionBar; diff --git a/src/features/cybernet/ui/pages/Delegates/Delegates.tsx b/src/features/cybernet/ui/pages/Delegates/Delegates.tsx index 0a86b4fac..7ed6a4ea3 100644 --- a/src/features/cybernet/ui/pages/Delegates/Delegates.tsx +++ b/src/features/cybernet/ui/pages/Delegates/Delegates.tsx @@ -1,11 +1,12 @@ import React from 'react'; import { Delegator } from 'src/features/cybernet/types'; import useCybernetContract from 'src/features/cybernet/ui/useQueryCybernetContract.refactor'; -import DelegatorsTable from './DelegatorsTable/DelegatorsTable'; +import DelegatesTable from './DelegatesTable/DelegatesTable'; import Display from 'src/components/containerGradient/Display/Display'; import DisplayTitle from 'src/components/containerGradient/DisplayTitle/DisplayTitle'; import { MainContainer } from 'src/components'; import useAdviserTexts from 'src/features/cybernet/_move/useAdviserTexts'; +import useCybernetTexts from '../../useCybernetTexts'; function Delegates() { const { data, loading, error } = useCybernetContract({ @@ -14,18 +15,23 @@ function Delegates() { }, }); + const { getText } = useCybernetTexts(); + useAdviserTexts({ isLoading: loading, error, - defaultText: 'choose operator to invest', + defaultText: `choose ${getText('delegate')} for learning`, }); console.log(data); return ( - }> - + } + > + ); diff --git a/src/features/cybernet/ui/pages/Delegates/DelegatorsTable/DelegatorsTable.tsx b/src/features/cybernet/ui/pages/Delegates/DelegatesTable/DelegatesTable.tsx similarity index 92% rename from src/features/cybernet/ui/pages/Delegates/DelegatorsTable/DelegatorsTable.tsx rename to src/features/cybernet/ui/pages/Delegates/DelegatesTable/DelegatesTable.tsx index 61a867cb2..dd09eb983 100644 --- a/src/features/cybernet/ui/pages/Delegates/DelegatorsTable/DelegatorsTable.tsx +++ b/src/features/cybernet/ui/pages/Delegates/DelegatesTable/DelegatesTable.tsx @@ -7,6 +7,7 @@ import { Link, useNavigate } from 'react-router-dom'; import { Delegator } from 'src/features/cybernet/types'; import { Account, AmountDenom } from 'src/components'; import useCurrentAddress from 'src/features/cybernet/_move/useCurrentAddress'; +import useCybernetTexts from '../../../useCybernetTexts'; type Props = { data: Delegator[]; @@ -15,10 +16,9 @@ type Props = { const columnHelper = createColumnHelper(); -function DelegatorsTable({ data, isLoading }: Props) { - console.log(data); - +function DelegatesTable({ data, isLoading }: Props) { const currentAddress = useCurrentAddress(); + const { getText } = useCybernetTexts(); function getTotalStake(nominators: Delegator['nominators']) { return nominators.reduce((acc, [, stake]) => acc + stake, 0); @@ -42,7 +42,7 @@ function DelegatorsTable({ data, isLoading }: Props) { }), columnHelper.accessor('delegate', { - header: 'operator', + header: getText('delegate'), enableSorting: false, cell: (info) => ( { const a = rowA.original.registrations.length; const b = rowB.original.registrations.length; @@ -88,7 +88,7 @@ function DelegatorsTable({ data, isLoading }: Props) { }), columnHelper.accessor('nominators', { - header: 'pussy stake', + header: 'pussy power', id: 'stake', sortingFn: (rowA, rowB) => { const totalA = getTotalStake(rowA.original.nominators); @@ -104,7 +104,7 @@ function DelegatorsTable({ data, isLoading }: Props) { }, }), columnHelper.accessor('nominators', { - header: 'my investment', + header: 'my stake', id: 'myStake', sortingFn: (rowA, rowB) => { const myStakeA = getMyStake(rowA.original.nominators) || 0; @@ -141,4 +141,4 @@ function DelegatorsTable({ data, isLoading }: Props) { ); } -export default DelegatorsTable; +export default DelegatesTable; diff --git a/src/features/cybernet/ui/pages/Main/ContractsTable/ContractsTable.tsx b/src/features/cybernet/ui/pages/Main/ContractsTable/ContractsTable.tsx index 464d47ac0..e288b0113 100644 --- a/src/features/cybernet/ui/pages/Main/ContractsTable/ContractsTable.tsx +++ b/src/features/cybernet/ui/pages/Main/ContractsTable/ContractsTable.tsx @@ -2,55 +2,54 @@ import { createColumnHelper } from '@tanstack/react-table'; import React, { useMemo } from 'react'; import { Link } from 'react-router-dom'; -import { LinkWindow } from 'src/components'; +import { AmountDenom, DenomArr, LinkWindow } from 'src/components'; import Table from 'src/components/Table/Table'; import { CYBERNET_CONTRACT_ADDRESS } from 'src/features/cybernet/constants'; import { routes } from 'src/routes'; import { trimString } from 'src/utils/utils'; - -const data = [ - { - name: 'graph', - address: CYBERNET_CONTRACT_ADDRESS, - apr: 35, - docs: 'https://docs.spacepussy.ai', - network: 'pussy 🟣', - }, - { - name: 'ml', - address: '-', - apr: 20, - docs: 'https://docs.spacepussy.ai', - network: 'pussy 🟣', - }, -]; +import { useCybernet } from '../../../cybernet.context'; +import ImgDenom from 'src/components/valueImg/imgDenom'; const columnHelper = createColumnHelper<(typeof data)[0]>(); function ContractsTable() { + const { contracts, selectContract } = useCybernet(); + return (
{ + const address = contracts[row!] + ? contracts[row!].address + : CYBERNET_CONTRACT_ADDRESS; + selectContract(address); + }} enableSorting={false} columns={useMemo( () => [ columnHelper.accessor('name', { header: '', }), - columnHelper.accessor('network', { - header: '', - }), columnHelper.accessor('apr', { header: '', - cell: (info) => {info.getValue()}%, + cell: (info) => 30%, }), columnHelper.accessor('docs', { header: '', cell: (info) => { - const value = info.getValue(); + // const value = info.getValue(); + const value = 'https://docs.spacepussy.ai'; return docs; }, }), + columnHelper.accessor('network', { + header: '', + cell: (info) => { + const value = info.getValue(); + + return ; + }, + }), columnHelper.accessor('address', { header: '', cell: (info) => { @@ -70,7 +69,7 @@ function ContractsTable() { ], [] )} - data={data} + data={contracts} /> ); } diff --git a/src/features/cybernet/ui/pages/Main/Main.module.scss b/src/features/cybernet/ui/pages/Main/Main.module.scss index f53e25dbd..98e1f3aef 100644 --- a/src/features/cybernet/ui/pages/Main/Main.module.scss +++ b/src/features/cybernet/ui/pages/Main/Main.module.scss @@ -58,3 +58,10 @@ flex: 1; } } + +.delegatorsBtn { + font-size: 16px; + margin: 0; + text-align: left; + cursor: not-allowed; +} diff --git a/src/features/cybernet/ui/pages/Main/Main.tsx b/src/features/cybernet/ui/pages/Main/Main.tsx index a8bb4cfda..c0440b8d0 100644 --- a/src/features/cybernet/ui/pages/Main/Main.tsx +++ b/src/features/cybernet/ui/pages/Main/Main.tsx @@ -17,10 +17,13 @@ import useCurrentAccountStake from '../../hooks/useCurrentAccountStake'; import useDelegate from '../../hooks/useDelegate'; import { routes } from 'src/routes'; import ContractsTable from './ContractsTable/ContractsTable'; +import useCybernetTexts from '../../useCybernetTexts'; function Main() { const address = useCurrentAddress(); + const { getText } = useCybernetTexts(); + useAdviserTexts({ defaultText: 'welcome to Cybernet 🤖', }); @@ -52,7 +55,7 @@ function Main() {

stake

- apr up to
+ yield up to
35%
@@ -60,11 +63,21 @@ function Main() { /> } > -

invest in operators subnets

+

+ learn by staking on {getText('delegate', true)} +

- operators + + {getText('delegate', true)} + + + - {haveStake && stats} + {haveStake && ( + my {getText('delegator')} + )}
@@ -74,9 +87,9 @@ function Main() { -

join subnets

+

mine

- apr up to + yield up to 35%
@@ -84,16 +97,18 @@ function Main() { /> } > -

complete tasks, manage grades

+

teach by linking content

- root subnet + {getText('root')} - all subnets + + {getText('subnetwork', true)} + {currentAddressIsDelegator && ( - my operator + my {getText('delegate')} )}
diff --git a/src/features/cybernet/ui/pages/Subnets/Subnets.tsx b/src/features/cybernet/ui/pages/Subnets/Subnets.tsx index 376d0b974..bebf66a2e 100644 --- a/src/features/cybernet/ui/pages/Subnets/Subnets.tsx +++ b/src/features/cybernet/ui/pages/Subnets/Subnets.tsx @@ -9,6 +9,7 @@ import { BLOCK_REWARD } from 'src/features/cybernet/constants'; import QuestionBtn from 'src/components/Rank/QuestionBtn/QuestionBtn'; import styles from './Subnets.module.scss'; import { Helmet } from 'react-helmet'; +import useCybernetTexts from '../../useCybernetTexts'; function Subnets() { const { data, loading, error } = useQueryCybernetContract({ @@ -24,6 +25,8 @@ function Subnets() { const graphSubnets = data?.filter((subnet) => subnet.network_modality === 0); const p2pSubnets = data?.filter((subnet) => subnet.network_modality === 1); + const { getText } = useCybernetTexts(); + useAdviserTexts({ isLoading: loading, error, @@ -49,7 +52,7 @@ function Subnets() { - Root subnet + {getText('root')} {getText('subnetwork')} diff --git a/src/features/cybernet/ui/pages/Subnets/SubnetsTable/SubnetsTable.tsx b/src/features/cybernet/ui/pages/Subnets/SubnetsTable/SubnetsTable.tsx index e1dc9f04b..7beea9282 100644 --- a/src/features/cybernet/ui/pages/Subnets/SubnetsTable/SubnetsTable.tsx +++ b/src/features/cybernet/ui/pages/Subnets/SubnetsTable/SubnetsTable.tsx @@ -14,6 +14,7 @@ import useCurrentAddress from 'src/features/cybernet/_move/useCurrentAddress'; import GradeSetterInput from '../../Subnet/GradeSetterInput/GradeSetterInput'; import { getAverageGrade, useSubnet } from '../../Subnet/subnet.context'; import { routes as subnetRoutes } from '../../../routes'; +import useCybernetTexts from '../../../useCybernetTexts'; type Props = { // remove @@ -45,6 +46,8 @@ function SubnetsTable({ data }: Props) { const { grades, subnetQuery } = useSubnet(); + const { getText } = useCybernetTexts(); + const rootSubnet = subnetQuery?.data?.netuid === 0; const { data: d2 } = useDelegate(address); @@ -68,7 +71,7 @@ function SubnetsTable({ data }: Props) { }), columnHelper.accessor('owner', { - header: 'owner', + header: getText('subnetOwner'), enableSorting: false, cell: (info) => { const value = info.getValue(); @@ -105,7 +108,7 @@ function SubnetsTable({ data }: Props) { col.push( // @ts-ignore columnHelper.accessor('max_allowed_validators', { - header: 'leaders', + header: getText('validator', true), sortingFn: (rowA, rowB) => { const a = rowA.original.subnetwork_n; const b = rowB.original.subnetwork_n; @@ -121,7 +124,7 @@ function SubnetsTable({ data }: Props) { }, }), columnHelper.accessor('max_allowed_uids', { - header: 'operators', + header: getText('miner', true), sortingFn: (rowA, rowB) => { const a = rowA.original.subnetwork_n; const b = rowB.original.subnetwork_n; diff --git a/src/features/cybernet/ui/useCybernetTexts.ts b/src/features/cybernet/ui/useCybernetTexts.ts new file mode 100644 index 000000000..bbed44ec5 --- /dev/null +++ b/src/features/cybernet/ui/useCybernetTexts.ts @@ -0,0 +1,34 @@ +import React from 'react'; +import { useCybernet } from './cybernet.context'; +import { texts, Texts } from './cybernetTexts'; + +function useCybernetTexts() { + const { selectedContract } = useCybernet(); + + const type = selectedContract?.type; + + function getText(key: Texts, isPlural?: boolean) { + const t = type === 'graph' ? 'graph' : 'default'; + const t2 = texts[key][t]; + + let text: string; + + // refactor + if (typeof t2 === 'object') { + text = isPlural ? t2.plural || t2 + 's' : t2.single || t2; + } else { + text = t2; + if (isPlural) { + text += 's'; + } + } + + return text; + } + + return { + getText, + }; +} + +export default useCybernetTexts;