linked navigation with coin actions

This commit is contained in:
Nouman Tahir 2022-02-22 14:57:45 +05:00
parent 195280d764
commit 87e71ffa3d
6 changed files with 70 additions and 24 deletions

View File

@ -68,8 +68,8 @@
"next": "NEXT", "next": "NEXT",
"delegate": "Delegate", "delegate": "Delegate",
"power_down": "Power Down", "power_down": "Power Down",
"withdraw_hive": "Withdraw HIVE", "withdraw_hive": "Withdraw Savings",
"withdraw_hbd": "Withdraw HBD", "withdraw_hbd": "Withdraw Savings",
"transfer_to_savings": "To Savings", "transfer_to_savings": "To Savings",
"convert": "Convert", "convert": "Convert",
"escrow_transfer": "Escrow Transfer", "escrow_transfer": "Escrow Transfer",

View File

@ -42,6 +42,7 @@ export interface CoinActivity {
} }
interface State { interface State {
tokenAddress:string;
selectedCoins:CoinBase[]; selectedCoins:CoinBase[];
coinsData:{ coinsData:{
[key: string]: CoinData; [key: string]: CoinData;
@ -56,6 +57,7 @@ interface State {
} }
const initialState:State = { const initialState:State = {
tokenAddress:'',
selectedCoins:DEFAULT_COINS, selectedCoins:DEFAULT_COINS,
coinsData:{}, coinsData:{},
priceHistories:{}, priceHistories:{},
@ -75,6 +77,7 @@ export default function (state = initialState, action) {
case SET_COINS_DATA:{ case SET_COINS_DATA:{
return { return {
...state, ...state,
//TODO: pass and asign tokenAddress
coinsData:payload, coinsData:payload,
updateTimestamp:new Date().getTime() updateTimestamp:new Date().getTime()
} }

View File

@ -1,25 +1,22 @@
import React, { Fragment } from 'react' import React, { Fragment } from 'react'
import { useIntl } from 'react-intl' import { useIntl } from 'react-intl'
import { View, Text, Alert } from 'react-native' import { View, Text } from 'react-native'
import { TouchableOpacity } from 'react-native-gesture-handler' import { TouchableOpacity } from 'react-native-gesture-handler'
import { withNavigation } from 'react-navigation'
import styles from './children.styles' import styles from './children.styles'
interface CoinActionsProps { interface CoinActionsProps {
coinId:string;
actions:string[]; actions:string[];
onActionPress:(action:string)=>void;
} }
const CoinActions = ({coinId, actions}:CoinActionsProps) => { export const CoinActions = withNavigation(({actions, onActionPress}:CoinActionsProps) => {
const intl = useIntl(); const intl = useIntl();
const _navigate = (action:string) => {
Alert.alert("Action Press", action)
}
const _renderItem = (item) => { const _renderItem = (item) => {
const _onPress = () => { const _onPress = () => {
_navigate(item) onActionPress(item)
} }
return ( return (
@ -38,6 +35,4 @@ const CoinActions = ({coinId, actions}:CoinActionsProps) => {
{actions.map(_renderItem)} {actions.map(_renderItem)}
</View> </View>
) )
} });
export default CoinActions

View File

@ -1,21 +1,22 @@
import React from 'react' import React from 'react'
import { View } from 'react-native' import { View } from 'react-native'
import { CoinBasics, CoinChart } from '.' import { CoinActions, CoinBasics, CoinChart } from '.'
import { FormattedCurrency } from '../../../components' import { FormattedCurrency } from '../../../components'
import { COIN_IDS } from '../../../constants/defaultCoins' import { COIN_IDS } from '../../../constants/defaultCoins'
import { CoinData, DataPair } from '../../../redux/reducers/walletReducer' import { CoinData, DataPair } from '../../../redux/reducers/walletReducer'
import CoinActions from './coinActions'
export interface CoinSummaryProps { export interface CoinSummaryProps {
id:string; id:string;
coinSymbol:string; coinSymbol:string;
coinData:CoinData; coinData:CoinData;
onActionPress:(action:string)=>void;
} }
export const CoinSummary = ({ export const CoinSummary = ({
coinSymbol, coinSymbol,
id, id,
coinData, coinData,
onActionPress,
}:CoinSummaryProps) => { }:CoinSummaryProps) => {
const { const {
balance, balance,
@ -49,7 +50,7 @@ export const CoinSummary = ({
return ( return (
<View> <View>
<CoinBasics valuePairs={valuePairs} extraData={extraDataPairs} coinSymbol={coinSymbol} /> <CoinBasics valuePairs={valuePairs} extraData={extraDataPairs} coinSymbol={coinSymbol} />
<CoinActions actions={actions} /> <CoinActions actions={actions} onActionPress={onActionPress}/>
{ {
id !== COIN_IDS.ECENCY && id !== COIN_IDS.HP && <CoinChart coinId={id} /> id !== COIN_IDS.ECENCY && id !== COIN_IDS.HP && <CoinChart coinId={id} />
} }

View File

@ -3,3 +3,4 @@ export * from './coinChart';
export * from './rangeSelector'; export * from './rangeSelector';
export * from './coinSummary'; export * from './coinSummary';
export * from './activitiesList'; export * from './activitiesList';
export * from './coinActions';

View File

@ -9,6 +9,10 @@ import { useAppDispatch, useAppSelector } from '../../../hooks'
import { CoinActivity, CoinData } from '../../../redux/reducers/walletReducer'; import { CoinActivity, CoinData } from '../../../redux/reducers/walletReducer';
import { fetchCoinActivities } from '../../../utils/wallet'; import { fetchCoinActivities } from '../../../utils/wallet';
import { setCoinActivities } from '../../../redux/actions/walletActions'; import { setCoinActivities } from '../../../redux/actions/walletActions';
import { openPinCodeModal } from '../../../redux/actions/applicationActions';
import { navigate } from '../../../navigation/service';
import ROUTES from '../../../constants/routeNames';
import { COIN_IDS } from '../../../constants/defaultCoins';
export interface CoinDetailsScreenParams { export interface CoinDetailsScreenParams {
coinId:string; coinId:string;
@ -28,12 +32,13 @@ const CoinDetailsScreen = ({navigation}:CoinDetailsScreenProps) => {
const currentAccount = useAppSelector(state=>state.account.currentAccount); const currentAccount = useAppSelector(state=>state.account.currentAccount);
const globalProps = useAppSelector(state=>state.account.globalProps); const globalProps = useAppSelector(state=>state.account.globalProps);
const tokenAddress = useAppSelector(state=>state.wallet.tokenAddress);
const selectedCoins = useAppSelector(state=>state.wallet.selectedCoins); const selectedCoins = useAppSelector(state=>state.wallet.selectedCoins);
const coinData:CoinData = useAppSelector(state=>state.wallet.coinsData[coinId]); const coinData:CoinData = useAppSelector(state=>state.wallet.coinsData[coinId]);
const coinActivities:CoinActivity[] = useAppSelector(state=>state.wallet.coinsActivities[coinId]); const coinActivities:CoinActivity[] = useAppSelector(state=>state.wallet.coinsActivities[coinId]);
const isPinCodeOpen = useAppSelector(state=>state.application.isPinCodeOpen);
const [symbol] = useState(selectedCoins.find((item)=>item.id===coinId).symbol);
const {symbol, id } = selectedCoins.find((item)=>item.id===coinId)
useEffect(()=>{ useEffect(()=>{
@ -52,14 +57,55 @@ const CoinDetailsScreen = ({navigation}:CoinDetailsScreenProps) => {
} }
const _onActionPress = (transferType:string) => {
let balance = 0;
let fundType = symbol;
if (
(transferType === 'transfer_token' || transferType === 'purchase_estm') &&
coinId === COIN_IDS.HIVE
) {
balance = Math.round(coinData.balance * 1000) / 1000;
}
if (
(transferType === 'transfer_token' ||
transferType === 'convert' ||
transferType === 'purchase_estm') &&
coinId === COIN_IDS.HBD
) {
balance = Math.round(coinData.balance * 1000) / 1000;
}
if (transferType === 'withdraw_hive' && coinId === COIN_IDS.HIVE) {
balance = Math.round(coinData.savings * 1000) / 1000;
}
if (transferType === 'withdraw_hbd' && coinId === COIN_IDS.HBD) {
balance = Math.round(coinData.savings * 1000) / 1000;
}
if (isPinCodeOpen) {
dispatch(
openPinCodeModal({
navigateTo: ROUTES.SCREENS.TRANSFER,
navigateParams: { transferType, fundType, balance, tokenAddress },
}),
);
} else {
navigate({
routeName: ROUTES.SCREENS.TRANSFER,
params: { transferType, fundType, balance, tokenAddress },
});
}
}
const _renderHeaderComponent = ( const _renderHeaderComponent = (
<> <>
<CoinSummary {...{ <CoinSummary
id, id={coinId}
coinSymbol:symbol, coinSymbol={symbol}
coinData, coinData={coinData}
}} /> onActionPress={_onActionPress}
/>
<Text style={styles.textActivities}>Activities</Text> <Text style={styles.textActivities}>Activities</Text>
</> </>
) )