From 7fd63d31b1a368713345de413e9f92176e305d32 Mon Sep 17 00:00:00 2001 From: Sorin Chis Date: Wed, 27 Nov 2024 14:08:04 +0200 Subject: [PATCH] add setting option for bring cashback --- .../general-setting/BringCashbackSettings.js | 190 ++++++++++++++++++ .../categories/GeneralSettingsPage.js | 50 +++++ .../app/i18n/locales/en-US.json | 3 + 3 files changed, 243 insertions(+) create mode 100644 packages/yoroi-extension/app/components/settings/categories/general-setting/BringCashbackSettings.js diff --git a/packages/yoroi-extension/app/components/settings/categories/general-setting/BringCashbackSettings.js b/packages/yoroi-extension/app/components/settings/categories/general-setting/BringCashbackSettings.js new file mode 100644 index 0000000000..bb189bf910 --- /dev/null +++ b/packages/yoroi-extension/app/components/settings/categories/general-setting/BringCashbackSettings.js @@ -0,0 +1,190 @@ +// @flow +import { Component } from 'react'; +import type { Node, ComponentType } from 'react'; +import { observer } from 'mobx-react'; +import classNames from 'classnames'; +import Select from '../../../common/Select'; +import { MenuItem, Typography, Stack } from '@mui/material'; +import { Box } from '@mui/system'; +import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl'; +import ReactToolboxMobxForm from '../../../../utils/ReactToolboxMobxForm'; +import LocalizableError from '../../../../i18n/LocalizableError'; +import styles from './UnitOfAccountSettings.scss'; +import Dialog from '../../../widgets/Dialog'; +import VerticalFlexContainer from '../../../layout/VerticalFlexContainer'; +import LoadingSpinner from '../../../widgets/LoadingSpinner'; +import globalMessages from '../../../../i18n/global-messages'; +import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; +import { withLayout } from '../../../../styles/context/layout'; +import type { InjectedLayoutProps } from '../../../../styles/context/layout'; +import WalletAccountIcon from '../../../topbar/WalletAccountIcon'; + +const messages = defineMessages({ + bringCashbackTitle: { + id: 'settings.cashback.title', + defaultMessage: '!!!Bring cashback wallet', + }, + note: { + id: 'settings.cashback.note', + defaultMessage: + '!!!Your connected wallet is the designated wallet for receiving ADA cashback rewards through Bring and applied to all partner websites. You can switch to a different wallet anytime to ensure your cashback is directed to your preferred wallet or select “None” to decline this service.', + }, + label: { + id: 'settings.cashback.label', + defaultMessage: '!!!Connected Wallet', + }, +}); + +type currentValue = Array<{ + isSelected: boolean, + name: string, + plate: any, + type: string, + walletId: number, + ... +}>; + +type Props = {| + +onSelect: string => Promise, + +isSubmitting: boolean, + +cardanoWallets: any, + +currentValue: currentValue, + +error?: ?LocalizableError, +|}; + +const saturationFactor = { + saturationFactor: 0, + size: 8, + scalePx: 4, + iconSize: 32, + borderRadius: 4, +}; + +@observer +class BringCashbackSettings extends Component { + static defaultProps: {| error: void |} = { + error: undefined, + }; + + static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { + intl: intlShape.isRequired, + }; + + form: ReactToolboxMobxForm = new ReactToolboxMobxForm({ + fields: { + cashbackWalletId: { + label: this.context.intl.formatMessage(messages.label), + }, + }, + }); + + render(): Node { + const { cardanoWallets, error, currentValue } = this.props; + const { intl } = this.context; + const { form } = this; + const cashbackWalletId = form.$('cashbackWalletId'); + const componentClassNames = classNames([styles.component, 'currency']); + + const optionRenderer = option => { + return ( + + + + + + {option.name}| {option.plate.TextPart} + + + + + ); + }; + + const dialog = this.props.isSubmitting ? ( + + + + + + ) : null; + + return ( + + {dialog} + + {intl.formatMessage(messages.bringCashbackTitle)} + + + + + + + + + + ); + } +} + +export default (withLayout(BringCashbackSettings): ComponentType); + +const WalletIcon = ({ imagePart }: {| imagePart: string |}) => { + return ( + + + + ); +}; diff --git a/packages/yoroi-extension/app/containers/settings/categories/GeneralSettingsPage.js b/packages/yoroi-extension/app/containers/settings/categories/GeneralSettingsPage.js index 9a7f6f4fdf..3560a34a9a 100644 --- a/packages/yoroi-extension/app/containers/settings/categories/GeneralSettingsPage.js +++ b/packages/yoroi-extension/app/containers/settings/categories/GeneralSettingsPage.js @@ -8,6 +8,7 @@ import type { StoresAndActionsProps } from '../../../types/injectedProps.types'; import ThemeSettingsBlock from '../../../components/settings/categories/general-setting/ThemeSettingsBlock'; import AboutYoroiSettingsBlock from '../../../components/settings/categories/general-setting/AboutYoroiSettingsBlock'; import UnitOfAccountSettings from '../../../components/settings/categories/general-setting/UnitOfAccountSettings'; +import BringCashbackSettings from '../../../components/settings/categories/general-setting/BringCashbackSettings'; import { ReactComponent as AdaCurrency } from '../../../assets/images/currencies/ADA.inline.svg'; import { unitOfAccountDisabledValue } from '../../../types/unitOfAccountType'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; @@ -50,6 +51,24 @@ const currencyLabels = defineMessages({ }, }); +const getGeneratedWalletIds = (sortedWalletListIdx, currentWalletIdx) => { + let generatedWalletIds; + if (sortedWalletListIdx !== undefined && sortedWalletListIdx.length > 0) { + const newWalletIds = currentWalletIdx.filter(id => { + const index = sortedWalletListIdx.indexOf(id); + if (index === -1) { + return true; + } + return false; + }); + generatedWalletIds = [...sortedWalletListIdx, ...newWalletIds]; + } else { + generatedWalletIds = currentWalletIdx; + } + + return generatedWalletIds; +}; + @observer export default class GeneralSettingsPage extends Component { static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { @@ -64,8 +83,14 @@ export default class GeneralSettingsPage extends Component Promise = async value => { + console.log('CASHBACK Wallet Selected', value); + }; + render(): Node { const { intl } = this.context; + const { wallets } = this.props.stores.wallets; + const profileStore = this.props.stores.profile; const coinPriceStore = this.props.stores.coinPriceStore; @@ -92,6 +117,24 @@ export default class GeneralSettingsPage extends Component { + const rewards = this.props.stores.delegation.getRewardBalanceOrZero(wallet); + + const walletMap = { + walletId: wallet.publicDeriverId, + plate: wallet.plate, + type: wallet.type, + name: wallet.name, + isSelected: wallet.name === selectedWalletName, + }; + + cardanoWallets.push(walletMap); + }); + return ( {profileStore.isRevampTheme && ( @@ -106,6 +149,13 @@ export default class GeneralSettingsPage extends Component + wallet.isSelected)} + error={null} + /> Note: coin price is approximate and may not match the price of any given trading platform. Any transactions based on these price approximates are done at your own risk.", "settings.unitOfAccount.revamp.label": "Select currency", "settings.unitOfAccount.title": "Fiat pairing", + "settings.cashback.title": "Bring cashback wallet", + "settings.cashback.note": "Your connected wallet is the designated wallet for receiving ADA cashback rewards through Bring and applied to all partner websites. You can switch to a different wallet anytime to ensure your cashback is directed to your preferred wallet or select “None” to decline this service.", + "settings.cashback.label": "Connected wallet", "sidebar.assets": "Assets", "sidebar.portfolio": "Portfolio", "sidebar.faq": "Faq",