-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
dominhquang
committed
Oct 27, 2023
1 parent
11e9dd0
commit 906e603
Showing
39 changed files
with
1,194 additions
and
46 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import React, { useMemo } from 'react'; | ||
|
|
||
| import { InfoItemBase, SchemeColor } from '../types'; | ||
| import { useSubWalletTheme } from 'hooks/useSubWalletTheme'; | ||
| import MetaInfoStyles from 'components/MetaInfo/style'; | ||
| import useGeneralStyles from 'components/MetaInfo/hooks/useGeneralStyles'; | ||
| import { View } from 'react-native'; | ||
| import { getSchemaColor, renderColContent } from 'components/MetaInfo/shared'; | ||
| import { ActivityIndicator, Typography } from 'components/design-system-ui'; | ||
| import { TextSizeProps } from 'components/design-system-ui/typography'; | ||
| import { FontMedium, FontSemiBold } from 'styles/sharedStyles'; | ||
|
|
||
| export interface TextInfoItem extends Omit<InfoItemBase, 'valueColorSchema'> { | ||
| value: string; | ||
| valueColorSchema?: SchemeColor; | ||
| valueFontWeight?: 'regular' | 'semibold'; | ||
| valueSize?: TextSizeProps; | ||
| ellipsis?: boolean; | ||
| } | ||
|
|
||
| const TextItem: React.FC<TextInfoItem> = ({ | ||
| label, | ||
| value, | ||
| valueColorSchema, | ||
| valueFontWeight, | ||
| loading, | ||
| valueSize, | ||
| ellipsis, | ||
| }: TextInfoItem) => { | ||
| const theme = useSubWalletTheme().swThemes; | ||
| const _style = MetaInfoStyles(theme); | ||
| const { labelGeneralStyle, valueGeneralStyle } = useGeneralStyles(theme); | ||
|
|
||
| const valueStyle = useMemo(() => { | ||
| return { | ||
| ..._style.value, | ||
| ...valueGeneralStyle, | ||
| ...(valueColorSchema && { color: getSchemaColor(valueColorSchema, theme) }), | ||
| ...(valueFontWeight === 'semibold' ? FontSemiBold : FontMedium), | ||
| }; | ||
| }, [_style.value, theme, valueColorSchema, valueFontWeight, valueGeneralStyle]); | ||
|
|
||
| return ( | ||
| <View style={_style.row}> | ||
| <View style={[_style.col]}>{renderColContent(label, { ..._style.label, ...labelGeneralStyle })}</View> | ||
| <View style={[_style.col, _style['col.grow'], _style['col.to-right']]}> | ||
| {loading ? ( | ||
| <ActivityIndicator size={20} /> | ||
| ) : ( | ||
| <Typography.Text style={valueStyle} size={valueSize} ellipsis={ellipsis}> | ||
| {value} | ||
| </Typography.Text> | ||
| )} | ||
| </View> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| export default TextItem; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
51 changes: 51 additions & 0 deletions
51
src/components/MissionPoolHorizontalItem/MissionPoolFooter.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import React from 'react'; | ||
| import { Linking, StyleProp, View, ViewStyle } from 'react-native'; | ||
| import { Button, Icon } from 'components/design-system-ui'; | ||
| import { GlobeHemisphereWest, PlusCircle, TwitterLogo } from 'phosphor-react-native'; | ||
| import { useSubWalletTheme } from 'hooks/useSubWalletTheme'; | ||
| import { MissionInfo } from 'types/missionPool'; | ||
| import i18n from 'utils/i18n/i18n'; | ||
|
|
||
| interface Props { | ||
| data: MissionInfo; | ||
| style: StyleProp<ViewStyle>; | ||
| closeDetailModal?: () => void; | ||
| } | ||
|
|
||
| export const MissionPoolFooter = ({ data, style, closeDetailModal }: Props) => { | ||
| const theme = useSubWalletTheme().swThemes; | ||
|
|
||
| const onPressJoinNow = async (url: string) => { | ||
| const transformUrl = `subwallet://browser?url=${encodeURIComponent(url)}`; | ||
| closeDetailModal && closeDetailModal(); | ||
| Linking.openURL(transformUrl); | ||
| }; | ||
|
|
||
| return ( | ||
| <View style={style}> | ||
| <Button | ||
| style={{ borderWidth: 2, borderColor: theme.colorBgBorder }} | ||
| icon={<Icon phosphorIcon={GlobeHemisphereWest} size={'sm'} weight={'fill'} />} | ||
| size={'xs'} | ||
| shape={'circle'} | ||
| type={'secondary'} | ||
| onPress={() => data.campaign_url && Linking.openURL(data.campaign_url)} | ||
| /> | ||
| <Button | ||
| style={{ borderWidth: 2, borderColor: theme.colorBgBorder }} | ||
| icon={<Icon phosphorIcon={TwitterLogo} size={'sm'} weight={'fill'} />} | ||
| size={'xs'} | ||
| shape={'circle'} | ||
| type={'secondary'} | ||
| onPress={() => data.twitter_url && Linking.openURL(data.twitter_url)} | ||
| /> | ||
| <Button | ||
| icon={<Icon phosphorIcon={PlusCircle} size={'sm'} weight={'fill'} />} | ||
| size={'xs'} | ||
| shape={'round'} | ||
| onPress={() => onPressJoinNow(data.url)}> | ||
| {i18n.buttonTitles.joinNow} | ||
| </Button> | ||
| </View> | ||
| ); | ||
| }; |
39 changes: 39 additions & 0 deletions
39
src/components/MissionPoolHorizontalItem/MissionPoolTag.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import React from 'react'; | ||
| import capitalize from '@subwallet/react-ui/es/_util/capitalize'; | ||
| import { MagicWand } from 'phosphor-react-native'; | ||
| import { Icon, Tag } from 'components/design-system-ui'; | ||
| import { MissionInfo } from 'types/missionPool'; | ||
| import { useSubWalletTheme } from 'hooks/useSubWalletTheme'; | ||
| import { useMissionPools } from 'hooks/useMissionPools'; | ||
|
|
||
| interface Props { | ||
| data: MissionInfo; | ||
| } | ||
|
|
||
| export const MissionPoolTag = ({ data }: Props) => { | ||
| const theme = useSubWalletTheme().swThemes; | ||
| const { tagMap } = useMissionPools(data); | ||
| if (!data.tags || !data.tags.length) { | ||
| return null; | ||
| } | ||
| const tagSlug = data.tags[0]; | ||
|
|
||
| let textColor = tagMap[tagSlug]?.theme || 'gray'; | ||
| let _theme = tagMap[tagSlug]?.theme || 'gray'; | ||
| if (tagMap[tagSlug]?.theme && ['success', 'warning', 'error'].includes(tagMap[tagSlug]?.theme)) { | ||
| _theme = `color${capitalize(tagMap[tagSlug]?.theme)}`; | ||
| } | ||
| const name = tagMap[tagSlug]?.name || capitalize(tagSlug.replace('_', ' ')); | ||
| const iconWeight = tagMap[tagSlug]?.iconWeight; | ||
| const icon = tagMap[tagSlug]?.icon || MagicWand; | ||
|
|
||
| return ( | ||
| <Tag | ||
| shape={'round'} | ||
| icon={<Icon size={'xs'} phosphorIcon={icon} weight={iconWeight} iconColor={theme[_theme]} />} | ||
| bgType={'default'} | ||
| color={textColor}> | ||
| {name} | ||
| </Tag> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import React from 'react'; | ||
| import { TouchableOpacity, View } from 'react-native'; | ||
| import { Image, Typography } from 'components/design-system-ui'; | ||
| import { BlurView } from '@react-native-community/blur'; | ||
| import { IconWeight } from 'phosphor-react-native'; | ||
| import { MissionInfo } from 'types/missionPool'; | ||
| import { useSubWalletTheme } from 'hooks/useSubWalletTheme'; | ||
| import { SWIconProps } from 'components/design-system-ui/icon'; | ||
| import createStyles from './style'; | ||
| import { FontSemiBold } from 'styles/sharedStyles'; | ||
| import { BUTTON_ACTIVE_OPACITY } from 'constants/index'; | ||
| import { useMissionPools } from 'hooks/useMissionPools'; | ||
| import { MissionPoolTag } from 'components/MissionPoolHorizontalItem/MissionPoolTag'; | ||
| import { MissionPoolFooter } from 'components/MissionPoolHorizontalItem/MissionPoolFooter'; | ||
|
|
||
| export enum TagType { | ||
| FCFS = 'fcfs', | ||
| POINTS = 'points', | ||
| LUCKY_DRAW = 'lucky_draw', | ||
| MANUAL_SELECTION = 'manual_selection', | ||
| } | ||
|
|
||
| export type TagInfo = { | ||
| theme: string; | ||
| name: string; | ||
| slug: string; | ||
| icon: SWIconProps['phosphorIcon']; | ||
| iconWeight?: IconWeight; | ||
| }; | ||
|
|
||
| interface Props { | ||
| data: MissionInfo; | ||
| onPressItem: () => void; | ||
| } | ||
|
|
||
| export const MissionPoolHorizontalItem = ({ data, onPressItem }: Props) => { | ||
| const theme = useSubWalletTheme().swThemes; | ||
| const styles = createStyles(theme); | ||
| const { timeline } = useMissionPools(data); | ||
|
|
||
| return ( | ||
| <TouchableOpacity activeOpacity={BUTTON_ACTIVE_OPACITY} onPress={onPressItem} style={styles.missionItemWrapper}> | ||
| <Image key={'blurryImage'} src={{ uri: data.backdrop_image }} style={styles.backdropImgStyle} /> | ||
| <BlurView style={styles.backdropImgBlurView} blurType={'dark'} blurAmount={10} /> | ||
| <View style={styles.missionItemContent}> | ||
| <Image src={{ uri: data.logo }} style={{ width: 64, height: 64 }} /> | ||
| <Typography.Text size={'lg'} ellipsis style={styles.missionItemName}> | ||
| {data.name} | ||
| </Typography.Text> | ||
| <View style={styles.missionItemRow}> | ||
| <Typography.Text style={{ color: theme.colorTextTertiary, ...FontSemiBold }}>{'Rewards:'}</Typography.Text> | ||
| <Typography.Text style={{ color: theme.colorSuccess, ...FontSemiBold }}>{data.reward}</Typography.Text> | ||
| </View> | ||
| <Typography.Text ellipsis numberOfLines={2} size={'sm'} style={styles.missionItemDescription}> | ||
| {data.description} | ||
| </Typography.Text> | ||
| <View style={[styles.missionItemRow, { paddingBottom: theme.padding }]}> | ||
| <Typography.Text style={{ color: theme.colorTextTertiary, ...FontSemiBold }}>{'Timeline:'}</Typography.Text> | ||
| <Typography.Text ellipsis style={styles.missionItemTimeline}> | ||
| {timeline} | ||
| </Typography.Text> | ||
| </View> | ||
| <MissionPoolTag data={data} /> | ||
| <MissionPoolFooter | ||
| data={data} | ||
| style={{ flexDirection: 'row', paddingTop: theme.paddingXXL - 8, gap: theme.padding }} | ||
| /> | ||
| </View> | ||
| </TouchableOpacity> | ||
| ); | ||
| }; |
Oops, something went wrong.