Display CryptoDonatePanel, convert to tsx

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

@@ -1,76 +0,0 @@
-import classNames from 'classnames';
-import { List as ImmutableList } from 'immutable';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
-
-import Icon from 'soapbox/components/icon';
-
-import SiteWallet from './site_wallet';
-
-const mapStateToProps = state => {
-  const addresses = state.getIn(['soapbox', 'cryptoAddresses'], ImmutableList());
-  return {
-    total: addresses.size,
-    siteTitle: state.getIn(['instance', 'title']),
-  };
-};
-
-export default @connect(mapStateToProps)
-class CryptoDonatePanel extends ImmutablePureComponent {
-
-  static propTypes = {
-    limit: PropTypes.number,
-    total: PropTypes.number,
-  }
-
-  static defaultProps = {
-    limit: 3,
-  }
-
-  shouldDisplay = () => {
-    const { limit, total } = this.props;
-    if (limit === 0 || total === 0) return false;
-    return true;
-  }
-
-  render() {
-    const { limit, total, siteTitle } = this.props;
-    const more = total - limit;
-    const hasMore = more > 0;
-
-    if (!this.shouldDisplay()) return null;
-
-    return (
-      <div className={classNames('wtf-panel funding-panel crypto-donate-panel', { 'crypto-donate-panel--has-more': hasMore })}>
-        <div className='wtf-panel-header'>
-          <Icon src={require('@tabler/icons/icons/currency-bitcoin.svg')} className='wtf-panel-header__icon' />
-          <span className='wtf-panel-header__label'>
-            <span><FormattedMessage id='crypto_donate_panel.heading' defaultMessage='Donate Cryptocurrency' /></span>
-          </span>
-        </div>
-        <div className='wtf-panel__content'>
-          <div className='crypto-donate-panel__message'>
-            <FormattedMessage
-              id='crypto_donate_panel.intro.message'
-              defaultMessage='{siteTitle} accepts cryptocurrency donations to fund our service. Thank you for your support!'
-              values={{ siteTitle }}
-            />
-          </div>
-          <SiteWallet limit={limit} />
-        </div>
-        {hasMore && <Link className='wtf-panel__expand-btn' to='/donate/crypto'>
-          <FormattedMessage
-            id='crypto_donate_panel.actions.more'
-            defaultMessage='Click to see {count} more {count, plural, one {wallet} other {wallets}}'
-            values={{ count: more }}
-          />
-        </Link>}
-      </div>
-    );
-  }
-
-}

app/soapbox/features/crypto_donate/components/crypto_donate_panel.tsx

@@ -0,0 +1,55 @@
+import classNames from 'classnames';
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
+
+import Icon from 'soapbox/components/icon';
+import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
+
+import SiteWallet from './site_wallet';
+
+interface ICryptoDonatePanel {
+  limit: number,
+}
+
+const CryptoDonatePanel: React.FC<ICryptoDonatePanel> = ({ limit = 3 }): JSX.Element | null => {
+  const addresses = useSoapboxConfig().get('cryptoAddresses');
+  const siteTitle = useAppSelector((state) => state.instance.title);
+
+  if (limit === 0 || addresses.size === 0) {
+    return null;
+  }
+
+  const more = addresses.size - limit;
+  const hasMore = more > 0;
+
+  return (
+    <div className={classNames('wtf-panel funding-panel crypto-donate-panel', { 'crypto-donate-panel--has-more': hasMore })}>
+      <div className='wtf-panel-header'>
+        <Icon src={require('@tabler/icons/icons/currency-bitcoin.svg')} className='wtf-panel-header__icon' />
+        <span className='wtf-panel-header__label'>
+          <span><FormattedMessage id='crypto_donate_panel.heading' defaultMessage='Donate Cryptocurrency' /></span>
+        </span>
+      </div>
+      <div className='wtf-panel__content'>
+        <div className='crypto-donate-panel__message'>
+          <FormattedMessage
+            id='crypto_donate_panel.intro.message'
+            defaultMessage='{siteTitle} accepts cryptocurrency donations to fund our service. Thank you for your support!'
+            values={{ siteTitle }}
+          />
+        </div>
+        <SiteWallet limit={limit} />
+      </div>
+      {hasMore && <Link className='wtf-panel__expand-btn' to='/donate/crypto'>
+        <FormattedMessage
+          id='crypto_donate_panel.actions.more'
+          defaultMessage='Click to see {count} more {count, plural, one {wallet} other {wallets}}'
+          values={{ count: more }}
+        />
+      </Link>}
+    </div>
+  );
+};
+
+export default CryptoDonatePanel;

app/soapbox/pages/home_page.js

@@ -10,6 +10,7 @@ import {
   WhoToFollowPanel,
   TrendsPanel,
   SignUpPanel,
+  CryptoDonatePanel,
 } from 'soapbox/features/ui/util/async-components';
 // import GroupSidebarPanel from '../features/groups/sidebar_panel';
 import { getFeatures } from 'soapbox/utils/features';
@@ -31,10 +32,9 @@ const mapStateToProps = state => {
     me,
     account: state.getIn(['accounts', me]),
     showFundingPanel: hasPatron,
-    showCryptoDonatePanel: hasCrypto && cryptoLimit > 0,
+    hasCrypto,
     cryptoLimit,
-    showTrendsPanel: features.trends,
-    showWhoToFollowPanel: features.suggestions,
+    features,
   };
 };
 
@@ -47,7 +47,7 @@ class HomePage extends ImmutablePureComponent {
   }
 
   render() {
-    const { me, children, account, showTrendsPanel, showWhoToFollowPanel } = this.props;
+    const { me, children, account, features, hasCrypto, cryptoLimit } = this.props;
 
     const acct = account ? account.get('acct') : '';
 
@@ -80,17 +80,22 @@ class HomePage extends ImmutablePureComponent {
         <Layout.Aside>
           {!me && (
             <BundleContainer fetchComponent={SignUpPanel}>
-              {Component => <Component key='sign-up-panel' />}
+              {Component => <Component />}
             </BundleContainer>
           )}
-          {showTrendsPanel && (
+          {features.trends && (
             <BundleContainer fetchComponent={TrendsPanel}>
-              {Component => <Component limit={3} key='trends-panel' />}
+              {Component => <Component limit={3} />}
             </BundleContainer>
           )}
-          {showWhoToFollowPanel && (
+          {hasCrypto && cryptoLimit > 0 && (
+            <BundleContainer fetchComponent={CryptoDonatePanel}>
+              {Component => <Component limit={cryptoLimit} />}
+            </BundleContainer>
+          )}
+          {features.suggestions && (
             <BundleContainer fetchComponent={WhoToFollowPanel}>
-              {Component => <Component limit={5} key='wtf-panel' />}
+              {Component => <Component limit={5} />}
             </BundleContainer>
           )}
           <LinkFooter key='link-footer' />