From 3134c0a51386c34e10400688cf50f2d8514041b7 Mon Sep 17 00:00:00 2001 From: Wukong Sun Date: Thu, 16 May 2024 17:51:21 +0800 Subject: [PATCH] feat: binding some data (#17) * feat: link twitter feat: binding some data * chore: lingui extract --------- Co-authored-by: swkatmask --- package.json | 3 +- patches/react-use@17.5.0.patch | 87 +++++ pnpm-lock.yaml | 8 +- src/components/Footer/Terms/index.tsx | 4 +- .../StakeMaskStatusCard/ActivityStatusTag.tsx | 11 +- src/components/StakeMaskStatusCard/index.tsx | 83 ++++- src/helpers/formatSeconds.ts | 5 + src/hooks/useLinkTwitter.ts | 49 +++ src/locales/en.po | 14 +- src/locales/en.ts | 2 +- src/modals/BaseModal.tsx | 54 +++- src/modals/StakeModal.tsx | 300 +++++++++--------- src/styles/index.css | 1 + src/types/api.ts | 6 + 14 files changed, 442 insertions(+), 185 deletions(-) create mode 100644 patches/react-use@17.5.0.patch create mode 100644 src/helpers/formatSeconds.ts create mode 100644 src/hooks/useLinkTwitter.ts diff --git a/package.json b/package.json index 296c338..5d53f4f 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,8 @@ }, "pnpm": { "patchedDependencies": { - "urlcat@3.1.0": "patches/urlcat@3.1.0.patch" + "urlcat@3.1.0": "patches/urlcat@3.1.0.patch", + "react-use@17.5.0": "patches/react-use@17.5.0.patch" } } } diff --git a/patches/react-use@17.5.0.patch b/patches/react-use@17.5.0.patch new file mode 100644 index 0000000..328a78d --- /dev/null +++ b/patches/react-use@17.5.0.patch @@ -0,0 +1,87 @@ +diff --git a/CHANGELOG.md b/CHANGELOG.md +deleted file mode 100644 +index 9b28df0e8aa4734af2c7006fd077ff17e2281db5..0000000000000000000000000000000000000000 +diff --git a/esm/useAsync.js b/esm/useAsync.js +index ddb0bb0370fc30090cf9a0ecc74bc039800a89ed..95a7cb8cc6833790a5aef21a64ee0c5d299723cf 100644 +--- a/esm/useAsync.js ++++ b/esm/useAsync.js +@@ -6,7 +6,11 @@ export default function useAsync(fn, deps) { + loading: true, + }), state = _a[0], callback = _a[1]; + useEffect(function () { +- callback(); ++ try { ++ callback(); ++ } catch (e) { ++ // Do nothing ++ } + }, [callback]); + return state; + } +diff --git a/esm/useAsyncFn.js b/esm/useAsyncFn.js +index 01d7307bd106229f6d791d0c588589235f404d97..89fce78d49b6332a1aa5dcd89e95ccbc0d02bca4 100644 +--- a/esm/useAsyncFn.js ++++ b/esm/useAsyncFn.js +@@ -13,15 +13,16 @@ export default function useAsyncFn(fn, deps, initialState) { + args[_i] = arguments[_i]; + } + var callId = ++lastCallId.current; +- if (!state.loading) { +- set(function (prevState) { return (__assign(__assign({}, prevState), { loading: true })); }); +- } ++ set(function (prevState) { ++ if (prevState.loading) return prevState ++ return (__assign(__assign({}, prevState), { loading: true })); ++ }); + return fn.apply(void 0, args).then(function (value) { + isMounted() && callId === lastCallId.current && set({ value: value, loading: false }); + return value; + }, function (error) { + isMounted() && callId === lastCallId.current && set({ error: error, loading: false }); +- return error; ++ throw error; + }); + }, deps); + return [state, callback]; +diff --git a/lib/useAsync.js b/lib/useAsync.js +index 7f189a49dea552b5b10d7380b982bfe84299a7a2..4d9d33acaad290b54a9ef6e7df0afdba56484972 100644 +--- a/lib/useAsync.js ++++ b/lib/useAsync.js +@@ -9,7 +9,11 @@ function useAsync(fn, deps) { + loading: true, + }), state = _a[0], callback = _a[1]; + react_1.useEffect(function () { +- callback(); ++ try { ++ callback(); ++ } catch (e) { ++ // Do nothing ++ } + }, [callback]); + return state; + } +diff --git a/lib/useAsyncFn.js b/lib/useAsyncFn.js +index e06fd819ccad625d709fa9907e946a9b8bc58543..6950e84a32ca630ec159834a87b4e21a36f4ef97 100644 +--- a/lib/useAsyncFn.js ++++ b/lib/useAsyncFn.js +@@ -15,15 +15,16 @@ function useAsyncFn(fn, deps, initialState) { + args[_i] = arguments[_i]; + } + var callId = ++lastCallId.current; +- if (!state.loading) { +- set(function (prevState) { return (tslib_1.__assign(tslib_1.__assign({}, prevState), { loading: true })); }); +- } ++ set(function (prevState) { ++ if (prevState.loading) return prevState ++ return (tslib_1.__assign(tslib_1.__assign({}, prevState), { loading: true })); ++ }); + return fn.apply(void 0, args).then(function (value) { + isMounted() && callId === lastCallId.current && set({ value: value, loading: false }); + return value; + }, function (error) { + isMounted() && callId === lastCallId.current && set({ error: error, loading: false }); +- return error; ++ throw error; + }); + }, deps); + return [state, callback]; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c2c3c32..4f6febd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,9 @@ settings: excludeLinksFromLockfile: false patchedDependencies: + react-use@17.5.0: + hash: hl7dr6rjk7dvc67mgwhhnozk2u + path: patches/react-use@17.5.0.patch urlcat@3.1.0: hash: iexdafwbwqknhkxkkvrkaj5nda path: patches/urlcat@3.1.0.patch @@ -57,7 +60,7 @@ dependencies: version: 18.3.1(react@18.3.1) react-use: specifier: ^17.5.0 - version: 17.5.0(react-dom@18.3.1)(react@18.3.1) + version: 17.5.0(patch_hash=hl7dr6rjk7dvc67mgwhhnozk2u)(react-dom@18.3.1)(react@18.3.1) urlcat: specifier: ^3.1.0 version: 3.1.0(patch_hash=iexdafwbwqknhkxkkvrkaj5nda) @@ -10365,7 +10368,7 @@ packages: tslib: 2.6.2 dev: false - /react-use@17.5.0(react-dom@18.3.1)(react@18.3.1): + /react-use@17.5.0(patch_hash=hl7dr6rjk7dvc67mgwhhnozk2u)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-PbfwSPMwp/hoL847rLnm/qkjg3sTRCvn6YhUZiHaUa3FA6/aNoFX79ul5Xt70O1rK+9GxSVqkY0eTwMdsR/bWg==} peerDependencies: react: '*' @@ -10388,6 +10391,7 @@ packages: ts-easing: 0.2.0 tslib: 2.6.2 dev: false + patched: true /react@18.3.1: resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==} diff --git a/src/components/Footer/Terms/index.tsx b/src/components/Footer/Terms/index.tsx index d5823a1..112c7c3 100644 --- a/src/components/Footer/Terms/index.tsx +++ b/src/components/Footer/Terms/index.tsx @@ -12,14 +12,14 @@ const CookiePolicyContent = () => (
{t`Cookies are small text files that are stored on your computer or mobile device when you visit a website. They are used to store information about you and your internet usage habits to improve your online experience. Cookies enable websites to recognize your device and remember some information about your preferences.`}

-

+

{t`Types of Cookies We Use`}
  • {t`Session Cookies: These cookies exist only during your visit to the website and are automatically deleted when you close your browser. They are used to maintain session state, such as storing the contents of your shopping cart.`}
  • {t`Persistent Cookies: These cookies are stored on your device until they reach their expiration date or are manually deleted. They are used to remember your preferences and provide a personalized experience when you revisit the website.`}
  • {t`Third-Party Cookies: The Site may use cookies from third-party service providers for traffic analysis and user behavior tracking, as well as to display ads relevant to your interests.`}
-

+

{t`How to Control Cookies`}
diff --git a/src/components/StakeMaskStatusCard/ActivityStatusTag.tsx b/src/components/StakeMaskStatusCard/ActivityStatusTag.tsx index f53af34..36a8cf0 100644 --- a/src/components/StakeMaskStatusCard/ActivityStatusTag.tsx +++ b/src/components/StakeMaskStatusCard/ActivityStatusTag.tsx @@ -1,7 +1,12 @@ -import type { FC } from 'react' -import { Box, type BoxProps } from '@chakra-ui/react' +import { useMemo, type FC } from 'react' +import { Box, Skeleton, type BoxProps } from '@chakra-ui/react' +import { usePoolInfo } from '../../hooks/usePoolInfo' +import dayjs from 'dayjs' +import { t } from '@lingui/macro' export const ActivityStatusTag: FC = ({ ...props }) => { + const { data: pool, isLoading } = usePoolInfo() + const isStarted = useMemo(() => (pool ? dayjs(pool.start_time * 1000).isBefore(Date.now()) : false), [pool]) return ( = ({ ...props }) => { px="6px" {...props} > - Not started + {isLoading || !pool ? : isStarted ? t`On going` : t`Not started`} ) } diff --git a/src/components/StakeMaskStatusCard/index.tsx b/src/components/StakeMaskStatusCard/index.tsx index b4fb82e..4817c33 100644 --- a/src/components/StakeMaskStatusCard/index.tsx +++ b/src/components/StakeMaskStatusCard/index.tsx @@ -1,5 +1,19 @@ -import { Box, BoxProps, Button, Flex, Grid, HStack, Heading, Icon, Stack, Text, VStack } from '@chakra-ui/react' -import { t } from '@lingui/macro' +import { + Box, + BoxProps, + Button, + Flex, + Grid, + HStack, + Heading, + Icon, + Skeleton, + Stack, + Text, + Tooltip, + VStack, +} from '@chakra-ui/react' +import { Trans, t } from '@lingui/macro' import { FC } from 'react' import MaskLogoSVG from '../../assets/mask-logo.svg?react' import No1SVG from '../../assets/no-1.svg?react' @@ -8,13 +22,19 @@ import QuestionSVG from '../../assets/question.svg?react' import RightArrow from '../../assets/right-arrow.svg?react' import Rss3EthSVG from '../../assets/rss3-eth.svg?react' import TonEthSVG from '../../assets/ton-eth.svg?react' +import { formatNumber } from '../../helpers/formatNumber.ts' +import { formatSeconds } from '../../helpers/formatSeconds.ts' +import { usePoolInfo } from '../../hooks/usePoolInfo.ts' import { stakeModal } from '../../modals/index.tsx' import { ActivityStatusTag } from './ActivityStatusTag.tsx' -import { Tooltip } from '../Tooltip.tsx' export interface StakeMaskStatusCardProps extends BoxProps {} export const StakeMaskStatusCard: FC = ({ ...props }) => { + const { data: pool, isLoading } = usePoolInfo() + const rewardTokens = pool ? Object.values(pool.reward_pool) : [] + const rss3 = rewardTokens.find((x) => x.name === 'rss3') + const ton = rewardTokens.find((x) => x.name === 'ton') return ( = ({ ...props }) lineHeight={{ base: 6, lg: '140%' }} align="center" > - Time 3.20 2024~8.20 2024 + + Time + {isLoading || !pool ? ( + + ) : ( + `${formatSeconds(pool?.start_time, 'M.DD YYYY')}~${formatSeconds(pool.end_time, 'M.DD YYYY')}` + )} + @@ -99,9 +126,13 @@ export const StakeMaskStatusCard: FC = ({ ...props }) - - 700,000 - + {rss3 ? ( + + {formatNumber(+rss3.amount)} + + ) : ( + + )} RSS3 @@ -111,9 +142,14 @@ export const StakeMaskStatusCard: FC = ({ ...props }) - - 40,000 - + {ton ? ( + + {formatNumber(+ton.amount)} + + ) : ( + + )} + TON @@ -133,9 +169,22 @@ export const StakeMaskStatusCard: FC = ({ ...props }) p={6} spacing={6} > - - 12.2% - + {pool?.apr ? ( + + + {formatNumber(+pool.apr * 110, 2)}% + + + ) : ( + + )} {t`APR`} @@ -158,7 +207,13 @@ export const StakeMaskStatusCard: FC = ({ ...props }) color="neutrals.8" letterSpacing="-0.32px" > - 1,234,342 + {pool?.amount ? ( + + {formatNumber(+pool.amount)} + + ) : ( + + )} diff --git a/src/helpers/formatSeconds.ts b/src/helpers/formatSeconds.ts new file mode 100644 index 0000000..4902883 --- /dev/null +++ b/src/helpers/formatSeconds.ts @@ -0,0 +1,5 @@ +import dayjs from 'dayjs' + +export function formatSeconds(seconds: number, pattern: string) { + return dayjs(seconds * 1000).format(pattern) +} diff --git a/src/hooks/useLinkTwitter.ts b/src/hooks/useLinkTwitter.ts new file mode 100644 index 0000000..fe35b0e --- /dev/null +++ b/src/hooks/useLinkTwitter.ts @@ -0,0 +1,49 @@ +import { useAsyncFn } from 'react-use' +import urlcat from 'urlcat' +import { useAccount, useClient } from 'wagmi' +import { signMessage } from 'wagmi/actions' +import { config } from '../configs/wagmiClient' +import { FIREFLY_API_ROOT } from '../constants/api' +import { fetchJSON } from '../helpers/fetchJSON' +import { TwitterAuthorizeResponse } from '../types/api' +import { useToast } from '@chakra-ui/react' +import { UserRejectedRequestError } from 'viem' + +// Any message is ok. +const message = 'Hello, world!' +export function useLinkTwitter() { + const account = useAccount() + const client = useClient() + const toast = useToast() + + return useAsyncFn(async () => { + if (!account.address || !client) return + try { + const signed = await signMessage(config, { + account: account.address, + message: message, + }) + const url = urlcat(FIREFLY_API_ROOT, '/v1/mask_stake/twitter/authorize', { + original_message: message, + signature_message: signed.slice(2), // omit 0x + wallet_address: account.address, + }) + const res = await fetchJSON(url) + if (res.code !== 200) { + console.error('Failed to get twitter authorize', res.message, res.reason) + return + } + location.href = res.data.url + } catch (err) { + if (err instanceof UserRejectedRequestError) { + toast({ + status: 'error', + position: 'top-right', + title: err.details, + }) + return + } + throw err + } + }, [account.address, client]) +} diff --git a/src/locales/en.po b/src/locales/en.po index c566ee3..9166534 100644 --- a/src/locales/en.po +++ b/src/locales/en.po @@ -31,7 +31,7 @@ msgid "APR" msgstr "" #: src/modals/StakeModal.tsx -msgid "Balance: {0}" +msgid "Balance: <0>{0}" msgstr "" #: src/components/UserStatus/RewardCard.tsx @@ -137,6 +137,14 @@ msgstr "" msgid "MAX" msgstr "" +#: src/components/StakeMaskStatusCard/ActivityStatusTag.tsx +msgid "Not started" +msgstr "" + +#: src/components/StakeMaskStatusCard/ActivityStatusTag.tsx +msgid "On going" +msgstr "" + #: src/components/Footer/Terms/index.tsx #: src/modals/CookiePolicyModal.tsx msgid "Persistent Cookies: These cookies are stored on your device until they reach their expiration date or are manually deleted. They are used to remember your preferences and provide a personalized experience when you revisit the website." @@ -248,6 +256,10 @@ msgstr "" msgid "This website (hereinafter referred to as \"the Site\") uses cookies. By using the Site, you consent to the use of cookies as described in this Cookie Policy." msgstr "" +#: src/components/StakeMaskStatusCard/index.tsx +msgid "Time{0}" +msgstr "" + #: src/components/StakeMaskStatusCard/index.tsx msgid "Total MASK Staked" msgstr "" diff --git a/src/locales/en.ts b/src/locales/en.ts index 67014a7..088b1be 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -1 +1 @@ -/*eslint-disable*/import type{Messages}from"@lingui/core";export const messages:Messages=JSON.parse("{\"RZKpwz\":\"1 staked MASK will generate 1 point per hour.\",\"uyJsf6\":\"About\",\"5MojdE\":\"Accept cookies\",\"70wH1Q\":\"APR\",\"VuFd5C\":[\"Balance: \",[\"0\"]],\"hom7qf\":\"Claim\",\"yz7wBu\":\"Close\",\"CtByM7\":\"Connect Wallet\",\"YcfUZ9\":\"Contact Us\",\"AodcaS\":\"Cookie Policy\",\"QSMBSI\":\"Cookies are small text files that are stored on your computer or mobile device when you visit a website. They are used to store information about you and your internet usage habits to improve your online experience. Cookies enable websites to recognize your device and remember some information about your preferences.\",\"aqK0+O\":\"Estimated Rewards\",\"aJ4pMe\":\"FAQs\",\"INa0YU\":\"How to Control Cookies\",\"5x0Zyr\":\"If you have any questions or concerns about this Cookie Policy, please contact us at:\",\"v5W7I0\":\"info@dimension.im\",\"isuyW5\":\"Introduction\\nMask Network is committed to protecting the privacy of its users. This Privacy Policy outlines how we collect, use, disclose, and safeguard your information when you stake Mask to receive other token rewards through our website. By using our service, you consent to the data practices described in this policy.\\nInformation Collection and Use\\nInformation You Provide to Us\\nWe collect information you provide directly to us when you use our services. This may include:\\nContact information, such as your name, email address, and phone number.\\nBlockchain-related information, such as your wallet addresses.\\nSocial media account information, including but not limited to accounts on platforms like x.com.\\nWhen you choose to link your social media accounts or provide your wallet addresses, we may display this information on our website to enhance the user experience and foster a community environment. We encourage you to review the privacy settings and policies of any social media platforms you interact with to understand how your information may be shared and used.\\nInformation We Collect Automatically\\nWhen you access our website, we may automatically collect information about your device and usage, including:\\nIP address, browser type, and operating system.\\nInformation about your interactions with our website, such as the pages you visit.\\nUse of Your Information\\nWe use the information we collect about you to:\\nProvide, maintain, and improve our services.\\nDisplay your social media profiles and wallet addresses on our website, subject to your preferences and permissions.\\nRespond to your inquiries and provide customer support.\\nMonitor and analyze trends, usage, and activities in connection with our services.\\nSharing of Your Information\\nWe may share your information with third parties in the following situations:\\nWith your consent or at your direction.\\nWith service providers who assist us in our operations, under confidentiality agreements.\\nIf required by law or to protect the rights, property, or safety of [Your Website Name], our users, or others.\\nSecurity\\nWe take reasonable measures to protect your information from unauthorized access, use, alteration, and destruction. However, no internet or email transmission is ever fully secure or error-free.\\nChanges to This Privacy Policy\\nWe may update this Privacy Policy from time to time. We will notify you of any changes by posting the new policy on this page and updating the \\\"Last Updated\\\" date.\\nContact Us\\nIf you have any questions about this Privacy Policy, please contact us at info@dimension.im.\",\"uq8EoS\":\"Last Updated: 03.10 2024\",\"zwWKhA\":\"Learn more\",\"5ZMh6R\":\"Link 𝕏\",\"4HtGBb\":\"MAX\",\"NukQm3\":\"Persistent Cookies: These cookies are stored on your device until they reach their expiration date or are manually deleted. They are used to remember your preferences and provide a personalized experience when you revisit the website.\",\"fE6ylD\":\"Please connect first\",\"OKEQCB\":\"Pool Liquidity\",\"LcET2C\":\"Privacy Policy\",\"BEn/IE\":\"Session Cookies: These cookies exist only during your visit to the website and are automatically deleted when you close your browser. They are used to maintain session state, such as storing the contents of your shopping cart.\",\"F8o9TO\":\"Share of Pool\",\"bdg6QA\":\"Since 2019 to Now ｜ Mask.io\",\"JYKRJS\":\"Stake\",\"tcsT9V\":\"Stake Amount\",\"dy48iv\":\"Stake Mask\",\"hQngH8\":\"Stake Mask Now\",\"NE0dj/\":\"Staked MASK can be unstake after the campaign ends.\",\"ZoLkCW\":\"Staking Ranking\",\"PSGjEt\":\"Terms of Use\",\"8X0GDU\":\"Terms of Use for Mask.io\\nAcceptance of Terms\\nBy accessing and using Mask.io , you agree to be bound by these Terms of Use (\\\"Terms\\\"). If you do not agree to these Terms, you may not use our services.\\nChanges to Terms\\nWe reserve the right to modify these Terms at any time. We will notify you of any changes by posting the new Terms on this page. Your continued use of our services after any changes indicates your acceptance of the new Terms.\\nUse of Our Services\\n[Your Website Name] allows you to stake Mask to receive other token rewards. You agree to use our services only for lawful purposes and in accordance with these Terms.\\nAccount Responsibilities\\nYou are responsible for maintaining the confidentiality of your account information and for all activities that occur under your account.\\nYou agree to notify us immediately of any unauthorized use of your account.\\nProhibited Activities\\nYou agree not to engage in any of the following prohibited activities:\\nUsing our services for any illegal purpose or in violation of any local, state, national, or international law.\\nInfringing on the intellectual property rights of others or the intellectual property rights of Mask.io.\\nAttempting to gain unauthorized access to our services or another user's account.\\nInterfering with the security-related features of our services.\\nIntellectual Property\\nAll content, trademarks, logos, and service marks displayed on Mask.io are our property or the property of other third parties. You are not permitted to use these Marks without our prior written consent or the consent of such third party which may own the Marks.\\nDisclaimer of Warranties\\nOur services are provided on an \\\"as is\\\" and \\\"as available\\\" basis. Mask.io expressly disclaims all warranties of any kind, whether express or implied, including, but not limited to, the implied warranties of merchantability, fitness for a particular purpose, and non-infringement.\\nLimitation of Liability\\n[Your Website Name] shall not be liable for any indirect, incidental, special, consequential, or punitive damages, including but not limited to, damages for loss of profits, goodwill, use, data, or other intangible losses, resulting from the use or the inability to use our services.\\nIndemnification\\nYou agree to indemnify and hold harmless Mask.io and its officers, directors, employees, and agents from any and all claims, damages, expenses, and liabilities arising out of your use of our services, your violation of these Terms, or your violation of the rights of a third party.\\nGoverning Law\\nThese Terms shall be governed and construed in accordance with the laws of the People's Republic of China, without regard to its conflict of law provisions.\\nContact Us\\nIf you have any questions about these Terms, please contact us at info@dimension.im.\",\"zSbbOZ\":\"The staking addresses need to pass Go+ security check. Note that staking is not available in some restricted regions.<0>More\",\"Pim9Ok\":\"Third-Party Cookies: The Site may use cookies from third-party service providers for traffic analysis and user behavior tracking, as well as to display ads relevant to your interests.\",\"qIYYXT\":\"This is the first phase of the MASK staking event. You will be able to retrieve your staked Mask tokens and reward tokens only after the event concludes.\",\"DYT0zx\":\"This website (hereinafter referred to as \\\"the Site\\\") uses cookies. By using the Site, you consent to the use of cookies as described in this Cookie Policy.\",\"a7kfrG\":\"Total MASK Staked\",\"yxKbv1\":\"Total points\",\"qmYDVk\":\"Total Rewards\",\"KTFOT8\":\"Types of Cookies We Use\",\"Jbb2+W\":\"Unlock MASK Time\",\"ilbzKn\":\"Updates to the Cookie Policy\",\"9dsM+S\":\"We reserve the right to update this Cookie Policy at any time. The updated Cookie Policy will be posted on this page and will become effective immediately. We recommend checking back regularly for updates.\",\"a1Cyi2\":\"We use our own cookies.\",\"Qgqys4\":\"What Are Cookies?\",\"2z+KTh\":\"You can manage and delete cookies through your browser settings. Please note that disabling cookies may affect your access to and experience on the Site.\",\"gGN2Rp\":\"Your Portal To The New, Open Internet.\"}"); \ No newline at end of file +/*eslint-disable*/import type{Messages}from"@lingui/core";export const messages:Messages=JSON.parse("{\"RZKpwz\":\"1 staked MASK will generate 1 point per hour.\",\"uyJsf6\":\"About\",\"5MojdE\":\"Accept cookies\",\"70wH1Q\":\"APR\",\"nvV/Td\":[\"Balance: <0>\",[\"0\"],\"\"],\"hom7qf\":\"Claim\",\"yz7wBu\":\"Close\",\"CtByM7\":\"Connect Wallet\",\"YcfUZ9\":\"Contact Us\",\"AodcaS\":\"Cookie Policy\",\"QSMBSI\":\"Cookies are small text files that are stored on your computer or mobile device when you visit a website. They are used to store information about you and your internet usage habits to improve your online experience. Cookies enable websites to recognize your device and remember some information about your preferences.\",\"aqK0+O\":\"Estimated Rewards\",\"aJ4pMe\":\"FAQs\",\"INa0YU\":\"How to Control Cookies\",\"5x0Zyr\":\"If you have any questions or concerns about this Cookie Policy, please contact us at:\",\"v5W7I0\":\"info@dimension.im\",\"isuyW5\":\"Introduction\\nMask Network is committed to protecting the privacy of its users. This Privacy Policy outlines how we collect, use, disclose, and safeguard your information when you stake Mask to receive other token rewards through our website. By using our service, you consent to the data practices described in this policy.\\nInformation Collection and Use\\nInformation You Provide to Us\\nWe collect information you provide directly to us when you use our services. This may include:\\nContact information, such as your name, email address, and phone number.\\nBlockchain-related information, such as your wallet addresses.\\nSocial media account information, including but not limited to accounts on platforms like x.com.\\nWhen you choose to link your social media accounts or provide your wallet addresses, we may display this information on our website to enhance the user experience and foster a community environment. We encourage you to review the privacy settings and policies of any social media platforms you interact with to understand how your information may be shared and used.\\nInformation We Collect Automatically\\nWhen you access our website, we may automatically collect information about your device and usage, including:\\nIP address, browser type, and operating system.\\nInformation about your interactions with our website, such as the pages you visit.\\nUse of Your Information\\nWe use the information we collect about you to:\\nProvide, maintain, and improve our services.\\nDisplay your social media profiles and wallet addresses on our website, subject to your preferences and permissions.\\nRespond to your inquiries and provide customer support.\\nMonitor and analyze trends, usage, and activities in connection with our services.\\nSharing of Your Information\\nWe may share your information with third parties in the following situations:\\nWith your consent or at your direction.\\nWith service providers who assist us in our operations, under confidentiality agreements.\\nIf required by law or to protect the rights, property, or safety of [Your Website Name], our users, or others.\\nSecurity\\nWe take reasonable measures to protect your information from unauthorized access, use, alteration, and destruction. However, no internet or email transmission is ever fully secure or error-free.\\nChanges to This Privacy Policy\\nWe may update this Privacy Policy from time to time. We will notify you of any changes by posting the new policy on this page and updating the \\\"Last Updated\\\" date.\\nContact Us\\nIf you have any questions about this Privacy Policy, please contact us at info@dimension.im.\",\"uq8EoS\":\"Last Updated: 03.10 2024\",\"zwWKhA\":\"Learn more\",\"5ZMh6R\":\"Link 𝕏\",\"4HtGBb\":\"MAX\",\"mu1gVr\":\"Not started\",\"uz8dR/\":\"On going\",\"NukQm3\":\"Persistent Cookies: These cookies are stored on your device until they reach their expiration date or are manually deleted. They are used to remember your preferences and provide a personalized experience when you revisit the website.\",\"fE6ylD\":\"Please connect first\",\"OKEQCB\":\"Pool Liquidity\",\"LcET2C\":\"Privacy Policy\",\"BEn/IE\":\"Session Cookies: These cookies exist only during your visit to the website and are automatically deleted when you close your browser. They are used to maintain session state, such as storing the contents of your shopping cart.\",\"F8o9TO\":\"Share of Pool\",\"bdg6QA\":\"Since 2019 to Now ｜ Mask.io\",\"JYKRJS\":\"Stake\",\"tcsT9V\":\"Stake Amount\",\"dy48iv\":\"Stake Mask\",\"hQngH8\":\"Stake Mask Now\",\"NE0dj/\":\"Staked MASK can be unstake after the campaign ends.\",\"ZoLkCW\":\"Staking Ranking\",\"PSGjEt\":\"Terms of Use\",\"8X0GDU\":\"Terms of Use for Mask.io\\nAcceptance of Terms\\nBy accessing and using Mask.io , you agree to be bound by these Terms of Use (\\\"Terms\\\"). If you do not agree to these Terms, you may not use our services.\\nChanges to Terms\\nWe reserve the right to modify these Terms at any time. We will notify you of any changes by posting the new Terms on this page. Your continued use of our services after any changes indicates your acceptance of the new Terms.\\nUse of Our Services\\n[Your Website Name] allows you to stake Mask to receive other token rewards. You agree to use our services only for lawful purposes and in accordance with these Terms.\\nAccount Responsibilities\\nYou are responsible for maintaining the confidentiality of your account information and for all activities that occur under your account.\\nYou agree to notify us immediately of any unauthorized use of your account.\\nProhibited Activities\\nYou agree not to engage in any of the following prohibited activities:\\nUsing our services for any illegal purpose or in violation of any local, state, national, or international law.\\nInfringing on the intellectual property rights of others or the intellectual property rights of Mask.io.\\nAttempting to gain unauthorized access to our services or another user's account.\\nInterfering with the security-related features of our services.\\nIntellectual Property\\nAll content, trademarks, logos, and service marks displayed on Mask.io are our property or the property of other third parties. You are not permitted to use these Marks without our prior written consent or the consent of such third party which may own the Marks.\\nDisclaimer of Warranties\\nOur services are provided on an \\\"as is\\\" and \\\"as available\\\" basis. Mask.io expressly disclaims all warranties of any kind, whether express or implied, including, but not limited to, the implied warranties of merchantability, fitness for a particular purpose, and non-infringement.\\nLimitation of Liability\\n[Your Website Name] shall not be liable for any indirect, incidental, special, consequential, or punitive damages, including but not limited to, damages for loss of profits, goodwill, use, data, or other intangible losses, resulting from the use or the inability to use our services.\\nIndemnification\\nYou agree to indemnify and hold harmless Mask.io and its officers, directors, employees, and agents from any and all claims, damages, expenses, and liabilities arising out of your use of our services, your violation of these Terms, or your violation of the rights of a third party.\\nGoverning Law\\nThese Terms shall be governed and construed in accordance with the laws of the People's Republic of China, without regard to its conflict of law provisions.\\nContact Us\\nIf you have any questions about these Terms, please contact us at info@dimension.im.\",\"zSbbOZ\":\"The staking addresses need to pass Go+ security check. Note that staking is not available in some restricted regions.<0>More\",\"Pim9Ok\":\"Third-Party Cookies: The Site may use cookies from third-party service providers for traffic analysis and user behavior tracking, as well as to display ads relevant to your interests.\",\"qIYYXT\":\"This is the first phase of the MASK staking event. You will be able to retrieve your staked Mask tokens and reward tokens only after the event concludes.\",\"DYT0zx\":\"This website (hereinafter referred to as \\\"the Site\\\") uses cookies. By using the Site, you consent to the use of cookies as described in this Cookie Policy.\",\"wiEMgy\":[\"Time\",[\"0\"]],\"a7kfrG\":\"Total MASK Staked\",\"yxKbv1\":\"Total points\",\"qmYDVk\":\"Total Rewards\",\"KTFOT8\":\"Types of Cookies We Use\",\"Jbb2+W\":\"Unlock MASK Time\",\"ilbzKn\":\"Updates to the Cookie Policy\",\"9dsM+S\":\"We reserve the right to update this Cookie Policy at any time. The updated Cookie Policy will be posted on this page and will become effective immediately. We recommend checking back regularly for updates.\",\"a1Cyi2\":\"We use our own cookies.\",\"Qgqys4\":\"What Are Cookies?\",\"2z+KTh\":\"You can manage and delete cookies through your browser settings. Please note that disabling cookies may affect your access to and experience on the Site.\",\"gGN2Rp\":\"Your Portal To The New, Open Internet.\"}"); \ No newline at end of file diff --git a/src/modals/BaseModal.tsx b/src/modals/BaseModal.tsx index 72f7bf9..66ee20d 100644 --- a/src/modals/BaseModal.tsx +++ b/src/modals/BaseModal.tsx @@ -1,4 +1,9 @@ import { + Drawer, + DrawerBody, + DrawerContent, + DrawerHeader, + DrawerOverlay, IconButton, Modal, ModalBody, @@ -8,6 +13,7 @@ import { ModalOverlay, ModalProps, Text, + useBreakpointValue, } from '@chakra-ui/react' import { t } from '@lingui/macro' @@ -20,22 +26,46 @@ interface Props extends ModalProps { height: ModalContentProps['height'] } export function BaseModal({ title, width, height, ...rest }: Props) { + const isMobile = useBreakpointValue({ base: true, md: false }) + console.log({ isMobile }) + const header = ( + <> + {title} + } + onClick={rest.onClose} + /> + + ) + if (isMobile) { + return ( + + + + + + {header} + + + {rest.children} + + + + + ) + } return ( - - {title} - } - onClick={rest.onClose} - /> + + {header} {rest.children} diff --git a/src/modals/StakeModal.tsx b/src/modals/StakeModal.tsx index 8f7a451..4db9b4b 100644 --- a/src/modals/StakeModal.tsx +++ b/src/modals/StakeModal.tsx @@ -9,26 +9,25 @@ import { Link, List, ListItem, - ModalBody, - ModalCloseButton, - ModalHeader, ModalProps, Skeleton, + Spinner, Stack, Text, VStack, } from '@chakra-ui/react' import { Trans, t } from '@lingui/macro' +import dayjs from 'dayjs' +import { useState } from 'react' import { useAccount, useBalance } from 'wagmi' import { StepIcon } from '../components/StepIcon' import { TokenIcon } from '../components/TokenIcon' -import { usePoolInfo } from '../hooks/usePoolInfo' -import dayjs from 'dayjs' import { formatNumber } from '../helpers/formatNumber' -import { useState } from 'react' +import { useLinkTwitter } from '../hooks/useLinkTwitter' +import { usePoolInfo } from '../hooks/usePoolInfo' import { usePoolStore } from '../store/poolStore' import { Tooltip } from '../components/Tooltip.tsx' -import { ModalWithDrawer } from '../components/ModalWithDrawer' +import { BaseModal } from './BaseModal' interface Props extends ModalProps {} @@ -41,157 +40,160 @@ export function StakeModal(props: Props) { address: account.address, token: maskTokenAddress, }) + const [{ loading }, linkTwitter] = useLinkTwitter() return ( - - - {t`Stake`} - - - - - - {t`Connect Wallet`} - {account.isConnected ? null : ( - - )} - - - - {t`Link 𝕏`} + + + + + + {t`Connect Wallet`} + {account.isConnected ? null : ( - - - - - - - - - Mask - - - Ethereum - - - - { - setAmount(e.currentTarget.value) - }} - _focus={{ outline: 'none', border: 'none' }} - _focusVisible={{ border: 'none', boxShadow: 'none' }} - /> - - - - - Balance:{' '} - {balance.isPending ? ( - - ) : ( - balance.data?.value.toLocaleString() - )} - - - - - - - - - - {t`Unlock MASK Time`} - {pool?.end_time ? ( - - {dayjs(pool.end_time * 1000).format('hh:mm d/MM/YYYY')} - - ) : ( - - )} - - - {t`APR`} - {pool?.apr ? ( - - {formatNumber(+pool.apr * 110, 2)}% + >{t`Connect Wallet`} + )} + + + + {t`Link 𝕏`} + + + + + + + + + + Mask + + + Ethereum + + + + { + setAmount(e.currentTarget.value) + }} + _focus={{ outline: 'none', border: 'none' }} + _focusVisible={{ border: 'none', boxShadow: 'none' }} + /> + + + + + Balance:{' '} + + {balance.isPending ? null : balance.data?.value.toLocaleString()} + + + + + + + + + + + {t`Unlock MASK Time`} + {pool?.end_time ? ( + + {dayjs(pool.end_time * 1000).format('hh:mm d/MM/YYYY')} + + ) : ( + + )} + + + {t`APR`} + {pool?.apr ? ( + + {formatNumber(+pool.apr * 110, 2)}% + + ) : ( + + )} + + + {t`Share of Pool`} + {amount && pool?.amount !== undefined ? ( + {formatNumber((+amount / +pool?.amount) * 100, 2)}% + ) : ( + + )} + + + {t`Pool Liquidity`} + + + {pool?.amount ? ( + + {formatNumber(+pool.amount)} ) : ( )} - - {t`Share of Pool`} - {amount && pool?.amount !== undefined ? ( - {formatNumber((+amount / +pool?.amount) * 100, 2)}% - ) : ( - - )} - - - {t`Pool Liquidity`} - - - {pool?.amount ? ( - - {formatNumber(+pool.amount)} - - ) : ( - - )} - - - - - The staking addresses need to pass Go+ security check. Note that staking is not available in some - restricted regions. - More - - - - - - - + + + + The staking addresses need to pass Go+ security check. Note that staking is not available in some + restricted regions. + More + + + + + + ) } diff --git a/src/styles/index.css b/src/styles/index.css index e539802..0134147 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -19,6 +19,7 @@ body { } .gradient-border::after { + pointer-events: none; content: ''; position: absolute; left: 0; diff --git a/src/types/api.ts b/src/types/api.ts index 908276a..b20ce15 100644 --- a/src/types/api.ts +++ b/src/types/api.ts @@ -60,3 +60,9 @@ export interface PoolInfo { } export type PoolInfoResponse = Response + +export interface TwitterAuthorizeResult { + url: string +} + +export type TwitterAuthorizeResponse = Response