Merge branch 'develop' into paulccari/mui-replacing-rp-components-1

packages/yoroi-extension/app/components/topbar/NavWalletDetails.js

@@ -32,7 +32,6 @@ type Props = {|
   */
   +rewards: null | void | MultiToken,
   +walletAmount: null | MultiToken,
-  +assetDeposit: null | MultiToken,
   +infoText?: string,
   +showDetails?: boolean,
   +getTokenInfo: $ReadOnly<Inexact<TokenLookupKey>> => $ReadOnly<TokenRow>,
@@ -65,7 +64,6 @@ export default class NavWalletDetails extends Component<Props> {
       highlightTitle,
       rewards,
       walletAmount,
-      assetDeposit,
       infoText,
       showDetails,
       showEyeIcon,
@@ -74,7 +72,6 @@ export default class NavWalletDetails extends Component<Props> {
     const { intl } = this.context;
 
     const totalAmount = this.getTotalAmount();
-    const isNonZeroDeposit = !assetDeposit?.isEmpty();
 
     const showsRewards = (
       this.props.rewards !== undefined &&
@@ -106,28 +103,20 @@ export default class NavWalletDetails extends Component<Props> {
               })}
             </div>
             {showsRewards &&
-            <div className={styles.details}>
-              <div>
-                <p className={styles.label}>
-                  {intl.formatMessage(globalMessages.walletLabel)}&nbsp;
-                </p>
-                {this.renderAmountDisplay({ shouldHideBalance, amount: walletAmount })}
-              </div>
-              <div>
-                <p className={styles.label}>
-                  {intl.formatMessage(globalMessages.rewardsLabel)}&nbsp;
-                </p>
-                {this.renderAmountDisplay({ shouldHideBalance, amount: rewards })}
-              </div>
-              {isNonZeroDeposit ? (
+              <div className={styles.details}>
                 <div>
                   <p className={styles.label}>
-                    {intl.formatMessage(globalMessages.assetDepositLabel)}&nbsp;
+                    {intl.formatMessage(globalMessages.walletLabel)}&nbsp;
                   </p>
-                  {this.renderAmountDisplay({ shouldHideBalance, amount: assetDeposit })}
+                  {this.renderAmountDisplay({ shouldHideBalance, amount: walletAmount })}
                 </div>
-              ) : null}
-            </div>
+                <div>
+                  <p className={styles.label}>
+                    {intl.formatMessage(globalMessages.rewardsLabel)}&nbsp;
+                  </p>
+                  {this.renderAmountDisplay({ shouldHideBalance, amount: rewards })}
+                </div>
+              </div>
             }
             {this.props.rewards === undefined && (
               <div className={styles.info}>

packages/yoroi-extension/app/components/wallet/assets/AssetsList.js

@@ -11,8 +11,16 @@ import ArrowsListFromBottom from '../../../assets/images/assets-page/arrows-list
 import ArrowsListFromTop from '../../../assets/images/assets-page/arrows-list-from-top.inline.svg';
 import ArrowsList from '../../../assets/images/assets-page/arrows-list.inline.svg';
 import Search from '../../../assets/images/assets-page/search.inline.svg';
-import { truncateAddressShort } from '../../../utils/formatters';
+import { splitAmount, truncateAddressShort, truncateToken } from '../../../utils/formatters';
 import BorderedBox from '../../widgets/BorderedBox';
+import { MultiToken } from '../../../api/common/lib/MultiToken';
+import { getTokenName } from '../../../stores/stateless/tokenHelpers';
+import type {
+  TokenLookupKey,
+} from '../../../api/common/lib/MultiToken';
+import type { TokenRow } from '../../../api/ada/lib/storage/database/primitives/tables';
+import globalMessages from '../../../i18n/global-messages';
+import { hiddenAmount } from '../../../utils/strings';
 
 const SORTING_DIRECTIONS = {
   UP: 'UP',
@@ -31,6 +39,9 @@ const SORTING_COLUMNS = {
 |}
 type Props = {|
   +assetsList: Asset[],
+  +assetDeposit:? null | MultiToken,
+  +getTokenInfo: $ReadOnly<Inexact<TokenLookupKey>> => $ReadOnly<TokenRow>,
+  +shouldHideBalance: boolean,
 |};
 
 type State = {|
@@ -131,10 +142,47 @@ export default class AssetsList extends Component<Props, State> {
     return <ArrowsList />;
   }
 
+  renderAmountDisplay: () => Node = () => {
+    if (this.props.assetDeposit == null) {
+      return <div className={styles.isLoading} />;
+    }
+
+    const defaultEntry = this.props.assetDeposit.getDefaultEntry();
+    const tokenInfo = this.props.getTokenInfo(defaultEntry);
+    const shiftedAmount = defaultEntry.amount
+      .shiftedBy(-tokenInfo.Metadata.numberOfDecimals);
+
+    let balanceDisplay;
+    if (this.props.shouldHideBalance) {
+      balanceDisplay = (<span>{hiddenAmount}</span>);
+    } else {
+      const [beforeDecimalRewards, afterDecimalRewards] = splitAmount(
+        shiftedAmount,
+        tokenInfo.Metadata.numberOfDecimals,
+      );
+
+      balanceDisplay = (
+        <>
+          <span className={styles.beforeDecimal}>{beforeDecimalRewards}</span>
+          <span className={styles.afterDecimal}>{afterDecimalRewards}</span>
+        </>
+      );
+    }
+
+    return (
+      <>
+        {balanceDisplay}
+        <span className={styles.tokenName}>{truncateToken(getTokenName(tokenInfo))}</span>
+      </>
+    );
+  }
+
   render(): Node {
 
     const { intl } = this.context;
     const { assetsList } = this.state
+    const { assetDeposit } = this.props
+
     return (
       <div className={styles.component}>
         <BorderedBox>
@@ -147,6 +195,16 @@ export default class AssetsList extends Component<Props, State> {
               <input onChange={this.search} type='text' placeholder={intl.formatMessage(messages.search)} />
             </div>
           </div>
+          {assetDeposit && (
+          <div className={styles.lockedAssets}>
+            <div className={styles.lockedAssetsAmount}>
+              <p className={styles.label}>
+                {intl.formatMessage(globalMessages.assetDepositLabel)} &nbsp;
+              </p>
+              {this.renderAmountDisplay()}
+            </div>
+          </div>
+          )}
         </BorderedBox>
         {
           assetsList.length === 0 ? (

packages/yoroi-extension/app/components/wallet/assets/AssetsList.scss

@@ -35,6 +35,41 @@
 
     }
 
+    .lockedAssets {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        .lockedAssetsAmount {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            background-color: var(--theme-nav-item-background-color);
+            border-radius: 8px;
+            width: auto;
+            padding: 7px 15px;
+            margin-left: -15px;
+            font-size: 16px;
+            line-height: 24px;
+        }
+
+        .label {
+            color: var(--theme-wallet-dropdown-secondary-text-color)
+        }
+
+        .beforeDecimal, .tokenName {
+            font-family: var(--font-medium);
+        }
+
+        .tokenName {
+            margin-left: 2px;
+            display: inline-block;
+        }
+
+        .afterDecimal {
+            font-family: var(--font-regular);
+        }
+    }
+
     .columns {
         display: grid;
         grid-template-columns: 3fr 2fr 3fr;

packages/yoroi-extension/app/components/wallet/assets/AssetsPage.js

@@ -6,20 +6,32 @@ import styles from './AssetsPage.scss';
 
 import AssetsList from './AssetsList';
 import type { Asset } from './AssetsList';
-
-
+import { MultiToken } from '../../../api/common/lib/MultiToken';
+import type {
+  TokenLookupKey,
+} from '../../../api/common/lib/MultiToken';
+import type { TokenRow } from '../../../api/ada/lib/storage/database/primitives/tables';
 
 type Props = {|
   +assetsList: Asset[],
+  +getTokenInfo: $ReadOnly<Inexact<TokenLookupKey>> => $ReadOnly<TokenRow>,
+  +assetDeposit: null | MultiToken,
+  +shouldHideBalance: boolean,
 |};
 
 @observer
 export default class AssetsPage extends Component<Props> {
 
   render(): Node {
+    const { assetDeposit } = this.props
     return (
       <div className={styles.component}>
-        <AssetsList assetsList={this.props.assetsList} />
+        <AssetsList 
+          assetsList={this.props.assetsList}
+          assetDeposit={assetDeposit}
+          getTokenInfo={this.props.getTokenInfo}
+          shouldHideBalance={this.props.shouldHideBalance}
+        />
       </div>
     );
   }

packages/yoroi-extension/app/containers/NavBarContainer.js

@@ -80,7 +80,6 @@ export default class NavBarContainer extends Component<Props> {
     const walletComponents = wallets.map(wallet => {
       const txRequests = this.generated.stores.transactions.getTxRequests(wallet);
       const balance = txRequests.requests.getBalanceRequest.result || null;
-      const assetDeposit = txRequests.requests.getAssetDepositRequest.result || null;
 
       const parent = wallet.getParent();
       const settingsCache = this.generated.stores.walletSettings
@@ -107,7 +106,6 @@ export default class NavBarContainer extends Component<Props> {
           detailComponent={
             <NavWalletDetails
               walletAmount={balance}
-              assetDeposit={assetDeposit}
               onUpdateHideBalance={this.updateHideBalance}
               shouldHideBalance={profile.shouldHideBalance}
               rewards={this.getRewardBalance(wallet)}
@@ -142,15 +140,13 @@ export default class NavBarContainer extends Component<Props> {
 
         const txRequests = this.generated.stores.transactions.getTxRequests(publicDeriver);
         const balance = txRequests.requests.getBalanceRequest.result || null;
-        const assetDeposit = txRequests.requests.getAssetDepositRequest.result || null;
 
         return (
           <NavWalletDetails
             onUpdateHideBalance={this.updateHideBalance}
             shouldHideBalance={profile.shouldHideBalance}
             rewards={this.getRewardBalance(publicDeriver)}
             walletAmount={balance}
-            assetDeposit={assetDeposit}
             getTokenInfo={genLookupOrFail(this.generated.stores.tokenInfoStore.tokenInfo)}
             defaultToken={this.generated.stores.tokenInfoStore.getDefaultTokenInfo(
               publicDeriver.getParent().getNetworkInfo().NetworkId

packages/yoroi-extension/app/containers/wallet/WalletAssetsPage.js

@@ -13,6 +13,8 @@ import type { TokenRow } from '../../api/ada/lib/storage/database/primitives/tab
 import { genFormatTokenAmount, genLookupOrFail, getTokenIdentifierIfExists, getTokenStrictName } from '../../stores/stateless/tokenHelpers';
 import { truncateToken } from '../../utils/formatters';
 import AssetsPage from '../../components/wallet/assets/AssetsPage';
+import type { TxRequests } from '../../stores/toplevel/TransactionsStore';
+
 
 export type GeneratedData = typeof WalletAssetsPage.prototype.generated;
 
@@ -27,20 +29,32 @@ export default class WalletAssetsPage extends Component<InjectedOrGenerated<Gene
     const getTokenInfo= genLookupOrFail(this.generated.stores.tokenInfoStore.tokenInfo)
 
     const assetsList = (() => {
-        if (spendableBalance == null) return [];
-        return [
-          ...spendableBalance.nonDefaultEntries(),
-        ].map(entry => ({
-          entry,
-          info: getTokenInfo(entry),
-        })).map(token => ({
-          name: truncateToken(getTokenStrictName(token.info) ?? '-'),
-          id: (getTokenIdentifierIfExists(token.info) ?? '-'),
-          amount: genFormatTokenAmount(getTokenInfo)(token.entry)
-        }));
-      })();
+      if (spendableBalance == null) return [];
+      return [
+        ...spendableBalance.nonDefaultEntries(),
+      ].map(entry => ({
+        entry,
+        info: getTokenInfo(entry),
+      })).map(token => ({
+        name: truncateToken(getTokenStrictName(token.info) ?? '-'),
+        id: (getTokenIdentifierIfExists(token.info) ?? '-'),
+        amount: genFormatTokenAmount(getTokenInfo)(token.entry)
+      }));
+    })();
 
-    return <AssetsPage assetsList={assetsList} />
+    const txRequests = this.generated.stores.transactions.getTxRequests(publicDeriver);
+    const assetDeposit = txRequests.requests.getAssetDepositRequest.result || null;
+    const { stores } = this.generated;
+    const { profile } = stores;
+    const isNonZeroDeposit = !assetDeposit?.isEmpty();
+    return (
+      <AssetsPage
+        assetsList={assetsList}
+        getTokenInfo={genLookupOrFail(this.generated.stores.tokenInfoStore.tokenInfo)} 
+        assetDeposit={isNonZeroDeposit ? assetDeposit : null}
+        shouldHideBalance={profile.shouldHideBalance}
+      />
+    )
   }
 
   @computed get generated(): {|
@@ -53,8 +67,12 @@ export default class WalletAssetsPage extends Component<InjectedOrGenerated<Gene
         getBalanceRequest: {|
           result: ?MultiToken,
         |},
+        getTxRequests: (PublicDeriver<>) => TxRequests
+      |},
+      wallets: {| selected: null | PublicDeriver<> |},
+      profile: {|
+        shouldHideBalance: boolean,
       |},
-      wallets: {| selected: null | PublicDeriver<> |}
     |}
     |} {
     if (this.props.generated !== undefined) {
@@ -84,7 +102,11 @@ export default class WalletAssetsPage extends Component<InjectedOrGenerated<Gene
               result: requests.getBalanceRequest.result,
             };
           })(),
-        }
+          getTxRequests: stores.transactions.getTxRequests,
+        },
+        profile: {
+          shouldHideBalance: stores.profile.shouldHideBalance,
+        },
     } })
   }
 };