Merge pull request #346 from Emurgo/develop

Version 1.3.3
Emurgo · Mar 13, 2019 · 5f60b98 · 5f60b98
2 parents f983919 + a77a449
commit 5f60b98
Show file tree

Hide file tree

Showing 61 changed files with 608 additions and 286 deletions.
diff --git a/app/api/ada/hardwareWallet/trezorNewTransactions.js b/app/api/ada/hardwareWallet/trezorNewTransactions.js
@@ -50,14 +50,11 @@ export async function createTrezorSignTxPayload(
   // Transactions
   const txsBodies = await txsBodiesForInputs(txExt.inputs);
 
-  // Network
-  const network = CONFIG.network.trezorNetwork;
-
   return {
-    network,
-    transactions: txsBodies,
     inputs: trezorInputs,
     outputs: trezorOutputs,
+    transactions: txsBodies,
+    protocol_magic: CONFIG.network.protocolMagic,
   };
 }
 

diff --git a/app/api/ada/lib/test-config.js b/app/api/ada/lib/test-config.js
@@ -6,8 +6,7 @@ const CONFIG: ConfigType = {
     protocolMagic: 764824073,
     backendUrl: '',
     websocketUrl: '',
-    name: 'mainnet',
-    trezorNetwork: 2
+    name: 'mainnet'
   },
   app: {
     walletRefreshInterval: 10,

diff --git a/app/components/footer/FooterItem.js b/app/components/footer/FooterItem.js
@@ -30,7 +30,7 @@ export default class FooterItem extends Component<Props> {
             title={intl.formatMessage(message)}
           >
             <div className={styles.icon}>
-              <SvgInline svg={svg} cleanup={['title']} className={className} width="20" height="52" />
+              <SvgInline svg={svg} className={className} width="20" height="52" />
             </div>
             <div className={styles.text}>
               {intl.formatMessage(message)}

diff --git a/app/components/loading/Loading.js b/app/components/loading/Loading.js
@@ -61,9 +61,9 @@ export default class Loading extends Component<Props> {
     return (
       <div className={componentStyles}>
         <div className={styles.logos}>
-          <SvgInline svg={currencyLoadingLogo} className={currencyLogoStyles} cleanup={['title']} />
-          <SvgInline svg={yoroiLoadingLogo} className={yoroiLogoStyles} cleanup={['title']} />
-          <SvgInline svg={apiLoadingLogo} className={apiLogoStyles} cleanup={['title']} />
+          <SvgInline svg={currencyLoadingLogo} className={currencyLogoStyles} />
+          <SvgInline svg={yoroiLoadingLogo} className={yoroiLogoStyles} />
+          <SvgInline svg={apiLoadingLogo} className={apiLogoStyles} />
         </div>
         {hasLoadedCurrentLocale && (
           <div>

diff --git a/app/components/settings/categories/DisplaySettings.js b/app/components/settings/categories/DisplaySettings.js
@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { observer } from 'mobx-react';
 import { Button } from 'react-polymorph/lib/components/Button';
 import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, intlShape, FormattedMessage } from 'react-intl';
 import styles from './DisplaySettings.scss';
 import { THEMES } from '../../../themes/index';
 import ThemeThumbnail from './display/ThemeThumbnail';
@@ -36,14 +36,30 @@ const messages = defineMessages({
     defaultMessage: '!!!CHANGING THEME WILL REMOVE CUSTOMIZATION',
     description: 'Label for the "CHANGING THEME WILL REMOVE CUSTOMIZATION" message.',
   },
+  blog: {
+    id: 'settings.display.blog',
+    defaultMessage: '!!!You can read our {blogLink} on how to use this feature.',
+    description: 'text to introduce blog post',
+  },
+  blogLinkUrl: {
+    id: 'settings.support.faq.blogLinkUrl',
+    defaultMessage: '!!!https://medium.com/@emurgo_io/custom-themes-in-yoroi-d3fa93f4b926',
+    description: 'link for blog post',
+  },
+  blogLinkWrapper: {
+    id: 'settings.support.faq.blogLinkWrapper',
+    defaultMessage: '!!!blog post',
+    description: 'clickable text to open link',
+  },
 });
 
 type Props = {
   theme: string,
   selectTheme: Function,
   exportTheme: Function,
   getThemeVars: Function,
-  hasCustomTheme: Function
+  hasCustomTheme: Function,
+  onExternalLinkClick: Function,
 };
 
 @observer
@@ -54,7 +70,14 @@ export default class DisplaySettings extends Component<Props> {
   };
 
   render() {
-    const { theme, selectTheme, getThemeVars, exportTheme, hasCustomTheme } = this.props;
+    const {
+      theme,
+      selectTheme,
+      getThemeVars,
+      exportTheme,
+      hasCustomTheme,
+      onExternalLinkClick 
+    } = this.props;
     const { intl } = this.context;
 
     const themeYoroiClassicClasses = classnames([
@@ -68,58 +91,71 @@ export default class DisplaySettings extends Component<Props> {
     ]);
 
     const exportButtonClasses = classnames([
-      styles.exportStyleButton,
       'primary',
       styles.button,
     ]);
 
+    const blogLink = (
+      <a
+        href={intl.formatMessage(messages.blogLinkUrl)}
+        onClick={event => onExternalLinkClick(event)}
+      >
+        {intl.formatMessage(messages.blogLinkWrapper)}
+      </a>
+    );
+
     return (
       <div className={styles.component}>
 
         <div className={styles.label}>
           {intl.formatMessage(messages.themeLabel)}
         </div>
-        <Button
-          className={exportButtonClasses}
-          label={intl.formatMessage(messages.themeExportButton)}
-          skin={ButtonSkin}
-          onClick={exportTheme.bind(this, {})}
-        />
-        <div className={styles.themesWrapper}>
-          {/* @Todo: Theme Preview Enumeration should be more dynamic? */}
-          <button
-            type="button"
-            className={themeYoroiClassicClasses}
-            onClick={selectTheme.bind(this, { theme: THEMES.YOROI_CLASSIC })}
-          >
-            {(theme === THEMES.YOROI_CLASSIC
-              && hasCustomTheme() &&
-                <div className={styles.themeWarning}>
-                  {intl.formatMessage(messages.themeWarning)}
-                </div>)
+
+        <p><FormattedMessage {...messages.blog} values={{ blogLink }} /></p>
+
+        <div className={styles.main}>
+          <div className={styles.themesWrapper}>
+            {/* @Todo: Theme Preview Enumeration should be more dynamic? */}
+            <button
+              type="button"
+              className={themeYoroiClassicClasses}
+              onClick={selectTheme.bind(this, { theme: THEMES.YOROI_CLASSIC })}
+            >
+              {(theme === THEMES.YOROI_CLASSIC
+                && hasCustomTheme() &&
+                  <div className={styles.themeWarning}>
+                    {intl.formatMessage(messages.themeWarning)}
+                  </div>)
+              }
+              <ThemeThumbnail themeVars={getThemeVars({ theme: THEMES.YOROI_CLASSIC })} />
+              <span>{intl.formatMessage(messages.themeYoroiClassic)}</span>
+            </button>
+
+            {!environment.isMainnet() && // a second theme to allow testing switching themes
+              (
+                <button
+                  type="button"
+                  className={themeYoroiModernClasses}
+                  onClick={selectTheme.bind(this, { theme: THEMES.YOROI_MODERN })}
+                >
+                  {(theme === THEMES.YOROI_MODERN
+                    && hasCustomTheme() &&
+                      <div className={styles.themeWarning}>
+                        {intl.formatMessage(messages.themeWarning)}
+                      </div>)
+                  }
+                  <ThemeThumbnail themeVars={getThemeVars({ theme: THEMES.YOROI_MODERN })} />
+                  <span>{intl.formatMessage(messages.themeYoroiModern)}</span>
+                </button>
+              )
             }
-            <ThemeThumbnail themeVars={getThemeVars({ theme: THEMES.YOROI_CLASSIC })} />
-            <span>{intl.formatMessage(messages.themeYoroiClassic)}</span>
-          </button>
-
-          {!environment.isMainnet() &&
-            (
-              <button
-                type="button"
-                className={themeYoroiModernClasses}
-                onClick={selectTheme.bind(this, { theme: THEMES.YOROI_MODERN })}
-              >
-                {(theme === THEMES.YOROI_MODERN
-                  && hasCustomTheme() &&
-                    <div className={styles.themeWarning}>
-                      {intl.formatMessage(messages.themeWarning)}
-                    </div>)
-                }
-                <ThemeThumbnail themeVars={getThemeVars({ theme: THEMES.YOROI_MODERN })} />
-                <span>{intl.formatMessage(messages.themeYoroiModern)}</span>
-              </button>
-            )
-          }
+          </div>
+          <Button
+            className={exportButtonClasses}
+            label={intl.formatMessage(messages.themeExportButton)}
+            skin={ButtonSkin}
+            onClick={exportTheme.bind(this, {})}
+          />
         </div>
 
       </div>

diff --git a/app/components/settings/categories/DisplaySettings.scss b/app/components/settings/categories/DisplaySettings.scss
@@ -1,6 +1,11 @@
 .component {
 
-  position: relative;
+  .main {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+  }
 
   & > .label {
     color: var(--theme-support-settings-text-color);
@@ -10,16 +15,26 @@
     margin-bottom: 11px;
   }
 
-  & > .exportStyleButton
-  {
-    position: absolute;
-    left: 0px;
-    bottom: -25px;
-    width: 100%;
+  a,
+  p {
+    color: var(--theme-support-settings-text-color);
+    font-family: var(--font-regular);
+    font-size: 14px;
+    line-height: 19px;
+  }
+
+  a {
+    color: var(--theme-support-settings-link-color);
+    text-decoration: underline;
+  }
+
+  p {
+    margin-bottom: 20px;
   }
 }
 
 .themesWrapper {
+  position: relative;
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 20px;

diff --git a/app/components/settings/categories/display/ThemeThumbnail.js b/app/components/settings/categories/display/ThemeThumbnail.js
diff --git a/app/components/settings/menu/SettingsMenu.js b/app/components/settings/menu/SettingsMenu.js
@@ -99,14 +99,12 @@ export default class SettingsMenu extends Component<Props> {
             className="support"
           />
 
-          {!environment.isMainnet() &&
-            <SettingsMenuItem
-              label={intl.formatMessage(messages.display)}
-              onClick={() => onItemClick(ROUTES.SETTINGS.DISPLAY)}
-              active={isActiveItem(ROUTES.SETTINGS.DISPLAY)}
-              className="display"
-            />
-          }
+          <SettingsMenuItem
+            label={intl.formatMessage(messages.display)}
+            onClick={() => onItemClick(ROUTES.SETTINGS.DISPLAY)}
+            active={isActiveItem(ROUTES.SETTINGS.DISPLAY)}
+            className="display"
+          />
 
           {(!environment.isMainnet() || currentLocale === 'ko-KR' || currentLocale === 'ja-JP') &&
             // all unredemed Ada is held being either Japanese or Korean people

diff --git a/app/components/topbar/TopBarCategory.js b/app/components/topbar/TopBarCategory.js
@@ -30,7 +30,7 @@ export default class TopBarCategory extends Component<Props> {
 
     return (
       <button type="button" className={componentStyles} onClick={onClick}>
-        <SvgInline svg={icon} className={iconStyles} cleanup={['title']} />
+        <SvgInline svg={icon} className={iconStyles} />
       </button>
     );
   }

diff --git a/app/components/wallet/WalletReceive.js b/app/components/wallet/WalletReceive.js
@@ -143,7 +143,7 @@ export default class WalletReceive extends Component<Props, State> {
                 text={walletAddress}
                 onCopy={onCopyAddress.bind(this, walletAddress)}
               >
-                <SvgInline svg={iconCopy} className={styles.copyIconBig} cleanup={['title']} />
+                <SvgInline svg={iconCopy} className={styles.copyIconBig} />
               </CopyToClipboard>
             </div>
             <div className={styles.instructionsText}>
@@ -186,7 +186,7 @@ export default class WalletReceive extends Component<Props, State> {
                     onCopy={onCopyAddress.bind(this, address.id)}
                   >
                     <span className={styles.copyAddress}>
-                      <SvgInline svg={iconCopy} className={styles.copyIcon} cleanup={['title']} />
+                      <SvgInline svg={iconCopy} className={styles.copyIcon} />
                       <span>{intl.formatMessage(messages.copyAddressLabel)}</span>
                     </span>
                   </CopyToClipboard>

diff --git a/app/components/wallet/send/WalletSendForm.js b/app/components/wallet/send/WalletSendForm.js
@@ -238,7 +238,7 @@ export default class WalletSendForm extends Component<Props, State> {
 
     const hasPendingTxWarning = (
       <div className={styles.contentWarning}>
-        <SvgInline svg={dangerIcon} className={styles.icon} cleanup={['title']} />
+        <SvgInline svg={dangerIcon} className={styles.icon} />
         <p className={styles.warning}>{intl.formatMessage(messages.sendingIsDisabled)}</p>
       </div>
     );

diff --git a/app/components/wallet/summary/WalletSummary.js b/app/components/wallet/summary/WalletSummary.js
@@ -64,14 +64,14 @@ export default class WalletSummary extends Component<Props> {
               <div className={styles.pendingConfirmation}>
                 {`${intl.formatMessage(messages.pendingIncomingConfirmationLabel)}`}
                 : <span>{pendingAmount.incoming.toFormat(DECIMAL_PLACES_IN_ADA)}</span>
-                <SvgInline svg={adaSymbolSmallest} className={styles.currencySymbolSmallest} cleanup={['title']} />
+                <SvgInline svg={adaSymbolSmallest} className={styles.currencySymbolSmallest} />
               </div>
             }
             {pendingAmount.outgoing.greaterThan(0) &&
               <div className={styles.pendingConfirmation}>
                 {`${intl.formatMessage(messages.pendingOutgoingConfirmationLabel)}`}
                 : <span>{pendingAmount.outgoing.toFormat(DECIMAL_PLACES_IN_ADA)}</span>
-                <SvgInline svg={adaSymbolSmallest} className={styles.currencySymbolSmallest} cleanup={['title']} />
+                <SvgInline svg={adaSymbolSmallest} className={styles.currencySymbolSmallest} />
               </div>
             }
             {!isLoadingTransactions ? (
@@ -85,7 +85,7 @@ export default class WalletSummary extends Component<Props> {
           {!isLoadingTransactions ? (
             <SvgInline
               svg={exportTxToFileSvg}
-              cleanup={['title']}
+
               className={styles.exportTxToFileSvg}
               title={intl.formatMessage(messages.exportIconTooltip)}
               onClick={openExportTxToFileDialog}