add setting option for bring cashback

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<void>,
+  +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<Props & InjectedLayoutProps> {
+  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 (
+        <MenuItem
+          key={option.name}
+          value={option.name}
+          sx={{ height: '60px' }}
+          id={'selectCashbackWallet-' + option.name + '-menuItem'}
+        >
+          <Box sx={{ display: 'flex' }}>
+            <WalletIcon imagePart={option.plate.ImagePart} />
+            <Box sx={{ marginLeft: '8px' }}>
+              <Typography variant="body1" color="ds.text_gray_medium">
+                {option.name}| {option.plate.TextPart}
+              </Typography>
+            </Box>
+          </Box>
+        </MenuItem>
+      );
+    };
+
+    const dialog = this.props.isSubmitting ? (
+      <Dialog title={intl.formatMessage(globalMessages.processingLabel)} closeOnOverlayClick={false}>
+        <VerticalFlexContainer>
+          <LoadingSpinner />
+        </VerticalFlexContainer>
+      </Dialog>
+    ) : null;
+
+    return (
+      <Box
+        sx={{
+          b: '20px',
+          mt: '13px',
+        }}
+        className={componentClassNames}
+      >
+        {dialog}
+        <Typography component="h2" variant="body1" fontWeight={500} mb="16px">
+          {intl.formatMessage(messages.bringCashbackTitle)}
+        </Typography>
+
+        <Box
+          sx={{
+            width: '506px',
+            marginTop: '0px',
+          }}
+        >
+          <Select
+            formControlProps={{ error: !!error }}
+            helperText={error && intl.formatMessage(error, error.values)}
+            error={!!error}
+            {...cashbackWalletId.bind()}
+            onChange={this.props.onSelect}
+            value={currentValue[0]}
+            menuProps={{
+              sx: {
+                '& .MuiMenu-paper': {
+                  maxHeight: '280px',
+                },
+              },
+            }}
+            renderValue={value => (
+              <Stack direction="row">
+                <WalletIcon imagePart={value.plate.ImagePart} />
+                <Typography variant="body1" color="ds.text_gray_medium" mt="2px">
+                  {value.name}| {value.plate.TextPart}
+                </Typography>
+              </Stack>
+            )}
+          >
+            {cardanoWallets.map(option => optionRenderer(option))}
+          </Select>
+          <Typography component="div" variant="caption1" display="inline-block" color="grayscale.700">
+            <FormattedHTMLMessage {...messages.note} />
+          </Typography>
+        </Box>
+      </Box>
+    );
+  }
+}
+
+export default (withLayout(BringCashbackSettings): ComponentType<Props>);
+
+const WalletIcon = ({ imagePart }: {| imagePart: string |}) => {
+  return (
+    <Box
+      sx={{
+        width: `24px`,
+        height: `24px`,
+        borderRadius: `8px`,
+        alignItems: 'center',
+        justifyContent: 'center',
+        '& .identicon': {
+          borderRadius: `8px`,
+        },
+
+        marginRight: '16px',
+      }}
+    >
+      <WalletAccountIcon iconSeed={imagePart} saturationFactor={0} size={8} scalePx={4} />
+    </Box>
+  );
+};

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<StoresAndActionsProps> {
   static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
@@ -64,8 +83,14 @@ export default class GeneralSettingsPage extends Component<StoresAndActionsProps
     await this.props.actions.profile.updateUnitOfAccount.trigger(unitOfAccount);
   };
 
+  onSelectBringCashbackWallet: string => Promise<void> = 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<StoresAndActionsProps
 
     const unitOfAccountValue = profileStore.unitOfAccount.enabled ? profileStore.unitOfAccount.currency : 'ADA';
 
+    const cardanoWallets = [];
+
+    const selectedWalletName = this.props.stores.wallets.selectedWalletName;
+
+    wallets.forEach(wallet => {
+      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 (
       <Box sx={{ pb: profileStore.isRevampTheme ? '50px' : '0px' }}>
         {profileStore.isRevampTheme && (
@@ -106,6 +149,13 @@ export default class GeneralSettingsPage extends Component<StoresAndActionsProps
           currentLocale={profileStore.currentLocale}
           error={profileStore.setProfileLocaleRequest.error}
         />
+        <BringCashbackSettings
+          onSelect={this.onSelectBringCashbackWallet}
+          isSubmitting={false}
+          cardanoWallets={cardanoWallets}
+          currentValue={cardanoWallets.filter(wallet => wallet.isSelected)}
+          error={null}
+        />
         <UnitOfAccountSettings
           onSelect={this.onSelectUnitOfAccount}
           isSubmitting={isSubmittingUnitOfAccount}

packages/yoroi-extension/app/i18n/locales/en-US.json

@@ -358,6 +358,9 @@
   "settings.unitOfAccount.note": "<strong>Note:</strong> 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",