From 52d3d61dafd29907c0a0bed97de387dce5949b56 Mon Sep 17 00:00:00 2001 From: Thuc Nguyen Duy Date: Sat, 2 Dec 2023 18:05:05 +0700 Subject: [PATCH] Add instruction vara popup --- android/app/build.gradle | 2 +- .../Staking/Balance/StakingBalanceList.tsx | 28 ++++ .../Home/Staking/InstructionModal/index.tsx | 122 ++++++++++++++++++ src/screens/Transaction/Stake/index.tsx | 20 +++ 4 files changed, 171 insertions(+), 1 deletion(-) create mode 100644 src/screens/Home/Staking/InstructionModal/index.tsx diff --git a/android/app/build.gradle b/android/app/build.gradle index 8f7599bf8..7cad519d5 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -75,7 +75,7 @@ android { applicationId "app.subwallet.mobile" minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion - versionCode 249 + versionCode 253 versionName "1.1.14" missingDimensionStrategy 'react-native-camera', 'general' } diff --git a/src/screens/Home/Staking/Balance/StakingBalanceList.tsx b/src/screens/Home/Staking/Balance/StakingBalanceList.tsx index f5d9f0e00..b296de2a3 100644 --- a/src/screens/Home/Staking/Balance/StakingBalanceList.tsx +++ b/src/screens/Home/Staking/Balance/StakingBalanceList.tsx @@ -20,6 +20,8 @@ import BigNumber from 'bignumber.js'; import { useSelector } from 'react-redux'; import { RootState } from 'stores/index'; import { StakingBalancesProps } from 'routes/staking/stakingScreen'; +import { InstructionModal } from '../InstructionModal'; +import { mmkvStore } from 'utils/storage'; enum FilterValue { NOMINATED = 'nominated', @@ -60,6 +62,7 @@ export const StakingBalanceList = ({ params: { chain: _stakingChain, type: _stakingType }, }, }: StakingBalancesProps) => { + const shownVaraInstruction = mmkvStore.getBoolean('shown-vara-instruction') ?? false; const theme = useSubWalletTheme().swThemes; const { data, priceMap } = useGetStakingList(); const navigation = useNavigation(); @@ -68,6 +71,8 @@ export const StakingBalanceList = ({ const [isRefresh, refresh] = useRefresh(); const [selectedItem, setSelectedItem] = useState(undefined); const [detailModalVisible, setDetailModalVisible] = useState(false); + const [instructionModalVisible, setInstructionModalVisible] = useState(!shownVaraInstruction); + const handleOnPress = useCallback((stakingData: StakingDataType): (() => void) => { return () => { Keyboard.dismiss(); @@ -97,6 +102,9 @@ export const StakingBalanceList = ({ }); return result; }, [data, priceMap]); + const varaStaked = useMemo(() => { + return stakingList.some(item => item.staking.chain === 'vara_network'); + }, [stakingList]); useEffect(() => { if (detailModalVisible || isLocked) { @@ -211,6 +219,26 @@ export const StakingBalanceList = ({ setDetailModalVisible={setDetailModalVisible} /> )} + {varaStaked && ( + { + setInstructionModalVisible(false); + mmkvStore.set('shown-vara-instruction', true); + }} + modalVisible={ + instructionModalVisible && + selectedItem && + selectedItem.staking.chain === 'vara_network' && + selectedItem.staking.type === 'pooled' + } + modalTitle="Stake in Vara nomination pools easily with SubWallet" + onPressStake={() => { + setInstructionModalVisible(false); + mmkvStore.set('shown-vara-instruction', true); + // handlePressStartStaking(); + }} + /> + )} ); }; diff --git a/src/screens/Home/Staking/InstructionModal/index.tsx b/src/screens/Home/Staking/InstructionModal/index.tsx new file mode 100644 index 000000000..f5506bbcf --- /dev/null +++ b/src/screens/Home/Staking/InstructionModal/index.tsx @@ -0,0 +1,122 @@ +import { SwModal, Button, Icon, Typography } from 'components/design-system-ui'; +import { deviceHeight } from 'constants/index'; +import { useSubWalletTheme } from 'hooks/useSubWalletTheme'; +import { Aperture, CheckCircle, Coins, Eye, PlusCircle, ThumbsUp } from 'phosphor-react-native'; +import { View, Text, Linking } from 'react-native'; +import { ScrollView } from 'react-native-gesture-handler'; + +export function InstructionModal({ setDetailModalVisible, modalRef, modalVisible, modalTitle, onPressStake }) { + const theme = useSubWalletTheme().swThemes; + const footer = () => { + return ( + + + + ); + }; + return ( + <> + + + {[ + { + icon: Aperture, + color: 'rgba(230, 71, 142, 1)', + title: 'Mint an NFT before staking', + content: + "If you're participating in the Coinbase - Vara quests, be sure to mint an NFT before staking to qualify for Coinbase rewards.", + }, + { + icon: Coins, + color: 'rgba(230, 220, 37, 1)', + title: 'Unstake and withdraw', + content: + 'Once staked, your funds will be locked. Unstake your funds anytime and withdraw after a 7-day period. Keep in mind that these actions are not automated and will incur network fees.', + }, + { + icon: CheckCircle, + color: 'rgba(76, 234, 172, 1)', + title: 'Keep your free balance', + content: + 'Ensure that your free balance (transferrable balance) includes a minimum of 12 VARA to cover your existential deposit and network fees associated with staking, unstaking, and withdrawals.', + }, + { + icon: Eye, + color: 'rgba(78, 180, 242, 1)', + title: 'Track your stake', + content: 'Keep an eye on your stake periodically, as rewards and staking status can fluctuate over time.', + }, + { + icon: ThumbsUp, + color: 'rgba(170, 218, 98, 1)', + title: 'Select active pool', + content: + 'It is recommended that you select an active pool. Check out the list of active pools in our FAQ.', + }, + ].map(item => ( + + ))} + + + For more information and staking instructions, read{' '} + { + Linking.openURL( + 'https://subwallet.notion.site/subwallet/Coinbase-VARA-Quests-FAQs-855c4425812046449125e1f7805e6a16', + ); + }} + style={{ color: 'rgba(0, 75, 255, 1)' }}> + this FAQ. + + + + + ); +} + +function InstructionItem({ icon, color, title, content }) { + const theme = useSubWalletTheme().swThemes; + return ( + + + + + + {title} + {content} + + + ); +} diff --git a/src/screens/Transaction/Stake/index.tsx b/src/screens/Transaction/Stake/index.tsx index 60da0e9be..d6875036d 100644 --- a/src/screens/Transaction/Stake/index.tsx +++ b/src/screens/Transaction/Stake/index.tsx @@ -55,6 +55,8 @@ import { TransactionDone } from 'screens/Transaction/TransactionDone'; import { useWatch } from 'react-hook-form'; import { ValidateResult } from 'react-hook-form/dist/types/validator'; import { FormItem } from 'components/common/FormItem'; +import { InstructionModal } from 'screens/Home/Staking/InstructionModal'; +import { mmkvStore } from 'utils/storage'; interface StakeFormValues extends TransactionFormValues { stakingType: StakingType; @@ -62,11 +64,13 @@ interface StakeFormValues extends TransactionFormValues { validator: string; } +// mmkvStore.set('shown-vara-instruction', false) export const Stake = ({ route: { params: { chain: stakingChain = ALL_KEY, type: _stakingType = ALL_KEY }, }, }: StakeProps) => { + const shownVaraInstruction = mmkvStore.getBoolean('shown-vara-instruction') ?? false; const theme = useSubWalletTheme().swThemes; const chainInfoMap = useSelector((state: RootState) => state.chainStore.chainInfoMap); const { nominationPoolInfoMap, validatorInfoMap } = useSelector((state: RootState) => state.bonding); @@ -147,6 +151,7 @@ export const Stake = ({ [accounts, stakingChain, chainInfoMap, currentStakingType], ); + const [instructionModalVisible, setInstructionModalVisible] = useState(!shownVaraInstruction); const fromRef = useRef(from); const tokenRef = useRef(asset); const [forceFetchValidator, setForceFetchValidator] = useState(false); @@ -387,6 +392,7 @@ export const Stake = ({ const onSelectToken = useCallback( (item: TokenItemType) => { + console.log(item.originChain); setAsset(item.slug); validatorSelectorRef?.current?.resetValue(); tokenRef.current = item.slug; @@ -595,6 +601,20 @@ export const Stake = ({ ) : ( )} + {chain === 'vara_network' && ( + { + setInstructionModalVisible(false); + mmkvStore.set('shown-vara-instruction', true); + }} + modalVisible={instructionModalVisible} + modalTitle="Stake in Vara nomination pools easily with SubWallet" + onPressStake={() => { + setInstructionModalVisible(false); + mmkvStore.set('shown-vara-instruction', true); + }} + /> + )} ); };