Merge pull request #2410 from Emurgo/paulccari/mui-replacing-rp-compo…

…nents-5 Replace from RP to MUI components - 5
Emurgo · Oct 15, 2021 · 6a7f7ab · 6a7f7ab
2 parents e06fca3 + 2805215
commit 6a7f7ab
Show file tree

Hide file tree

Showing 30 changed files with 114 additions and 340 deletions.
diff --git a/packages/yoroi-extension/app/components/common/TextField.js b/packages/yoroi-extension/app/components/common/TextField.js
@@ -40,7 +40,7 @@ export default function TextField({
     <STextField
       fullWidth
       className={className}
-      error={error}
+      error={Boolean(error)}
       label={label}
       value={value}
       disabled={disabled}

diff --git a/...i-extension/app/components/settings/categories/general-setting/AboutYoroiSettingsBlock.js b/...i-extension/app/components/settings/categories/general-setting/AboutYoroiSettingsBlock.js
@@ -128,7 +128,7 @@ export default class AboutYoroiSettingsBlock extends Component<{||}> {
             websiteName="Github"
             url={baseGithubUrl + 'releases/'}
             light={false}
-            arrowRelativeToTip={false /* branch name may be too small otherwise */}
+            placementTooltip="bottom"
             onExternalLinkClick={handleExternalLinkClick}
           >
             <RawHash light={false}>
@@ -142,6 +142,7 @@ export default class AboutYoroiSettingsBlock extends Component<{||}> {
             websiteName="Github"
             url={baseGithubUrl + 'commit/' + environment.commit}
             light={false}
+            placementTooltip="bottom-start"
             onExternalLinkClick={handleExternalLinkClick}
           >
             <RawHash light={false}>
@@ -156,7 +157,7 @@ export default class AboutYoroiSettingsBlock extends Component<{||}> {
               websiteName="Github"
               url={baseGithubUrl + 'tree/' + environment.branch}
               light={false}
-              arrowRelativeToTip={false /* branch name may be too small otherwise */}
+              placementTooltip="bottom-start"
               onExternalLinkClick={handleExternalLinkClick}
             >
               <RawHash light={false}>

diff --git a/...roi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js b/...roi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js
@@ -136,11 +136,9 @@ export default class UnitOfAccountSettings extends Component<Props> {
 
         <Select
           formControlProps={{ sx: { marginTop: '40px' } }}
-          options={currencies}
           {...coinPriceCurrencyId.bind()}
           onChange={this.props.onSelect}
           value={currentValue}
-          optionRenderer={optionRenderer}
           menuProps={{
             sx: {
               '& .MuiMenu-paper': {

diff --git a/packages/yoroi-extension/app/components/topbar/NavPlate.js b/packages/yoroi-extension/app/components/topbar/NavPlate.js
@@ -8,8 +8,7 @@ import WalletAccountIcon from './WalletAccountIcon';
 import ConceptualIcon from '../../assets/images/wallet-nav/conceptual-wallet.inline.svg';
 import TrezorIcon from '../../assets/images/wallet-nav/trezor-wallet.inline.svg';
 import LedgerIcon from '../../assets/images/wallet-nav/ledger-wallet.inline.svg';
-import { Tooltip } from 'react-polymorph/lib/components/Tooltip';
-import { TooltipSkin } from 'react-polymorph/lib/skins/simple/TooltipSkin';
+import { Typography, Tooltip } from '@mui/material';
 import { truncateLongName, maxNameLengthBeforeTruncation } from '../../utils/formatters';
 import type { WalletChecksum } from '@emurgo/cip4-js';
 import type { $npm$ReactIntl$IntlFormat, $npm$ReactIntl$MessageDescriptor } from 'react-intl';
@@ -147,12 +146,15 @@ export default class NavPlate extends Component<Props> {
     const truncatedName = truncateLongName(walletName);
     return (
       <Tooltip
-        className={styles.SimpleTooltip}
-        skin={TooltipSkin}
-        isOpeningUpward={false}
-        tip={<span className={styles.tooltip}>{walletName}</span>}
+        title={
+          <Typography variant="tooltip">
+            {walletName}
+          </Typography>
+        }
       >
-        {truncatedName}
+        <Typography variant="p" fontWeight="500" fontSize="1.125rem" pr="4px">
+          {truncatedName}
+        </Typography>
       </Tooltip>
     );
   }

diff --git a/packages/yoroi-extension/app/components/topbar/NavPlate.scss b/packages/yoroi-extension/app/components/topbar/NavPlate.scss
@@ -3,23 +3,6 @@
   display: flex;
   align-items: center;
   height: 100%;
-
-  :global(.SimpleBubble_bubble) {
-    font-size: 12px;
-    font-family: var(--font-regular);
-    color: white;
-    background-color: rgba(56, 57, 61, 0.7); // #38393D
-
-    // size tooltip to text contained inside
-    min-width: auto;
-    padding: 4px 12px 4px 12px !important;
-
-    // use this to vertical-align
-    line-height: 22px;
-  }
-  :global(.SimpleBubble_root:not(.SimpleBubble_openUpward))  {
-    margin-top: -8px !important;
-  }
 }
 
 .content {
@@ -74,9 +57,3 @@
   font-size: 12px;
   line-height: 20px;
 }
-
-.tooltip {
-  font-family: var(--font-regular);
-  font-size: 12px;
-  line-height: 22px;
-}
diff --git a/packages/yoroi-extension/app/components/uri/URIDisplayDialog.js b/packages/yoroi-extension/app/components/uri/URIDisplayDialog.js
@@ -91,7 +91,7 @@ export default class URIDisplayDialog extends Component<Props> {
             elementId={uriNotificationId}
             onCopyAddress={() => onCopyAddressTooltip(uriNotificationId)}
             notification={notification}
-            tooltipOpensUpward
+            placementTooltip="bottom-start"
           >
             <span className={styles.uri}>{uri}</span>
           </CopyableAddress>

diff --git a/packages/yoroi-extension/app/components/wallet/WalletReceive.js b/packages/yoroi-extension/app/components/wallet/WalletReceive.js
@@ -237,6 +237,7 @@ export default class WalletReceive extends Component<Props> {
                   () => onCopyAddressTooltip(address.address, notificationElementId)
                 }
                 notification={notification}
+                placementTooltip="bottom-start"
               >
                 <ExplorableHashContainer
                   selectedExplorer={this.props.selectedExplorer}

diff --git a/packages/yoroi-extension/app/components/wallet/WalletRestoreVerifyDialog.js b/packages/yoroi-extension/app/components/wallet/WalletRestoreVerifyDialog.js
@@ -105,14 +105,14 @@ export default class WalletRestoreVerifyDialog extends Component<Props> {
               elementId={notificationElementId}
               onCopyAddress={() => onCopyAddressTooltip(address, notificationElementId)}
               notification={notification}
-              tooltipOpensUpward
+              placementTooltip="top-start"
               key={address}
             >
               <ExplorableHashContainer
                 selectedExplorer={this.props.selectedExplorer}
                 hash={address}
                 light
-                tooltipOpensUpward
+                placementTooltip="top-start"
                 linkType="address"
               >
                 <RawHash light>

diff --git a/packages/yoroi-extension/app/components/wallet/add/paper-wallets/FinalizeDialog.js b/packages/yoroi-extension/app/components/wallet/add/paper-wallets/FinalizeDialog.js
@@ -136,14 +136,14 @@ export default class FinalizeDialog extends Component<Props> {
                 elementId={notificationElementId}
                 onCopyAddress={() => onCopyAddressTooltip(address, notificationElementId)}
                 notification={notification}
-                tooltipOpensUpward
+                placementTooltip="top-start"
                 key={address}
               >
                 <ExplorableHashContainer
                   hash={address}
                   selectedExplorer={this.props.selectedExplorer}
                   light
-                  tooltipOpensUpward
+                  placementTooltip="top-start"
                   linkType="address"
                 >
                   <RawHash light>