Changes for the New deposit/withdrawal page notion task

web/src/actions/appActions.js

@@ -98,6 +98,20 @@ export const SET_ADMIN_WALLET_SORT = 'SET_ADMIN_WALLET_SORT';
 export const SET_ADMIN_DIGITAL_ASSETS_SORT = 'SET_ADMIN_DIGITAL_ASSETS_SORT';
 export const SET_SELECTED_ACCOUNT = 'SET_SELECTED_ACCOUNT';
 export const SET_SELECTED_STEP = 'SET_SELECTED_STEP';
+export const SET_WITHDRAW_CURRENCY = 'SET_WITHDRAW_CURRENCY';
+export const SET_WITHDRAW_NETWORK = 'SET_WITHDRAW_NETWORK';
+export const SET_WITHDRAW_NETWORK_OPTIONS = 'SET_WITHDRAW_NETWORK_OPTIONS';
+export const SET_WITHDRAW_ADDRESS = 'SET_WITHDRAW_ADDRESS';
+export const SET_WITHDRAW_AMOUNT = 'SET_WITHDRAW_AMOUNT';
+export const SET_WITHDRAW_FEE = 'SET_WITHDRAW_FEE';
+export const SET_DEPOSIT_AND_WITHDRAW = 'SET_DEPOSIT_AND_WITHDRAW';
+export const SET_VALID_ADDRESS = 'SET_VALID_ADDRESS';
+export const SET_DEPOSIT_CURRENCY = 'SET_DEPOSIT_CURRENCY';
+export const SET_DEPOSIT_NETWORK = 'SET_DEPOSIT_NETWORK';
+export const SET_DEPOSIT_NETWORK_OPTIONS = 'SET_DEPOSIT_OPTIONS';
+export const SET_SELECTED_METHOD = 'SET_SELECTED_METHOD';
+export const SET_RECEIVER_EMAIL = 'SET_RECEIVER_EMAIL';
+export const SET_WITHDRAW_OTIONAL_TAG = 'SET_WITHDRAW_OTIONAL_TAG';
 
 export const SORT = {
 	VOL: 'volume',
@@ -675,3 +689,73 @@ export const getWithdrawalMax = (currency, network) => {
 		`/user/withdrawal/max?currency=${currency}&network=${network}`
 	);
 };
+
+export const withdrawCurrency = (currency) => ({
+	type: SET_WITHDRAW_CURRENCY,
+	payload: currency,
+});
+
+export const withdrawNetwork = (network) => ({
+	type: SET_WITHDRAW_NETWORK,
+	payload: network,
+});
+
+export const withdrawNetworkOptions = (networkOptions) => ({
+	type: SET_WITHDRAW_NETWORK_OPTIONS,
+	payload: networkOptions,
+});
+
+export const withdrawAddress = (address) => ({
+	type: SET_WITHDRAW_ADDRESS,
+	payload: address,
+});
+
+export const withdrawAmount = (amount) => ({
+	type: SET_WITHDRAW_AMOUNT,
+	payload: amount,
+});
+
+export const setFee = (amount) => ({
+	type: SET_WITHDRAW_FEE,
+	payload: amount,
+});
+
+export const setDepositAndWithdraw = (val) => ({
+	type: SET_DEPOSIT_AND_WITHDRAW,
+	payload: val,
+});
+
+export const setIsValidAdress = (val) => ({
+	type: SET_VALID_ADDRESS,
+	payload: val,
+});
+
+export const depositCurrency = (currency) => ({
+	type: SET_DEPOSIT_CURRENCY,
+	payload: currency,
+});
+
+export const depositNetwork = (network) => ({
+	type: SET_DEPOSIT_NETWORK,
+	payload: network,
+});
+
+export const depositNetworkOptions = (networkOptions) => ({
+	type: SET_DEPOSIT_NETWORK_OPTIONS,
+	payload: networkOptions,
+});
+
+export const setSelectedMethod = (method) => ({
+	type: SET_SELECTED_METHOD,
+	payload: method,
+});
+
+export const setReceiverEmail = (email) => ({
+	type: SET_RECEIVER_EMAIL,
+	payload: email,
+});
+
+export const setWithdrawOptionaltag = (tag) => ({
+	type: SET_WITHDRAW_OTIONAL_TAG,
+	payload: tag,
+});

web/src/actions/walletActions.js

@@ -461,3 +461,10 @@ export const getEstimatedDust = (assets = []) => {
 	const data = { assets };
 	return axios.post(ENDPOINTS.DUST_ESTIMATION, data);
 };
+
+export const activeTabFromWallet = (tab) => ({
+	type: 'ACTIVE_TAB_FROM_WALLET',
+	payload: {
+		tab,
+	},
+});

web/src/components/ActionNotification/index.js

