From 80534b807af15578ec10569e24cc10a903f09660 Mon Sep 17 00:00:00 2001 From: dimakorzhovnik Date: Wed, 6 Mar 2024 19:34:22 +0300 Subject: [PATCH 01/38] fix(app): init comm --- src/components/actionBar/index.tsx | 1 + src/components/actionBar/styles.module.scss | 2 +- src/components/appMenu/AppMenu.tsx | 49 +++++++++++-- src/components/index.js | 2 + src/components/time/time.module.scss | 9 +++ src/components/time/time.tsx | 37 ++++++++++ src/components/time/utils.ts | 15 ++++ src/containers/application/AppMenu.tsx | 8 ++- src/containers/application/Header/Header.tsx | 7 +- .../SwitchNetwork/SwitchNetwork.module.scss | 15 ++-- .../Header/SwitchNetwork/SwitchNetwork.tsx | 17 +++-- src/layouts/Main.module.scss | 16 ++++- src/layouts/Main.tsx | 72 +++++++++++++++++-- src/pages/oracle/landing/OracleLanding.tsx | 38 +++++----- 14 files changed, 245 insertions(+), 43 deletions(-) create mode 100644 src/components/time/time.module.scss create mode 100644 src/components/time/time.tsx create mode 100644 src/components/time/utils.ts diff --git a/src/components/actionBar/index.tsx b/src/components/actionBar/index.tsx index c71b22152..0dd9aaa20 100644 --- a/src/components/actionBar/index.tsx +++ b/src/components/actionBar/index.tsx @@ -13,6 +13,7 @@ import styles from './styles.module.scss'; import Button from '../btnGrd'; import { useSigningClient } from 'src/contexts/signerClient'; import { trimString } from 'src/utils/utils'; +import Long from 'long'; const back = require('../../image/arrow-left-img.svg'); diff --git a/src/components/actionBar/styles.module.scss b/src/components/actionBar/styles.module.scss index 70a64fefe..f9253ed12 100644 --- a/src/components/actionBar/styles.module.scss +++ b/src/components/actionBar/styles.module.scss @@ -4,7 +4,7 @@ justify-content: center; width: 100%; position: fixed; - bottom: 0; + bottom: 20px; left: 0; padding: 10px 0; background: linear-gradient( diff --git a/src/components/appMenu/AppMenu.tsx b/src/components/appMenu/AppMenu.tsx index 1d5ba212c..fcf671969 100644 --- a/src/components/appMenu/AppMenu.tsx +++ b/src/components/appMenu/AppMenu.tsx @@ -53,18 +53,21 @@ function Items({ item, selected, onClick }: Props) { ); } -const renderSubItems = ( +export const renderSubItems = ( subItems: MenuItem['subItems'], location, onClickSubItem ) => { return subItems.map((itemSub) => { + const onClickFuc = () => { + onClickSubItem && onClickSubItem(itemSub.name); + }; return ( onClickSubItem(itemSub.name)} + onClick={onClickFuc} /> ); }); @@ -74,9 +77,16 @@ const renderSubItems = ( export function Bookmarks({ items, closeMenu, + setActiveApp, }: { items: MenuItems; closeMenu: () => void; + setActiveApp: React.Dispatch< + React.SetStateAction<{ + icon: undefined | string; + subItems: any[] | undefined; + }> + >; }) { const [selectedItem, setSelectedItem] = useState(''); const [selectedItemSub, setSelectedItemSub] = useState(''); @@ -87,12 +97,37 @@ export function Bookmarks({ setSelectedItemSub(''); const item = items.find((item) => item.name === itemKey); + setActiveApp({ + subItems: item?.subItems, + icon: item?.icon, + }); - if (item && item.subItems.length === 0) { - closeMenu(); - } + closeMenu(); + + // if (item && item.subItems.length === 0) { + // closeMenu(); + // } } + // useEffect(() => { + // const item = items.find((item) => { + // if ( + // location.pathname.includes('@') || + // location.pathname.includes('neuron/') + // ) { + // return item.to === '/robot'; + // } + // return item.to === location.pathname; + // }); + + // console.log('item', item); + + // setActiveApp({ + // subItems: item?.subItems, + // icon: item?.icon, + // }); + // }, [location, JSON.stringify(items), setActiveApp]); + function onClickSubItem(itemKey: string) { setSelectedItemSub(itemKey); closeMenu(); @@ -120,11 +155,11 @@ export function Bookmarks({ item={item} onClick={() => onClickItem(item.name)} /> - {item.name === selectedItem && ( + {/* {item.name === selectedItem && ( {renderSubItems(item.subItems, location, onClickSubItem)} - )} + )} */} ); })} diff --git a/src/components/index.js b/src/components/index.js index cfa91f241..4d5e0c527 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -54,6 +54,7 @@ import ButtonSwap from './ButtonSwap'; import Slider from './Slider/Slider'; import CreatedAt from './CreatedAt/CreatedAt'; import Tabs from './Tabs/Tabs'; +import Time from './time/time'; const BtnGrd = Button; @@ -114,6 +115,7 @@ export { Slider, CreatedAt, Tabs, + Time, }; export { Dots } from './ui/Dots'; diff --git a/src/components/time/time.module.scss b/src/components/time/time.module.scss new file mode 100644 index 000000000..d94121ea3 --- /dev/null +++ b/src/components/time/time.module.scss @@ -0,0 +1,9 @@ +.wrapper { + display: flex; + color: var(--blue-light); + gap: 5px; + + .day { + color: var(--grayscale-dark); + } +} \ No newline at end of file diff --git a/src/components/time/time.tsx b/src/components/time/time.tsx new file mode 100644 index 000000000..f0994009f --- /dev/null +++ b/src/components/time/time.tsx @@ -0,0 +1,37 @@ +import { useEffect, useState } from 'react'; +import { formatNumber, getNowUtcTime } from 'src/utils/utils'; +import unixTimestamp from './utils'; +import styles from './time.module.scss'; + +function Time() { + const [timeSeconds, setTimeSeconds] = useState(0); + const { days, minutes, hours } = unixTimestamp(timeSeconds / 1000); + + useEffect(() => { + const getTime = () => { + const utcTime = getNowUtcTime(); + setTimeSeconds(utcTime); + }; + getTime(); + + const timeInterval = setInterval(() => { + getTime(); + }, 60000); + + return () => { + clearInterval(timeInterval); + }; + }, []); + + return ( +
+ {formatNumber(days)} + day +
+ {hours}:{minutes} +
+
+ ); +} + +export default Time; diff --git a/src/components/time/utils.ts b/src/components/time/utils.ts new file mode 100644 index 000000000..98c19da0a --- /dev/null +++ b/src/components/time/utils.ts @@ -0,0 +1,15 @@ +const unixTimestamp = (secondsTime: number) => { + const days = Math.floor(secondsTime / 86400); + const hours = Math.floor(((secondsTime % 31536000) % 86400) / 3600); + const minutes = Math.floor((((secondsTime % 31536000) % 86400) % 3600) / 60); + const seconds = Math.floor((((secondsTime % 31536000) % 86400) % 3600) % 60); + + return { + days, + hours, + minutes, + seconds, + }; +}; + +export default unixTimestamp; diff --git a/src/containers/application/AppMenu.tsx b/src/containers/application/AppMenu.tsx index 2cf4e5999..a01c0fc51 100644 --- a/src/containers/application/AppMenu.tsx +++ b/src/containers/application/AppMenu.tsx @@ -148,7 +148,7 @@ const itemsMenu = () => { export type MenuItems = ReturnType; export type MenuItem = MenuItems[0]; -function AppMenu({ addressActive, closeMenu }) { +function AppMenu({ addressActive, closeMenu, setActiveApp }) { return (
- +
); } diff --git a/src/containers/application/Header/Header.tsx b/src/containers/application/Header/Header.tsx index fb9356383..4ea68d479 100644 --- a/src/containers/application/Header/Header.tsx +++ b/src/containers/application/Header/Header.tsx @@ -11,6 +11,10 @@ type Props = { menuProps: { isOpen: boolean; toggleMenu: () => void; + activeApp: { + icon: undefined | string; + subItems: [] | string; + }; }; }; @@ -45,9 +49,10 @@ function Header({ menuProps }: Props) { - + {/* */} {/* */} diff --git a/src/containers/application/Header/SwitchNetwork/SwitchNetwork.module.scss b/src/containers/application/Header/SwitchNetwork/SwitchNetwork.module.scss index 3b8aa3d1f..d7a9b15dc 100644 --- a/src/containers/application/Header/SwitchNetwork/SwitchNetwork.module.scss +++ b/src/containers/application/Header/SwitchNetwork/SwitchNetwork.module.scss @@ -116,7 +116,7 @@ padding-left: 15px; width: 250px; padding-bottom: 15px; - opacity: 0; + // opacity: 0; transition: 0.2s; backdrop-filter: blur(7px); @@ -164,9 +164,8 @@ .tooltipContainer { position: absolute; - left: 0px !important; - // top: unset !important; - top: 90px !important; + left: 0px; + top: 130px; z-index: 3; } @@ -183,3 +182,11 @@ grid-template-columns: unset !important; } } + +.containerSubItems { + display: flex; + flex-direction: column; + background: #0000008c; + width: 250px; + backdrop-filter: blur(7px); +} \ No newline at end of file diff --git a/src/containers/application/Header/SwitchNetwork/SwitchNetwork.tsx b/src/containers/application/Header/SwitchNetwork/SwitchNetwork.tsx index 9c99a5e1b..681cac05f 100644 --- a/src/containers/application/Header/SwitchNetwork/SwitchNetwork.tsx +++ b/src/containers/application/Header/SwitchNetwork/SwitchNetwork.tsx @@ -9,6 +9,7 @@ import { BandwidthBar } from '../../../../components'; import styles from './SwitchNetwork.module.scss'; import useMediaQuery from '../../../../hooks/useMediaQuery'; import { + Link, matchPath, useLocation, useNavigate, @@ -18,6 +19,7 @@ import { useDispatch } from 'react-redux'; import { initPocket } from 'src/redux/features/pocket'; import { Networks } from 'src/types/networks'; import { routes } from 'src/routes'; +import { renderSubItems } from 'src/components/appMenu/AppMenu'; export const menuButtonId = 'menu-button'; @@ -59,7 +61,7 @@ const updateAddress = (prefix: any) => { } }; -function SwitchNetwork({ onClickOpenMenu, openMenu }) { +function SwitchNetwork({ onClickOpenMenu, openMenu, activeApp }) { const mediaQuery = useMediaQuery('(min-width: 768px)'); const location = useLocation(); @@ -140,6 +142,7 @@ function SwitchNetwork({ onClickOpenMenu, openMenu }) { )); + console.log('activeApp', activeApp); return ( <>
cyb -
-
+
*/} {mediaQuery && (
@@ -190,6 +193,12 @@ function SwitchNetwork({ onClickOpenMenu, openMenu }) { )}
+ {activeApp && activeApp.subItems && ( +
+ {renderSubItems(activeApp.subItems, location, undefined)} +
+ )} + {/* {renderItemChain && Object.keys(renderItemChain).length > 0 && ( {(state) => { diff --git a/src/layouts/Main.module.scss b/src/layouts/Main.module.scss index ccbcf6a41..da419db9e 100644 --- a/src/layouts/Main.module.scss +++ b/src/layouts/Main.module.scss @@ -1,5 +1,13 @@ .wrapper { footer { + display: flex; + position: fixed; + z-index: 2; + width: 100%; + bottom: 0px; + height: 40px; + background-color: #000; + a { position: fixed; z-index: 2; @@ -9,4 +17,10 @@ align-items: center; } } -} + + .Time { + display: flex; + position: fixed; + right: 5vw; + } +} \ No newline at end of file diff --git a/src/layouts/Main.tsx b/src/layouts/Main.tsx index 9848cdd32..b9d06748f 100644 --- a/src/layouts/Main.tsx +++ b/src/layouts/Main.tsx @@ -1,18 +1,37 @@ -import { useEffect, useMemo, useState } from 'react'; +import { useEffect, useMemo, useRef, useState } from 'react'; import { localStorageKeys } from 'src/constants/localStorageKeys'; import AppMenu from 'src/containers/application/AppMenu'; import AppSideBar from 'src/containers/application/AppSideBar'; import Header from 'src/containers/application/Header/Header'; import useSetActiveAddress from 'src/hooks/useSetActiveAddress'; -import { useAppSelector } from 'src/redux/hooks'; +import { useAppDispatch, useAppSelector } from 'src/redux/hooks'; import styles from './Main.module.scss'; import { routes } from 'src/routes'; import { Link } from 'react-router-dom'; +import Commander from 'src/containers/application/Header/Commander/Commander'; +import { useDevice } from 'src/contexts/device'; +import { setFocus } from 'src/containers/application/Header/Commander/commander.redux'; +import CyberlinksGraphContainer from 'src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer'; +import graphDataPrepared from '../pages/oracle/landing/graphDataPrepared.json'; +import stylesOracle from '../pages/oracle/landing/OracleLanding.module.scss'; +import { Time } from 'src/components'; function MainLayout({ children }: { children: JSX.Element }) { const pocket = useAppSelector(({ pocket }) => pocket); const { defaultAccount } = pocket; + const { viewportWidth } = useDevice(); + const ref = useRef(null); + const dispatch = useAppDispatch(); + const [isRenderGraph, setIsRenderGraph] = useState(false); + const [activeApp, setActiveApp] = useState({ + icon: undefined, + subItems: [], + }); + + const graphSize = 220; + const isMobile = + viewportWidth <= Number(stylesOracle.mobileBreakpoint.replace('px', '')); const { addressActive } = useSetActiveAddress(defaultAccount); @@ -28,6 +47,26 @@ function MainLayout({ children }: { children: JSX.Element }) { localStorage.setItem(localStorageKeys.MENU_SHOW, newState.toString()); } + useEffect(() => { + dispatch(setFocus(true)); + + const timeout = setTimeout(() => { + setIsRenderGraph(true); + }, 1000 * 1.5); + + return () => { + clearTimeout(timeout); + }; + }, [dispatch]); + + useEffect(() => { + if (!ref.current) { + return; + } + + ref.current.style.setProperty('--graph-size', `${graphSize}px`); + }, [ref, graphSize]); + // for initial animation useEffect(() => { const isMenuOpenPreference = localStorage.getItem( @@ -48,21 +87,46 @@ function MainLayout({ children }: { children: JSX.Element }) { } return ( -
+
() => toggleMenu(!openMenu), [openMenu]), isOpen: openMenu, + activeApp, }} /> - + {children}
+ {!isMobile && ( +
+ + + {isRenderGraph && ( + + )} +
+ )} + +
+
contacts
diff --git a/src/pages/oracle/landing/OracleLanding.tsx b/src/pages/oracle/landing/OracleLanding.tsx index 01c29dfcb..adda0b9b3 100644 --- a/src/pages/oracle/landing/OracleLanding.tsx +++ b/src/pages/oracle/landing/OracleLanding.tsx @@ -1,7 +1,7 @@ import { ActionBar, Button, Tabs } from 'src/components'; import { routes } from 'src/routes'; import { useEffect, useRef, useState } from 'react'; -import CyberlinksGraphContainer from 'src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer'; +// import CyberlinksGraphContainer from 'src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer'; import { Stars } from 'src/containers/portal/components'; import { useDevice } from 'src/contexts/device'; @@ -13,7 +13,7 @@ import styles from './OracleLanding.module.scss'; import KeywordButton from './components/KeywordButton/KeywordButton'; import Stats from './Stats/Stats'; -import graphDataPrepared from './graphDataPrepared.json'; +// import graphDataPrepared from './graphDataPrepared.json'; import { TitleType } from './type'; const mapTitleTypeToTitle = { @@ -88,25 +88,25 @@ function OracleLanding() { const isMobile = viewportWidth <= Number(styles.mobileBreakpoint.replace('px', '')); - useEffect(() => { - dispatch(setFocus(true)); + // useEffect(() => { + // dispatch(setFocus(true)); - const timeout = setTimeout(() => { - setIsRenderGraph(true); - }, 1000 * 1.5); + // const timeout = setTimeout(() => { + // setIsRenderGraph(true); + // }, 1000 * 1.5); - return () => { - clearTimeout(timeout); - }; - }, [dispatch]); + // return () => { + // clearTimeout(timeout); + // }; + // }, [dispatch]); - useEffect(() => { - if (!ref.current) { - return; - } + // useEffect(() => { + // if (!ref.current) { + // return; + // } - ref.current.style.setProperty('--graph-size', `${graphSize}px`); - }, [ref, graphSize]); + // ref.current.style.setProperty('--graph-size', `${graphSize}px`); + // }, [ref, graphSize]); const { title, description, text } = listConfig[titleType]; @@ -144,7 +144,7 @@ function OracleLanding() {
- {!isMobile && ( + {/* {!isMobile && (
)}
- )} + )} */}
{[ From 25ef48557453d939f67a93a39035605b3c75dd07 Mon Sep 17 00:00:00 2001 From: dimakorzhovnik Date: Mon, 11 Mar 2024 22:13:14 +0300 Subject: [PATCH 02/38] fix(app): actionBar, menu --- src/components/actionBar/index.tsx | 30 ++- src/components/actionBar/styles.module.scss | 2 +- src/components/appMenu/AppMenu.tsx | 32 ---- src/components/time/time.tsx | 21 ++- src/containers/application/AppMenu.tsx | 154 +--------------- .../Header/Commander/Commander.module.scss | 16 +- src/containers/application/Header/Header.tsx | 5 - .../Header/SwitchAccount/SwitchAccount.tsx | 1 + .../SwitchNetwork/SwitchNetwork.module.scss | 3 + .../Header/SwitchNetwork/SwitchNetwork.tsx | 172 +++--------------- src/image/congress.png | Bin 0 -> 1084 bytes src/layouts/Main.tsx | 35 ++-- src/pages/robot/Layout/Layout.tsx | 37 +++- .../robot/Layout/RobotMenu/RobotMenu.tsx | 4 +- src/pages/robot/Robot.tsx | 5 +- src/utils/appsMenu.ts | 145 +++++++++++++++ 16 files changed, 297 insertions(+), 365 deletions(-) create mode 100644 src/image/congress.png create mode 100644 src/utils/appsMenu.ts diff --git a/src/components/actionBar/index.tsx b/src/components/actionBar/index.tsx index 0dd9aaa20..05cee061e 100644 --- a/src/components/actionBar/index.tsx +++ b/src/components/actionBar/index.tsx @@ -14,6 +14,7 @@ import Button from '../btnGrd'; import { useSigningClient } from 'src/contexts/signerClient'; import { trimString } from 'src/utils/utils'; import Long from 'long'; +import Commander from 'src/containers/application/Header/Commander/Commander'; const back = require('../../image/arrow-left-img.svg'); @@ -45,7 +46,7 @@ type Props = { }; }; -function ActionBar({ children, text, onClickBack, button }: Props) { +function ActionBarComp({ children, text, onClickBack, button }: Props) { const { signerReady } = useSigningClient(); const location = useLocation(); @@ -151,4 +152,31 @@ function ActionBar({ children, text, onClickBack, button }: Props) { ); } +function ActionBar({ children, text, onClickBack, button }: Props) { + return ( +
+ + + {children} + +
+ ); +} + export default ActionBar; diff --git a/src/components/actionBar/styles.module.scss b/src/components/actionBar/styles.module.scss index f9253ed12..d9be94b03 100644 --- a/src/components/actionBar/styles.module.scss +++ b/src/components/actionBar/styles.module.scss @@ -3,7 +3,7 @@ align-items: center; justify-content: center; width: 100%; - position: fixed; + // position: fixed; bottom: 20px; left: 0; padding: 10px 0; diff --git a/src/components/appMenu/AppMenu.tsx b/src/components/appMenu/AppMenu.tsx index fcf671969..796e7c7d8 100644 --- a/src/components/appMenu/AppMenu.tsx +++ b/src/components/appMenu/AppMenu.tsx @@ -77,16 +77,9 @@ export const renderSubItems = ( export function Bookmarks({ items, closeMenu, - setActiveApp, }: { items: MenuItems; closeMenu: () => void; - setActiveApp: React.Dispatch< - React.SetStateAction<{ - icon: undefined | string; - subItems: any[] | undefined; - }> - >; }) { const [selectedItem, setSelectedItem] = useState(''); const [selectedItemSub, setSelectedItemSub] = useState(''); @@ -96,12 +89,6 @@ export function Bookmarks({ setSelectedItem(itemKey); setSelectedItemSub(''); - const item = items.find((item) => item.name === itemKey); - setActiveApp({ - subItems: item?.subItems, - icon: item?.icon, - }); - closeMenu(); // if (item && item.subItems.length === 0) { @@ -109,25 +96,6 @@ export function Bookmarks({ // } } - // useEffect(() => { - // const item = items.find((item) => { - // if ( - // location.pathname.includes('@') || - // location.pathname.includes('neuron/') - // ) { - // return item.to === '/robot'; - // } - // return item.to === location.pathname; - // }); - - // console.log('item', item); - - // setActiveApp({ - // subItems: item?.subItems, - // icon: item?.icon, - // }); - // }, [location, JSON.stringify(items), setActiveApp]); - function onClickSubItem(itemKey: string) { setSelectedItemSub(itemKey); closeMenu(); diff --git a/src/components/time/time.tsx b/src/components/time/time.tsx index f0994009f..6f034c13c 100644 --- a/src/components/time/time.tsx +++ b/src/components/time/time.tsx @@ -1,12 +1,26 @@ import { useEffect, useState } from 'react'; import { formatNumber, getNowUtcTime } from 'src/utils/utils'; +import { Link } from 'react-router-dom'; +import { useAppSelector } from 'src/redux/hooks'; +import usePassportByAddress from 'src/features/passport/hooks/usePassportByAddress'; +import { routes } from 'src/routes'; import unixTimestamp from './utils'; import styles from './time.module.scss'; function Time() { + const { defaultAccount } = useAppSelector((state) => state.pocket); + const useGetAddress = defaultAccount?.account?.cyber?.bech32 || null; + const { passport } = usePassportByAddress(useGetAddress); + const useGetName = passport?.extension.nickname; const [timeSeconds, setTimeSeconds] = useState(0); const { days, minutes, hours } = unixTimestamp(timeSeconds / 1000); + const linkAddress = useGetName + ? routes.robotPassport.getLink(useGetName) + : useGetAddress + ? routes.neuron.getLink(useGetAddress) + : undefined; + useEffect(() => { const getTime = () => { const utcTime = getNowUtcTime(); @@ -24,13 +38,16 @@ function Time() { }, []); return ( -
+ {formatNumber(days)} day
{hours}:{minutes}
-
+ ); } diff --git a/src/containers/application/AppMenu.tsx b/src/containers/application/AppMenu.tsx index a01c0fc51..ddf0c21e9 100644 --- a/src/containers/application/AppMenu.tsx +++ b/src/containers/application/AppMenu.tsx @@ -1,154 +1,10 @@ -import { Networks } from 'src/types/networks'; +import itemsMenu from 'src/utils/appsMenu'; import { Bookmarks } from '../../components/appMenu/AppMenu'; -import { CYBER } from '../../utils/config'; - -import nebulaIcon from '../../image/temple/nebula.png'; -import teleport from '../../image/temple/teleport.png'; -import hfr from '../../image/temple/hfr.png'; -import temple from '../../image/temple/temple.png'; -import robot from '../../image/temple/robot.png'; -import shpere from '../../image/temple/shpere.png'; -import senate from '../../image/temple/senate.png'; -import portal from '../../image/space-pussy.svg'; -import oracle from '../../image/temple/oracle.png'; -import warp from '../../image/temple/warp.png'; -import hub from '../../image/temple/hub.png'; -import congress from './images/congress.png'; - -import { routes } from '../../routes'; - -const itemsMenu = () => { - const listItemMenu = [ - { - name: 'My robot', - icon: robot, - to: '/robot', - subItems: [], - // subItems: myRobotLinks, - }, - { - name: 'Oracle', - to: '/', - icon: oracle, - subItems: [ - { name: 'Particles', to: '/particles' }, - { name: 'Stats', to: '/oracle/stats' }, - { name: 'Blocks', to: '/network/bostrom/blocks' }, - { name: 'Txs', to: '/network/bostrom/tx' }, - { name: 'Contracts', to: '/contracts' }, - { name: 'Libs', to: '/libs' }, - ], - }, - { name: 'Temple', to: routes.temple.path, subItems: [], icon: temple }, - { name: 'Nebula', to: '/nebula', subItems: [], icon: nebulaIcon }, - { - name: 'Teleport', - to: '/teleport', - icon: teleport, - active: false, - subItems: [ - { name: 'Send', to: routes.teleport.send.path }, - { name: 'Bridge', to: routes.teleport.bridge.path }, - { name: 'Swap', to: routes.teleport.swap.path }, - ], - }, - { - name: 'Warp', - icon: warp, - to: '/warp', - subItems: [ - { name: 'Add liquidity', to: '/warp/add-liquidity' }, - { name: 'Create pool', to: '/warp/create-pool' }, - { name: 'Sub liquidity', to: '/warp/sub-liquidity' }, - ], - }, - { - name: 'Sphere', - icon: shpere, - to: routes.sphere.path, - subItems: [{ name: 'Heroes at rest', to: routes.sphereJailed.path }], - }, - { name: 'HFR', icon: hfr, to: '/hfr', subItems: [] }, - // { name: 'Lifeforms', to: '/contracts', subItems: [] }, - // { - // name: 'Hub', - // to: '/search/hub', - // icon: hub, - // subItems: [ - // { name: 'Networks', to: '/networks' }, - // { name: 'Add network', to: '/networks/add' }, - // ], - // }, - { name: 'Senate', icon: senate, to: '/senate', subItems: [] }, - { name: 'About', icon: congress, to: routes.social.path, subItems: [] }, - // { - // name: 'Help', - // icon: zhdun, - // to: '/help', - // subItems: [ - // { - // name: 'Guide', - // to: '/ipfs/QmRumrGFrqxayDpySEkhjZS1WEtMyJcfXiqeVsngqig3ak', - // }, - // { name: 'story', to: '/genesis' }, - // { - // name: 'vision', - // to: '/ipfs/QmXzGkfxZV2fzpFmq7CjAYsYL1M581ZD4yuF9jztPVTpCn', - // }, - // { - // name: 'great web', - // to: '/ipfs/QmUamt7diQP54eRnmzqMZNEtXNTzbgkQvZuBsgM6qvbd57', - // }, - // { - // name: 'vs govs', - // to: '/ipfs/QmPmJ4JwzCi82HZp7adtv5GVBFTsKF5Yoy43wshHH7x3ty', - // }, - // { - // name: 'vs corps', - // to: '/ipfs/QmQvKF9Jb6QKmsqHJzEZJUfcbB9aBBKwa5dh3pMxYEj7oi', - // }, - // { - // name: 'roadmap', - // to: '/ipfs/QmSBYCCYFNfHNQD7MWm4zBaNuztMaT2KghA2SbeZZm9vLH', - // }, - // { - // name: 'distribution', - // to: '/ipfs/QmVPgNeay23Ae5itAamMcr4iEAUKuhw5qD9U1zNqN4gpew', - // }, - // { - // name: 'gift', - // to: '/ipfs/QmPAi1h1rwWnHkNnxnHZg28eGivpUK8wy8eciqoPSR4PHv', - // }, - // { - // name: 'congress', - // to: '/network/bostrom/contract/bostrom1xszmhkfjs3s00z2nvtn7evqxw3dtus6yr8e4pw', - // }, - // ], - // }, - ]; - - if ( - CYBER.CHAIN_ID === Networks.BOSTROM || - CYBER.CHAIN_ID === Networks.SPACE_PUSSY - ) { - listItemMenu.splice(2, 0, { - name: 'Portal', - icon: portal, - to: '/portal', - subItems: [ - { name: 'Citizenship', to: '/citizenship' }, - { name: 'Gift', to: '/gift' }, - // { name: 'Release', to: '/release' }, - ], - }); - } - return listItemMenu; -}; export type MenuItems = ReturnType; export type MenuItem = MenuItems[0]; -function AppMenu({ addressActive, closeMenu, setActiveApp }) { +function AppMenu({ addressActive, closeMenu }) { return (
- +
); } diff --git a/src/containers/application/Header/Commander/Commander.module.scss b/src/containers/application/Header/Commander/Commander.module.scss index 615ed1cbd..3e43691ce 100644 --- a/src/containers/application/Header/Commander/Commander.module.scss +++ b/src/containers/application/Header/Commander/Commander.module.scss @@ -1,12 +1,14 @@ .wrapper { - width: 62%; - transform: translate(-50%, -80%); + width: 100%; + + // width: 62%; + // transform: translate(-50%, -80%); // background: rgb(0 0 0 / 79%); - margin-right: -50%; - left: 50%; - position: absolute; - top: 50%; - padding: 0px 20px; + // margin-right: -50%; + // left: 50%; + // position: absolute; + // top: 50%; + // padding: 0px 20px; z-index: 1; } diff --git a/src/containers/application/Header/Header.tsx b/src/containers/application/Header/Header.tsx index 4ea68d479..9984071ed 100644 --- a/src/containers/application/Header/Header.tsx +++ b/src/containers/application/Header/Header.tsx @@ -11,10 +11,6 @@ type Props = { menuProps: { isOpen: boolean; toggleMenu: () => void; - activeApp: { - icon: undefined | string; - subItems: [] | string; - }; }; }; @@ -49,7 +45,6 @@ function Header({ menuProps }: Props) { {/* */} diff --git a/src/containers/application/Header/SwitchAccount/SwitchAccount.tsx b/src/containers/application/Header/SwitchAccount/SwitchAccount.tsx index a60ed5566..3b892d2bb 100644 --- a/src/containers/application/Header/SwitchAccount/SwitchAccount.tsx +++ b/src/containers/application/Header/SwitchAccount/SwitchAccount.tsx @@ -96,6 +96,7 @@ function SwitchAccount() { const [controlledVisible, setControlledVisible] = React.useState(false); const { defaultAccount, accounts } = useAppSelector((state) => state.pocket); + const dispatch = useAppDispatch(); const useGetAddress = defaultAccount?.account?.cyber?.bech32 || null; diff --git a/src/containers/application/Header/SwitchNetwork/SwitchNetwork.module.scss b/src/containers/application/Header/SwitchNetwork/SwitchNetwork.module.scss index d7a9b15dc..63bbb6ea5 100644 --- a/src/containers/application/Header/SwitchNetwork/SwitchNetwork.module.scss +++ b/src/containers/application/Header/SwitchNetwork/SwitchNetwork.module.scss @@ -33,6 +33,9 @@ border: none; background: transparent; position: relative; + display: flex; + align-items: center; + justify-content: center; cursor: pointer; &::before { diff --git a/src/containers/application/Header/SwitchNetwork/SwitchNetwork.tsx b/src/containers/application/Header/SwitchNetwork/SwitchNetwork.tsx index 681cac05f..911dc1b0e 100644 --- a/src/containers/application/Header/SwitchNetwork/SwitchNetwork.tsx +++ b/src/containers/application/Header/SwitchNetwork/SwitchNetwork.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import { usePopperTooltip } from 'react-popper-tooltip'; import { Transition } from 'react-transition-group'; import cx from 'classnames'; @@ -20,129 +20,39 @@ import { initPocket } from 'src/redux/features/pocket'; import { Networks } from 'src/types/networks'; import { routes } from 'src/routes'; import { renderSubItems } from 'src/components/appMenu/AppMenu'; +import itemsMenu from 'src/utils/appsMenu'; +import { MenuItem, MenuItems } from '../../AppMenu'; export const menuButtonId = 'menu-button'; -const forEachObjbech32 = (data, prefix) => { - const newObj = {}; - Object.keys(data).forEach((key) => { - const valueObj = data[key]; - if (Object.prototype.hasOwnProperty.call(valueObj, 'cyber')) { - const { bech32 } = valueObj.cyber; - const bech32NewPrefix = fromBech32(bech32, prefix); - newObj[key] = { - ...valueObj, - cyber: { - ...valueObj.cyber, - bech32: bech32NewPrefix, - }, - }; - } - }); - return newObj; -}; - -const updateAddress = (prefix: any) => { - const localStoragePocketAccount = localStorage.getItem('pocketAccount'); - const localStoragePocket = localStorage.getItem('pocket'); - - if (localStoragePocket !== null) { - const localStoragePocketData = JSON.parse(localStoragePocket); - const newObjPocketData = forEachObjbech32(localStoragePocketData, prefix); - localStorage.setItem('pocket', JSON.stringify(newObjPocketData)); - } - if (localStoragePocketAccount !== null) { - const localStoragePocketAccountData = JSON.parse(localStoragePocketAccount); - const newObjAccountData = forEachObjbech32( - localStoragePocketAccountData, - prefix - ); - localStorage.setItem('pocketAccount', JSON.stringify(newObjAccountData)); - } -}; - -function SwitchNetwork({ onClickOpenMenu, openMenu, activeApp }) { +function SwitchNetwork({ onClickOpenMenu, openMenu }) { const mediaQuery = useMediaQuery('(min-width: 768px)'); const location = useLocation(); - // const navigate = useNavigate(); - const params = useParams(); - // const dispatch = useDispatch(); - - const [controlledVisible, setControlledVisible] = React.useState(false); - const { networks } = useNetworks(); - const { getTooltipProps, setTooltipRef, visible } = usePopperTooltip({ - trigger: 'click', - closeOnOutsideClick: false, - visible: controlledVisible, - onVisibleChange: setControlledVisible, - placement: 'bottom', - }); - - const onClickChain = async (chainId: Networks, prefix: any) => { - localStorage.setItem('chainId', chainId); - updateAddress(prefix); - - // dispatch(initPocket()); - let redirectHref = location.pathname; - if (matchPath(routes.neuron.path, location.pathname)) { - const newAddress = fromBech32(params.address, prefix); - - redirectHref = routes.neuron.getLink(newAddress); - } else if (location.pathname.includes('@')) { - redirectHref = routes.robot.path; + const getRoute = useMemo(() => { + let { pathname } = location; + if ( + location.pathname.includes('@') || + location.pathname.includes('neuron/') + ) { + pathname = routes.robot.path; } - // TODO: remove reload page (need fix config) - window.location.pathname = redirectHref; - }; + const findApp = itemsMenu().reduce((acc: MenuItems, item: MenuItem) => { + if (item.to === pathname) { + acc.push(item); + } else if ( + item.subItems.filter((item) => item.to === pathname).length !== 0 + ) { + acc.push(item); + } + return acc; + }, []); - const renderItemChain = - networks && - Object.keys(networks) - .filter((itemKey) => itemKey !== CYBER.CHAIN_ID) - .map((key) => ( - // - // onClickChain(key, networks[key].BECH32_PREFIX_ACC_ADDR_CYBER) - // } - // network={key} - // /> - - )); + return findApp; + }, [location]); - console.log('activeApp', activeApp); return ( <>
- + {mediaQuery && (
@@ -193,32 +102,11 @@ function SwitchNetwork({ onClickOpenMenu, openMenu, activeApp }) { )}
- {activeApp && activeApp.subItems && ( + {getRoute && getRoute[0] && (
- {renderSubItems(activeApp.subItems, location, undefined)} + {renderSubItems(getRoute[0].subItems, location, undefined)}
)} - - {/* {renderItemChain && Object.keys(renderItemChain).length > 0 && ( - - {(state) => { - return ( -
-
- {renderItemChain} -
-
- ); - }} - */} - {/* )} */} ); } diff --git a/src/image/congress.png b/src/image/congress.png new file mode 100644 index 0000000000000000000000000000000000000000..8c14f7e768daebbddd1902facf2ba7b0bb9a778c GIT binary patch literal 1084 zcmV-C1jGA@P)U)!xY|R-tvTy9jFol7U7};ta({$0&Ad=3{+vpv;m#)AXG5{25hmG zGHb+?04BZ#YA?JLG?5Y=EF^>pce6_vc5}NC;97}`MB`8cOnfuDv_gGn-G~Bff0>Ex zN`oqj;wjStM@z+&Dr>+d;#JC;kc>K+c)X|EMLg2NQ~3Y~4CofD-3W1Q`!I??J2Za5 zihx?fMx7cw?_FSDJY1uOW`KvsPI+IB0N)K1(MP}u;t_Q#qrFgP-w)0~i-H;ftGmgg zLW_cGAPCL_xA7qH^l^jpXu>qY2skZ$^!U&~qqfNPz=Nq{+Q1@w3Vo2@jO3)unY@zk zp+pH`zgO}vg`hol&UGbr7A_>g0yFaS$Zu(-d(8DPCNSJZSRQqP;I}UdpOIf)&p_fD z1sbX})(^p{F6q>ipb+iz-^x#>TjBVN+n#4r0&h_;0z%?(X1>sw=>k!@MaFMIdUU0* zGO0->#RjCx9X0*GM@%Zr1lCO302+Q~fH|Mw*-#eIV^)0N>43(a9pDc6 zk5SH-V&$N_o+*X1p04>p_rCwI8x1tk47H;uoV5)9LKUW(AA6t?d=$mXw$ pocket); @@ -24,10 +25,6 @@ function MainLayout({ children }: { children: JSX.Element }) { const ref = useRef(null); const dispatch = useAppDispatch(); const [isRenderGraph, setIsRenderGraph] = useState(false); - const [activeApp, setActiveApp] = useState({ - icon: undefined, - subItems: [], - }); const graphSize = 220; const isMobile = @@ -92,28 +89,23 @@ function MainLayout({ children }: { children: JSX.Element }) { menuProps={{ toggleMenu: useMemo(() => () => toggleMenu(!openMenu), [openMenu]), isOpen: openMenu, - activeApp, }} /> - + {children}
{!isMobile && ( -
- + {/* + /> */} {isRenderGraph && ( )} -
+ )} - +
+ +
- contacts + {/* contacts */}
); diff --git a/src/pages/robot/Layout/Layout.tsx b/src/pages/robot/Layout/Layout.tsx index d0e5891a5..e22e3d78e 100644 --- a/src/pages/robot/Layout/Layout.tsx +++ b/src/pages/robot/Layout/Layout.tsx @@ -1,4 +1,4 @@ -import { Outlet } from 'react-router-dom'; +import { Link, Outlet } from 'react-router-dom'; import { Helmet } from 'react-helmet'; import Loader2 from 'src/components/ui/Loader2'; import useMenuCounts from './useMenuCounts'; @@ -8,6 +8,7 @@ import { useRobotContext } from '../robot.context'; import WrappedActionBar from './WrappedActionBar'; import styles from './Layout.module.scss'; import RobotMenu from './RobotMenu/RobotMenu'; +import itemsMenu from 'src/utils/appsMenu'; function Layout() { const { address, isOwner, isLoading, nickname } = useRobotContext(); @@ -19,8 +20,33 @@ function Layout() { robot {nickname || address || ''} - - +
+ {itemsMenu().map((item) => { + return ( + + {item.name} + {item.name} + + ); + })} +
{isLoading ? ( @@ -34,7 +60,10 @@ function Layout() { )}
- +
+ + +
); } diff --git a/src/pages/robot/Layout/RobotMenu/RobotMenu.tsx b/src/pages/robot/Layout/RobotMenu/RobotMenu.tsx index 901e6c4ed..1522785a8 100644 --- a/src/pages/robot/Layout/RobotMenu/RobotMenu.tsx +++ b/src/pages/robot/Layout/RobotMenu/RobotMenu.tsx @@ -17,7 +17,7 @@ type MenuItem = { const links: MenuItem[] = [ { text: 'Sigma', - link: '.', + link: './sigma', description: 'hydrogen', name: 'sigma', icon: 'Σ', @@ -111,7 +111,7 @@ const links: MenuItem[] = [ }, { text: 'Log', - link: './log', + link: '.', name: 'log', description: 'tweets', icon: '🍀', diff --git a/src/pages/robot/Robot.tsx b/src/pages/robot/Robot.tsx index ac841bf75..b817392db 100644 --- a/src/pages/robot/Robot.tsx +++ b/src/pages/robot/Robot.tsx @@ -22,7 +22,8 @@ function RobotRoutes() { return ( }> - : } /> + : } /> + } /> } /> } /> } /> @@ -36,7 +37,7 @@ function RobotRoutes() { path="drive" element={isOwner ? : } /> - } /> + {/* } /> */} } /> } /> } /> diff --git a/src/utils/appsMenu.ts b/src/utils/appsMenu.ts new file mode 100644 index 000000000..dbdd675ea --- /dev/null +++ b/src/utils/appsMenu.ts @@ -0,0 +1,145 @@ +import nebulaIcon from 'images/temple/nebula.png'; +import teleport from 'images/temple/teleport.png'; +import hfr from 'images/temple/hfr.png'; +import temple from 'images/temple/temple.png'; +import robot from 'images/temple/robot.png'; +import shpere from 'images/temple/shpere.png'; +import senate from 'images/temple/senate.png'; +import portal from 'images/space-pussy.svg'; +import oracle from 'images/temple/oracle.png'; +import warp from 'images/temple/warp.png'; +import hub from 'images/temple/hub.png'; +import congress from 'images/congress.png'; +import { routes } from 'src/routes'; +import { Networks } from 'src/types/networks'; +import { CYBER } from './config'; + +const itemsMenu = () => { + const listItemMenu = [ + { + name: 'My robot', + icon: robot, + to: '/robot', + subItems: [], + // subItems: myRobotLinks, + }, + { + name: 'Oracle', + to: '/', + icon: oracle, + subItems: [ + { name: 'Particles', to: '/particles' }, + { name: 'Stats', to: '/oracle/stats' }, + { name: 'Blocks', to: '/network/bostrom/blocks' }, + { name: 'Txs', to: '/network/bostrom/tx' }, + { name: 'Contracts', to: '/contracts' }, + { name: 'Libs', to: '/libs' }, + ], + }, + { name: 'Temple', to: routes.temple.path, subItems: [], icon: temple }, + { name: 'Nebula', to: '/nebula', subItems: [], icon: nebulaIcon }, + { + name: 'Teleport', + to: '/teleport', + icon: teleport, + active: false, + subItems: [ + { name: 'Send', to: routes.teleport.send.path }, + { name: 'Bridge', to: routes.teleport.bridge.path }, + { name: 'Swap', to: routes.teleport.swap.path }, + ], + }, + { + name: 'Warp', + icon: warp, + to: '/warp', + subItems: [ + { name: 'Add liquidity', to: '/warp/add-liquidity' }, + { name: 'Create pool', to: '/warp/create-pool' }, + { name: 'Sub liquidity', to: '/warp/sub-liquidity' }, + ], + }, + { + name: 'Sphere', + icon: shpere, + to: routes.sphere.path, + subItems: [{ name: 'Heroes at rest', to: routes.sphereJailed.path }], + }, + { name: 'HFR', icon: hfr, to: '/hfr', subItems: [] }, + // { name: 'Lifeforms', to: '/contracts', subItems: [] }, + // { + // name: 'Hub', + // to: '/search/hub', + // icon: hub, + // subItems: [ + // { name: 'Networks', to: '/networks' }, + // { name: 'Add network', to: '/networks/add' }, + // ], + // }, + { name: 'Senate', icon: senate, to: '/senate', subItems: [] }, + { name: 'About', icon: congress, to: routes.social.path, subItems: [] }, + // { + // name: 'Help', + // icon: zhdun, + // to: '/help', + // subItems: [ + // { + // name: 'Guide', + // to: '/ipfs/QmRumrGFrqxayDpySEkhjZS1WEtMyJcfXiqeVsngqig3ak', + // }, + // { name: 'story', to: '/genesis' }, + // { + // name: 'vision', + // to: '/ipfs/QmXzGkfxZV2fzpFmq7CjAYsYL1M581ZD4yuF9jztPVTpCn', + // }, + // { + // name: 'great web', + // to: '/ipfs/QmUamt7diQP54eRnmzqMZNEtXNTzbgkQvZuBsgM6qvbd57', + // }, + // { + // name: 'vs govs', + // to: '/ipfs/QmPmJ4JwzCi82HZp7adtv5GVBFTsKF5Yoy43wshHH7x3ty', + // }, + // { + // name: 'vs corps', + // to: '/ipfs/QmQvKF9Jb6QKmsqHJzEZJUfcbB9aBBKwa5dh3pMxYEj7oi', + // }, + // { + // name: 'roadmap', + // to: '/ipfs/QmSBYCCYFNfHNQD7MWm4zBaNuztMaT2KghA2SbeZZm9vLH', + // }, + // { + // name: 'distribution', + // to: '/ipfs/QmVPgNeay23Ae5itAamMcr4iEAUKuhw5qD9U1zNqN4gpew', + // }, + // { + // name: 'gift', + // to: '/ipfs/QmPAi1h1rwWnHkNnxnHZg28eGivpUK8wy8eciqoPSR4PHv', + // }, + // { + // name: 'congress', + // to: '/network/bostrom/contract/bostrom1xszmhkfjs3s00z2nvtn7evqxw3dtus6yr8e4pw', + // }, + // ], + // }, + ]; + + if ( + CYBER.CHAIN_ID === Networks.BOSTROM || + CYBER.CHAIN_ID === Networks.SPACE_PUSSY + ) { + listItemMenu.splice(2, 0, { + name: 'Portal', + icon: portal, + to: '/portal', + subItems: [ + { name: 'Citizenship', to: '/citizenship' }, + { name: 'Gift', to: '/gift' }, + // { name: 'Release', to: '/release' }, + ], + }); + } + return listItemMenu; +}; + +export default itemsMenu; From 18d196b244d2ace81aca1eb78470689463b15f73 Mon Sep 17 00:00:00 2001 From: dimakorzhovnik Date: Wed, 13 Mar 2024 21:28:31 +0300 Subject: [PATCH 03/38] fix(app): add balance --- .../HydrogenBalance/HydrogenBalance.tsx | 8 +++++--- src/containers/application/AppMenu.tsx | 2 +- src/containers/sigma/hooks/useBalanceToken.js | 2 +- src/layouts/Main.module.scss | 17 +++++++++++++++-- src/layouts/Main.tsx | 16 +++++++--------- 5 files changed, 29 insertions(+), 16 deletions(-) diff --git a/src/components/HydrogenBalance/HydrogenBalance.tsx b/src/components/HydrogenBalance/HydrogenBalance.tsx index 16c9a6e3e..976f54843 100644 --- a/src/components/HydrogenBalance/HydrogenBalance.tsx +++ b/src/components/HydrogenBalance/HydrogenBalance.tsx @@ -1,13 +1,15 @@ import { useGetBalanceBostrom } from 'src/containers/sigma/hooks'; import IconsNumber from '../IconsNumber/IconsNumber'; +import { Link } from 'react-router-dom'; +import { routes } from 'src/routes'; -function HydrogenBalance({ address }) { +function HydrogenBalance({ address, className }) { const { totalAmountInLiquid } = useGetBalanceBostrom(address); return ( -
+ -
+ ); } diff --git a/src/containers/application/AppMenu.tsx b/src/containers/application/AppMenu.tsx index ddf0c21e9..ea901cbd9 100644 --- a/src/containers/application/AppMenu.tsx +++ b/src/containers/application/AppMenu.tsx @@ -4,7 +4,7 @@ import { Bookmarks } from '../../components/appMenu/AppMenu'; export type MenuItems = ReturnType; export type MenuItem = MenuItems[0]; -function AppMenu({ addressActive, closeMenu }) { +function AppMenu({ closeMenu }) { return (
{ - if (address !== null) { + if (address) { if (address.bech32) { setAddressActive(address.bech32); } else { diff --git a/src/layouts/Main.module.scss b/src/layouts/Main.module.scss index 2009db62f..7c5143bf3 100644 --- a/src/layouts/Main.module.scss +++ b/src/layouts/Main.module.scss @@ -25,8 +25,21 @@ } } -.senseBtn { +@mixin positionFixed() { position: fixed; - top: 45%; z-index: 3; + top: 45%; +} + +.senseBtn { + @include positionFixed(); +} + +.hydrogenBtn { + @include positionFixed(); + right: 0px; + display: flex; + flex-direction: column; + align-items: center; + color: #fff; } \ No newline at end of file diff --git a/src/layouts/Main.tsx b/src/layouts/Main.tsx index aa772a400..671823663 100644 --- a/src/layouts/Main.tsx +++ b/src/layouts/Main.tsx @@ -4,24 +4,23 @@ import { localStorageKeys } from 'src/constants/localStorageKeys'; import AppMenu from 'src/containers/application/AppMenu'; import AppSideBar from 'src/containers/application/AppSideBar'; import Header from 'src/containers/application/Header/Header'; -import useSetActiveAddress from 'src/hooks/useSetActiveAddress'; import { useAppDispatch, useAppSelector } from 'src/redux/hooks'; -import styles from './Main.module.scss'; import { routes } from 'src/routes'; import { Link } from 'react-router-dom'; import Commander from 'src/containers/application/Header/Commander/Commander'; import { useDevice } from 'src/contexts/device'; import { setFocus } from 'src/containers/application/Header/Commander/commander.redux'; import CyberlinksGraphContainer from 'src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer'; +import { Time } from 'src/components'; +import HydrogenBalance from 'src/components/HydrogenBalance/HydrogenBalance'; import graphDataPrepared from '../pages/oracle/landing/graphDataPrepared.json'; import stylesOracle from '../pages/oracle/landing/OracleLanding.module.scss'; -import { Time } from 'src/components'; -import { getNowUtcTime } from 'src/utils/utils'; import SenseButton from '../features/sense/ui/SenseButton/SenseButton'; +import styles from './Main.module.scss'; function MainLayout({ children }: { children: JSX.Element }) { - const pocket = useAppSelector(({ pocket }) => pocket); - const { defaultAccount } = pocket; + const { defaultAccount } = useAppSelector(({ pocket }) => pocket); + const addressBech32 = defaultAccount.account?.cyber.bech32; const { viewportWidth } = useDevice(); const ref = useRef(null); const dispatch = useAppDispatch(); @@ -31,8 +30,6 @@ function MainLayout({ children }: { children: JSX.Element }) { const isMobile = viewportWidth <= Number(stylesOracle.mobileBreakpoint.replace('px', '')); - const { addressActive } = useSetActiveAddress(defaultAccount); - // for new user show menu, else no + animation const [openMenu, setOpenMenu] = useState( !localStorage.getItem(localStorageKeys.MENU_SHOW) @@ -94,10 +91,11 @@ function MainLayout({ children }: { children: JSX.Element }) { /> - + + {children} From 1aa722fcd6980a6cc62632f82abe6b541846db29 Mon Sep 17 00:00:00 2001 From: dimakorzhovnik Date: Mon, 18 Mar 2024 01:30:59 +0300 Subject: [PATCH 04/38] fix(app): fix menu --- .../application/Header/SwitchNetwork/SwitchNetwork.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/containers/application/Header/SwitchNetwork/SwitchNetwork.tsx b/src/containers/application/Header/SwitchNetwork/SwitchNetwork.tsx index 911dc1b0e..289e9dc1f 100644 --- a/src/containers/application/Header/SwitchNetwork/SwitchNetwork.tsx +++ b/src/containers/application/Header/SwitchNetwork/SwitchNetwork.tsx @@ -67,7 +67,7 @@ function SwitchNetwork({ onClickOpenMenu, openMenu }) { > From 27a0bfbb4a1506c201636306854fa0fc97d76864 Mon Sep 17 00:00:00 2001 From: dimakorzhovnik Date: Mon, 18 Mar 2024 01:55:56 +0300 Subject: [PATCH 05/38] fix(action): style --- src/components/actionBar/index.tsx | 28 ++++++----------- src/components/actionBar/styles.module.scss | 35 ++++++++++++++++++--- 2 files changed, 40 insertions(+), 23 deletions(-) diff --git a/src/components/actionBar/index.tsx b/src/components/actionBar/index.tsx index 05cee061e..ae9dc231a 100644 --- a/src/components/actionBar/index.tsx +++ b/src/components/actionBar/index.tsx @@ -152,30 +152,22 @@ function ActionBarComp({ children, text, onClickBack, button }: Props) { ); } +function ActionBarWrap({ children }) { + return ( +
+
{children}
+
+ ); +} + function ActionBar({ children, text, onClickBack, button }: Props) { return ( -
+ {children} -
+ ); } diff --git a/src/components/actionBar/styles.module.scss b/src/components/actionBar/styles.module.scss index d9be94b03..b7f6618d5 100644 --- a/src/components/actionBar/styles.module.scss +++ b/src/components/actionBar/styles.module.scss @@ -7,11 +7,9 @@ bottom: 20px; left: 0; padding: 10px 0; - background: linear-gradient( - 0deg, - rgba(0, 0, 0, 0.93) 76%, - rgba(0, 0, 0, 0) 100% - ); + background: linear-gradient(0deg, + rgba(0, 0, 0, 0.93) 76%, + rgba(0, 0, 0, 0) 100%); z-index: 2; &Content { @@ -49,4 +47,31 @@ .chooseAccount { padding: 0 5px; color: var(--primary-color); +} + +.ActionBarWrap { + display: flex; + align-items: center; + justify-content: center; + width: 62%; + position: fixed; + bottom: 20px; + left: 50%; + transform: translate(-50%, 10px); + // padding: 10px 0; + background: #000; + z-index: 3; + + &Content { + max-width: 1000px; + flex-grow: 1; + display: grid; + grid-template-columns: 0.7fr 1fr; + align-items: center; + justify-content: center; + position: relative; + padding: 10px 0px; + + } + } \ No newline at end of file From 57a72f34066889da24795d6a589dc3b82b322121 Mon Sep 17 00:00:00 2001 From: dimakorzhovnik Date: Wed, 1 May 2024 17:07:45 +0300 Subject: [PATCH 06/38] Merge branch 'master' of https://github.com/cybercongress/dot-cyber into feat/redesign-1 --- codegen.ts | 24 + docker-compose.yml | 14 +- package.json | 15 +- src/components/AmountDenom/AmountDenom.tsx | 4 +- src/components/BandwidthBar/index.tsx | 23 +- src/components/ContentItem/contentItem.tsx | 9 +- src/components/MusicalAddress/utils.js | 4 +- src/components/Row/Row.module.scss | 21 + src/components/Row/Row.tsx | 17 + src/components/SearchItem/searchItem.tsx | 2 + .../TableTxsInfinite.module.scss | 4 + .../TableTxsInfinite/TableTxsInfinite.tsx | 48 + .../TableTxsInfinite/component/MsgTypeTxs.tsx | 19 + .../component/RenderValue.tsx} | 20 +- .../TableTxsInfinite/component/StatusTxs.tsx | 15 + .../component/TableDataTxs.module.scss | 9 + .../component/TableDataTxs.tsx | 95 + .../TableTxsInfinite/component/txHash.tsx | 11 + src/components/TokenChange/TokenChange.tsx | 4 +- .../VideoPlayer/VideoPlayerGatewayOnly.tsx | 2 +- src/components/account/account.tsx | 13 +- src/components/actionBar/index.tsx | 5 +- .../buttons/ButtonIcon/ButtonIcon.module.scss | 39 + src/components/buttons/ButtonIcon/index.tsx | 18 +- src/components/contentIpfs/contentIpfs.tsx | 8 +- src/components/denom/denomArr.tsx | 12 +- src/components/governance/governance.jsx | 15 +- src/components/index.js | 12 +- src/components/ledger/stageActionBar.jsx | 715 +- src/components/networksImg/imgNetwork.jsx | 6 +- src/components/networksImg/textNetwork.jsx | 4 +- src/components/numberCurrency/index.jsx | 4 +- src/components/search/Spark/Spark.tsx | 5 +- src/components/statistics/item.js | 2 +- src/components/statistics/styles.module.scss | 11 + src/components/ui/Copy.module.scss | 15 + src/components/ui/Dots.module.scss | 40 + src/components/ui/Dots.tsx | 5 +- src/components/ui/{copy.jsx => copy.tsx} | 4 +- src/components/vitalik/Vitalik.module.scss | 28 + src/components/vitalik/index.jsx | 8 +- src/components/web3/waitForWeb3.js | 47 - src/constants/app.ts | 12 +- src/constants/config.ts | 54 +- src/constants/defaultNetworks.ts | 34 + src/constants/hubContracts.ts | 11 + src/constants/patterns.ts | 34 + src/containers/Search/ActionBarContainer.tsx | 59 +- src/containers/Search/Filters/Filters.tsx | 3 +- src/containers/Search/SearchResults.tsx | 19 +- .../Search/_FirstItems.refactor.tsx | 4 +- src/containers/Search/constants.ts | 9 + .../Search/hooks/useLinksByDate.tsx | 4 +- src/containers/Search/hooks/useRankLinks.tsx | 35 +- src/containers/Search/types.ts | 4 +- .../Validators/ActionBarContainer.tsx | 23 +- src/containers/Validators/Validators.jsx | 12 +- .../Validators/components/InfoBalance.jsx | 23 +- .../Validators/components/table.jsx | 4 +- .../Header/Commander/Commander.tsx | 2 +- .../Header/SwitchAccount/SwitchAccount.tsx | 15 +- .../Header/SwitchNetwork/SwitchNetwork.tsx | 7 +- src/containers/application/notFound.jsx | 4 +- .../application/notFound.module.scss | 13 + src/containers/blok/blockDetails.jsx | 77 - src/containers/blok/blockDetails.tsx | 85 + src/containers/blok/index.jsx | 195 - src/containers/blok/index.tsx | 119 + src/containers/blok/informationBlock.jsx | 73 - src/containers/blok/informationBlock.tsx | 37 + src/containers/brain/accountCount.jsx | 30 - src/containers/brain/accountCount.tsx | 19 + .../brain/hooks/getStatisticsCyber.js | 8 +- src/containers/brain/tx.jsx | 33 +- src/containers/energy/component/actionBar.tsx | 9 +- src/containers/energy/ui/tableSlots.tsx | 14 +- .../forceGraph/{hooks.js => hooks.ts} | 18 +- src/containers/forceGraph/query.js | 21 +- src/containers/governance/actionBar.tsx | 471 - src/containers/governance/actionBarDatail.tsx | 42 +- src/containers/governance/components/card.jsx | 14 +- src/containers/governance/governance.tsx | 236 +- src/containers/governance/proposalsDetail.jsx | 66 +- .../governance/proposalsDetail.module.scss | 20 + .../governance/proposalsDetailProgressBar.jsx | 5 +- .../proposalsDetailTableComments.tsx | 186 + .../governance/proposalsIdDetail.jsx | 4 +- src/containers/governance/proposalsRoutes.jsx | 52 + src/containers/governance/tabList.tsx | 22 + src/containers/governance/tabsLayout.tsx | 13 + src/containers/governance/type.ts | 5 + src/containers/home/{home.jsx => home.tsx} | 63 +- .../ipfs/components/metaInfo.module.scss | 5 + src/containers/ipfs/components/metaInfo.tsx | 3 +- src/containers/ipfs/hooks/useGetAnswers.ts | 9 +- src/containers/ipfs/hooks/useGetBackLink.ts | 1 - src/containers/ipfs/hooks/useGetDiscussion.ts | 120 +- src/containers/ipfs/ipfs.tsx | 6 +- src/containers/market/index.jsx | 6 +- src/containers/market/useGetTokensInfo.jsx | 5 +- .../mint/InfoText/InfoText.module.scss | 19 + src/containers/mint/InfoText/InfoText.tsx | 31 + .../LiquidBalances/LiquidBalances.module.scss | 5 + .../mint/LiquidBalances/LiquidBalances.tsx | 21 + src/containers/mint/Mint.module.scss | 36 +- .../mint/Statistics/Statistics.module.scss | 9 + src/containers/mint/Statistics/Statistics.tsx | 30 + src/containers/mint/actionBar.jsx | 179 - src/containers/mint/actionBar.tsx | 134 + .../mint/components/ERatio/ERatio.module.scss | 49 + .../ERatio/ERatio.tsx} | 34 +- .../ItemBalance/ItemBalance.module.scss | 11 + .../components/ItemBalance/ItemBalance.tsx | 23 + .../mint/components/Slider/Slider.tsx | 43 + src/containers/mint/index.tsx | 416 +- src/containers/mint/{types.d.ts => types.ts} | 6 + src/containers/mint/ui.jsx | 42 - src/containers/mint/useGetSlots.tsx | 18 +- src/containers/mint/utils.ts | 87 + src/containers/movie/Movie.module.scss | 23 + src/containers/movie/index.jsx | 23 +- src/containers/nebula/index.tsx | 14 +- src/containers/network/customNetwork.tsx | 162 - src/containers/network/detailsNetwork.tsx | 153 - src/containers/network/index.jsx | 5 - src/containers/network/listNetwork.tsx | 109 - src/containers/portal/ActionBarAddAvatar.tsx | 3 +- .../portal/citizenship/ActionBar.tsx | 5 +- src/containers/portal/citizenship/index.tsx | 32 +- .../portal/components/ReleaseStatus/index.tsx | 6 +- .../portal/components/currentGift/index.jsx | 2 +- .../portal/components/imgNetwork/index.jsx | 7 +- .../portal/gift/ActionBarPortalGift.tsx | 16 +- src/containers/portal/gift/index.tsx | 2 +- src/containers/portal/pasport/index.tsx | 2 +- .../portal/release/ActionBarRelease.tsx | 8 +- src/containers/portal/release/index.tsx | 2 +- src/containers/portal/utilsMsgs.ts | 2 +- .../cardUi/DetailsBalance/index.jsx | 8 +- .../cardUi/RowBalancesDetails/index.tsx | 6 +- src/containers/sigma/hooks/useBalanceToken.js | 12 +- .../sigma/hooks/useGetBalanceBostrom.ts | 14 +- .../sigma/hooks/useGetPassportByAddress.ts | 2 +- src/containers/sigma/hooks/utils.js | 20 +- src/containers/story/story.jsx | 12 +- src/containers/story/story.module.scss | 13 +- src/containers/taverna/useGetTweets.ts | 9 +- src/containers/temple/hooks/getTotalCap.ts | 10 +- .../temple/hooks/useAccountCount.js | 66 - .../temple/hooks/useAccountCount.ts | 45 + src/containers/temple/hooks/useGetContract.js | 66 - src/containers/temple/hooks/useGetContract.ts | 46 + .../temple/hooks/useGetNegentropy.ts | 41 +- .../temple/pages/play/PlayBanerContent.jsx | 4 +- src/containers/testKeplre/convert.jsx | 59 - src/containers/testKeplre/index.jsx | 6 +- src/containers/testKeplre/testAdd.jsx | 84 - src/containers/testKeplre/testDenom.jsx | 35 - src/containers/testKeplre/ui.jsx | 24 - src/containers/txs/Activites.jsx | 78 +- src/containers/txs/api/data.ts | 12 + src/containers/txs/api/mapping.ts | 32 + .../components/ContainerMsgsType.module.scss | 17 + .../txs/components/ContainerMsgsType.tsx | 23 + .../txs/graphql/transactions.graphql | 8 + src/containers/txs/index.tsx | 26 +- src/containers/txs/informationTxs.jsx | 118 - src/containers/txs/informationTxs.tsx | 60 + src/containers/txs/msgs.jsx | 25 - src/containers/txs/msgs.tsx | 18 + src/containers/txs/txsDetails.jsx | 84 - src/containers/txs/txsDetails.tsx | 49 + src/containers/txs/type.ts | 7 + src/containers/validator/UptimeHook.jsx | 53 - src/containers/validator/UptimeHook.tsx | 28 + .../{delegated.jsx => delegated.tsx} | 69 +- .../validator/{fans.jsx => fans.tsx} | 0 .../validator/{index.jsx => index.tsx} | 0 .../{keybaseAvatar.jsx => keybaseAvatar.tsx} | 0 .../{keybaseCheck.jsx => keybaseCheck.tsx} | 0 src/containers/validator/leadership.jsx | 66 - src/containers/validator/leadership.tsx | 52 + src/containers/validator/rumors.jsx | 61 - src/containers/validator/rumors.tsx | 53 + .../{validatorInfo.jsx => validatorInfo.tsx} | 2 +- src/containers/warp/ActionBar.tsx | 17 +- src/containers/warp/Warp.tsx | 14 +- .../warp/components/balanceToken.tsx | 6 +- .../warp/hooks/usePoolsAssetAmount.ts | 6 +- src/containers/warp/pool/InfoPool.tsx | 8 +- src/containers/warp/pool/PoolCard.tsx | 4 +- src/containers/warp/pool/TitlePoolCard.tsx | 4 +- src/containers/warp/pool/pollItems.tsx | 10 +- src/containers/wasm/codes/actionBar.jsx | 17 +- .../{DashboardPage.jsx => DashboardPage.tsx} | 34 +- .../wasm/contract/ExecuteContract.tsx | 11 +- .../wasm/contract/InstantiationContract.jsx | 6 +- .../wasm/contract/RenderInstantiateMsg.jsx | 2 +- src/containers/wasm/contract/index.jsx | 7 +- .../contract/renderAbi/RenderAbiExecute.jsx | 12 +- src/contexts/backend/backend.tsx | 97 +- src/contexts/backend/services/senseApi.ts | 96 +- src/contexts/ibcDenom.tsx | 133 +- src/contexts/networks.tsx | 2 +- src/contexts/queryClient.tsx | 6 +- src/contexts/signerClient.tsx | 53 +- .../CyberlinksGraphContainer.tsx | 34 - .../CyberlinksGraph/useCyberlinks.ts | 47 +- .../cyberlinks/hooks/useCyberlinksCount.ts | 24 +- .../ibc-history/HistoriesItem.ts | 0 src/{services => features}/ibc-history/db.ts | 0 .../ibc-history/historyContext.tsx | 2 - .../polling-status-subscription.ts | 0 .../ibc-history/tx/TracerTx.ts | 0 .../ibc-history/tx/types.ts | 0 .../ibc-history/useGetStatus.tsx | 0 .../ibc-history/utils.ts | 0 src/features/ipfs/ipfsSettings/index.tsx | 2 +- .../passport/hooks/usePassportByAddress.ts | 2 +- src/features/passport/passports.redux.ts | 2 +- src/features/passport/usePassportContract.ts | 2 +- src/features/sense/redux/sense.redux.ts | 2 +- src/features/sense/ui/ActionBar/ActionBar.tsx | 65 +- src/features/sense/ui/Sense.tsx | 13 +- .../ui/SenseButton/SenseButton.module.scss | 1 - .../sense/ui/SenseButton/SenseButton.tsx | 14 +- .../sense/ui/SenseList/SenseList.module.scss | 18 + src/features/sense/ui/SenseList/SenseList.tsx | 44 +- .../SenseListItem/SenseListItem.container.tsx | 45 +- .../SenseListItem/SenseListItem.module.scss | 7 +- .../SenseList/SenseListItem/SenseListItem.tsx | 7 + src/features/sense/ui/SenseRoutingWrapper.tsx | 2 +- .../Message/Message.container.module.scss | 11 + .../Messages/Message/Message.container.tsx | 34 +- .../SenseViewer/Messages/Message/Message.tsx | 18 +- .../ui/SenseViewer/Messages/Messages.tsx | 36 +- .../ui/SenseViewer/SenseViewer.module.scss | 47 +- .../sense/ui/SenseViewer/SenseViewer.tsx | 16 +- src/features/sense/ui/utils.tsx | 2 +- src/features/sense/ui/utils/format.ts | 8 + src/generated/graphql.ts | 10579 ++++++++++++++++ src/hocs/withIpfsAndKeplr.tsx | 3 +- src/hooks/getBalances.ts | 6 +- src/hooks/useAllDenomTraces.ts | 70 + src/hooks/useGetMarketData.ts | 46 +- src/hooks/useGetTotalSupply.ts | 8 +- src/hooks/useGetWarpPools.ts | 18 +- src/hooks/useHub.ts | 18 +- src/hooks/usePoolListInterval.ts | 21 +- src/hooks/useQueueIpfsContent.ts | 2 +- ...eTraseNetworks.ts => useTracesNetworks.ts} | 14 +- src/hooks/useWaitForTransaction.ts | 2 +- src/i18n/en.js | 7 +- src/index.tsx | 6 +- src/pages/Keys/ActionBar/actionBar.tsx | 45 +- src/pages/Keys/ActionBar/actionBarConnect.tsx | 8 +- src/pages/Keys/ActionBar/actionBarKeplr.tsx | 9 +- src/pages/Keys/ActionBar/actionBarUser.jsx | 60 - src/pages/oracle/Learn/Learn.tsx | 49 +- src/pages/robot/Layout/WrappedActionBar.tsx | 95 +- src/pages/robot/Layout/tweet.temp.tsx | 75 - src/pages/robot/Layout/useMenuCounts.tsx | 8 +- .../account/{actionBar.jsx => actionBar.tsx} | 273 +- .../_refactor/account/component/tableTxs.jsx | 211 - .../_refactor/account/component/txsTable.jsx | 167 - .../_refactor/account/component/txsTable.tsx | 65 + .../_refactor/account/hooks/useGetBalance.js | 18 +- .../account/hooks/useGetCommunity.PREVIOUS.ts | 2 +- .../account/hooks/useGetCommunity.ts | 40 +- ...ddress.js => useGetTsxByAddress.legacy.ts} | 50 +- .../robot/_refactor/account/tabs/feeds.tsx | 2 +- .../robot/_refactor/account/tabs/follows.tsx | 1 - .../robot/_refactor/account/tabs/heroes.jsx | 14 +- .../robot/_refactor/account/tabs/link.jsx | 44 - .../teleport/bridge/actionBar.bridge.tsx | 17 +- src/pages/teleport/bridge/bridge.tsx | 14 +- .../dataIbcHistory/DataHistoryItems.tsx | 18 +- .../dataIbcHistory/DataHistoryRow.tsx | 4 +- .../dataIbcHistory/DataIbcHistory.tsx | 2 +- .../Inputs/AccountInput/AccountInput.tsx | 2 +- .../InputNumberDecimalScale.tsx | 8 +- src/pages/teleport/hooks/useGetBalancesIbc.ts | 4 +- .../teleport/hooks/useGetSendTxsByAddress.tsx | 109 +- .../hooks/useGetSendTxsByAddressByLcd.tsx | 2 +- src/pages/teleport/hooks/useSetupIbcClient.ts | 4 +- .../teleport/hooks/useSubscribersBlokIbc.ts | 2 +- src/pages/teleport/hooks/utils.tsx | 3 + .../components/SendAction/SendAction.tsx | 4 +- src/pages/teleport/send/actionBar.send.tsx | 47 +- .../dataSendTxs/DataSendTxsItems.tsx | 4 +- src/pages/teleport/send/send.tsx | 22 +- src/pages/teleport/swap/actionBar.swap.tsx | 6 +- .../swap/components/TokenSetterSwap.tsx | 4 +- .../components/dataSwapTxs/DataSwapTxs.tsx | 59 +- .../dataSwapTxs/DataSwapTxsItem.tsx | 13 +- src/pages/teleport/swap/swap.tsx | 16 +- src/redux/features/ibcDenom.ts | 38 + src/redux/features/warp.ts | 41 + src/redux/reducers/index.ts | 4 + src/router.tsx | 10 +- src/routes.ts | 10 +- src/services/CozoDb/cozoDb.ts | 1 + src/services/CozoDb/mapping.ts | 14 +- src/services/CozoDb/types/entities.ts | 2 +- src/services/QueueManager/QueueManager.ts | 4 +- .../__tests__/QueueManager.fake-timer.test.ts | 2 +- .../__tests__/QueueManager.test.ts | 2 +- src/services/QueueManager/q.test.ts | 265 - src/services/QueueManager/types.ts | 2 +- .../channels/BroadcastChannelSender.ts | 11 + .../channels/RxBroadcastChannelListener.ts | 6 +- .../dbApiWrapper.ts => DbApi/DbApi.ts} | 21 +- .../__mocks__/dbApiWrapperMock.ts | 0 .../DeferredDbSaver/DeferredDbSaver.test.ts | 4 +- .../DeferredDbSaver/DeferredDbSaver.ts | 4 +- .../blockchain/__tests__/indexer.test.ts | 106 - .../blockchain/__tests__/lcd.test.ts | 16 - .../blockchain/__tests__/utils.test.ts | 39 - .../services/dataSource/blockchain/indexer.ts | 275 - .../services/dataSource/blockchain/lcd.ts | 132 - .../dataSource/blockchain/utils/fetch.ts | 19 - .../blockchain => indexer}/consts.ts | 0 .../backend/services/indexer/cyberlinks.ts | 141 + .../indexer/graphql/accountCount.graphql | 7 + .../indexer/graphql/blockByHeight.graphql | 14 + .../services/indexer/graphql/blocks.graphql | 18 + .../indexer/graphql/contractsCount.graphql | 7 + .../graphql/cyberlinksByParticle.graphql | 19 + .../graphql/cyberlinksCountByNeuron.graphql | 19 + .../graphql/cyberlinksCountByParticle.graphql | 7 + .../graphql/messagesByAddressCount.graphql | 10 + .../messagesByAddressSense/query.graphql | 27 + .../subscription.graphql | 27 + .../indexer/graphql/transactionCount.graphql | 7 + .../indexer/graphql/uptimeByAddress.graphql | 6 + .../indexer/graphql/wasmDashboardPage.graphql | 22 + .../backend/services/indexer/transactions.ts | 101 +- .../backend/services/indexer/types.ts | 9 - .../{utils.ts => utils/graphqlClient.ts} | 12 +- .../services/lcd/__tests__/utils.test.ts | 64 - src/services/backend/services/lcd/types.ts | 4 - src/services/backend/services/lcd/utils.ts | 37 - .../services/sync/__tests__/utils.test.ts | 7 +- .../sync/services/BaseSyncLoop/BaseSync.ts | 2 +- .../ParticlesResolverQueue.test.ts | 2 +- .../ParticlesResolverQueue.ts | 2 +- .../SyncIpfsLoop/SyncIpfsLoop.test.ts | 4 +- .../services/SyncIpfsLoop/SyncIpfsLoop.ts | 6 +- .../services/SyncIpfsLoop/services.ts} | 4 +- .../SyncMyFriendsLoop/SyncMyFriendsLoop.ts | 10 +- .../SyncParticlesLoop.test.ts | 4 +- .../SyncParticlesLoop/SyncParticlesLoop.ts | 37 +- .../SyncTransactionsLoop.test.ts | 4 +- .../SyncTransactionsLoop.ts | 41 +- .../SyncTransactionsLoop/services/chat.ts | 16 +- .../backend/services/sync/services/types.ts | 4 +- .../services/sync/services/utils/links.ts | 14 +- src/services/backend/services/sync/utils.ts | 67 +- src/services/backend/types/services.ts | 8 +- .../backend/workers/background/worker.ts | 6 +- src/services/backend/workers/serializers.ts | 2 +- src/services/community/community.test.ts | 4 +- src/services/community/community.ts | 6 +- .../services/lcd => community}/lcd.ts | 34 +- .../graphql/queries/messagesByAddress.graphql | 19 + src/services/ipfs/config.ts | 2 +- src/services/ipfs/node/factory.ts | 2 +- src/services/ipfs/node/impl/helia.ts | 4 +- src/services/ipfs/node/impl/js-ipfs.ts | 2 +- src/services/ipfs/node/impl/kubo.ts | 2 +- .../ipfs/node/mixins/withCybFeatures.ts | 2 +- src/services/ipfs/{ipfs.d.ts => types.ts} | 0 src/services/ipfs/utils/content.ts | 12 +- src/services/ipfs/utils/stream.ts | 2 +- src/services/ipfs/utils/utils-ipfs.ts | 149 +- .../{blockchain => lcd}/utils/mapping.test.ts | 0 .../{blockchain => lcd}/utils/mapping.ts | 0 src/services/{blockchain => lcd}/websocket.ts | 6 +- src/services/neuron/errors.ts | 33 + src/services/neuron/neuronApi.ts | 96 + src/{ => services}/soft.js/api/msgs.ts | 10 +- src/{ => services}/soft.js/api/passport.ts | 0 src/{ => services}/soft.js/api/search.ts | 0 src/{ => services}/soft.js/index.md | 0 src/{ => services}/soft.js/types.ts | 0 src/style/auction.css | 153 - src/style/components.css | 490 - src/style/container-distribution.css | 118 - src/style/funding.css | 845 -- src/style/global.css | 97 +- src/style/got.css | 725 -- src/style/home.css | 58 - src/style/main.css | 8 - src/style/notFound.css | 42 - src/types/ibc.d.ts | 4 +- src/types/index.d.ts | 2 + src/types/networks.ts | 18 +- src/utils/__tests__/date.test.ts | 15 +- src/utils/appsMenu.ts | 7 +- src/utils/async/iterable.ts | 20 + src/utils/async/promise.ts | 39 +- src/utils/axios.ts | 9 + src/utils/config.ts | 297 +- src/utils/{configToken.js => configToken.ts} | 2 +- src/utils/date.ts | 29 +- src/utils/defaultNetworks.js | 33 - src/utils/governance.ts | 20 +- src/utils/helpers.ts | 83 - src/utils/ipfs/helpers.ts | 17 + src/utils/keplrUtils.ts | 22 +- src/utils/logging/bootstrap.ts | 1 + src/utils/logging/types.ts | 2 +- src/utils/networkListIbc.ts | 8 +- src/utils/networksList.js | 76 - src/utils/rxjs/helpers.ts | 20 + src/utils/search/utils.ts | 277 +- src/utils/test-utils/test-utils.ts | 5 - src/utils/txs.js | 26 - src/utils/utils.ts | 22 +- src/websockets/context.tsx | 4 +- webpack.config.common.js | 25 +- yarn.lock | 2498 +++- 422 files changed, 17878 insertions(+), 11045 deletions(-) create mode 100644 codegen.ts create mode 100644 src/components/Row/Row.module.scss create mode 100644 src/components/Row/Row.tsx create mode 100644 src/components/TableTxsInfinite/TableTxsInfinite.module.scss create mode 100644 src/components/TableTxsInfinite/TableTxsInfinite.tsx create mode 100644 src/components/TableTxsInfinite/component/MsgTypeTxs.tsx rename src/{pages/robot/_refactor/account/component/RenderValue.jsx => components/TableTxsInfinite/component/RenderValue.tsx} (98%) create mode 100644 src/components/TableTxsInfinite/component/StatusTxs.tsx create mode 100644 src/components/TableTxsInfinite/component/TableDataTxs.module.scss create mode 100644 src/components/TableTxsInfinite/component/TableDataTxs.tsx create mode 100644 src/components/TableTxsInfinite/component/txHash.tsx create mode 100644 src/components/buttons/ButtonIcon/ButtonIcon.module.scss create mode 100644 src/components/ui/Copy.module.scss create mode 100644 src/components/ui/Dots.module.scss rename src/components/ui/{copy.jsx => copy.tsx} (78%) create mode 100644 src/components/vitalik/Vitalik.module.scss delete mode 100644 src/components/web3/waitForWeb3.js create mode 100644 src/constants/defaultNetworks.ts create mode 100644 src/constants/hubContracts.ts create mode 100644 src/constants/patterns.ts create mode 100644 src/containers/application/notFound.module.scss delete mode 100644 src/containers/blok/blockDetails.jsx create mode 100644 src/containers/blok/blockDetails.tsx delete mode 100644 src/containers/blok/index.jsx create mode 100644 src/containers/blok/index.tsx delete mode 100644 src/containers/blok/informationBlock.jsx create mode 100644 src/containers/blok/informationBlock.tsx delete mode 100644 src/containers/brain/accountCount.jsx create mode 100644 src/containers/brain/accountCount.tsx rename src/containers/forceGraph/{hooks.js => hooks.ts} (67%) delete mode 100644 src/containers/governance/actionBar.tsx create mode 100644 src/containers/governance/proposalsDetail.module.scss create mode 100644 src/containers/governance/proposalsDetailTableComments.tsx create mode 100644 src/containers/governance/proposalsRoutes.jsx create mode 100644 src/containers/governance/tabList.tsx create mode 100644 src/containers/governance/tabsLayout.tsx create mode 100644 src/containers/governance/type.ts rename src/containers/home/{home.jsx => home.tsx} (81%) create mode 100644 src/containers/ipfs/components/metaInfo.module.scss create mode 100644 src/containers/mint/InfoText/InfoText.module.scss create mode 100644 src/containers/mint/InfoText/InfoText.tsx create mode 100644 src/containers/mint/LiquidBalances/LiquidBalances.module.scss create mode 100644 src/containers/mint/LiquidBalances/LiquidBalances.tsx create mode 100644 src/containers/mint/Statistics/Statistics.module.scss create mode 100644 src/containers/mint/Statistics/Statistics.tsx delete mode 100644 src/containers/mint/actionBar.jsx create mode 100644 src/containers/mint/actionBar.tsx create mode 100644 src/containers/mint/components/ERatio/ERatio.module.scss rename src/containers/mint/{eRatio.jsx => components/ERatio/ERatio.tsx} (53%) create mode 100644 src/containers/mint/components/ItemBalance/ItemBalance.module.scss create mode 100644 src/containers/mint/components/ItemBalance/ItemBalance.tsx create mode 100644 src/containers/mint/components/Slider/Slider.tsx rename src/containers/mint/{types.d.ts => types.ts} (66%) delete mode 100644 src/containers/mint/ui.jsx create mode 100644 src/containers/mint/utils.ts create mode 100644 src/containers/movie/Movie.module.scss delete mode 100644 src/containers/network/customNetwork.tsx delete mode 100644 src/containers/network/detailsNetwork.tsx delete mode 100644 src/containers/network/index.jsx delete mode 100644 src/containers/network/listNetwork.tsx delete mode 100644 src/containers/temple/hooks/useAccountCount.js create mode 100644 src/containers/temple/hooks/useAccountCount.ts delete mode 100644 src/containers/temple/hooks/useGetContract.js create mode 100644 src/containers/temple/hooks/useGetContract.ts delete mode 100644 src/containers/testKeplre/convert.jsx delete mode 100644 src/containers/testKeplre/testAdd.jsx delete mode 100644 src/containers/testKeplre/testDenom.jsx delete mode 100644 src/containers/testKeplre/ui.jsx create mode 100644 src/containers/txs/api/data.ts create mode 100644 src/containers/txs/api/mapping.ts create mode 100644 src/containers/txs/components/ContainerMsgsType.module.scss create mode 100644 src/containers/txs/components/ContainerMsgsType.tsx create mode 100644 src/containers/txs/graphql/transactions.graphql delete mode 100644 src/containers/txs/informationTxs.jsx create mode 100644 src/containers/txs/informationTxs.tsx delete mode 100644 src/containers/txs/msgs.jsx create mode 100644 src/containers/txs/msgs.tsx delete mode 100644 src/containers/txs/txsDetails.jsx create mode 100644 src/containers/txs/txsDetails.tsx create mode 100644 src/containers/txs/type.ts delete mode 100644 src/containers/validator/UptimeHook.jsx create mode 100644 src/containers/validator/UptimeHook.tsx rename src/containers/validator/{delegated.jsx => delegated.tsx} (62%) rename src/containers/validator/{fans.jsx => fans.tsx} (100%) rename src/containers/validator/{index.jsx => index.tsx} (100%) rename src/containers/validator/{keybaseAvatar.jsx => keybaseAvatar.tsx} (100%) rename src/containers/validator/{keybaseCheck.jsx => keybaseCheck.tsx} (100%) delete mode 100644 src/containers/validator/leadership.jsx create mode 100644 src/containers/validator/leadership.tsx delete mode 100644 src/containers/validator/rumors.jsx create mode 100644 src/containers/validator/rumors.tsx rename src/containers/validator/{validatorInfo.jsx => validatorInfo.tsx} (97%) rename src/containers/wasm/contract/{DashboardPage.jsx => DashboardPage.tsx} (85%) rename src/{services => features}/ibc-history/HistoriesItem.ts (100%) rename src/{services => features}/ibc-history/db.ts (100%) rename src/{services => features}/ibc-history/historyContext.tsx (98%) rename src/{services => features}/ibc-history/polling-status-subscription.ts (100%) rename src/{services => features}/ibc-history/tx/TracerTx.ts (100%) rename src/{services => features}/ibc-history/tx/types.ts (100%) rename src/{services => features}/ibc-history/useGetStatus.tsx (100%) rename src/{services => features}/ibc-history/utils.ts (100%) create mode 100644 src/features/sense/ui/SenseViewer/Messages/Message/Message.container.module.scss create mode 100644 src/generated/graphql.ts create mode 100644 src/hooks/useAllDenomTraces.ts rename src/hooks/{useTraseNetworks.ts => useTracesNetworks.ts} (85%) delete mode 100644 src/pages/Keys/ActionBar/actionBarUser.jsx delete mode 100644 src/pages/robot/Layout/tweet.temp.tsx rename src/pages/robot/_refactor/account/{actionBar.jsx => actionBar.tsx} (54%) delete mode 100644 src/pages/robot/_refactor/account/component/tableTxs.jsx delete mode 100644 src/pages/robot/_refactor/account/component/txsTable.jsx create mode 100644 src/pages/robot/_refactor/account/component/txsTable.tsx rename src/pages/robot/_refactor/account/hooks/{useGetTsxByAddress.js => useGetTsxByAddress.legacy.ts} (51%) delete mode 100644 src/pages/robot/_refactor/account/tabs/link.jsx create mode 100644 src/redux/features/ibcDenom.ts create mode 100644 src/redux/features/warp.ts delete mode 100644 src/services/QueueManager/q.test.ts rename src/services/backend/services/{dataSource/indexedDb/dbApiWrapper.ts => DbApi/DbApi.ts} (92%) rename src/services/backend/services/{dataSource/indexedDb => DbApi}/__mocks__/dbApiWrapperMock.ts (100%) delete mode 100644 src/services/backend/services/dataSource/blockchain/__tests__/indexer.test.ts delete mode 100644 src/services/backend/services/dataSource/blockchain/__tests__/lcd.test.ts delete mode 100644 src/services/backend/services/dataSource/blockchain/__tests__/utils.test.ts delete mode 100644 src/services/backend/services/dataSource/blockchain/indexer.ts delete mode 100644 src/services/backend/services/dataSource/blockchain/lcd.ts delete mode 100644 src/services/backend/services/dataSource/blockchain/utils/fetch.ts rename src/services/backend/services/{dataSource/blockchain => indexer}/consts.ts (100%) create mode 100644 src/services/backend/services/indexer/cyberlinks.ts create mode 100644 src/services/backend/services/indexer/graphql/accountCount.graphql create mode 100644 src/services/backend/services/indexer/graphql/blockByHeight.graphql create mode 100644 src/services/backend/services/indexer/graphql/blocks.graphql create mode 100644 src/services/backend/services/indexer/graphql/contractsCount.graphql create mode 100644 src/services/backend/services/indexer/graphql/cyberlinksByParticle.graphql create mode 100644 src/services/backend/services/indexer/graphql/cyberlinksCountByNeuron.graphql create mode 100644 src/services/backend/services/indexer/graphql/cyberlinksCountByParticle.graphql create mode 100644 src/services/backend/services/indexer/graphql/messagesByAddressCount.graphql create mode 100644 src/services/backend/services/indexer/graphql/messagesByAddressSense/query.graphql create mode 100644 src/services/backend/services/indexer/graphql/messagesByAddressSense/subscription.graphql create mode 100644 src/services/backend/services/indexer/graphql/transactionCount.graphql create mode 100644 src/services/backend/services/indexer/graphql/uptimeByAddress.graphql create mode 100644 src/services/backend/services/indexer/graphql/wasmDashboardPage.graphql rename src/services/backend/services/indexer/{utils.ts => utils/graphqlClient.ts} (87%) delete mode 100644 src/services/backend/services/lcd/__tests__/utils.test.ts delete mode 100644 src/services/backend/services/lcd/types.ts delete mode 100644 src/services/backend/services/lcd/utils.ts rename src/services/backend/services/{dataSource/ipfs/ipfsSource.ts => sync/services/SyncIpfsLoop/services.ts} (89%) rename src/services/{backend/services/lcd => community}/lcd.ts (52%) create mode 100644 src/services/graphql/queries/messagesByAddress.graphql rename src/services/ipfs/{ipfs.d.ts => types.ts} (100%) rename src/services/{blockchain => lcd}/utils/mapping.test.ts (100%) rename src/services/{blockchain => lcd}/utils/mapping.ts (100%) rename src/services/{blockchain => lcd}/websocket.ts (86%) create mode 100644 src/services/neuron/errors.ts create mode 100644 src/services/neuron/neuronApi.ts rename src/{ => services}/soft.js/api/msgs.ts (98%) rename src/{ => services}/soft.js/api/passport.ts (100%) rename src/{ => services}/soft.js/api/search.ts (100%) rename src/{ => services}/soft.js/index.md (100%) rename src/{ => services}/soft.js/types.ts (100%) delete mode 100644 src/style/auction.css delete mode 100644 src/style/components.css delete mode 100644 src/style/container-distribution.css delete mode 100644 src/style/funding.css delete mode 100644 src/style/got.css delete mode 100644 src/style/home.css delete mode 100644 src/style/notFound.css create mode 100644 src/utils/axios.ts rename src/utils/{configToken.js => configToken.ts} (98%) delete mode 100644 src/utils/defaultNetworks.js delete mode 100644 src/utils/helpers.ts delete mode 100644 src/utils/networksList.js create mode 100644 src/utils/rxjs/helpers.ts delete mode 100644 src/utils/test-utils/test-utils.ts delete mode 100644 src/utils/txs.js diff --git a/codegen.ts b/codegen.ts new file mode 100644 index 000000000..17afb1f39 --- /dev/null +++ b/codegen.ts @@ -0,0 +1,24 @@ +import { CodegenConfig } from '@graphql-codegen/cli'; + +const schemaUrl = 'https://index.bostrom.cybernode.ai/v1/graphql'; //process.env.NEXT_PUBLIC_GRAPHQL_HOST; + +const config: CodegenConfig = { + overwrite: true, + schema: schemaUrl, + documents: ['src/**/*.graphql'], + config: { + withHooks: true, + skipTypename: true, + }, + generates: { + 'src/generated/graphql.ts': { + plugins: [ + 'typescript', + 'typescript-operations', + 'typescript-react-apollo', + ], + }, + }, +}; + +export default config; diff --git a/docker-compose.yml b/docker-compose.yml index d0ff2ef2e..8b0768b85 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -9,10 +9,14 @@ services: environment: - NODE_OPTIONS=--max-old-space-size=8192 - CHAIN_ID=bostrom - - CYBER_NODE_URL_API=https://rpc.bostrom.cybernode.ai - - CYBER_NODE_URL_WS=wss://rpc.bostrom.cybernode.ai/websocket - - CYBER_NODE_URL_LCD=https://lcd.bostrom.cybernode.ai - - CYBER_INDEX_HTTPS=https://index.bostrom.cybernode.ai/v1/graphql - - CYBER_INDEX_WEBSOCKET=wss://index.bostrom.cybernode.ai/v1/graphql + - RPC_URL=https://rpc.bostrom.cybernode.ai + - LCD_URL=https://lcd.bostrom.cybernode.ai + - WEBSOCKET_URL=wss://rpc.bostrom.cybernode.ai/websocket + - INDEX_HTTPS=https://index.bostrom.cybernode.ai/v1/graphql + - INDEX_WEBSOCKET=wss://index.bostrom.cybernode.ai/v1/graphql - CYBER_GATEWAY=https://gateway.bostrom.cybernode.ai + - BASE_DENOM=boot + - DENOM_LIQUID=hydrogen + - BECH32_PREFIX=bostrom + command: npx serve -s build diff --git a/package.json b/package.json index 077a9bb23..83303a4f9 100644 --- a/package.json +++ b/package.json @@ -21,12 +21,13 @@ "stylelint:lint": "stylelint \"**/*.*css\"", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", - "test": "jest --transformIgnorePatterns --verbose" + "test": "jest --transformIgnorePatterns --verbose", + "generate-graphql-types": "yarn graphql-codegen --config ./codegen.ts" }, "browserslist": "> 0.5%, last 2 versions, not dead", "license": "ISC", "devDependencies": { - "@babel/core": "7.21.0", + "@babel/core": "^7.24.3", "@babel/eslint-parser": "^7.16.5", "@babel/helper-compilation-targets": "^7.21.4", "@babel/plugin-proposal-class-properties": "7.18.6", @@ -36,6 +37,10 @@ "@babel/preset-typescript": "^7.21.0", "@commitlint/cli": "^11.0.0", "@commitlint/config-conventional": "^11.0.0", + "@graphql-codegen/cli": "^5.0.2", + "@graphql-codegen/typescript": "^4.0.6", + "@graphql-codegen/typescript-operations": "^4.2.0", + "@graphql-codegen/typescript-react-apollo": "^4.3.0", "@keplr-wallet/types": "^0.11.52", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10", "@rjsf/core": "^3.2.1", @@ -82,6 +87,7 @@ "eslint-plugin-react": "^7.32.2", "eslint-plugin-typescript": "^0.14.0", "file-loader": "^6.2.0", + "graphql-tag": "^2.12.6", "history": "^4.9.0", "html-webpack-plugin": "^5.5.0", "https-browserify": "^1.0.0", @@ -139,6 +145,7 @@ "@chainsafe/libp2p-noise": "^13.0.1", "@chainsafe/libp2p-yamux": "^5.0.0", "@confio/relayer": "0.4.0", + "@cosmjs/cosmwasm-stargate": "^0.30.0", "@cosmjs/crypto": "0.29.0", "@cosmjs/encoding": "0.29.0", "@cosmjs/launchpad": "^0.27.1", @@ -146,7 +153,7 @@ "@cosmjs/proto-signing": "0.29.0", "@cosmjs/stargate": "0.32.0", "@cosmjs/tendermint-rpc": "0.29.0", - "@cybercongress/cyber-js": "0.3.6", + "@cybercongress/cyber-js": "^0.3.91", "@cybercongress/gravity": "0.0.15", "@ethersproject/providers": "^5.7.2", "@helia/unixfs": "^1.4.2", @@ -243,7 +250,7 @@ "ts-jest-resolver": "^2.0.1", "videostream": "^3.2.2", "web3": "1.2.4", - "web3-utils": "^1.2.4", + "web3-utils": "^4.2.1", "worker-url": "^1.1.0" }, "prec-commit": [ diff --git a/src/components/AmountDenom/AmountDenom.tsx b/src/components/AmountDenom/AmountDenom.tsx index 4d00edc5c..6c4a9b3d3 100644 --- a/src/components/AmountDenom/AmountDenom.tsx +++ b/src/components/AmountDenom/AmountDenom.tsx @@ -10,12 +10,12 @@ type Props = { }; function AmountDenom({ amountValue, denom, styleValue }: Props) { - const { traseDenom } = useIbcDenom(); + const { tracesDenom } = useIbcDenom(); let amount = 0; if (amountValue && amountValue > 0) { - const [{ coinDecimals }] = traseDenom(denom); + const [{ coinDecimals }] = tracesDenom(denom); amount = convertAmount(amountValue, coinDecimals); } diff --git a/src/components/BandwidthBar/index.tsx b/src/components/BandwidthBar/index.tsx index 045878520..84954b397 100644 --- a/src/components/BandwidthBar/index.tsx +++ b/src/components/BandwidthBar/index.tsx @@ -3,8 +3,10 @@ import { Battery, Pane, Text } from '@cybercongress/gravity'; import { Link } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; import { useQueryClient } from 'src/contexts/queryClient'; +import { Networks } from 'src/types/networks'; +import { routes } from 'src/routes'; +import { CHAIN_ID, BASE_DENOM } from 'src/constants/config'; import Tooltip from '../tooltip/tooltip'; -import { CYBER } from '../../utils/config'; import { coinDecimals, convertResources, @@ -12,9 +14,6 @@ import { reduceBalances, } from '../../utils/utils'; import { setBandwidth } from '../../redux/actions/bandwidth'; -import { useSigningClient } from 'src/contexts/signerClient'; -import { Networks } from 'src/types/networks'; -import { routes } from 'src/routes'; const PREFIXES = [ { @@ -55,12 +54,12 @@ function ContentTooltip({ bwRemained, bwMaxValue, amounPower, countLink }) { {text} - Get {CYBER.DENOM_CYBER.toUpperCase()} + Get {BASE_DENOM.toUpperCase()} @@ -68,13 +67,13 @@ function ContentTooltip({ bwRemained, bwMaxValue, amounPower, countLink }) { ); } -function BandwidthBar({ tooltipPlacement }) // bwRemained = 0, -// bwMaxValue = 0, -// countLink = 0, -// amounPower, -// ...props +function BandwidthBar({ tooltipPlacement }) { + // bwRemained = 0, + // bwMaxValue = 0, + // countLink = 0, + // amounPower, + // ...props -{ const [linkPrice] = useState(4); const queryClient = useQueryClient(); diff --git a/src/components/ContentItem/contentItem.tsx b/src/components/ContentItem/contentItem.tsx index fbf297bda..525c29d81 100644 --- a/src/components/ContentItem/contentItem.tsx +++ b/src/components/ContentItem/contentItem.tsx @@ -3,8 +3,12 @@ import React, { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; import { $TsFixMe } from 'src/types/tsfix'; import useQueueIpfsContent from 'src/hooks/useQueueIpfsContent'; -import { IpfsContentType } from 'src/utils/ipfs/ipfs'; -import { IPFSContentDetails } from 'src/services/ipfs/ipfs'; +import type { + IpfsContentType, + IPFSContentDetails, +} from 'src/services/ipfs/types'; +import { LinksType } from 'src/containers/Search/types'; + import { parseArrayLikeToDetails } from 'src/services/ipfs/utils/content'; import SearchItem from '../SearchItem/searchItem'; @@ -18,6 +22,7 @@ type ContentItemProps = { grade?: $TsFixMe; className?: string; parent?: string; + linkType: LinksType; setType?: (type: IpfsContentType) => void; }; diff --git a/src/components/MusicalAddress/utils.js b/src/components/MusicalAddress/utils.js index 871dfa964..9a5a6cc26 100644 --- a/src/components/MusicalAddress/utils.js +++ b/src/components/MusicalAddress/utils.js @@ -1,13 +1,13 @@ /* eslint-disable no-restricted-syntax */ import * as Tone from 'tone'; import { + PATTERN_CYBER, PATTERN_ETH, PATTERN_COSMOS, PATTERN_OSMOS, PATTERN_TERRA, PATTERN_CYBER_VALOPER, -} from '../../utils/config'; -import { PATTERN_CYBER } from 'src/constants/app'; +} from 'src/constants/patterns'; const DICTIONARY_ABC = { a: { note: 'E3', height: 16, gain: 1, color: '#36D6AE' }, diff --git a/src/components/Row/Row.module.scss b/src/components/Row/Row.module.scss new file mode 100644 index 000000000..01d17fa11 --- /dev/null +++ b/src/components/Row/Row.module.scss @@ -0,0 +1,21 @@ +.container { + display: grid; + grid-template-columns: 240px 1fr; + align-items: center; + line-height: 20px; + font-size: 16px; + + .value { + text-transform: none !important; + display: flex; + align-items: center; + justify-content: flex-start; + } +} + + + +.rowsContainer { + display: grid; + gap: 10px; +} \ No newline at end of file diff --git a/src/components/Row/Row.tsx b/src/components/Row/Row.tsx new file mode 100644 index 000000000..b2fb84255 --- /dev/null +++ b/src/components/Row/Row.tsx @@ -0,0 +1,17 @@ +import { ReactNode } from 'react'; +import styles from './Row.module.scss'; + +function Row({ value, title }: { title: ReactNode; value: ReactNode }) { + return ( +
+ {title}: + {value} +
+ ); +} + +export function RowsContainer({ children }: { children: ReactNode }) { + return
{children}
; +} + +export default Row; diff --git a/src/components/SearchItem/searchItem.tsx b/src/components/SearchItem/searchItem.tsx index e945e1edb..8be117dc7 100644 --- a/src/components/SearchItem/searchItem.tsx +++ b/src/components/SearchItem/searchItem.tsx @@ -1,6 +1,7 @@ import styles from './styles.module.scss'; import Status, { StatusType } from './status'; import Display from '../containerGradient/Display/Display'; +import { LinksType } from 'src/containers/Search/types'; const gradeColorRank = (grade) => { let classColor = 'grey'; @@ -34,6 +35,7 @@ type Props = { grade?: { value: number; }; + linkType: LinksType; children: React.ReactNode; }; diff --git a/src/components/TableTxsInfinite/TableTxsInfinite.module.scss b/src/components/TableTxsInfinite/TableTxsInfinite.module.scss new file mode 100644 index 000000000..684bcceb0 --- /dev/null +++ b/src/components/TableTxsInfinite/TableTxsInfinite.module.scss @@ -0,0 +1,4 @@ +.infiniteScroll { + display: grid; + gap: 15px; +} \ No newline at end of file diff --git a/src/components/TableTxsInfinite/TableTxsInfinite.tsx b/src/components/TableTxsInfinite/TableTxsInfinite.tsx new file mode 100644 index 000000000..66a79544c --- /dev/null +++ b/src/components/TableTxsInfinite/TableTxsInfinite.tsx @@ -0,0 +1,48 @@ +import InfiniteScroll from 'react-infinite-scroll-component'; +import { MessagesByAddressQuery } from 'src/generated/graphql'; +import { ApolloError } from '@apollo/client'; +import Display from '../containerGradient/Display/Display'; +import TableDataTxs from './component/TableDataTxs'; +import styles from './TableTxsInfinite.module.scss'; + +type Props = { + hasMore: boolean; + fetchMoreData: () => void; + accountUser: string | null; + response: { + data: MessagesByAddressQuery | undefined; + error: ApolloError | undefined; + loading: boolean; + }; +}; + +function TableTxsInfinite({ + hasMore, + fetchMoreData, + response, + accountUser, +}: Props) { + const { data, loading, error } = response; + + return ( + + + + + + {error && Error: {error.message}} + + ); +} + +export default TableTxsInfinite; diff --git a/src/components/TableTxsInfinite/component/MsgTypeTxs.tsx b/src/components/TableTxsInfinite/component/MsgTypeTxs.tsx new file mode 100644 index 000000000..8ff2a76bf --- /dev/null +++ b/src/components/TableTxsInfinite/component/MsgTypeTxs.tsx @@ -0,0 +1,19 @@ +import MsgType from '../../msgType/msgType'; + +type Props = { + type: string; + value: any; + accountUser: string; +}; + +function MsgTypeTxs({ type, value, accountUser }: Props) { + let typeTx = type; + + if (typeTx.includes('MsgSend') && value?.to_address === accountUser) { + typeTx = 'Receive'; + } + + return ; +} + +export default MsgTypeTxs; diff --git a/src/pages/robot/_refactor/account/component/RenderValue.jsx b/src/components/TableTxsInfinite/component/RenderValue.tsx similarity index 98% rename from src/pages/robot/_refactor/account/component/RenderValue.jsx rename to src/components/TableTxsInfinite/component/RenderValue.tsx index ba697729f..ee894ad27 100644 --- a/src/pages/robot/_refactor/account/component/RenderValue.jsx +++ b/src/components/TableTxsInfinite/component/RenderValue.tsx @@ -1,3 +1,4 @@ +import { ReactNode } from 'react'; import { Link } from 'react-router-dom'; import { Account, @@ -6,16 +7,17 @@ import { FormatNumberTokens, AmountDenom, } from 'src/components'; -import { CYBER } from '../../../../../utils/config'; -import { - formatNumber, - timeSince, - trimString, -} from '../../../../../utils/utils'; +import { formatNumber, timeSince, trimString } from 'src/utils/utils'; const S_TO_MS = 1 * 10 ** 3; -function ContainerMsgsType({ children, alignItems }) { +function ContainerMsgsType({ + children, + alignItems, +}: { + children: ReactNode; + alignItems?: string; +}) { return (
} /> @@ -485,7 +487,7 @@ function RenderValue({ value, type, accountUser }) { ); }) ) : ( - + ) } /> diff --git a/src/components/TableTxsInfinite/component/StatusTxs.tsx b/src/components/TableTxsInfinite/component/StatusTxs.tsx new file mode 100644 index 000000000..566eda6dc --- /dev/null +++ b/src/components/TableTxsInfinite/component/StatusTxs.tsx @@ -0,0 +1,15 @@ +import statusTrueImg from 'src/image/ionicons_svg_ios-checkmark-circle.svg'; +import statusFalseImg from 'src/image/ionicons_svg_ios-close-circle.svg'; +import styles from './TableDataTxs.module.scss'; + +function StatusTxs({ success }: { success: boolean }) { + return ( + status + ); +} + +export default StatusTxs; diff --git a/src/components/TableTxsInfinite/component/TableDataTxs.module.scss b/src/components/TableTxsInfinite/component/TableDataTxs.module.scss new file mode 100644 index 000000000..58384aba6 --- /dev/null +++ b/src/components/TableTxsInfinite/component/TableDataTxs.module.scss @@ -0,0 +1,9 @@ +.imgStatus { + width: 20px; + height: 20px; + margin-right: 5px; +} + +.type { + max-width: 100px; +} \ No newline at end of file diff --git a/src/components/TableTxsInfinite/component/TableDataTxs.tsx b/src/components/TableTxsInfinite/component/TableDataTxs.tsx new file mode 100644 index 000000000..fc04c8664 --- /dev/null +++ b/src/components/TableTxsInfinite/component/TableDataTxs.tsx @@ -0,0 +1,95 @@ +import { useMemo } from 'react'; + +import { trimString } from 'src/utils/utils'; +import { Link } from 'react-router-dom'; +import { routes } from 'src/routes'; +import Table from '../../Table/Table'; +import TextTable from '../../text/textTable'; +import MsgTypeTxs from './MsgTypeTxs'; +import CreatedAt from '../../CreatedAt/CreatedAt'; +import RenderValue from './RenderValue'; +import styles from './TableDataTxs.module.scss'; +import StatusTxs from './StatusTxs'; +import TxHash from './txHash'; + +type MessagesData = { + type: string; + value: any; + transaction_hash: string; + transaction: { + success: boolean; + block: { + timestamp: string; + }; + }; +}; + +type Props = { + accountUser: string; + data: Array; + loading: boolean; +}; + +enum ColumnsTable { + status = 'status', + type = 'type', + timestamp = 'timestamp', + tx = 'tx', + action = 'action', +} + +function TableDataTxs({ data, loading, accountUser }: Props) { + const tableData = useMemo(() => { + return data?.map((item) => { + return { + [ColumnsTable.status]: ( + + + + ), + [ColumnsTable.type]: ( +
+ +
+ ), + [ColumnsTable.timestamp]: ( + + + + ), + [ColumnsTable.tx]: ( + + + + ), + [ColumnsTable.action]: ( + + + + ), + }; + }); + }, [data, accountUser]); + + return ( + ({ + header: item, + accessorKey: item, + cell: (info) => info.getValue(), + }))} + /> + ); +} + +export default TableDataTxs; diff --git a/src/components/TableTxsInfinite/component/txHash.tsx b/src/components/TableTxsInfinite/component/txHash.tsx new file mode 100644 index 000000000..6afac7215 --- /dev/null +++ b/src/components/TableTxsInfinite/component/txHash.tsx @@ -0,0 +1,11 @@ +import { Link } from 'react-router-dom'; +import { routes } from 'src/routes'; +import { trimString } from 'src/utils/utils'; + +function TxHash({ hash }: { hash: string }) { + return ( + {trimString(hash, 6, 6)} + ); +} + +export default TxHash; diff --git a/src/components/TokenChange/TokenChange.tsx b/src/components/TokenChange/TokenChange.tsx index b986c0ebc..8a1b30ee0 100644 --- a/src/components/TokenChange/TokenChange.tsx +++ b/src/components/TokenChange/TokenChange.tsx @@ -1,8 +1,8 @@ -import { CYBER } from 'src/utils/config'; import { formatNumber } from 'src/utils/utils'; import cx from 'classnames'; import styles from './TokenChange.module.scss'; import FormatNumberTokens from '../FormatNumberTokens/FormatNumberTokens'; +import { DENOM_LIQUID } from 'src/constants/config'; export type Props = { total: number; @@ -25,7 +25,7 @@ function TokenChange({ total, change = 0, className }: Props) { )} - + ); } diff --git a/src/components/VideoPlayer/VideoPlayerGatewayOnly.tsx b/src/components/VideoPlayer/VideoPlayerGatewayOnly.tsx index 774a121fd..82bb49348 100644 --- a/src/components/VideoPlayer/VideoPlayerGatewayOnly.tsx +++ b/src/components/VideoPlayer/VideoPlayerGatewayOnly.tsx @@ -1,6 +1,6 @@ /* eslint-disable no-restricted-syntax */ import { useEffect, useState } from 'react'; -import { IPFSContentDetails, IPFSContentMaybe } from 'src/services/ipfs/ipfs'; +import { IPFSContentDetails, IPFSContentMaybe } from 'src/services/ipfs/types'; import { useBackend } from 'src/contexts/backend/backend'; import { CYBER_GATEWAY_URL } from 'src/services/ipfs/config'; diff --git a/src/components/account/account.tsx b/src/components/account/account.tsx index f7b0c14bf..985c9e78d 100644 --- a/src/components/account/account.tsx +++ b/src/components/account/account.tsx @@ -5,8 +5,8 @@ import { useQueryClient } from 'src/contexts/queryClient'; import { routes } from 'src/routes'; import usePassportByAddress from 'src/features/passport/hooks/usePassportByAddress'; import cx from 'classnames'; +import { BECH32_PREFIX_VALOPER } from 'src/constants/config'; import { trimString } from '../../utils/utils'; -import { CYBER } from '../../utils/config'; import { AvataImgIpfs } from '../../containers/portal/components/avataIpfs'; import styles from './account.module.scss'; @@ -25,9 +25,7 @@ function useGetValidatorInfo(address: string) { }, { enabled: Boolean( - queryClient && - address && - address.includes(CYBER.BECH32_PREFIX_ACC_ADDR_CYBERVALOPER) + queryClient && address && address.includes(BECH32_PREFIX_VALOPER) ), } ); @@ -77,7 +75,7 @@ function Account({ }, [address, trimAddressParam]); const linkAddress = useMemo(() => { - if (address?.includes(CYBER.BECH32_PREFIX_ACC_ADDR_CYBERVALOPER)) { + if (address?.includes(BECH32_PREFIX_VALOPER)) { return `/network/bostrom/hero/${address}`; } @@ -104,7 +102,8 @@ function Account({ }} > {avatar && ( -
-
+ )} {!onlyAvatar && ( ); return ( - +
{text ? ( - {text}}> + {text}}> {button} ) : ( button )} - +
); } diff --git a/src/components/contentIpfs/contentIpfs.tsx b/src/components/contentIpfs/contentIpfs.tsx index c74274e83..0f1fc69bd 100644 --- a/src/components/contentIpfs/contentIpfs.tsx +++ b/src/components/contentIpfs/contentIpfs.tsx @@ -1,5 +1,5 @@ -import { IPFSContentDetails, IPFSContentMaybe } from 'src/services/ipfs/ipfs'; -import { CYBER } from 'src/utils/config'; +import { IPFSContentDetails, IPFSContentMaybe } from 'src/services/ipfs/types'; +import { CYBER_GATEWAY } from 'src/constants/config'; import VideoPlayerGatewayOnly from '../VideoPlayer/VideoPlayerGatewayOnly'; import GatewayContent from './component/gateway'; import TextMarkdown from '../TextMarkdown'; @@ -22,14 +22,14 @@ function OtherItem({ {content || `${cid} (n/a)`} ); } - return ; + return ; } function DownloadableItem({ cid, search }: { cid: string; search?: boolean }) { if (search) { return
{`${cid} (gateway)`}
; } - return ; + return ; } type ContentTabProps = { diff --git a/src/components/denom/denomArr.tsx b/src/components/denom/denomArr.tsx index 17fae9c54..3d9e158f9 100644 --- a/src/components/denom/denomArr.tsx +++ b/src/components/denom/denomArr.tsx @@ -1,5 +1,5 @@ import { useEffect, useMemo, useState } from 'react'; -import { TraseDenomFuncResponse } from 'src/types/ibc'; +import { TracesDenomFuncResponse } from 'src/types/ibc'; import { Option } from 'src/types'; import { useIbcDenom } from 'src/contexts/ibcDenom'; import Denom from './index'; @@ -41,18 +41,18 @@ function DenomArr({ type, size, }: DenomArrProps) { - const { traseDenom } = useIbcDenom(); + const { tracesDenom } = useIbcDenom(); - const [denom, setDenom] = useState(); + const [denom, setDenom] = useState(); useEffect(() => { if (type) { return; } - const denomTrase = traseDenom(denomValue); + const denomTraces = tracesDenom(denomValue); - setDenom(denomTrase); - }, [denomValue, traseDenom, type]); + setDenom(denomTraces); + }, [denomValue, tracesDenom, type]); if (type === 'network') { return ( diff --git a/src/components/governance/governance.jsx b/src/components/governance/governance.jsx index 17e115d93..4ebe5c3dd 100644 --- a/src/components/governance/governance.jsx +++ b/src/components/governance/governance.jsx @@ -1,6 +1,7 @@ import { Pane, Text } from '@cybercongress/gravity'; +import { ProposalStatus } from 'cosmjs-types/cosmos/gov/v1beta1/gov'; +import { BASE_DENOM } from 'src/constants/config'; import { formatNumber } from '../../utils/search/utils'; -import { CYBER, PROPOSAL_STATUS } from '../../utils/config'; import Tooltip from '../tooltip/tooltip'; const submitted = require('../../image/ionicons_svg_ios-battery-full.svg'); @@ -161,27 +162,27 @@ export function IconStatus({ status, size, text, ...props }) { let statusText = ''; switch (status) { - case PROPOSAL_STATUS.PROPOSAL_STATUS_DEPOSIT_PERIOD: { + case ProposalStatus.PROPOSAL_STATUS_DEPOSIT_PERIOD: { imgIcon = submitted; statusText = 'deposit period'; break; } - case PROPOSAL_STATUS.PROPOSAL_STATUS_VOTING_PERIOD: { + case ProposalStatus.PROPOSAL_STATUS_VOTING_PERIOD: { imgIcon = voting; statusText = 'voting period'; break; } - case PROPOSAL_STATUS.PROPOSAL_STATUS_PASSED: { + case ProposalStatus.PROPOSAL_STATUS_PASSED: { imgIcon = passed; statusText = 'passed'; break; } - case PROPOSAL_STATUS.PROPOSAL_STATUS_REJECTED: { + case ProposalStatus.PROPOSAL_STATUS_REJECTED: { imgIcon = rejected; statusText = 'rejected'; break; } - case PROPOSAL_STATUS.PROPOSAL_STATUS_FAILED: { + case ProposalStatus.PROPOSAL_STATUS_FAILED: { imgIcon = failed; statusText = 'failed'; break; @@ -241,7 +242,7 @@ export function Deposit({ totalDeposit, minDeposit }) { className="tooltip-text-deposit" > Total Deposit {formatNumber(totalDeposit)}{' '} - {CYBER.DENOM_CYBER.toUpperCase()} + {BASE_DENOM.toUpperCase()} diff --git a/src/components/index.js b/src/components/index.js index 4d5e0c527..ef8f46e96 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -55,27 +55,21 @@ import Slider from './Slider/Slider'; import CreatedAt from './CreatedAt/CreatedAt'; import Tabs from './Tabs/Tabs'; import Time from './time/time'; +import Row, { RowsContainer } from './Row/Row'; const BtnGrd = Button; // eslint-disable-next-line import/no-unused-modules export { - GovernanceChangeParam, Account, CardTemplate, StatusTooltip, MsgType, - JsonTransaction, TransactionSubmitted, Confirmed, - ConnectLadger, - Cyberlink, StartStageSearchActionBar, Delegate, ActionBarSend, - GovernanceStartStageActionBar, - CommunityPool, - TextProposal, RewardsDelegators, ReDelegate, TransactionError, @@ -83,8 +77,6 @@ export { Vitalik, BandwidthBar, ActionBarContentText, - CheckAddressInfo, - GovernanceSoftwareUpgrade, ConnectAddress, ButtonImgText, Rank, @@ -116,6 +108,8 @@ export { CreatedAt, Tabs, Time, + Row, + RowsContainer, }; export { Dots } from './ui/Dots'; diff --git a/src/components/ledger/stageActionBar.jsx b/src/components/ledger/stageActionBar.jsx index e8e7c6730..da4995def 100644 --- a/src/components/ledger/stageActionBar.jsx +++ b/src/components/ledger/stageActionBar.jsx @@ -1,14 +1,10 @@ -import { useState, useEffect, useRef } from 'react'; import LocalizedStrings from 'react-localization'; import { Link } from 'react-router-dom'; -import { - ActionBar, - Pane, - Text, - Battery, - IconButton, -} from '@cybercongress/gravity'; +import { ActionBar, Pane, Text } from '@cybercongress/gravity'; +import { BondStatus } from 'cosmjs-types/cosmos/staking/v1beta1/staking'; +import { useBackend } from 'src/contexts/backend/backend'; +import { CHAIN_ID, BASE_DENOM } from 'src/constants/config'; import { ContainetLedger } from './container'; import { Dots } from '../ui/Dots'; import Account from '../account/account'; @@ -17,88 +13,23 @@ import { formatNumber, trimString, selectNetworkImg } from '../../utils/utils'; import { i18n } from '../../i18n/en'; -import { CYBER, BOND_STATUS } from '../../utils/config'; import Button from '../btnGrd'; import { InputNumber, Input } from '../Input'; import ActionBarContainer from '../actionBar'; import ButtonIcon from '../buttons/ButtonIcon'; import { Color } from '../LinearGradientContainer/LinearGradientContainer'; import AddFileButton from '../buttons/AddFile/AddFile'; -import { useBackend } from 'src/contexts/backend/backend'; -import useDelegation from 'src/features/staking/delegation/useDelegation'; - -const { DENOM_CYBER } = CYBER; -const param = { - slashing: [ - 'signed_blocks_window', - 'min_signed_per_window', - 'downtime_jail_duration', - 'slash_fraction_double_sign', - 'slash_fraction_downtime', - ], - bandwidth: [ - 'tx_cost', - 'link_msg_cost', - 'non_link_msg_cost', - 'recovery_period', - 'adjust_price_period', - 'base_credit_price', - 'desirable_bandwidth', - 'max_block_bandwidth', - ], - distribution: [ - 'community_tax', - 'base_proposer_reward', - 'bonus_proposer_reward', - 'withdraw_addr_enabled', - ], - mint: [ - 'mint_denom', - 'inflation_rate_change', - 'inflation_max', - 'inflation_min', - 'goal_bonded', - 'blocks_per_year', - ], - evidence: ['max_evidence_age'], - auth: [ - 'max_memo_characters', - 'tx_sig_limit', - 'tx_size_cost_per_byte', - 'sig_verify_cost_ed25519', - 'sig_verify_cost_secp256k1', - ], - rank: ['calculation_period', 'damping_factor', 'tolerance'], - staking: [ - 'unbonding_time', - 'max_validators', - 'max_entries', - 'historical_entries', - 'bond_denom', - ], - gov: { - deposit_params: ['min_deposit', 'max_deposit_period'], - voting_params: ['voting_period'], - tally_params: ['quorum', 'threshold', 'veto'], - }, -}; - -const imgLedger = require('../../image/ledger.svg'); const imgKeplr = require('../../image/keplr-icon.svg'); -const imgMetaMask = require('../../image/mm-logo.svg'); const imgRead = require('../../image/duplicate-outline.svg'); -const imgEth = require('../../image/Ethereum_logo_2014.svg'); -const imgCosmos = require('../../image/cosmos-2.svg'); const T = new LocalizedStrings(i18n); -const ledger = require('../../image/select-pin-nano2.svg'); -const toPascalCase = (str) => - str - .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[a-zA-Z0-9]+/g) - .map((cht) => cht.charAt(0).toUpperCase() + cht.substr(1).toLowerCase()) - .join(''); +// const toPascalCase = (str) => +// str +// .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[a-zA-Z0-9]+/g) +// .map((cht) => cht.charAt(0).toUpperCase() + cht.substr(1).toLowerCase()) +// .join(''); export function ActionBarContentText({ children, ...props }) { return ( @@ -116,26 +47,6 @@ export function ActionBarContentText({ children, ...props }) { ); } -export function JsonTransaction() { - return ( - - - Confirm transaction on your Ledger{' '} - legder - - - ); -} - export function TransactionSubmitted() { return ( @@ -161,10 +72,12 @@ export function Confirmed({ txHash, txHeight, cosmos, onClickBtnClose }) { {trimString(txHash, 6, 6)} )}{' '} - - was included in the block
at height{' '} - {formatNumber(parseFloat(txHeight))} - + {txHeight && ( + + was included in the block
at height{' '} + {formatNumber(parseFloat(txHeight))} + + )} - )} - - ); -} - -export function CheckAddressInfo() { - return ( - - - {T.actionBar.connectLadger.getDetails} - - - ); -} - export function StartStageSearchActionBar({ onClickBtn, contentHash, @@ -284,560 +167,6 @@ export function StartStageSearchActionBar({ ); } -export function GovernanceStartStageActionBar({ - // valueSelect, - // onChangeSelect, - onClickBtn, -}) { - return ( - - {/* - - */} - - ); -} - -export function GovernanceChangeParam({ - valueSelect, - onChangeSelect, - onClickBtn, - onClickBtnAddParam, - valueParam = '', - onChangeInputParam, - changeParam, - onClickDeleteParam, - onClickBtnClose, - valueTitle, - onChangeInputTitle, - onChangeInputDescription, - valueDescription, - valueDeposit, - onChangeInputDeposit, -}) { - const item = []; - let itemChangeParam = []; - - Object.keys(param).map((key) => { - if (param[key].constructor.name === 'Array') { - item.push( - - ); - const temp = param[key].map((items) => ( - - )); - if (temp) { - item.push(...temp); - } - } - return undefined; - }); - - if (changeParam.length > 0) { - itemChangeParam = changeParam.map((items, index) => ( - - {items.key} - {items.value} - onClickDeleteParam(index)} - appearance="minimal" - height={24} - icon="trash" - intent="danger" - /> - - )); - } - - return ( - - - - - Parameter Change Proposal - - - title - - - - description -