From 639521f5abff8514e0371d6a22aa755e8e86dd93 Mon Sep 17 00:00:00 2001 From: Thibaut Sardan Date: Wed, 15 May 2024 17:45:56 +0100 Subject: [PATCH] bootstrap --- .../src/components/ConnectCreateOrWatch.tsx | 82 ++-------- .../LandingComponents/ConnectButtons.tsx | 62 +++++++ .../src/components/LandingComponents/Hero.tsx | 21 +++ .../components/LandingComponents/Landing.tsx | 30 ++++ packages/ui/src/pages/About.tsx | 152 ------------------ packages/ui/src/pages/index.ts | 1 - packages/ui/src/pages/routes.tsx | 7 +- 7 files changed, 131 insertions(+), 224 deletions(-) create mode 100644 packages/ui/src/components/LandingComponents/ConnectButtons.tsx create mode 100644 packages/ui/src/components/LandingComponents/Hero.tsx create mode 100644 packages/ui/src/components/LandingComponents/Landing.tsx delete mode 100644 packages/ui/src/pages/About.tsx diff --git a/packages/ui/src/components/ConnectCreateOrWatch.tsx b/packages/ui/src/components/ConnectCreateOrWatch.tsx index 26827631..520e9afd 100644 --- a/packages/ui/src/components/ConnectCreateOrWatch.tsx +++ b/packages/ui/src/components/ConnectCreateOrWatch.tsx @@ -1,73 +1,30 @@ import { styled } from '@mui/material' import { useAccounts } from '../contexts/AccountsContext' -import { createSearchParams, useNavigate, useSearchParams } from 'react-router-dom' -import { Button } from './library' -import { WATCH_ACCOUNT_ANCHOR } from '../pages/Settings/Settings' import { useWatchedAddresses } from '../contexts/WatchedAddressesContext' import { useNetwork } from '../contexts/NetworkContext' +import { ConnectButtons } from './LandingComponents/ConnectButtons' +import { Landing } from './LandingComponents/Landing' export const ConnectOrWatch = () => { - const { isAllowedToConnectToExtension, allowConnectionToExtension } = useAccounts() + const { isAllowedToConnectToExtension } = useAccounts() const { watchedAddresses } = useWatchedAddresses() - const navigate = useNavigate() - const [searchParams] = useSearchParams() + const { selectedNetwork } = useNetwork() return ( - + <> {isAllowedToConnectToExtension || watchedAddresses.length !== 0 ? ( -
- No multisig found for your accounts or watched accounts on{' '} - {selectedNetwork}. -
- ) : ( - <> -

- Multix is an interface to easily manage complex multisigs. -

-
- Connect a wallet to interact with Multix or watch an account. + +
+ No multisig found for your accounts or watched accounts on{' '} + {selectedNetwork}. +
- + + ) : ( + )} - - {isAllowedToConnectToExtension ? ( - - ) : ( - - )} - or - - - + ) } @@ -82,17 +39,6 @@ const WrapperStyled = styled('div')` } ` -const ButtonWrapperStyled = styled('div')` - display: flex; - align-items: center; - justify-content: center; - padding: 1rem 0; - - button { - margin: 0 0.5rem; - } -` - const NetworkNameStyled = styled('span')` text-transform: capitalize; ` diff --git a/packages/ui/src/components/LandingComponents/ConnectButtons.tsx b/packages/ui/src/components/LandingComponents/ConnectButtons.tsx new file mode 100644 index 00000000..fc866f1b --- /dev/null +++ b/packages/ui/src/components/LandingComponents/ConnectButtons.tsx @@ -0,0 +1,62 @@ +import { createSearchParams, useNavigate, useSearchParams } from 'react-router-dom' +import { Button } from '../library' +import { WATCH_ACCOUNT_ANCHOR } from '../../pages/Settings/Settings' +import { useAccounts } from '../../contexts/AccountsContext' +import { styled } from '@mui/material' + +export const ConnectButtons = () => { + const navigate = useNavigate() + const [searchParams] = useSearchParams() + const { isAllowedToConnectToExtension, allowConnectionToExtension } = useAccounts() + + return ( + + {isAllowedToConnectToExtension ? ( + + ) : ( + + )} + or + + + ) +} + +const ButtonWrapperStyled = styled('div')` + display: flex; + align-items: center; + justify-content: center; + padding: 1rem 0; + + button { + margin: 0 0.5rem; + } +` diff --git a/packages/ui/src/components/LandingComponents/Hero.tsx b/packages/ui/src/components/LandingComponents/Hero.tsx new file mode 100644 index 00000000..2d5f7f42 --- /dev/null +++ b/packages/ui/src/components/LandingComponents/Hero.tsx @@ -0,0 +1,21 @@ +import { styled } from '@mui/material' +import { ReactNode } from 'react' + +interface Props { + children: ReactNode +} + +export const Hero = ({ children }: Props) => { + return {children} +} + +const StyledHero = styled('div')` + background-color: ${({ theme }) => theme.palette.primary.main}; + color: white; + border-radius: ${({ theme }) => theme.custom.borderRadius}; + display: flex; + border-radius: 1rem; + flex-direction: column; + justify-items: center; + padding: 2rem; +` diff --git a/packages/ui/src/components/LandingComponents/Landing.tsx b/packages/ui/src/components/LandingComponents/Landing.tsx new file mode 100644 index 00000000..f41324e6 --- /dev/null +++ b/packages/ui/src/components/LandingComponents/Landing.tsx @@ -0,0 +1,30 @@ +import { styled } from '@mui/material' +import { ConnectButtons } from './ConnectButtons' +import { Hero } from './Hero' + +export const Landing = () => { + return ( + + +

+ Multix is an interface to easily manage complex multisigs. +

+
+ Connect a wallet to interact with Multix or watch an account. +
+ + + + ) +} + +const WrapperStyled = styled('div')` + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + h1 { + text-align: center; + } +` diff --git a/packages/ui/src/pages/About.tsx b/packages/ui/src/pages/About.tsx deleted file mode 100644 index c0fc62e2..00000000 --- a/packages/ui/src/pages/About.tsx +++ /dev/null @@ -1,152 +0,0 @@ -import { styled } from '@mui/material/styles' -import { Center } from '../components/layout/Center' -import { Box } from '@mui/material' -import { chainsafeSVG } from '../logos/chainsafeSVG' -import { w3fSvg } from '../logos/w3fSVG' -import { chainsPolkadotCircleSVG } from '../logos/polkadot-circleSVG' -import { Link } from '../components/library' - -interface Props { - className?: string -} - -const About = ({ className }: Props) => { - return ( -
-

Multix values

-
    -
  • -

    Open

    -

    - Multix is open-source from the get-go. The back-end and front-end code can be{' '} - - found on GitHub - - . -

    -
    • -
  • -

    Permissionless

    -

    - While Multix uses an open source indexer, the database is trust minimized and only - contains information coming from the chain. No user information is stored and anyone can - re-build this database at will. -

    -
    • -
  • -

    Interoperable

    - Multix doesn't create a walled garden. You can create a multisig on-chain anywhere, - Multix will show it right away. -
    • -
  • -

    Privacy-preserving

    -

    - We do not gather private information. Additional information such as names is stored on - your browser, and only visible to you. -

    -
    • -
-

- Built by - - - chainsafe systems logo{' '} - ChainSafe Systems - - -

-

- Supported by - - - web 3 foudation logo - - - Polkadot logo - - -

-
- ) -} - -const LinkPolkadotLogoStyled = styled(Link)` - margin-left: 1rem; - - img { - display: block; - max-width: 5rem; - } -` - -export default styled(About)` - .title { - margin-top: 2rem; - } - - .values { - list-style-type: none; - - h2 { - margin-bottom: 0; - } - p { - margin-top: 0; - } - } - - .logoWrapper { - display: flex; - align-items: center; - padding-left: 3rem; - margin-top: 1rem; - } - - .link { - text-decoration: none; - &.chainsafe { - display: flex; - align-items: center; - } - } - - .logo-chainsafe { - max-width: 5rem; - margin-right: 1rem; - } - - .logo-w3f { - display: block; - min-width: 8rem; - } -` diff --git a/packages/ui/src/pages/index.ts b/packages/ui/src/pages/index.ts index 9b932095..0c89618b 100644 --- a/packages/ui/src/pages/index.ts +++ b/packages/ui/src/pages/index.ts @@ -1,5 +1,4 @@ export { default as Creation } from './Creation' export { default as Home } from './Home/Home' -export { default as About } from './About' export { default as Overview } from './Overview' export { default as Settings } from './Settings/Settings' diff --git a/packages/ui/src/pages/routes.tsx b/packages/ui/src/pages/routes.tsx index ab2669c9..684b62be 100644 --- a/packages/ui/src/pages/routes.tsx +++ b/packages/ui/src/pages/routes.tsx @@ -1,8 +1,9 @@ import { createBrowserRouter } from 'react-router-dom' -import { About, Creation, Home, Overview, Settings } from './index' +import { Creation, Home, Overview, Settings } from './index' import React from 'react' import App from '../App' import ErrorFallback from '../components/ErrorFallback/ErrorFallback' +import { Landing } from '../components/LandingComponents/Landing' interface Route { path: string @@ -38,9 +39,9 @@ export const ROUTES: Route[] = [ }, { path: 'about', - element: , + element: , name: 'About', - isDisplayWhenNoWallet: true + isDisplayWhenNoWallet: false } ]