Merge branch 'develop' into yushi/cardano-connector-injection

packages/yoroi-extension/app/App.js

@@ -2,7 +2,6 @@
 import { Component } from 'react';
 import type { Node } from 'react';
 import { observer } from 'mobx-react';
-import { ThemeProvider } from 'react-polymorph/lib/components/ThemeProvider';
 import { Router } from 'react-router-dom';
 import type { RouterHistory } from 'react-router-dom';
 import { addLocaleData, IntlProvider } from 'react-intl';
@@ -20,23 +19,18 @@ import es from 'react-intl/locale-data/es';
 import it from 'react-intl/locale-data/it';
 import tr from 'react-intl/locale-data/tr';
 import { Routes } from './Routes';
-import { yoroiPolymorphTheme } from './themes/PolymorphThemes';
-import { themeOverrides } from './themes/overrides';
 import { translations } from './i18n/translations';
 import type { StoresMap } from './stores';
 import type { ActionsMap } from './actions';
-import { changeToplevelTheme } from './themes';
+import { changeToplevelTheme, MuiThemes } from './styles/utils';
 import ThemeManager from './ThemeManager';
 import environment from './environment';
 import MaintenancePage from './containers/MaintenancePage';
 import CrashPage from './containers/CrashPage';
 import { Logger } from './utils/logging';
-import { SimpleSkins } from 'react-polymorph/lib/skins/simple';
-import { SimpleDefaults } from 'react-polymorph/lib/themes/simple';
-import { LayoutProvider } from './themes/context/layout';
-import { ThemeProvider as MuiThemeProvide } from '@mui/material/styles';
+import { LayoutProvider } from './styles/context/layout';
+import { ThemeProvider } from '@mui/material/styles';
 import { CssBaseline } from '@mui/material';
-import { classicTheme, modernTheme } from './styles/themes';
 import { globalStyles } from './styles/globalStyles';
 
 // https://github.com/yahoo/react-intl/wiki#loading-locale-data
@@ -67,7 +61,6 @@ type State = {|
 
 @observer
 class App extends Component<Props, State> {
-
   state: State = {
     crashed: false,
   };
@@ -105,50 +98,35 @@ class App extends Component<Props, State> {
 
     changeToplevelTheme(currentTheme);
 
-    // <TODO:THEME_SELECT>
-    const isModernTheme = true;
-
-    const theme = isModernTheme ? modernTheme : classicTheme;
+    const muiTheme = MuiThemes[currentTheme];
 
     return (
       <div style={{ height: '100%' }}>
-        <MuiThemeProvide theme={theme}>
-          <CssBaseline />
-          {globalStyles(theme)}
-          <LayoutProvider>
-            <ThemeManager variables={themeVars} />
+        <LayoutProvider>
+          <ThemeProvider theme={muiTheme}>
+            <CssBaseline />
+            {globalStyles(muiTheme)}
+            <ThemeManager cssVariables={themeVars} />
             {/* Automatically pass a theme prop to all components in this subtree. */}
-            <ThemeProvider
-              key={currentTheme}
-              theme={yoroiPolymorphTheme}
-              skins={SimpleSkins}
-              variables={SimpleDefaults}
-              themeOverrides={themeOverrides(currentTheme)}
-            >
-              <IntlProvider {...{ locale, key: locale, messages: mergedMessages }}>
-                {this.getContent()}
-              </IntlProvider>
-            </ThemeProvider>
-          </LayoutProvider>
-        </MuiThemeProvide>
+            <IntlProvider {...{ locale, key: locale, messages: mergedMessages }}>
+              {this.getContent()}
+            </IntlProvider>
+          </ThemeProvider>
+        </LayoutProvider>
       </div>
     );
   }
 
   getContent: void => ?Node = () => {
     const { stores, actions, history } = this.props;
     if (this.state.crashed === true) {
-      return (<CrashPage stores={stores} actions={actions} />);
+      return <CrashPage stores={stores} actions={actions} />;
     }
     if (stores.serverConnectionStore.isMaintenance) {
-      return (<MaintenancePage stores={stores} actions={actions} />);
+      return <MaintenancePage stores={stores} actions={actions} />;
     }
-    return (
-      <Router history={history}>
-        {Routes(stores, actions)}
-      </Router>
-    );
-  }
+    return <Router history={history}>{Routes(stores, actions)}</Router>;
+  };
 }
 
 export default App;

