LaconicNetwork/mars-v2-frontend
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Mp 2784 mobile not supported screen (#358)

Browse Source 
* MP-2784: first itteration of the mobile support screen

* fix: fixed the AccountSummary

* MP-2784: mobile not supported

* fix: v1 is not v1.0

* fix: fixed according to feedback

* fix: created a standalone mobile page
This commit is contained in:
Linkie Link 2023-08-14 10:32:49 +02:00 committed by GitHub
parent 2d6ef1a4a0
commit 6efe2c71a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 139 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
next.config.js
View File

@ -9,6 +9,22 @@ const nextConfig = {
'xdefi-static.s3.eu-west-1.amazonaws.com',
],
},
async redirects() {
return [
{
source: '/((?!_next|mobile).*)',
has: [
{
type: 'header',
key: 'User-Agent',
value: '.*(Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop).*',
},
],
permanent: true,
destination: '/mobile',
},
]
},
async rewrites() {
return [
{

2
package.json
View File

@ -18,6 +18,8 @@
"@cosmjs/cosmwasm-stargate": "^0.31.0",
"@delphi-labs/shuttle-react": "^3.7.0",
"@keplr-wallet/cosmos": "^0.12.20",
"@splinetool/react-spline": "^2.2.1",
"@splinetool/runtime": "^0.9.414",
"@sentry/nextjs": "^7.61.1",
"@tanstack/react-table": "^8.9.3",
"@tippyjs/react": "^4.2.6",

13
src/components/Account/AccountDetails.tsx
View File

@ -1,3 +1,5 @@
import classNames from 'classnames'
import DisplayCurrency from 'components/DisplayCurrency'
import { FormattedNumber } from 'components/FormattedNumber'
import { Gauge } from 'components/Gauge'
@ -36,9 +38,12 @@ function AccountDetails(props: Props) {
return (
<div
data-testid='account-details'
className='w-16 rounded-base border border-white/20 bg-white/5 backdrop-blur-sticky'
className={classNames(
'hidden w-16 rounded-base border border-white/20 bg-white/5 backdrop-blur-sticky',
'md:block',
)}
>
<div className='flex w-full flex-wrap justify-center py-4'>
<div className='flex flex-wrap justify-center w-full py-4'>
<Gauge tooltip='Health Factor' percentage={healthFactor} icon={<Heart />} />
<Text size='2xs' className='mb-0.5 mt-1 w-full text-center text-white/50'>
Health
@ -50,11 +55,11 @@ function AccountDetails(props: Props) {
animate
/>
</div>
<div className='w-full border border-x-0 border-white/20 py-4'>
<div className='w-full py-4 border border-x-0 border-white/20'>
<Text size='2xs' className='mb-0.5 w-full text-center text-white/50'>
Balance
</Text>
<DisplayCurrency coin={coin} className='w-full truncate text-center text-2xs ' />
<DisplayCurrency coin={coin} className='w-full text-center truncate text-2xs ' />
</div>
</div>
)

2
src/components/Footer.tsx
View File

@ -4,7 +4,7 @@ import packageInfo from '../../package.json'
export default function Footer() {
return (
<footer className='flex h-6 w-full items-center justify-center'>
<footer className='flex items-center justify-center w-full h-6 -mt-6'>
<div className='w-full px-4 pb-4 text-right'>
<Text size='xs' className='opacity-50'>
v{packageInfo.version}

8
src/components/FullOverlayContent.tsx
View File

@ -15,18 +15,18 @@ interface Props {
export default function FullOverlayContent(props: Props) {
return (
<div className={classNames('min-h-[600px] w-100', props.className)}>
<div className={classNames('min-h-[600px] w-100 max-w-full', props.className)}>
<Text size='4xl' className='w-full pb-2 text-center'>
{props.title}
</Text>
<Text size='sm' className='min-h-14 w-full text-center text-white/60'>
<Text size='sm' className='w-full text-center min-h-14 text-white/60'>
{props.copy}
</Text>
{props.children && (
<div className='relative flex w-full flex-wrap justify-center pt-4'>{props.children}</div>
<div className='relative flex flex-wrap justify-center w-full pt-4'>{props.children}</div>
)}
{props.button && (
<div className='flex w-full justify-center'>
<div className='flex justify-center w-full'>
<Button {...props.button} />
</div>
)}

2
src/components/Header/DesktopHeader.tsx
View File

@ -20,7 +20,7 @@ export default function DesktopHeader() {
const focusComponent = useStore((s) => s.focusComponent)
function handleCloseFocusMode() {
if (focusComponent.onClose) focusComponent.onClose()
if (focusComponent && focusComponent.onClose) focusComponent.onClose()
useStore.setState({ focusComponent: null })
}

32
src/components/MobileNotSupported.tsx Normal file
View File

@ -0,0 +1,32 @@
import Spline from '@splinetool/react-spline'
import Button from 'components/Button'
import Text from 'components/Text'
export default function MobileNotSupported() {
return (
<section className='relative flex items-start justify-center'>
<div className='w-[312px] flex flex-wrap justify-center'>
<Spline
style={{ height: '340px', width: '300px' }}
scene='https://prod.spline.design/kk5kXiGlaUIbEL0M/scene.splinecode'
/>
<Text size='4xl' className='w-[288px] pb-2 text-center'>
Mars is not available on mobile
</Text>
<Text className='w-full text-center text-white/60'>
Mars doesn&apos;t support mobile devices yet, please visit us later or use a desktop
</Text>
<div className='flex justify-center w-full'>
<Button
className='w-2/3 mt-4'
text='Visit Mars v1'
color='tertiary'
size='lg'
onClick={() => window.open('https://app.marsprotocol.io', '_self')}
/>
</div>
</div>
</section>
)
}

2
src/components/Modals/Settings/SettingsSwitch.tsx
View File

@ -21,7 +21,7 @@ export default function SettingsSwitch(props: Props) {
props.className,
)}
>
<div className='flex flex-wrap w-100'>
<div className='flex flex-wrap max-w-full w-100'>
<Text size='lg' className='w-full mb-2'>
{props.label}
</Text>

2
src/components/Routes.tsx
View File

@ -4,6 +4,7 @@ import BorrowPage from 'pages/BorrowPage'
import CouncilPage from 'pages/CouncilPage'
import FarmPage from 'pages/FarmPage'
import LendPage from 'pages/LendPage'
import MobilePage from 'pages/MobilePage'
import PortfolioPage from 'pages/PortfolioPage'
import TradePage from 'pages/TradePage'
import Layout from 'pages/_layout'
@ -24,6 +25,7 @@ export default function Routes() {
<Route path='/borrow' element={<BorrowPage />} />
<Route path='/portfolio' element={<PortfolioPage />} />
<Route path='/council' element={<CouncilPage />} />
<Route path='/mobile' element={<MobilePage />} />
<Route path='/' element={<TradePage />} />
<Route path='/wallets/:address'>
<Route path='accounts/:accountId'>

5
src/pages/MobilePage.tsx Normal file
View File

@ -0,0 +1,5 @@
import MobileNotSupported from 'components/MobileNotSupported'
export default function MobilePage() {
return <MobileNotSupported />
}

47
src/pages/_layout.tsx
View File

@ -1,4 +1,5 @@
import classNames from 'classnames'
import { isMobile } from 'react-device-detect'
import { useLocation } from 'react-router-dom'
import AccountDetails from 'components/Account/AccountDetails'
@ -10,6 +11,29 @@ import PageMetadata from 'components/PageMetadata'
import Toaster from 'components/Toaster'
import useStore from 'store'
interface Props {
focusComponent: FocusComponent | null
children: React.ReactNode
fullWidth: boolean
}
function PageContainer(props: Props) {
if (isMobile) return props.children
if (!props.focusComponent)
return (
<div className={classNames('mx-auto h-full w-full', !props.fullWidth && 'max-w-content')}>
{props.children}
</div>
)
return (
<div className='relative flex items-center justify-center w-full h-full'>
{props.focusComponent.component}
</div>
)
}
export default function Layout({ children }: { children: React.ReactNode }) {
const location = useLocation()
const focusComponent = useStore((s) => s.focusComponent)
@ -22,23 +46,20 @@ export default function Layout({ children }: { children: React.ReactNode }) {
<DesktopHeader />
<main
className={classNames(
'lg:min-h-[calc(100vh-89px)]',
'lg:min-h-[calc(100vh-65px)]',
'lg:mt-[65px]',
'h-full min-h-[900px] gap-6 p-6',
focusComponent
? 'flex items-center justify-center'
'min-h-screen gap-6 p-6 w-full',
focusComponent || isMobile
? 'flex justify-center'
: 'grid grid-cols-[auto_min-content] place-items-start',
focusComponent && 'items-center',
isMobile && 'items-start',
)}
>
<div className={classNames('mx-auto h-full w-full', !isFullWidth && 'max-w-content')}>
{focusComponent ? (
<div className='relative flex h-full w-full items-center justify-center'>
{focusComponent.component}
</div>
) : (
children
)}
</div>
<PageContainer focusComponent={focusComponent} fullWidth={isFullWidth}>
{children}
</PageContainer>
<AccountDetails />
</main>
<Footer />

2
src/types/interfaces/store/common.d.ts vendored
View File

@ -5,7 +5,7 @@ interface CommonSlice {
client?: WalletClient
isOpen: boolean
selectedAccount: string | null
focusComponent: ReactNode
focusComponent: FocusComponent | null
}
interface FocusComponent {

31
yarn.lock
View File

@ -3086,6 +3086,22 @@
dependencies:
"@sinonjs/commons" "^2.0.0"
"@splinetool/react-spline@^2.2.1":
version "2.2.6"
resolved "https://registry.yarnpkg.com/@splinetool/react-spline/-/react-spline-2.2.6.tgz#c48f634f352311b9da210978f88bd195d605ee8a"
integrity sha512-y9L2VEbnC6FNZZu8XMmWM9YTTTWal6kJVfP05Amf0QqDNzCSumKsJxZyGUODvuCmiAvy0PfIfEsiVKnSxvhsDw==
dependencies:
lodash.debounce "^4.0.8"
react-merge-refs "^2.0.1"
"@splinetool/runtime@^0.9.414":
version "0.9.414"
resolved "https://registry.yarnpkg.com/@splinetool/runtime/-/runtime-0.9.414.tgz#1503f1fbf2d58ed7e86085eaf69ffc419d03fd29"
integrity sha512-6XeIc6XXNhHq20xbAr2hW2f0mbKDsDHDDd1vp0rOJFeaJgkgOxSK76pPdhWQowbcy2QVL7Wm+EWA7O3peehlhg==
dependencies:
on-change "^4.0.0"
semver-compare "^1.0.0"
"@stablelib/aead@^1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@stablelib/aead/-/aead-1.0.1.tgz#c4b1106df9c23d1b867eb9b276d8f42d5fc4c0c3"
@ -7867,6 +7883,11 @@ object.values@^1.1.6:
define-properties "^1.1.4"
es-abstract "^1.20.4"
on-change@^4.0.0:
version "4.0.2"
resolved "https://registry.yarnpkg.com/on-change/-/on-change-4.0.2.tgz#838129790f09dc2ed04284944bda6e82b92c10b8"
integrity sha512-cMtCyuJmTx/bg2HCpHo3ZLeF7FZnBOapLqZHr2AlLeJ5Ul0Zu2mUJJz051Fdwu/Et2YW04ZD+TtU+gVy0ACNCA==
on-exit-leak-free@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/on-exit-leak-free/-/on-exit-leak-free-0.2.0.tgz#b39c9e3bf7690d890f4861558b0d7b90a442d209"
@ -8380,6 +8401,11 @@ react-lifecycles-compat@^3.0.4:
resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
react-merge-refs@^2.0.1:
version "2.0.2"
resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-2.0.2.tgz#73f576111124897dec4ea56035a97e199e8cb377"
integrity sha512-V5BGTwGa2r+/t0A/BZMS6L7VPXY0CU8xtAhkT3XUoI1WJJhhtvulvoiZkJ5Jt9YAW23m4xFWmhQ+C5HwjtTFhQ==
react-qr-code@^2.0.11:
version "2.0.11"
resolved "https://registry.yarnpkg.com/react-qr-code/-/react-qr-code-2.0.11.tgz#444c759a2100424972e17135fbe0e32eaffa19e8"
@ -8842,6 +8868,11 @@ secp256k1@^4.0.1, secp256k1@^4.0.3:
node-addon-api "^2.0.0"
node-gyp-build "^4.2.0"
semver-compare@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
integrity sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==
semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0, semver@^6.3.1:
version "6.3.1"
resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"