SiteWallet: convert to tsx

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Widget } from 'soapbox/components/ui';
+import { Text, Widget } from 'soapbox/components/ui';
 import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
 
 import SiteWallet from './site_wallet';
@@ -24,16 +24,16 @@ const CryptoDonatePanel: React.FC<ICryptoDonatePanel> = ({ limit = 3 }): JSX.Ele
 
   return (
     <Widget title={<FormattedMessage id='crypto_donate_panel.heading' defaultMessage='Donate Cryptocurrency' />}>
-      <div className='wtf-panel__content'>
+      <Text>
-        <div className='crypto-donate-panel__message'>
+        <FormattedMessage
-          <FormattedMessage
+          id='crypto_donate_panel.intro.message'
-            id='crypto_donate_panel.intro.message'
+          defaultMessage='{siteTitle} accepts cryptocurrency donations to fund our service. Thank you for your support!'
-            defaultMessage='{siteTitle} accepts cryptocurrency donations to fund our service. Thank you for your support!'
+          values={{ siteTitle }}
-            values={{ siteTitle }}
+        />
-          />
+      </Text>
-        </div>
+
-        <SiteWallet limit={limit} />
+      <SiteWallet limit={limit} />
-      </div>
+
       {hasMore && <Link className='wtf-panel__expand-btn' to='/donate/crypto'>
         <FormattedMessage
           id='crypto_donate_panel.actions.more'

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

@@ -1,67 +0,0 @@
-import { trimStart } from 'lodash';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-
-import CryptoAddress from './crypto_address';
-
-const normalizeAddress = address => {
-  return address.update('ticker', '', ticker => {
-    return trimStart(ticker, '$').toLowerCase();
-  });
-};
-
-const normalizeAddresses = addresses => addresses.map(normalizeAddress);
-
-const makeGetCoinList = () => {
-  return createSelector(
-    [(addresses, limit) => typeof limit === 'number' ? addresses.take(limit) : addresses],
-    addresses => normalizeAddresses(addresses),
-  );
-};
-
-const makeMapStateToProps = () => {
-  const getCoinList = makeGetCoinList();
-
-  const mapStateToProps = (state, ownProps) => {
-    // Address example:
-    // {"ticker": "btc", "address": "bc1q9cx35adpm73aq2fw40ye6ts8hfxqzjr5unwg0n", "note": "This is our main address"}
-    const addresses = state.getIn(['soapbox', 'cryptoAddresses']);
-    const { limit } = ownProps;
-
-    return {
-      coinList: getCoinList(addresses, limit),
-    };
-  };
-
-  return mapStateToProps;
-};
-
-export default @connect(makeMapStateToProps)
-class CoinList extends ImmutablePureComponent {
-
-  static propTypes = {
-    coinList: ImmutablePropTypes.list,
-    limit: PropTypes.number,
-  }
-
-  render() {
-    const { coinList } = this.props;
-    if (!coinList) return null;
-
-    return (
-      <div className='site-wallet'>
-        {coinList.map(coin => (
-          <CryptoAddress
-            key={coin.get('ticker')}
-            {...coin.toJS()}
-          />
-        ))}
-      </div>
-    );
-  }
-
-}

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

@@ -0,0 +1,40 @@
+import { trimStart } from 'lodash';
+import React from 'react';
+
+import { useSoapboxConfig } from 'soapbox/hooks';
+
+import CryptoAddress from './crypto_address';
+
+import type { Map as ImmutableMap, List as ImmutableList } from 'immutable';
+
+type Address = ImmutableMap<string, any>;
+
+// Address example:
+// {"ticker": "btc", "address": "bc1q9cx35adpm73aq2fw40ye6ts8hfxqzjr5unwg0n", "note": "This is our main address"}
+const normalizeAddress = (address: Address): Address => {
+  return address.update('ticker', '', ticker => {
+    return trimStart(ticker, '$').toLowerCase();
+  });
+};
+
+interface ISiteWallet {
+  limit: number,
+}
+
+const SiteWallet: React.FC<ISiteWallet> = ({ limit }): JSX.Element => {
+  const addresses: ImmutableList<Address> = useSoapboxConfig().get('cryptoAddresses');
+  const coinList = addresses.map(normalizeAddress).take(limit);
+
+  return (
+    <div className='site-wallet'>
+      {coinList.map(coin => (
+        <CryptoAddress
+          key={coin.get('ticker')}
+          {...coin.toJS()}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default SiteWallet;