diff --git a/.env.example b/.env.example index 2574e528..381e757c 100644 --- a/.env.example +++ b/.env.example @@ -19,7 +19,7 @@ NEXT_PUBLIC_CANDLES_ENDPOINT="https://api.thegraph.com/subgraphs/name/{NAME}/{GR CHARTING_LIBRARY_USERNAME="username_with_access_to_charting_library" CHARTING_LIBRARY_ACCESS_TOKEN="access_token_with_access_to_charting_library" CHARTING_LIBRARY_REPOSITORY="github.com/username/charting_library/" -NEXT_PUBLIC_PYTH_ENDPOINT=https://xc-mainnet.pyth.network/api/ +NEXT_PUBLIC_PYTH_ENDPOINT=https://xc-mainnet.pyth.network/api NEXT_PUBLIC_MAINNET_REST=https://osmosis-node.marsprotocol.io/GGSFGSFGFG34/osmosis-lcd-front/ # MAINNET # diff --git a/src/api/prices/getPythPrices.ts b/src/api/prices/getPythPrices.ts index c9131c92..deaf10b7 100644 --- a/src/api/prices/getPythPrices.ts +++ b/src/api/prices/getPythPrices.ts @@ -3,7 +3,7 @@ import { BN } from 'utils/helpers' export default async function fetchPythPrices(...priceFeedIds: string[]) { try { - const pricesUrl = new URL(`${ENV.PYTH_API}/latest_price_feeds`) + const pricesUrl = new URL(`${ENV.PYTH_ENDPOINT}/latest_price_feeds`) priceFeedIds.forEach((id) => pricesUrl.searchParams.append('ids[]', id)) const pythResponse: PythPriceData[] = await fetch(pricesUrl).then((res) => res.json()) diff --git a/src/components/Header/DesktopHeader.tsx b/src/components/Header/DesktopHeader.tsx index 6d3d9114..105c3abf 100644 --- a/src/components/Header/DesktopHeader.tsx +++ b/src/components/Header/DesktopHeader.tsx @@ -1,6 +1,7 @@ import classNames from 'classnames' import AccountMenu from 'components/Account/AccountMenu' +import EscButton from 'components/Button/EscButton' import DesktopNavigation from 'components/Navigation/DesktopNavigation' import Settings from 'components/Settings' import Wallet from 'components/Wallet' @@ -16,6 +17,12 @@ export const menuTree: { page: Page; label: string }[] = [ export default function DesktopHeader() { const address = useStore((s) => s.address) + const isFocusMode = useStore((s) => s.isFocusMode) + + function handleCloseFocusMode() { + useStore.setState({ isFocusMode: false, showTermsOfService: false }) + } + return (
-
+
-
- {address && } - - -
+ {isFocusMode ? ( + + ) : ( +
+ {address && } + + +
+ )}
) diff --git a/src/components/Modals/Settings/index.tsx b/src/components/Modals/Settings/index.tsx index 4af23af9..18476c7c 100644 --- a/src/components/Modals/Settings/index.tsx +++ b/src/components/Modals/Settings/index.tsx @@ -218,7 +218,7 @@ export default function SettingsModal() { s.isFocusMode) function getIsActive(href: string) { return location.pathname.includes(href) @@ -14,22 +16,24 @@ export default function DesktopNavigation() { return (
- + - + -
- {menuTree.map((item, index) => ( - - {item.label} - - ))} -
+ {!isFocusMode && ( +
+ {menuTree.map((item, index) => ( + + {item.label} + + ))} +
+ )}
) } diff --git a/src/components/Tab.tsx b/src/components/Tab.tsx deleted file mode 100644 index e69de29b..00000000 diff --git a/src/components/TermsOfService.tsx b/src/components/TermsOfService.tsx new file mode 100644 index 00000000..0678d38e --- /dev/null +++ b/src/components/TermsOfService.tsx @@ -0,0 +1,86 @@ +import { useWalletManager } from '@marsprotocol/wallet-connector' +import classNames from 'classnames' +import { useCallback } from 'react' + +import Text from 'components/Text' +import { TERMS_OF_SERVICE_KEY } from 'constants/localStore' +import useLocalStorage from 'hooks/useLocalStorage' +import useStore from 'store' +import Button from 'components/Button' +import { Check, ExternalLink } from 'components/Icons' + +interface BenefitsProps { + benefits: string[] +} + +function Benefits({ benefits }: BenefitsProps) { + return ( + + ) +} + +export default function TermsOfService() { + const { connect } = useWalletManager() + const [hasAgreedToTerms, setHasAgreedToTerms] = useLocalStorage(TERMS_OF_SERVICE_KEY, false) + + const handleAgreeTermsOfService = useCallback(() => { + useStore.setState({ showTermsOfService: false, isFocusMode: false }) + setHasAgreedToTerms(true) + connect() + }, [connect, hasAgreedToTerms, setHasAgreedToTerms]) + + return ( +
+
+ + Master the Red Planet + + + Mars offers the easiest way to margin trade, lend & borrow and yield farm with leverage + any whitelisted token + + +
+
+ ) +} diff --git a/src/components/Text.tsx b/src/components/Text.tsx index e4414226..4980e813 100644 --- a/src/components/Text.tsx +++ b/src/components/Text.tsx @@ -5,7 +5,7 @@ interface Props { children: ReactNode | string className?: string monospace?: boolean - size?: '3xs' | '2xs' | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '6xl' + size?: '3xs' | '2xs' | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' tag?: 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' uppercase?: boolean } diff --git a/src/components/Wallet/ConnectButton.tsx b/src/components/Wallet/ConnectButton.tsx index 1cf3b698..2e8850fd 100644 --- a/src/components/Wallet/ConnectButton.tsx +++ b/src/components/Wallet/ConnectButton.tsx @@ -1,9 +1,12 @@ import { useWalletManager, WalletConnectionStatus } from '@marsprotocol/wallet-connector' -import { ReactNode } from 'react' +import { ReactNode, useCallback } from 'react' import Button from 'components/Button' import { CircularProgress } from 'components/CircularProgress' import { Wallet } from 'components/Icons' +import { TERMS_OF_SERVICE_KEY } from 'constants/localStore' +import useLocalStorage from 'hooks/useLocalStorage' +import useStore from 'store' interface Props { textOverride?: string | ReactNode @@ -13,6 +16,15 @@ interface Props { export default function ConnectButton(props: Props) { const { connect } = useWalletManager() + const [hasAgreedToTerms] = useLocalStorage(TERMS_OF_SERVICE_KEY, false) + + const handleConnect = useCallback(() => { + if (!hasAgreedToTerms) { + useStore.setState({ showTermsOfService: true, isFocusMode: true }) + return + } + connect() + }, [connect, hasAgreedToTerms]) return (
@@ -20,7 +32,7 @@ export default function ConnectButton(props: Props) { variant='solid' color='tertiary' disabled={props.disabled} - onClick={connect} + onClick={handleConnect} leftIcon={} > {props.status === WalletConnectionStatus.Connecting ? ( diff --git a/src/constants/env.ts b/src/constants/env.ts index 5ee2098d..05f048c4 100644 --- a/src/constants/env.ts +++ b/src/constants/env.ts @@ -16,7 +16,7 @@ interface EnvironmentVariables { URL_API: string URL_APOLLO_APR: string WALLETS: string[] - PYTH_API: string + PYTH_ENDPOINT: string MAINNET_REST_API: string } @@ -40,7 +40,7 @@ export const ENV: EnvironmentVariables = { : process.env.NEXT_PUBLIC_API || '', URL_APOLLO_APR: process.env.NEXT_PUBLIC_APOLLO_APR || '', WALLETS: process.env.NEXT_PUBLIC_WALLETS?.split(',') || [], - PYTH_API: process.env.NEXT_PUBLIC_PYTH_API || '', + PYTH_ENDPOINT: process.env.NEXT_PUBLIC_PYTH_ENDPOINT || '', MAINNET_REST_API: process.env.NEXT_PUBLIC_MAINNET_REST || '', } diff --git a/src/constants/localStore.ts b/src/constants/localStore.ts index 15e639c1..f27094cd 100644 --- a/src/constants/localStore.ts +++ b/src/constants/localStore.ts @@ -5,3 +5,4 @@ export const FAVORITE_ASSETS_KEY = 'favoriteAssets' export const LEND_ASSETS_KEY = 'lendAssets' export const AUTO_LEND_ENABLED_ACCOUNT_IDS_KEY = 'autoLendEnabledAccountIds' export const SLIPPAGE_KEY = 'slippage' +export const TERMS_OF_SERVICE_KEY = 'termsOfService' diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx index bf822502..21104059 100644 --- a/src/pages/_layout.tsx +++ b/src/pages/_layout.tsx @@ -7,10 +7,13 @@ import Footer from 'components/Footer' import DesktopHeader from 'components/Header/DesktopHeader' import ModalsContainer from 'components/Modals/ModalsContainer' import PageMetadata from 'components/PageMetadata' +import TermsOfService from 'components/TermsOfService' import Toaster from 'components/Toaster' +import useStore from 'store' export default function Layout({ children }: { children: React.ReactNode }) { const location = useLocation() + const showTermsOfService = useStore((s) => s.showTermsOfService) const isFullWidth = location.pathname.includes('trade') || location.pathname === '/' return ( @@ -25,7 +28,9 @@ export default function Layout({ children }: { children: React.ReactNode }) { 'align-items-center grid h-full min-h-[900px] grid-cols-[auto_min-content] place-items-start gap-6 p-6', )} > - {isFullWidth ? children :
{children}
} +
+ {showTermsOfService ? : children} +