Merge branch 'develop' into fix/YOEXT-743/settings-radio-btns

Emurgo · Oct 10, 2023 · 75a081b · 75a081b
2 parents 5063cb0 + 80fe675
commit 75a081b
Show file tree

Hide file tree

Showing 15 changed files with 86 additions and 38 deletions.
diff --git a/packages/yoroi-extension/app/components/wallet/assets/NFTDetails.js b/packages/yoroi-extension/app/components/wallet/assets/NFTDetails.js
@@ -144,7 +144,7 @@ function NFTDetails({ nftInfo, network, intl, nextNftId, prevNftId, tab }: Props
   if (nftInfo == null) return null;
 
   return (
-    <Box sx={{ overflowY: 'scroll', height: '100%', p: '24px' }}>
+    <Box sx={{ p: '24px', width: '100%' }}>
       <Box sx={{ display: 'inline-block' }}>
         <Typography
           as={Link}
@@ -176,10 +176,12 @@ function NFTDetails({ nftInfo, network, intl, nextNftId, prevNftId, tab }: Props
           mb: '21px',
           backgroundColor: 'common.white',
           borderRadius: '8px',
-          height: '100%',
         }}
       >
-        <Grid item xs={4}>
+        <Grid
+          item
+          xs={4}
+        >
           <ImageItem
             sx={{
               cursor: nftInfo.image !== null ? 'zoom-in' : 'auto',
@@ -232,13 +234,11 @@ function NFTDetails({ nftInfo, network, intl, nextNftId, prevNftId, tab }: Props
               <Stack direction="row" spacing={1}>
                 <Link
                   to={ROUTES.NFTS.DETAILS.replace(':nftId', prevNftId) + `?tab=${activeTab}`}
-                  onClick={
-                  () => {
+                  onClick={() => {
                     ampli.nftGalleryDetailsNavigation({
                       nft_navigation: 'Previous',
                     });
-                  }
-                }
+                  }}
                 >
                   <IconButton
                     aria-label="Previous"
@@ -249,13 +249,11 @@ function NFTDetails({ nftInfo, network, intl, nextNftId, prevNftId, tab }: Props
                 </Link>
                 <Link
                   to={ROUTES.NFTS.DETAILS.replace(':nftId', nextNftId) + `?tab=${activeTab}`}
-                  onClick={
-                  () => {
+                  onClick={() => {
                     ampli.nftGalleryDetailsNavigation({
                       nft_navigation: 'Next',
                     });
-                  }
-                }
+                  }}
                 >
                   <IconButton aria-label="Next" sx={{ width: '32px' }}>
                     <Chevron />

diff --git a/packages/yoroi-extension/app/components/wallet/restore/RestoreWalletPage.js b/packages/yoroi-extension/app/components/wallet/restore/RestoreWalletPage.js
@@ -184,9 +184,15 @@ function RestoreWalletPage(props: Props & Intl): Node {
       component: (
         <EnterRecoveryPhraseStep
           {...recoveryPhraseStepProps}
-          checkValidPhrase={phrase =>
-            walletData.isValidMnemonic({ mnemonic: phrase, mode: walletData.mode })
-          }
+          checkValidPhrase={phrase => {
+            const isValid = walletData.isValidMnemonic(
+              { mnemonic: phrase, mode: walletData.mode }
+            );
+            ampli.restoreWalletEnterPhraseStepStatus(
+              { recovery_prhase_status: isValid }
+            );
+            return isValid;
+          }}
           openDuplicatedWallet={lastDuplicatedWallet => {
             resetRestoreWalletData();
             walletsActions.setActiveWallet.trigger({ wallet: lastDuplicatedWallet });

diff --git a/packages/yoroi-extension/app/components/wallet/send/WalletSendFormRevamp.js b/packages/yoroi-extension/app/components/wallet/send/WalletSendFormRevamp.js
@@ -538,7 +538,7 @@ export default class WalletSendFormRevamp extends Component<Props, State> {
       case SEND_FORM_STEP.RECEIVER:
         return (
           <div className={styles.receiverStep}>
-            <div className={styles.receiverInput}>
+            <Box pt='10px'>
               <TextField
                 className="send_form_receiver"
                 {...receiverField.bind()}
@@ -553,10 +553,11 @@ export default class WalletSendFormRevamp extends Component<Props, State> {
                   this.state.isReceiverFieldActive
                     ? intl.formatMessage(messages.receiverFieldLabelActive)
                     : intl.formatMessage(messages.receiverFieldLabelInactive)
+
                 }
               />
-            </div>
-            <Box sx={{ position: 'relative' }}>
+            </Box>
+            <Box sx={{ position: 'relative', mt: '24px' }}>
               <MemoTextField
                 onChange={e => this.onUpdateMemo(e.target.value)}
                 helperText={
@@ -579,8 +580,8 @@ export default class WalletSendFormRevamp extends Component<Props, State> {
               />
               <Typography
                 variant="caption1"
-                color={invalidMemo ? 'magenta.500' : 'grey.500'}
-                sx={{ position: 'absolute', bottom: '12px', right: '0' }}
+                color={invalidMemo ? 'magenta.500' : 'grayscale.600'}
+                sx={{ position: 'absolute', bottom: '5px', right: '0' }}
               >
                 {memo ? memo.length : 0}/{MAX_MEMO_SIZE}
               </Typography>

diff --git a/packages/yoroi-extension/app/components/widgets/forms/InlineEditingInput.js b/packages/yoroi-extension/app/components/widgets/forms/InlineEditingInput.js
@@ -147,6 +147,7 @@ export default class InlineEditingInput extends Component<Props, State> {
       className,
       styles.component,
       isActive ? null : styles.inactive,
+      inputField.error && styles.error,
     ]);
     const inputStyles = classnames([
       successfullyUpdated ? 'input_animateSuccess' : null,

diff --git a/packages/yoroi-extension/app/components/widgets/forms/InlineEditingInput.scss b/packages/yoroi-extension/app/components/widgets/forms/InlineEditingInput.scss
@@ -77,3 +77,19 @@
     }
   }
 }
+
+:global(.YoroiRevamp)  {
+  .component {
+    .error {
+      display: none;
+    }
+    .button  {
+      top: 40%;
+    }
+
+    .savingResultLabel {
+      top: 40%; 
+      transform: unset;
+    }
+  }
+}
diff --git a/packages/yoroi-extension/app/connector/containers/ConnectContainer.js b/packages/yoroi-extension/app/connector/containers/ConnectContainer.js
@@ -3,7 +3,7 @@ import type { Node } from 'react';
 import { Component } from 'react';
 import ConnectPage from '../components/connect/ConnectPage';
 import { observer } from 'mobx-react';
-import { computed } from 'mobx';
+import { computed, autorun } from 'mobx';
 import type { InjectedOrGeneratedConnector } from '../../types/injectedPropsType';
 import type {
   PublicDeriverCache,
@@ -19,6 +19,7 @@ import { genLookupOrFail } from '../../stores/stateless/tokenHelpers';
 import { PublicDeriver } from '../../api/ada/lib/storage/models/PublicDeriver';
 import { createAuthEntry } from '../api';
 import { WalletTypeOption } from '../../api/ada/lib/storage/models/ConceptualWallet/interfaces';
+import { ampli } from '../../../ampli/index';
 
 type GeneratedData = typeof ConnectContainer.prototype.generated;
 declare var chrome;
@@ -54,6 +55,18 @@ export default class ConnectContainer extends Component<
     });
   };
 
+  componentDidMount() {
+    autorun(() => {
+      if (
+        this.generated.stores.connector.loadingWallets === LoadingWalletStates.SUCCESS
+      ) {
+        ampli.dappPopupConnectWalletPageViewed({
+          wallet_count: this.generated.stores.connector.filteredWallets.length,
+        });
+      }
+    });
+  }
+
   // eslint-disable-next-line camelcase
   UNSAFE_componentWillMount() {
     this.generated.actions.connector.refreshWallets.trigger();
@@ -103,6 +116,8 @@ export default class ConnectContainer extends Component<
     });
     await connector.updateConnectorWhitelist.trigger({ whitelist });
 
+    await ampli.dappPopupConnectWalletPasswordPageViewed();
+
     chrome.runtime.sendMessage(
       ({
         type: 'connect_response',

diff --git a/packages/yoroi-extension/app/connector/stores/ConnectorStore.js b/packages/yoroi-extension/app/connector/stores/ConnectorStore.js
@@ -92,6 +92,7 @@ import {
   unsupportedTransactionError,
 } from '../../domain/HardwareWalletLocalizedError';
 import { wrapWithFrame } from '../../stores/lib/TrezorWrapper';
+import { ampli } from '../../../ampli/index';
 
 export function connectorCall<T, R>(message: T): Promise<R> {
   return new Promise((resolve, reject) => {
@@ -317,9 +318,11 @@ export default class ConnectorStore extends Store<StoresMap, ActionsMap> {
         if (response) {
           if (response.sign.type === 'tx/cardano') {
             this.createAdaTransaction();
+            ampli.dappPopupSignTransactionPageViewed();
           }
           if (response.sign.type === 'tx-reorg/cardano') {
             this.generateReorgTransaction();
+            ampli.dappPopupAddCollateralPageViewed();
           }
           if (response.sign.type === 'data') {
             this.checkHwWalletSignData();
@@ -457,6 +460,7 @@ export default class ConnectorStore extends Store<StoresMap, ActionsMap> {
 
     window.chrome.runtime.sendMessage(sendData);
     this.actions.connector.cancelSignInTx.remove(this._cancelSignInTx);
+    await ampli.dappPopupSignTransactionSubmitted();
     this._closeWindow();
   };
   @action

diff --git a/packages/yoroi-extension/app/containers/NavBarContainerRevamp.js b/packages/yoroi-extension/app/containers/NavBarContainerRevamp.js
@@ -28,6 +28,7 @@ import NavBarRevamp from '../components/topbar/NavBarRevamp';
 import NavWalletDetailsRevamp from '../components/topbar/NavWalletDetailsRevamp';
 import WalletListDialog from '../components/topbar/WalletListDialog';
 import BuySellAdaButton from '../components/topbar/BuySellAdaButton';
+import { ampli } from '../../ampli/index';
 
 export type GeneratedData = typeof NavBarContainerRevamp.prototype.generated;
 
@@ -101,6 +102,7 @@ export default class NavBarContainerRevamp extends Component<Props> {
           unitOfAccountSetting={profile.unitOfAccount}
           getCurrentPrice={this.generated.stores.coinPriceStore.getCurrentPrice}
           openWalletInfoDialog={() => {
+            ampli.allWalletsPageViewed();
             this.generated.actions.dialogs.open.trigger({ dialog: WalletListDialog });
           }}
         />

diff --git a/packages/yoroi-extension/app/containers/wallet/NFTDetailPageRevamp.js b/packages/yoroi-extension/app/containers/wallet/NFTDetailPageRevamp.js
@@ -94,7 +94,7 @@ class NFTDetailPageRevamp extends Component<AllProps> {
     const tab = urlPrams.get('tab');
 
     return (
-      <Box width="100%" height="100%">
+      <Box sx={{ width: '100%', pb: '50vh' }}>
         <NFTDetails
           nftInfo={nftInfo}
           network={network}

diff --git a/packages/yoroi-extension/app/containers/wallet/WalletSummaryPage.js b/packages/yoroi-extension/app/containers/wallet/WalletSummaryPage.js
@@ -334,15 +334,6 @@ class WalletSummaryPage extends Component<AllProps> {
 
     const walletSummaryPageRevamp = (
       <Box>
-        <NotificationMessage icon={successIcon} show={!!notification}>
-          {!!notification && (
-            <FormattedHTMLMessage
-              {...notification.message}
-              values={notification.values == null ? undefined : notification.values(intl)}
-            />
-          )}
-        </NotificationMessage>
-
         <WalletSummaryRevamp
           pendingAmount={unconfirmedAmount}
           shouldHideBalance={profile.shouldHideBalance}

diff --git a/packages/yoroi-extension/app/styles/overrides/revamp/FormControl.js b/packages/yoroi-extension/app/styles/overrides/revamp/FormControl.js
@@ -8,8 +8,7 @@ const RevampFormControl = {
       marginTop: '7px',
       '&:hover': {
         '& .MuiInputLabel-root': {
-          // color: theme.palette.grayscale[900],
-          color: 'green',
+          color: theme.palette.grayscale[900],
           '&.Mui-disabled': { color: theme.palette.grayscale[200] },
           '&.Mui-error': { color: theme.palette.magenta[500] },
         },

diff --git a/packages/yoroi-extension/app/styles/overrides/revamp/FormHelperText.js b/packages/yoroi-extension/app/styles/overrides/revamp/FormHelperText.js
@@ -4,11 +4,6 @@ const RevampFormHelperText = {
   styleOverrides: {
     root: ({ theme }: any): any => ({
       color: theme.palette.grayscale[600],
-      marginTop: 0,
-      marginLeft: '14px',
-      fontWeight: 400,
-      position: 'absolute',
-      bottom: '-2px',
       fontSize: '0.75rem',
       '&.Mui-disabled': { color: theme.palette.grayscale[200] },
       '&.Mui-error': { color: theme.palette.magenta[500] },

diff --git a/packages/yoroi-extension/app/styles/overrides/revamp/OutlinedInput.js b/packages/yoroi-extension/app/styles/overrides/revamp/OutlinedInput.js
@@ -4,7 +4,6 @@ const RevampOutlinedInput = {
   styleOverrides: {
     root: ({ theme }: any): any => ({
       paddingRight: '16px',
-      height: '56px',
       '&:hover .MuiOutlinedInput-notchedOutline': { borderColor: theme.palette.grayscale[900] },
       '& .MuiOutlinedInput-notchedOutline': {
         borderColor: theme.palette.grayscale[400],

diff --git a/packages/yoroi-extension/chrome/extension/connector/index.js b/packages/yoroi-extension/chrome/extension/connector/index.js
@@ -12,6 +12,10 @@ import { Action } from '../../../app/actions/lib/Action';
 import App from '../../../app/connector/App';
 import BigNumber from 'bignumber.js';
 import { addCloseListener, TabIdKeys } from '../../../app/utils/tabManager';
+import environment from '../../../app/environment';
+import { ampli } from '../../../ampli/index';
+import type { LoadOptionsWithEnvironment } from '../../../ampli/index';
+import LocalStorageApi from '../../../app/api/localStorage';
 
 // run MobX in strict mode
 configure({ enforceActions: 'always' });
@@ -41,6 +45,21 @@ const initializeErgoConnector: void => Promise<void> = async () => {
   if (root == null) {
     throw new Error('Root element not found.');
   }
+  const AMPLI_FLUSH_INTERVAL_MS = 5000;
+  const isAnalyticsAllowd = (new LocalStorageApi()).loadIsAnalyticsAllowed();
+  await ampli.load(({
+    environment: environment.isProduction() ? 'production' : 'development',
+    client: {
+      configuration: {
+        optOut: !isAnalyticsAllowd,
+        flushIntervalMillis: AMPLI_FLUSH_INTERVAL_MS,
+        trackingOptions: {
+          ipAddress: false,
+        },
+        defaultTracking: false,
+      },
+    },
+  }: LoadOptionsWithEnvironment)).promise;
 
   render(<App stores={stores} actions={actions} history={history} />, root);
 };

diff --git a/packages/yoroi-extension/chrome/extension/index.js b/packages/yoroi-extension/chrome/extension/index.js
@@ -89,6 +89,8 @@ const initializeYoroi: void => Promise<void> = async () => {
       ampli.votingPageViewed();
     } else if (pathname === ROUTES.WALLETS.TRANSACTIONS) {
       ampli.transactionsPageViewed();
+    } else if (pathname === ROUTES.STAKING) {
+      ampli.stakingCenterPageViewed();
     }
   });
 };