From bebf1e53167f6a3d84d213d00a1d77c9ef0d9134 Mon Sep 17 00:00:00 2001 From: Imamah-Zafar <88320460+Imamah-Zafar@users.noreply.github.com> Date: Tue, 15 Nov 2022 14:28:53 +0500 Subject: [PATCH 1/2] Add stacking screen --- src/app/components/tabBar/index.tsx | 2 +- src/app/hooks/useStackingData.tsx | 58 ++++++++++ src/app/routes/index.tsx | 5 + src/app/screens/home/index.tsx | 8 +- src/app/screens/stacking/index.tsx | 63 ++++++++++ .../stacking/stackingProgress/index.tsx | 36 ++++++ .../stackingProgress/stackingStatusTile.tsx | 106 +++++++++++++++++ .../screens/stacking/startStacking/index.tsx | 109 ++++++++++++++++++ .../stacking/startStacking/stackInfoTile.tsx | 46 ++++++++ .../stores/wallet/actions/actionCreators.ts | 21 +++- src/app/stores/wallet/actions/types.ts | 24 +++- src/app/stores/wallet/saga.ts | 9 +- src/app/stores/wallet/walletReducer.ts | 19 ++- src/app/utils/constants.ts | 1 + src/assets/img/stacking/token_ticker.svg | 5 + src/locales/en.json | 16 +++ 16 files changed, 507 insertions(+), 21 deletions(-) create mode 100644 src/app/hooks/useStackingData.tsx create mode 100644 src/app/screens/stacking/index.tsx create mode 100644 src/app/screens/stacking/stackingProgress/index.tsx create mode 100644 src/app/screens/stacking/stackingProgress/stackingStatusTile.tsx create mode 100644 src/app/screens/stacking/startStacking/index.tsx create mode 100644 src/app/screens/stacking/startStacking/stackInfoTile.tsx create mode 100644 src/assets/img/stacking/token_ticker.svg diff --git a/src/app/components/tabBar/index.tsx b/src/app/components/tabBar/index.tsx index 92516b7f7..08c08fe4d 100644 --- a/src/app/components/tabBar/index.tsx +++ b/src/app/components/tabBar/index.tsx @@ -42,7 +42,7 @@ function BottomTabBar({ tab }:Props) { }; const handleStackingButtonClick = () => { - + if (tab !== 'stacking') { navigate('/stacking'); } }; const handleSettingButtonClick = () => { diff --git a/src/app/hooks/useStackingData.tsx b/src/app/hooks/useStackingData.tsx new file mode 100644 index 000000000..f30f0dacb --- /dev/null +++ b/src/app/hooks/useStackingData.tsx @@ -0,0 +1,58 @@ +import { useQueries } from '@tanstack/react-query'; +import { useCallback } from 'react'; +import { + fetchDelegationState, fetchPoolStackerInfo, fetchStackingPoolInfo, getStacksInfo, StackingData, +} from '@secretkeylabs/xverse-core'; +import useWalletSelector from './useWalletSelector'; + +const useStackingData = () => { + const { stxAddress, network } = useWalletSelector(); + + const results = useQueries({ + queries: [ + { + queryKey: ['stacking-core-info', network], + queryFn: () => getStacksInfo(network.address), + }, + { + queryKey: ['stacking-delegation-state', stxAddress, network], + queryFn: () => fetchDelegationState(stxAddress, network), + }, + { + queryKey: ['stacking-pool-info'], + queryFn: () => fetchStackingPoolInfo(), + }, + { + queryKey: ['pool-stacker-info', stxAddress], + queryFn: () => fetchPoolStackerInfo(stxAddress), + }, + ], + }); + + const coreInfoData = results[0].data; + const delegationStateData = results[1].data; + const poolInfoData = results[2].data; + const stackerInfoData = results[3].data; + + const isStackingLoading = results.some((result) => result.isLoading); + const stackingError = results.find(({ error }) => error != null)?.error; + const refetchStackingData = useCallback(() => { + results.forEach((result) => result.refetch()); + }, [results]); + + const stackingData: StackingData = { + poolInfo: poolInfoData, + delegationInfo: delegationStateData!, + coreInfo: coreInfoData!, + stackerInfo: stackerInfoData, + }; + + return { + isStackingLoading, + stackingError, + stackingData, + refetchStackingData, + }; +}; + +export default useStackingData; diff --git a/src/app/routes/index.tsx b/src/app/routes/index.tsx index f5eb54e64..7904e6f38 100644 --- a/src/app/routes/index.tsx +++ b/src/app/routes/index.tsx @@ -20,6 +20,7 @@ import Login from '@screens/login'; import RestoreWallet from '@screens/restoreWallet'; import ForgotPassword from '@screens/forgotPassword'; import BackupWalletSteps from '@screens/backupWalletSteps'; +import Stacking from '@screens/stacking'; const router = createHashRouter([ { @@ -106,6 +107,10 @@ const router = createHashRouter([ path: 'backupWalletSteps', element: , }, + { + path: 'stacking', + element: , + }, ], }, ]); diff --git a/src/app/screens/home/index.tsx b/src/app/screens/home/index.tsx index 87d663a85..b32eae4dd 100644 --- a/src/app/screens/home/index.tsx +++ b/src/app/screens/home/index.tsx @@ -4,7 +4,7 @@ import { useCallback, useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import styled from 'styled-components'; import { fetchAppInfo, getBnsName } from '@secretkeylabs/xverse-core/api'; -import { FeesMultipliers, FungibleToken, SettingsNetwork } from '@secretkeylabs/xverse-core/types'; +import { FeesMultipliers, FungibleToken } from '@secretkeylabs/xverse-core/types'; import ListDashes from '@assets/img/dashboard/list_dashes.svg'; import CreditCard from '@assets/img/dashboard/credit_card.svg'; import ArrowDownLeft from '@assets/img/dashboard/arrow_down_left.svg'; @@ -28,7 +28,6 @@ import BottomBar from '@components/tabBar'; import { StoreState } from '@stores/index'; import { Account } from '@stores/wallet/actions/types'; import Seperator from '@components/seperator'; -import { initialNetworksList } from '@utils/constants'; import BalanceCard from './balanceCard'; const Container = styled.div` @@ -110,8 +109,7 @@ function Home(): JSX.Element { }; const fetchAccount = async () => { - const selectedNetwork: SettingsNetwork = network === 'Mainnet' ? initialNetworksList[0] : initialNetworksList[1]; - const bnsName = await getBnsName(stxAddress, selectedNetwork); + const bnsName = await getBnsName(stxAddress, network); if (accountsList.length === 0) { const accounts: Account[] = [ { @@ -139,7 +137,7 @@ function Home(): JSX.Element { fetchFeeMultiplierData(); dispatch(fetchRatesAction(fiatCurrency)); dispatch(fetchStxWalletDataRequestAction(stxAddress, network, fiatCurrency, stxBtcRate)); - dispatch(fetchBtcWalletDataRequestAction(btcAddress, network, stxBtcRate, btcFiatRate)); + dispatch(fetchBtcWalletDataRequestAction(btcAddress, network.type, stxBtcRate, btcFiatRate)); dispatch(fetchCoinDataRequestAction(stxAddress, network, fiatCurrency, coinsList)); } }, []); diff --git a/src/app/screens/stacking/index.tsx b/src/app/screens/stacking/index.tsx new file mode 100644 index 000000000..fbbc18e17 --- /dev/null +++ b/src/app/screens/stacking/index.tsx @@ -0,0 +1,63 @@ +import { useNavigate } from 'react-router-dom'; +import { Ring } from 'react-spinners-css'; +import { useEffect, useState } from 'react'; +import styled from 'styled-components'; +import useStackingData from '@hooks/useStackingData'; +import useWalletSelector from '@hooks/useWalletSelector'; +import AccountRow from '@components/accountRow'; +import BottomBar from '@components/tabBar'; +import StackingProgress from './stackingProgress'; +import StartStacking from './startStacking'; + +const SelectedAccountContainer = styled.div((props) => ({ + marginLeft: props.theme.spacing(8), + marginRight: props.theme.spacing(8), +})); + +const LoaderContainer = styled.div((props) => ({ + display: 'flex', + flex: 1, + justifyContent: 'center', + alignItems: 'center', + marginTop: props.theme.spacing(12), +})); + +function Stacking() { + const { selectedAccount } = useWalletSelector(); + const { isStackingLoading, stackingData } = useStackingData(); + const navigate = useNavigate(); + const [isStacking, setIsStacking] = useState(false); + const handleAccountSelect = () => { + navigate('/account-list'); + }; + + useEffect(() => { + if (stackingData) { + if (stackingData?.stackerInfo?.stacked || stackingData?.delegationInfo?.delegated) { + setIsStacking(true); + } + } + }, [stackingData]); + + const showStatus = !isStackingLoading && ( + isStacking ? : + ); + + return ( + <> + + + + {isStackingLoading && ( + + + + ) } + {showStatus} + + + + ); +} + +export default Stacking; diff --git a/src/app/screens/stacking/stackingProgress/index.tsx b/src/app/screens/stacking/stackingProgress/index.tsx new file mode 100644 index 000000000..57139b10c --- /dev/null +++ b/src/app/screens/stacking/stackingProgress/index.tsx @@ -0,0 +1,36 @@ +import { useTranslation } from 'react-i18next'; +import styled from 'styled-components'; +import StackingStatusTile from './stackingStatusTile'; + +const Container = styled.div((props) => ({ + display: 'flex', + flex: 1, + flexDirection: 'column', + margin: props.theme.spacing(8), + borderTop: `1px solid ${props.theme.colors.background.elevation3}`, +})); + +const TitleText = styled.h1((props) => ({ + ...props.theme.headline_s, + marginTop: props.theme.spacing(16), +})); + +const StackingDescriptionText = styled.h1((props) => ({ + ...props.theme.body_m, + marginTop: props.theme.spacing(4), + marginBottom: props.theme.spacing(18), + color: props.theme.colors.white['200'], +})); +function StackingProgress() { + const { t } = useTranslation('translation', { keyPrefix: 'STACKING_SCREEN' }); + + return ( + + {t('STACK_FOR_REWARD')} + {t('XVERSE_POOL')} + + + ); +} + +export default StackingProgress; diff --git a/src/app/screens/stacking/stackingProgress/stackingStatusTile.tsx b/src/app/screens/stacking/stackingProgress/stackingStatusTile.tsx new file mode 100644 index 000000000..a8e3752c8 --- /dev/null +++ b/src/app/screens/stacking/stackingProgress/stackingStatusTile.tsx @@ -0,0 +1,106 @@ +import styled from 'styled-components'; +import TokenTicker from '@assets/img/stacking/token_ticker.svg'; +import { useTranslation } from 'react-i18next'; +import useStackingData from '@hooks/useStackingData'; +import { StackingState } from '@secretkeylabs/xverse-core/stacking'; +import { useEffect, useState } from 'react'; +import { XVERSE_WEB_POOL_URL } from '@utils/constants'; + +const Container = styled.button((props) => ({ + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + background: props.theme.colors.background.elevation1, + borderRadius: props.theme.radius(2), + padding: props.theme.spacing(9), +})); + +const TextContainer = styled.div({ + display: 'flex', + flexDirection: 'row', + flex: 1, +}); + +const StatusContainer = styled.div((props) => ({ + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + background: 'rgba(81, 214, 166, 0.15)', + borderRadius: props.theme.radius(7), + paddingLeft: props.theme.spacing(6), + paddingRight: props.theme.spacing(6), + paddingTop: props.theme.spacing(2), + paddingBottom: props.theme.spacing(2), +})); + +const Dot = styled.div((props) => ({ + width: 7, + height: 7, + borderRadius: props.theme.radius(9), + marginRight: props.theme.spacing(4), + background: props.theme.colors.feedback.success, +})); + +const ColumnContainer = styled.div((props) => ({ + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', + marginLeft: props.theme.spacing(6), +})); + +const BoldText = styled.h1((props) => ({ + ...props.theme.body_bold_m, + color: props.theme.colors.white['0'], +})); + +const SubText = styled.h1((props) => ({ + ...props.theme.body_xs, + color: props.theme.colors.white['400'], +})); + +const StatusText = styled.h1((props) => ({ + ...props.theme.body_xs, + fontWeight: 500, + color: props.theme.colors.white['0'], +})); + +function StackingStatusTile() { + const { t } = useTranslation('translation', { keyPrefix: 'STACKING_SCREEN' }); + const { stackingData } = useStackingData(); + const [status, setStatus] = useState('Pending'); + + useEffect(() => { + if (stackingData) { + if (!stackingData?.stackerInfo?.stacked && stackingData?.delegationInfo?.delegated) { + setStatus('Delegated'); + } else if (stackingData?.stackerInfo?.stacked) { setStatus('Stacking'); } + } + }, [stackingData]); + + const handleOnClick = () => { + window.open(XVERSE_WEB_POOL_URL); + }; + + return ( + + + Ticker + + {t('STACK_STX')} + {t('EARN_BTC')} + + + + + + + {status === 'Stacking' ? t('IN_PROGRESS') : t('DELEGATED')} + + + + ); +} + +export default StackingStatusTile; diff --git a/src/app/screens/stacking/startStacking/index.tsx b/src/app/screens/stacking/startStacking/index.tsx new file mode 100644 index 000000000..798f638bd --- /dev/null +++ b/src/app/screens/stacking/startStacking/index.tsx @@ -0,0 +1,109 @@ +import styled, { useTheme } from 'styled-components'; +import { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { microstacksToStx } from '@secretkeylabs/xverse-core'; +import { Pool } from '@secretkeylabs/xverse-core/types'; +import BigNumber from 'bignumber.js'; +import ArrowSquareOut from '@assets/img/send/arrow_square_out.svg'; +import ActionButton from '@components/button'; +import useStackingData from '@hooks/useStackingData'; +import { XVERSE_WEB_POOL_URL } from '@utils/constants'; +import StackingInfoTile from './stackInfoTile'; + +const Container = styled.div((props) => ({ + margin: props.theme.spacing(8), + borderBottom: `1px solid ${props.theme.colors.background.elevation3}`, + borderTop: `1px solid ${props.theme.colors.background.elevation3}`, +})); + +const StackingInfoContainer = styled.div((props) => ({ + marginLeft: props.theme.spacing(8), + marginRight: props.theme.spacing(30), + display: 'flex', + flexDirection: 'column', + flex: 1, +})); + +const ButtonContainer = styled.div((props) => ({ + margin: props.theme.spacing(8), + +})); + +const RowContainer = styled.div((props) => ({ + marginTop: props.theme.spacing(12), + display: 'flex', + flexDirection: 'row', + flex: 1, + justifyContent: 'space-between', +})); + +const TitleText = styled.h1((props) => ({ + ...props.theme.headline_s, + marginTop: props.theme.spacing(16), +})); + +const StackingDescriptionText = styled.h1((props) => ({ + ...props.theme.body_m, + marginTop: props.theme.spacing(4), + marginBottom: props.theme.spacing(12), + color: props.theme.colors.white['200'], +})); + +function StartStacking() { + const { t } = useTranslation('translation', { keyPrefix: 'STACKING_SCREEN' }); + const [poolAvailable, setPoolAvailable] = useState(false); + const { stackingData } = useStackingData(); + + const theme = useTheme(); + const [pool, setPool] = useState(undefined); + + useEffect(() => { + if (stackingData) { + if (stackingData?.poolInfo?.pools?.length! > 0) { + const pools = stackingData?.poolInfo?.pools!; + setPool(pools[0]); + setPoolAvailable(true); + } + } + }, [stackingData]); + + function getMinimum() { + const min = poolAvailable ? pool!.minimum : 0; + return microstacksToStx(new BigNumber(min)).toString(); + } + + function getCycles() { + const minCycles = poolAvailable ? Math.min(...pool!.available_cycle_durations) : 0; + const maxCycles = poolAvailable ? Math.max(...pool!.available_cycle_durations) : 0; + return `${minCycles}-${maxCycles}`; + } + + const handleOnClick = () => { + window.open(XVERSE_WEB_POOL_URL); + }; + + return ( + <> + + {t('STACK_AND_EARN')} + {t('STACKING_INFO')} + + + + + + + + + + + + + + + + + ); +} + +export default StartStacking; diff --git a/src/app/screens/stacking/startStacking/stackInfoTile.tsx b/src/app/screens/stacking/startStacking/stackInfoTile.tsx new file mode 100644 index 000000000..e71d9f04e --- /dev/null +++ b/src/app/screens/stacking/startStacking/stackInfoTile.tsx @@ -0,0 +1,46 @@ +import styled from 'styled-components'; +import BarLoader from '@components/barLoader'; +import { LoaderSize } from '@utils/constants'; + +const TitleText = styled.h1((props) => ({ + ...props.theme.headline_category_s, + textTransform: 'uppercase', + letterSpacing: '0.02em', + color: props.theme.colors.white['400'], +})); + +const Container = styled.div({ + display: 'flex', + flexDirection: 'column', +}); + +const ValueText = styled.h1((props) => ({ + ...props.theme.body_bold_l, + marginTop: props.theme.spacing(2), + color: props.color ?? props.theme.colors.white['0'], +})); + +const BarLoaderContainer = styled.div((props) => ({ + marginTop: props.theme.spacing(5), +})); + +interface Props { + title: string; + value: string | undefined; + color?:string; +} + +function StackingInfoTile({ title, value, color }: Props) { + return ( + + {title} + {value ? {value} : ( + + + + )} + + ); +} + +export default StackingInfoTile; diff --git a/src/app/stores/wallet/actions/actionCreators.ts b/src/app/stores/wallet/actions/actionCreators.ts index 980e948ab..113e0eaaa 100644 --- a/src/app/stores/wallet/actions/actionCreators.ts +++ b/src/app/stores/wallet/actions/actionCreators.ts @@ -4,6 +4,7 @@ import { FeesMultipliers, FungibleToken, NetworkType, + SettingsNetwork, SupportedCurrency, TransactionData, } from '@secretkeylabs/xverse-core/types'; @@ -63,7 +64,7 @@ export function selectAccount( masterPubKey: string, stxPublicKey: string, btcPublicKey: string, - network: NetworkType, + network: SettingsNetwork, // stackingState: StackingStateData, bnsName?: string, ): actions.SelectAccount { @@ -115,7 +116,7 @@ export function fetchRatesFailAction(error: string): actions.FetchRatesFail { export function fetchStxWalletDataRequestAction( stxAddress: string, - network: NetworkType, + network: SettingsNetwork, fiatCurrency: string, stxBtcRate: BigNumber, ): actions.FetchStxWalletDataRequest { @@ -182,7 +183,7 @@ export function fetchBtcWalletDataFail(): actions.FetchBtcWalletDataFail { export function fetchCoinDataRequestAction( stxAddress: string, - network: NetworkType, + network: SettingsNetwork, fiatCurrency: string, coinsList: FungibleToken[] | null, ): actions.FetchCoinDataRequest { @@ -221,3 +222,17 @@ export function FetchUpdatedVisibleCoinListAction( coinsList, }; } + +export function ChangeFiatCurrencyAction(fiatCurrency: SupportedCurrency): actions.ChangeFiatCurrency { + return { + type: actions.ChangeFiatCurrencyKey, + fiatCurrency, + }; +} + +export function ChangeNetworkAction(network: SettingsNetwork): actions.ChangeNetwork { + return { + type: actions.ChangeNetworkKey, + network, + }; +} diff --git a/src/app/stores/wallet/actions/types.ts b/src/app/stores/wallet/actions/types.ts index 8e0eaeabf..0631c733a 100644 --- a/src/app/stores/wallet/actions/types.ts +++ b/src/app/stores/wallet/actions/types.ts @@ -4,6 +4,7 @@ import { FeesMultipliers, FungibleToken, NetworkType, + SettingsNetwork, SupportedCurrency, TransactionData, } from '@secretkeylabs/xverse-core/types'; @@ -19,6 +20,8 @@ export const StoreEncryptedSeedKey = 'StoreEncryptedSeed'; export const UpdateVisibleCoinListKey = 'UpdateVisibleCoinList'; export const AddAccountKey = 'AddAccount'; export const FetchFeeMultiplierKey = 'FetchFeeMultiplier'; +export const ChangeFiatCurrencyKey = 'ChangeFiatCurrency'; +export const ChangeNetworkKey = 'ChangeNetwork'; export const FetchStxWalletDataRequestKey = 'FetchStxWalletDataRequest'; export const FetchStxWalletDataSuccessKey = 'FetchStxWalletDataSuccess'; @@ -54,7 +57,7 @@ export interface WalletState { btcPublicKey: string; accountsList: Account[]; selectedAccount: Account | null; - network: NetworkType; + network: SettingsNetwork; seedPhrase: string; encryptedSeed: string; loadingWalletData: boolean; @@ -128,7 +131,7 @@ export interface SelectAccount { stxPublicKey: string; btcPublicKey: string; bnsName?: string; - network: NetworkType; + network: SettingsNetwork; // stackingState: StackingStateData; } @@ -151,7 +154,7 @@ export interface FetchRatesFail { export interface FetchStxWalletDataRequest { type: typeof FetchStxWalletDataRequestKey; stxAddress: string; - network: NetworkType; + network: SettingsNetwork; fiatCurrency: string; stxBtcRate: BigNumber; } @@ -190,7 +193,7 @@ export interface FetchBtcWalletDataFail { export interface FetchCoinDataRequest { type: typeof FetchCoinDataRequestKey; stxAddress: string; - network: NetworkType; + network: SettingsNetwork; fiatCurrency: string; coinsList: FungibleToken[] | null; } @@ -210,6 +213,15 @@ export interface UpdateVisibleCoinList { coinsList: FungibleToken[]; } +export interface ChangeFiatCurrency { + type: typeof ChangeFiatCurrencyKey; + fiatCurrency: SupportedCurrency; +} +export interface ChangeNetwork { + type: typeof ChangeNetworkKey; + network: SettingsNetwork; +} + export type WalletActions = | SetWallet | ResetWallet @@ -232,4 +244,6 @@ export type WalletActions = | FetchCoinDataRequest | FetchCoinDataSuccess | FetchCoinDataFailure - | UpdateVisibleCoinList; + | UpdateVisibleCoinList + | ChangeFiatCurrency + | ChangeNetwork; diff --git a/src/app/stores/wallet/saga.ts b/src/app/stores/wallet/saga.ts index bfb26e9d1..9f7b12881 100644 --- a/src/app/stores/wallet/saga.ts +++ b/src/app/stores/wallet/saga.ts @@ -7,11 +7,10 @@ import { getCoinsInfo, getFtData, } from '@secretkeylabs/xverse-core/api'; -import { initialNetworksList, PAGINATION_LIMIT } from '@utils/constants'; +import { PAGINATION_LIMIT } from '@utils/constants'; import BigNumber from 'bignumber.js'; import { BtcAddressData, - SettingsNetwork, StxAddressData, FungibleToken, CoinsResponse, @@ -51,10 +50,9 @@ function* fetchRates(action: FetchRates) { function* fetchStxWalletData(action: FetchStxWalletDataRequest) { try { - const selectedNetwork: SettingsNetwork = action.network === 'Mainnet' ? initialNetworksList[0] : initialNetworksList[1]; const stxData: StxAddressData = yield fetchStxAddressData( action.stxAddress, - selectedNetwork, + action.network, 0, PAGINATION_LIMIT, ); @@ -93,11 +91,10 @@ function* fetchBtcWalletData(action: FetchBtcWalletDataRequest) { function* fetchCoinData(action: FetchCoinDataRequest) { try { - const selectedNetwork: SettingsNetwork = action.network === 'Mainnet' ? initialNetworksList[0] : initialNetworksList[1]; const fungibleTokenList: Array = yield call( getFtData, action.stxAddress, - selectedNetwork, + action.network, ); const visibleCoins: FungibleToken[] | null = action.coinsList; if (visibleCoins) { diff --git a/src/app/stores/wallet/walletReducer.ts b/src/app/stores/wallet/walletReducer.ts index 14abefd07..557800b1e 100644 --- a/src/app/stores/wallet/walletReducer.ts +++ b/src/app/stores/wallet/walletReducer.ts @@ -22,6 +22,8 @@ import { AddAccountKey, UpdateVisibleCoinListKey, FetchFeeMultiplierKey, + ChangeFiatCurrencyKey, + ChangeNetworkKey, } from './actions/types'; const initialWalletState: WalletState = { @@ -30,7 +32,10 @@ const initialWalletState: WalletState = { masterPubKey: '', stxPublicKey: '', btcPublicKey: '', - network: 'Mainnet', + network: { + type: 'Mainnet', + address: 'https://stacks-node-api.mainnet.stacks.co', + }, accountsList: [], selectedAccount: null, seedPhrase: '', @@ -174,6 +179,18 @@ const walletReducer = ( ...state, feeMultipliers: action.feeMultipliers, }; + case ChangeFiatCurrencyKey: + return { + ...state, + fiatCurrency: action.fiatCurrency, + }; + case ChangeNetworkKey: + return { + ...state, + network: action.network, + selectedAccount: null, + accountsList: [], + }; default: return state; } diff --git a/src/app/utils/constants.ts b/src/app/utils/constants.ts index d6020f249..645f501b8 100644 --- a/src/app/utils/constants.ts +++ b/src/app/utils/constants.ts @@ -7,6 +7,7 @@ export const TERMS_LINK = 'https://xverse.app/terms'; export const PRIVACY_POLICY_LINK = 'https://xverse.app/privacy'; export const BTC_TRANSACTION_STATUS_URL = 'https://www.blockchain.com/btc/tx/'; export const TRANSACTION_STATUS_URL = 'https://explorer.stacks.co/txid/'; +export const XVERSE_WEB_POOL_URL = 'https://pool.xverse.app'; export type CurrencyTypes = 'STX' | 'BTC' | 'FT' | 'NFT'; export enum LoaderSize { diff --git a/src/assets/img/stacking/token_ticker.svg b/src/assets/img/stacking/token_ticker.svg new file mode 100644 index 000000000..ee81043f2 --- /dev/null +++ b/src/assets/img/stacking/token_ticker.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/locales/en.json b/src/locales/en.json index 28f8b85be..2e8f590f6 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -161,5 +161,21 @@ "SEED_INPUT_LABEL": "Selected Words", "SEED_INPUT_ERROR": "Invalid seed phrase, please try again", "CONTINUE_BUTTON": "Continue" + }, + "STACKING_SCREEN": { + "STACK_AND_EARN": "Stack STX, earn BTC", + "STACKING_INFO": "Pool your STX with other stackers to earn real BTC with low minimums. Rewards are distributed after the end of every 2-week cycle.", + "APY": "Estimated APY", + "POOL_FEE": "Pool fee", + "MINIMUM_AMOUNT": "Minimum amount", + "REWARD_CYCLES": "Reward Cycles", + "START_STACKNG": "Start stacking", + "STACK_FOR_REWARD": "Stack your coins to earn rewards", + "XVERSE_POOL": "Xverse delegated pooling allows everyone to participate in Stacking and earn rewards. ", + "STACK_STX": "Stack STX", + "EARN_BTC":"Earn BTC", + "PENDING_DELEGATION": "Pending delegation", + "DELEGATED": "Delegated", + "IN_PROGRESS": "In progress" } } \ No newline at end of file From 21a2a5f0d813487bb34592bf92f5f0972c31b9cc Mon Sep 17 00:00:00 2001 From: Imamah-Zafar <88320460+Imamah-Zafar@users.noreply.github.com> Date: Wed, 16 Nov 2022 22:10:10 +0500 Subject: [PATCH 2/2] fix import path --- src/app/screens/sendStx/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/screens/sendStx/index.tsx b/src/app/screens/sendStx/index.tsx index 04adc38fc..bc93dc978 100644 --- a/src/app/screens/sendStx/index.tsx +++ b/src/app/screens/sendStx/index.tsx @@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; import { useNavigate } from 'react-router-dom'; -import { generateUnsignedStxTokenTransferTransaction } from '@secretkeylabs/xverse-core/api'; +import { generateUnsignedStxTokenTransferTransaction } from '@secretkeylabs/xverse-core/transactions'; import { microstacksToStx, stxToMicrostacks } from '@secretkeylabs/xverse-core/currency'; import { StacksTransaction } from '@secretkeylabs/xverse-core/types'; import { validateStxAddress } from '@secretkeylabs/xverse-core/wallet';