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 (
+
+
+
+
+ {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';