Add instruction vara popup

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'
     }

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<RootNavigationProps>();
@@ -68,6 +71,8 @@ export const StakingBalanceList = ({
   const [isRefresh, refresh] = useRefresh();
   const [selectedItem, setSelectedItem] = useState<StakingDataType | undefined>(undefined);
   const [detailModalVisible, setDetailModalVisible] = useState<boolean>(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 && (
+        <InstructionModal
+          setDetailModalVisible={() => {
+            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();
+          }}
+        />
+      )}
     </>
   );
 };

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 (
+      <View style={{ marginTop: theme.margin }}>
+        <Button
+          style={{ width: '100%' }}
+          type={'primary'}
+          onPress={onPressStake}
+          icon={<Icon phosphorIcon={PlusCircle} weight="fill" size={'lg'} iconColor={theme.colorWhite} />}>
+          Stake
+        </Button>
+      </View>
+    );
+  };
+  return (
+    <>
+      <SwModal
+        isUseModalV2
+        setVisible={setDetailModalVisible}
+        modalBaseV2Ref={modalRef}
+        level={3}
+        modalVisible={modalVisible}
+        modalTitle={modalTitle}
+        titleTextAlign="center"
+        titleStyle={{ textAlign: 'center' }}
+        isAllowSwipeDown={false}
+        // onBackButtonPress={_onCloseDetailModal}
+        footer={footer()}
+        modalStyle={{ maxHeight: '90%' }}>
+        <ScrollView showsVerticalScrollIndicator={false} style={{ maxHeight: deviceHeight * 0.55 }}>
+          {[
+            {
+              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 => (
+            <InstructionItem {...item} />
+          ))}
+        </ScrollView>
+        <Typography.Text
+          style={{
+            color: theme.colorTextSecondary,
+            fontSize: 14,
+            textAlign: 'center',
+            marginTop: 16,
+            marginHorizontal: 20,
+          }}>
+          For more information and staking instructions, read{' '}
+          <Text
+            onPress={() => {
+              Linking.openURL(
+                'https://subwallet.notion.site/subwallet/Coinbase-VARA-Quests-FAQs-855c4425812046449125e1f7805e6a16',
+              );
+            }}
+            style={{ color: 'rgba(0, 75, 255, 1)' }}>
+            this FAQ.
+          </Text>
+        </Typography.Text>
+      </SwModal>
+    </>
+  );
+}
+
+function InstructionItem({ icon, color, title, content }) {
+  const theme = useSubWalletTheme().swThemes;
+  return (
+    <View
+      style={{
+        backgroundColor: 'rgba(26, 26, 26, 1)',
+        borderRadius: theme.borderRadius,
+        padding: 14,
+        marginBottom: theme.marginXS,
+        flexDirection: 'row',
+      }}>
+      <View style={{ justifyContent: 'center', paddingRight: 10 }}>
+        <Icon phosphorIcon={icon} iconColor={color} weight="fill" />
+      </View>
+      <View style={{ flex: 1 }}>
+        <Typography.Title style={{ color: 'white' }}>{title}</Typography.Title>
+        <Typography.Text style={{ color: theme.colorTextSecondary, width: '100%' }}>{content}</Typography.Text>
+      </View>
+    </View>
+  );
+}

src/screens/Transaction/Stake/index.tsx

@@ -55,18 +55,22 @@ 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;
   pool: string;
   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<string>(from);
   const tokenRef = useRef<string>(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 = ({
       ) : (
         <TransactionDone transactionDoneInfo={transactionDoneInfo} />
       )}
+      {chain === 'vara_network' && (
+        <InstructionModal
+          setDetailModalVisible={() => {
+            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);
+          }}
+        />
+      )}
     </>
   );
 };