packages/yoroi-extension/app/ThemeManager.js

@@ -1,41 +1,29 @@
 // @flow
-import { Component } from 'react';
 import type { Node } from 'react';
-import { map } from 'lodash';
+import React from 'react';
+import { writeCssVar } from './styles/utils';
 
 type Props = {|
-  +variables: { [key: string]: string, ... },
+  +cssVariables: { [key: string]: string, ... },
   +children?: Node,
 |};
 
 /** Allow to swap the CSS used at runtime to allow user-defined themes */
-export default class ThemeManager extends Component<Props> {
-  static defaultProps: {|children: void|} = {
-    children: undefined
-  };
-
-  componentDidMount() {
-    this.updateCSSVariables(this.props.variables);
-  }
-
-  componentDidUpdate(prevProps: Props) {
-    if (this.props.variables !== prevProps.variables) {
-      this.updateCSSVariables(this.props.variables);
+function ThemeManager({ cssVariables, children }: Props): Node {
+  React.useEffect(() => {
+    const hasCSSVars = Object.keys(cssVariables || {}).length;
+    if (hasCSSVars) {
+      Object.entries(cssVariables || {}).forEach(([varName, cssValue]) => {
+        writeCssVar(varName, cssValue);
+      });
     }
-  }
+  }, [cssVariables]);
 
-  updateCSSVariables(variables: { [key: string]: string, ... }) {
-    map(variables, (value, prop) => {
-      if (document.documentElement) {
-        document.documentElement.style.setProperty(prop, value);
-      }
-    });
-  }
-  render(): Node {
-    return (
-      <div>
-        {this.props.children}
-      </div>
-    );
-  }
+  return <div>{children}</div>;
 }
+
+export default ThemeManager;
+
+ThemeManager.defaultProps = {
+  children: null,
+};

packages/yoroi-extension/app/api/ada/transactions/shelley/transactions.js

@@ -36,6 +36,7 @@ import {
   cardanoValueFromRemoteFormat,
   multiTokenFromCardanoValue,
   cardanoValueFromMultiToken,
+  parseTokenList,
 } from '../utils';
 
 /**
@@ -661,7 +662,8 @@ function _newAdaUnsignedTxFromUtxo(
     // this flag is set when one extra input is added
     let oneExtraAdded = false;
     // add utxos until we have enough to send the transaction
-    for (const utxo of utxos) {
+    for (let i = 0; i < utxos.length; i++) {
+      const utxo = utxos[i];
       if (oneExtraAdded) {
         break;
       }
@@ -695,7 +697,33 @@ function _newAdaUnsignedTxFromUtxo(
         const isRemainingNeededCoinZero = isBigNumZero(remainingNeeded.coin());
         const isRemainingNeededAssetZero = (remainingAssets?.len() ?? 0) === 0;
         if (isRemainingNeededCoinZero && isRemainingNeededAssetZero && isNonEmptyInputs) {
-          if (oneExtraInput) {
+          const changeTokenIdSet = new Set(
+            parseTokenList(excessiveInputAssets).map(r => r.assetId)
+          );
+          let packed = false;
+          for (let j = i; j < utxos.length; j++) {
+            const packCandidate = utxos[j];
+            if (
+              packCandidate.assets.length >= 1 &&
+                packCandidate.assets.every(({ assetId }) => changeTokenIdSet.has(assetId))
+            ) {
+              if (
+                addUtxoInput(
+                  txBuilder,
+                  undefined,
+                  packCandidate,
+                  false,
+                  { networkId: protocolParams.networkId }
+                ) === AddInputResult.VALID
+              ) {
+                usedUtxos.push(packCandidate);
+
+                packed = true;
+                break;
+              }
+            }
+          }
+          if (oneExtraInput && !packed) {
             // We've added all the assets we need, but we add one extra.
             // Set the flag so that the adding loop stops after this extra one is added.
             oneExtraAdded = true;

packages/yoroi-extension/app/api/localStorage/index.js

@@ -36,8 +36,7 @@ const storageKeys = {
 };
 
 export type SetCustomUserThemeRequest = {|
-  customThemeVars: string,
-  currentThemeVars: Object,
+  cssCustomPropObject: Object,
 |};
 
 /**
@@ -114,27 +113,14 @@ export default class LocalStorageApi {
 
   getCustomUserTheme: void => Promise<?string> = () => getLocalItem(storageKeys.CUSTOM_THEME);
 
-  setCustomUserTheme: SetCustomUserThemeRequest => Promise<void> = (
-    request
-  ) => new Promise((resolve, reject) => {
-    try {
-      // Convert CSS String into Javascript Object
-      const vars = request.customThemeVars.split(';');
-      const themeObject = {};
-      vars.forEach(v => {
-        const varData = v.split(':');
-        const key = varData[0];
-        const value = varData[1];
-        if (key && value && request.currentThemeVars[key.trim()] !== value.trim()) {
-          themeObject[key.trim()] = value.trim();
-        }
-      });
-      // Save Theme Object
-      return setLocalItem(storageKeys.CUSTOM_THEME, JSON.stringify(themeObject));
-    } catch (error) {
-      return reject(error);
-    }
-  });
+  setCustomUserTheme: SetCustomUserThemeRequest => Promise<void> = ({ cssCustomPropObject }) =>
+    new Promise((resolve, reject) => {
+      try {
+        return setLocalItem(storageKeys.CUSTOM_THEME, JSON.stringify(cssCustomPropObject));
+      } catch (error) {
+        return reject(error);
+      }
+    });
 
   unsetCustomUserTheme: void => Promise<void> = () => removeLocalItem(storageKeys.CUSTOM_THEME);
 

packages/yoroi-extension/app/components/buySell/BuySellDialog.scss

@@ -6,16 +6,16 @@
   max-height: 600px;
 
   .description {
-    color: var(--theme-dialog-title-color);
-    font-family: var(--font-regular);
+    color: var(--yoroi-palette-gray-900);
+    font-weight: 400;
     font-size: 16px;
     line-height: 19px;
     text-align: center;
   }
 }
 
 .content {
-  font-family: var(--font-regular);
+  font-weight: 400;
   font-size: 16px;
   flex-direction: column;
   letter-spacing: 0;
@@ -32,22 +32,22 @@
     flex: 7;
 
     .nameAndCurrency {
-      color: #242838;
+      color: var(--yoroi-palette-gray-900);
       font-size: 16px;
       letter-spacing: 0;
       line-height: 22px;
     }
     .address {
-        color: #6B7384;
-        font-size: 14px;
-        letter-spacing: 0;
-        line-height: 22px;
+      color: var(--yoroi-palette-gray-600);
+      font-size: 14px;
+      letter-spacing: 0;
+      line-height: 22px;
     }
   }
   .right {
-    flex:1;
-     width: 40px;
-     height: 40px;
+    flex: 1;
+    width: 40px;
+    height: 40px;
   }
 }
 
@@ -70,10 +70,10 @@
     height: 20px;
     width: 20px;
     path {
-      fill: var(--theme-icon-copy-address-color);
+      fill: var(--yoroi-palette-gray-800);
     }
   }
   &:hover {
-    background-color: var(--cmn-default-color-grey-5);
+    background-color: var(--yoroi-palette-gray-50);
   }
-}
+}