@@ -39,7 +39,9 @@ const ActionNotification = ({
 	showActionText,
 	hideActionText = false,
 	disable = false,
+	isFromWallet = false,
 }) => {
+	const isVisibale = isFromWallet ? isFromWallet : !isMobile;
 	// This is to prevent action when edit string or upload icons are clicked
 	const onActionClick = ({ target: { dataset = {} } }) => {
 		const { stringId, iconId } = dataset;
@@ -69,7 +71,7 @@ const ActionNotification = ({
 			)}
 			onClick={onActionClick}
 		>
-			{!hideActionText && (showActionText || !isMobile) && (
+			{!hideActionText && (showActionText || isVisibale) && (
 				<div
 					className={classnames(
 						'action_notification-text',

web/src/components/AppBar/_AppBar.scss

@@ -135,6 +135,22 @@ $app-menu-width: calc(100vw - 40rem);
 				stroke: $base_top-bar-navigation_text-inactive;
 			}
 		}
+
+		.app-bar-deposit-btn {
+			background-color: $link;
+			padding: 2px 10px 0px 10px;
+			border-radius: 3px;
+			cursor: pointer;
+			font-size: 11px;
+			.margin-aligner {
+				margin-bottom: unset;
+				margin-right: unset;
+				svg {
+					width: 15px !important;
+					height: 15px !important;
+				}
+			}
+		}
 	}
 
 	.app_bar-pair-overflow {
@@ -1126,7 +1142,7 @@ $app-menu-width: calc(100vw - 40rem);
 		// }
 
 		.app-menu-bar-content {
-			width: 12rem;
+			width: 10rem;
 		}
 	}
 	.app-bar-add-tab-menu {

web/src/components/AppBar/index.js

@@ -8,7 +8,12 @@ import { DEFAULT_URL } from 'config/constants';
 import MenuList from './MenuList';
 import { MobileBarWrapper, EditWrapper, ButtonLink, Image } from 'components';
 import { isLoggedIn } from 'utils/token';
-import { getTickers, changeTheme, setLanguage } from 'actions/appActions';
+import {
+	getTickers,
+	changeTheme,
+	setLanguage,
+	setDepositAndWithdraw,
+} from 'actions/appActions';
 import { updateUserSettings, setUserData } from 'actions/userAction';
 import ThemeSwitcher from './ThemeSwitcher';
 import withEdit from 'components/EditProvider/withEdit';
@@ -216,6 +221,12 @@ class AppBar extends Component {
 		);
 	};
 
+	onHandleDeposit = () => {
+		const { setDepositAndWithdraw, router } = this.props;
+		setDepositAndWithdraw(true);
+		router.push('/wallet/deposit');
+	};
+
 	render() {
 		const {
 			user,
@@ -229,6 +240,7 @@ class AppBar extends Component {
 			isHome,
 			activeLanguage,
 			changeLanguage,
+			icons,
 		} = this.props;
 		const { securityPending, verificationPending, walletPending } = this.state;
 
@@ -304,6 +316,17 @@ class AppBar extends Component {
 						id="trade-nav-container"
 						className="d-flex app-bar-account justify-content-end"
 					>
+						<div
+							className="app-bar-deposit-btn d-flex"
+							onClick={this.onHandleDeposit}
+						>
+							<Image
+								iconId={'DEPOSIT_TITLE'}
+								icon={icons['DEPOSIT_TITLE']}
+								wrapperClassName="form_currency-ball margin-aligner"
+							/>
+							<span className="ml-2">{STRINGS['ACCORDIAN.DEPOSIT_LABEL']}</span>
+						</div>
 						<div className="d-flex app_bar-quicktrade-container">
 							<LanguageSwitcher
 								selected={activeLanguage}
@@ -352,6 +375,7 @@ const mapDispatchToProps = (dispatch) => ({
 	changeTheme: bindActionCreators(changeTheme, dispatch),
 	setUserData: bindActionCreators(setUserData, dispatch),
 	changeLanguage: bindActionCreators(setLanguage, dispatch),
+	setDepositAndWithdraw: bindActionCreators(setDepositAndWithdraw, dispatch),
 });
 
 export default connect(

web/src/components/Form/validations.js

@@ -37,7 +37,7 @@ export const passwordsMatch = (value, allValues) =>
 export const username = (value = '') =>
 	!usernameRegEx.test(value) ? STRINGS['INVALID_USERNAME'] : undefined;
 
-export const validAddress = (symbol = '', message, network) => {
+export const validAddress = (symbol = '', message, network, key = '') => {
 	let currency = network ? network.toUpperCase() : symbol.toUpperCase();
 	return (address) => {
 		let valid;
@@ -48,7 +48,10 @@ export const validAddress = (symbol = '', message, network) => {
 
 			const supported = WAValidator.findCurrency(currency);
 			if (supported) {
-				valid = WAValidator.validate(address, currency);
+				valid = WAValidator.validate(
+					address ? address : (address = key),
+					currency
+				);
 			} else {
 				valid = true;
 			}

web/src/config/icons/dark.js

@@ -301,6 +301,9 @@ const nestedIcons = {
 
 	FOOTERBAR_ASSETS_TRADE: '/assets/images/asset-prices-mobile-tab-01.svg',
 	WALLET_FOOTER: '/assets/images/wallet-mobile-tab-02-01 (1).svg',
+
+	WITHDRAW_TITLE: '/assets/images/withdraw-out-box.svg',
+	DEPOSIT_TITLE: '/assets/images/deposit-box.svg',
 };
 
 const icons = flatten(nestedIcons, options);

web/src/config/icons/static.js

@@ -162,7 +162,7 @@ const icons = {
 	SWITCH_ASSET_FOR_FEES: '/assets/images/switch-asset-for-fees.svg',
 	CLOCK: '/assets/images/clock.svg',
 	QR_CODE_SHOW: '/assets/images/mini-qr-code.svg',
-	QR_CODE_SCAN: '/assets/images/camera-scan.svg',
+	// QR_CODE_SCAN: '/assets/images/camera-scan.svg',
 	CLOUD_BASIC: '/assets/images/Path 4813.svg',
 	CLOUD_CRYPTO: '/assets/images/Path 4815.svg',
 	CLOUD_FIAT: '/assets/images/Group 5179.svg',

web/src/config/lang/en.json

@@ -1060,6 +1060,7 @@
 	"QUOTE_SUCCESS_REVIEW_MESSAGE": "You have successfully {0} {1} {2}",
 	"COUNTDOWN_ERROR_MESSAGE": "Countdown is finished",
 	"WITHDRAW_PAGE": {
+		"WITHDRAW": "Withdraw",
 		"BANK_TO_WITHDRAW": "Bank to Withdraw to",
 		"MESSAGE_ABOUT_SEND": "You are about to send",
 		"MESSAGE_BTC_WARNING": "Please ensure the accuracy of this address since {0} transfers are irreversible",
@@ -1084,7 +1085,17 @@
 		"WITHDRAWAL_CONFIRM_ADDRESS": "Address",
 		"WITHDRAWAL_CONFIRM_NETWORK": "Network",
 		"WITHDRAWAL_CANCEL_BUTTON": "CLOSE",
-		"WITHDRAWAL_CONFIRM_BUTTON": "CONFIRM WITHDRAWAL"
+		"WITHDRAWAL_CONFIRM_BUTTON": "CONFIRM WITHDRAWAL",
+		"REMOVE_TAG_NOTE_1": "You've made a selection to remove the Tag (also known as memo, Digital ID, Label and Notes)",
+		"REMOVE_TAG_NOTE_2": "Most exchange, wallets and other platforms do require a Tag. {0} {1}",
+		"REMOVE_TAG_NOTE_3": "Please double-check",
+		"REMOVE_TAG_NOTE_4": "that the Tag is in fact required before removing it.",
+		"BACK_BTN": "BACK",
+		"REMOVE_TAG": "YES, REMOVE TAG",
+		"GENERATE_DEPOSIT_TEXT_1": "No deposit address detected",
+		"GENERATE_DEPOSIT_TEXT_2": "Generate one below:",
+		"WITHDRAW_ADDRESS": "Withdrawal address",
+		"WITHDRAW_EMAIL_ADDRESS": "Withdrawal email"
 	},
 	"WALLET_BUTTON_BASE_DEPOSIT": "deposit",
 	"WALLET_BUTTON_BASE_WITHDRAW": "withdraw",
@@ -1704,7 +1715,22 @@
 	"ACCORDIAN": {
 		"ACCORDIAN_ASSETS": "All wallet assets",
 		"ACCORDIAN_INFO": "ASSET INFO PAGE",
-		"ACCORDIAN_HISTORY": "HISTORY"
+		"ACCORDIAN_HISTORY": "HISTORY",
+		"DEPOSIT": "DEPOSIT",
+		"WITHDRAW": "WITHDRAW",
+		"SELECT_ASSET": "Select asset:",
+		"SELECT_NETWORK": "Select network:",
+		"DESTINATION": "Destination:",
+		"AMOUNT": "Amount:",
+		"ESTIMATED": "Estimated Withdrawal value",
+		"TRANSACTION_FEE": "Transaction fee to be added:",
+		"SCAN": "SCAN",
+		"ADDRESS": "address:",
+		"OPTIONAL_TAG": "Tag (optional)",
+		"TAG": "Tag",
+		"DISABLED_DEPOSIT_CONTENT": "The deposit functionality is temporarily unavailable.",
+		"DISABLED_WITHDRAW_CONTENT": "The withdrawal functionality is temporarily unavailable.",
+		"DEPOSIT_LABEL": "Deposit"
 	},
 	"ASYNC_LINK": {
 		"TITLE": "Page not opening automatically?",