Skip to content

Commit

Permalink
feat: binding some data (#17)
Browse files Browse the repository at this point in the history
* feat: link twitter

feat: binding some data

* chore: lingui extract

---------

Co-authored-by: swkatmask <[email protected]>
  • Loading branch information
swkatmask and swkatmask authored May 16, 2024
1 parent 8fb1944 commit 3134c0a
Show file tree
Hide file tree
Showing 14 changed files with 442 additions and 185 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,8 @@
},
"pnpm": {
"patchedDependencies": {
"[email protected]": "patches/[email protected]"
"[email protected]": "patches/[email protected]",
"[email protected]": "patches/[email protected]"
}
}
}
87 changes: 87 additions & 0 deletions patches/[email protected]
Original file line number Diff line number Diff line change
@@ -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];
8 changes: 6 additions & 2 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions src/components/Footer/Terms/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ const CookiePolicyContent = () => (
<br />
{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.`}
</p>
<p>
<div>
{t`Types of Cookies We Use`}
<ul>
<li>{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.`}</li>
<li>{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.`}</li>
<li>{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.`}</li>
</ul>
</p>
</div>
<p>
{t`How to Control Cookies`}
<br />
Expand Down
11 changes: 8 additions & 3 deletions src/components/StakeMaskStatusCard/ActivityStatusTag.tsx
Original file line number Diff line number Diff line change
@@ -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<BoxProps> = ({ ...props }) => {
const { data: pool, isLoading } = usePoolInfo()
const isStarted = useMemo(() => (pool ? dayjs(pool.start_time * 1000).isBefore(Date.now()) : false), [pool])
return (
<Box
bg="neutrals.9"
Expand All @@ -13,7 +18,7 @@ export const ActivityStatusTag: FC<BoxProps> = ({ ...props }) => {
px="6px"
{...props}
>
Not started
{isLoading || !pool ? <Skeleton height="20px" width="60px" /> : isStarted ? t`On going` : t`Not started`}
</Box>
)
}
83 changes: 69 additions & 14 deletions src/components/StakeMaskStatusCard/index.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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<StakeMaskStatusCardProps> = ({ ...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 (
<Box
maxW="maxW"
Expand Down Expand Up @@ -66,7 +86,14 @@ export const StakeMaskStatusCard: FC<StakeMaskStatusCardProps> = ({ ...props })
lineHeight={{ base: 6, lg: '140%' }}
align="center"
>
Time 3.20 2024~8.20 2024
<Trans>
Time
{isLoading || !pool ? (
<Skeleton width="100px" height="16px" ml={1} />
) : (
`${formatSeconds(pool?.start_time, 'M.DD YYYY')}~${formatSeconds(pool.end_time, 'M.DD YYYY')}`
)}
</Trans>
<Tooltip label={t`Staked MASK can be unstake after the campaign ends.`} placement="top" hasArrow>
<Box as="span" w="6" h="6" ml="10px">
<Icon as={QuestionSVG} w="initial" h="initial" />
Expand Down Expand Up @@ -99,9 +126,13 @@ export const StakeMaskStatusCard: FC<StakeMaskStatusCardProps> = ({ ...props })
<HStack spacing={1}>
<Icon as={Rss3EthSVG} w="12" h="12" />
<VStack spacing={0} color="neutrals.8" align="start">
<Box fontSize="24px" lineHeight="32px" fontWeight={700}>
700,000
</Box>
{rss3 ? (
<Box fontSize="24px" lineHeight="32px" fontWeight={700}>
{formatNumber(+rss3.amount)}
</Box>
) : (
<Skeleton height="24px" width="80px" my="4px" />
)}
<Box fontSize="16px" lineHeight="24px" fontWeight={700}>
RSS3
</Box>
Expand All @@ -111,9 +142,14 @@ export const StakeMaskStatusCard: FC<StakeMaskStatusCardProps> = ({ ...props })
<HStack spacing={1}>
<Icon as={TonEthSVG} w="12" h="12" />
<VStack spacing={0} color="neutrals.8" align="start">
<Box fontSize="24px" lineHeight="32px" fontWeight={700}>
40,000
</Box>
{ton ? (
<Box fontSize="24px" lineHeight="32px" fontWeight={700}>
{formatNumber(+ton.amount)}
</Box>
) : (
<Skeleton height="24px" width="80px" my="4px" />
)}

<Box fontSize="16px" lineHeight="24px" fontWeight={700}>
TON
</Box>
Expand All @@ -133,9 +169,22 @@ export const StakeMaskStatusCard: FC<StakeMaskStatusCardProps> = ({ ...props })
p={6}
spacing={6}
>
<Box h="56px" fontSize="32px" lineHeight="56px" fontWeight={600} color="neutrals.8" letterSpacing="-0.32px">
12.2%
</Box>
{pool?.apr ? (
<Tooltip label={formatNumber(+pool.apr * 100, 18)}>
<Box
h="56px"
fontSize="32px"
lineHeight="56px"
fontWeight={600}
color="neutrals.8"
letterSpacing="-0.32px"
>
{formatNumber(+pool.apr * 110, 2)}%
</Box>
</Tooltip>
) : (
<Skeleton h="56px" width="100px" fontSize="32px"></Skeleton>
)}
<Box fontSize="16px" fontWeight={700} lineHeight="150%" color="neutrals.6">
{t`APR`}
</Box>
Expand All @@ -158,7 +207,13 @@ export const StakeMaskStatusCard: FC<StakeMaskStatusCardProps> = ({ ...props })
color="neutrals.8"
letterSpacing="-0.32px"
>
1,234,342
{pool?.amount ? (
<Tooltip label={formatNumber(+pool.amount)} hasArrow placement="top">
<Text>{formatNumber(+pool.amount)}</Text>
</Tooltip>
) : (
<Skeleton height="32px" width="100px" />
)}
<Icon as={MaskLogoSVG} w="9" h="9" ml="1" />
</Flex>
<Box fontSize="16px" fontWeight={700} lineHeight="150%" color="neutrals.6">
Expand Down
5 changes: 5 additions & 0 deletions src/helpers/formatSeconds.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import dayjs from 'dayjs'

export function formatSeconds(seconds: number, pattern: string) {
return dayjs(seconds * 1000).format(pattern)
}
49 changes: 49 additions & 0 deletions src/hooks/useLinkTwitter.ts
Original file line number Diff line number Diff line change
@@ -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<TwitterAuthorizeResponse>(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])
}
Loading

0 comments on commit 3134c0a

Please sign in to comment.