Merge branch 'crypto-donate-optimize' into 'develop'

CryptoDonate optimizations

See merge request soapbox-pub/soapbox-fe!741

app/soapbox/features/crypto_donate/components/crypto_address.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Icon from 'soapbox/components/icon';
 import CoinDB from '../utils/coin_db';
-import { getCoinIcon } from '../utils/coin_icons';
+import CryptoIcon from './crypto_icon';
 import { openModal } from 'soapbox/actions/modal';
 import { CopyableInput } from 'soapbox/features/forms';
 import { getExplorerUrl } from '../utils/block_explorer';
@@ -31,9 +31,11 @@ class CryptoAddress extends ImmutablePureComponent {
     return (
       <div className='crypto-address'>
         <div className='crypto-address__head'>
-          <div className='crypto-address__icon'>
+          <CryptoIcon
-            <img src={getCoinIcon(ticker)} alt={title} />
+            className='crypto-address__icon'
-          </div>
+            ticker={ticker}
+            title={title}
+          />
           <div className='crypto-address__title'>{title || ticker.toUpperCase()}</div>
           <div className='crypto-address__actions'>
             <a href='' onClick={this.handleModalClick}>

app/soapbox/features/crypto_donate/components/crypto_icon.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export default class CryptoIcon extends React.PureComponent {
+
+  static propTypes = {
+    ticker: PropTypes.string.isRequired,
+    title: PropTypes.string,
+    className: PropTypes.string,
+  }
+
+  render() {
+    const { ticker, title, className } = this.props;
+
+    return (
+      <div className={classNames('crypto-icon', className)}>
+        <img
+          src={require(`cryptocurrency-icons/svg/color/${ticker.toLowerCase()}.svg`)}
+          alt={title || ticker}
+        />
+      </div>
+    );
+  }
+
+}

app/soapbox/features/crypto_donate/components/detailed_crypto_address.js

@@ -1,16 +1,14 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Icon from 'soapbox/components/icon';
 import QRCode from 'qrcode.react';
 import CoinDB from '../utils/coin_db';
-import { getCoinIcon } from '../utils/coin_icons';
+import CryptoIcon from './crypto_icon';
 import { CopyableInput } from 'soapbox/features/forms';
 import { getExplorerUrl } from '../utils/block_explorer';
 
-export default @connect()
+export default class DetailedCryptoAddress extends ImmutablePureComponent {
-class DetailedCryptoAddress extends ImmutablePureComponent {
 
   static propTypes = {
     address: PropTypes.string.isRequired,
@@ -26,9 +24,11 @@ class DetailedCryptoAddress extends ImmutablePureComponent {
     return (
       <div className='crypto-address'>
         <div className='crypto-address__head'>
-          <div className='crypto-address__icon'>
+          <CryptoIcon
-            <img src={getCoinIcon(ticker)} alt={title} />
+            className='crypto-address__icon'
-          </div>
+            ticker={ticker}
+            title={title}
+          />
           <div className='crypto-address__title'>{title || ticker.toUpperCase()}</div>
           <div className='crypto-address__actions'>
             {explorerUrl && <a href={explorerUrl} target='_blank'>

app/soapbox/features/crypto_donate/utils/coin_icons.js

@@ -1,4 +0,0 @@
-// For getting the icon
-export const getCoinIcon = ticker => {
-  return require(`cryptocurrency-icons/svg/color/${ticker.toLowerCase()}.svg`);
-};

app/soapbox/features/ui/components/modal_root.js

@@ -14,13 +14,13 @@ import FocalPointModal from './focal_point_modal';
 import HotkeysModal from './hotkeys_modal';
 import ComposeModal from './compose_modal';
 import UnauthorizedModal from './unauthorized_modal';
-import CryptoDonateModal from './crypto_donate_modal';
 import EditFederationModal from './edit_federation_modal';
 
 import {
   MuteModal,
   ReportModal,
   EmbedModal,
+  CryptoDonateModal,
   ListEditor,
   ListAdder,
 } from '../../../features/ui/util/async-components';
@@ -41,7 +41,7 @@ const MODAL_COMPONENTS = {
   'HOTKEYS': () => Promise.resolve({ default: HotkeysModal }),
   'COMPOSE': () => Promise.resolve({ default: ComposeModal }),
   'UNAUTHORIZED': () => Promise.resolve({ default: UnauthorizedModal }),
-  'CRYPTO_DONATE': () => Promise.resolve({ default: CryptoDonateModal }),
+  'CRYPTO_DONATE': CryptoDonateModal,
   'EDIT_FEDERATION': () => Promise.resolve({ default: EditFederationModal }),
 };
 

app/soapbox/features/ui/components/profile_info_panel.js

@@ -5,6 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Icon from 'soapbox/components/icon';
 import VerificationBadge from 'soapbox/components/verification_badge';
@@ -13,7 +14,7 @@ import { List as ImmutableList } from 'immutable';
 import { getAcct, isAdmin, isModerator, isLocal } from 'soapbox/utils/accounts';
 import { displayFqn } from 'soapbox/utils/state';
 import classNames from 'classnames';
-import CryptoAddress from 'soapbox/features/crypto_donate/components/crypto_address';
+import { CryptoAddress } from 'soapbox/features/ui/util/async-components';
 
 const TICKER_REGEX = /\$([a-zA-Z]*)/i;
 
@@ -143,7 +144,15 @@ class ProfileInfoPanel extends ImmutablePureComponent {
 
               {fields.map((pair, i) =>
                 isTicker(pair.get('name', '')) ? (
-                  <CryptoAddress key={i} ticker={getTicker(pair.get('name')).toLowerCase()} address={pair.get('value_plain')} />
+                  <BundleContainer fetchComponent={CryptoAddress}>
+                    {Component => (
+                      <Component
+                        key={i}
+                        ticker={getTicker(pair.get('name')).toLowerCase()}
+                        address={pair.get('value_plain')}
+                      />
+                    )}
+                  </BundleContainer>
                 ) : (
                   <dl className='profile-info-panel-content__fields__item' key={i}>
                     <dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} />

app/soapbox/features/ui/util/async-components.js

@@ -250,6 +250,18 @@ export function CryptoDonate() {
   return import(/* webpackChunkName: "features/crypto_donate" */'../../crypto_donate');
 }
 
+export function CryptoDonatePanel() {
+  return import(/* webpackChunkName: "features/crypto_donate" */'../../crypto_donate/components/crypto_donate_panel');
+}
+
+export function CryptoAddress() {
+  return import(/* webpackChunkName: "features/crypto_donate" */'../../crypto_donate/components/crypto_address');
+}
+
+export function CryptoDonateModal() {
+  return import(/* webpackChunkName: "mfeatures/crypto_donate" */'../components/crypto_donate_modal');
+}
+
 export function ScheduledStatuses() {
   return import(/* webpackChunkName: "features/scheduled_statuses" */'../../scheduled_statuses');
 }

app/soapbox/pages/home_page.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import ImmutablePureComponent from 'react-immutable-pure-component';
+import BundleContainer from '../features/ui/containers/bundle_container';
 import ComposeFormContainer from '../features/compose/containers/compose_form_container';
 import Avatar from '../components/avatar';
 import UserPanel from 'soapbox/features/ui/components/user_panel';
@@ -9,7 +10,7 @@ import WhoToFollowPanel from 'soapbox/features/ui/components/who_to_follow_panel
 import TrendsPanel from 'soapbox/features/ui/components/trends_panel';
 import PromoPanel from 'soapbox/features/ui/components/promo_panel';
 import FundingPanel from 'soapbox/features/ui/components/funding_panel';
-import CryptoDonatePanel from 'soapbox/features/crypto_donate/components/crypto_donate_panel';
+import { CryptoDonatePanel } from 'soapbox/features/ui/util/async-components';
 // import GroupSidebarPanel from '../features/groups/sidebar_panel';
 import FeaturesPanel from 'soapbox/features/ui/components/features_panel';
 import SignUpPanel from 'soapbox/features/ui/components/sign_up_panel';
@@ -58,7 +59,11 @@ class HomePage extends ImmutablePureComponent {
               <div className='columns-area__panels__pane__inner'>
                 <UserPanel accountId={me} key='user-panel' />
                 {showFundingPanel && <FundingPanel key='funding-panel' />}
-                {showCryptoDonatePanel && <CryptoDonatePanel limit={cryptoLimit} key='crypto-panel' />}
+                {showCryptoDonatePanel && (
+                  <BundleContainer fetchComponent={CryptoDonatePanel}>
+                    {Component => <Component limit={cryptoLimit} key='crypto-panel' />}
+                  </BundleContainer>
+                )}
               </div>
             </div>