diff --git a/app/soapbox/features/crypto_donate/components/crypto_address.js b/app/soapbox/features/crypto_donate/components/crypto_address.js index b2498101c..0eba72655 100644 --- a/app/soapbox/features/crypto_donate/components/crypto_address.js +++ b/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 (
-
- {title} -
+
{title || ticker.toUpperCase()}
diff --git a/app/soapbox/features/crypto_donate/components/crypto_icon.js b/app/soapbox/features/crypto_donate/components/crypto_icon.js new file mode 100644 index 000000000..401c78963 --- /dev/null +++ b/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 ( +
+ {title +
+ ); + } + +} diff --git a/app/soapbox/features/crypto_donate/components/detailed_crypto_address.js b/app/soapbox/features/crypto_donate/components/detailed_crypto_address.js index de5971d36..0382291c0 100644 --- a/app/soapbox/features/crypto_donate/components/detailed_crypto_address.js +++ b/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() -class DetailedCryptoAddress extends ImmutablePureComponent { +export default class DetailedCryptoAddress extends ImmutablePureComponent { static propTypes = { address: PropTypes.string.isRequired, @@ -26,9 +24,11 @@ class DetailedCryptoAddress extends ImmutablePureComponent { return (
-
- {title} -
+
{title || ticker.toUpperCase()}
{explorerUrl && diff --git a/app/soapbox/features/crypto_donate/utils/coin_icons.js b/app/soapbox/features/crypto_donate/utils/coin_icons.js deleted file mode 100644 index 39fe39ded..000000000 --- a/app/soapbox/features/crypto_donate/utils/coin_icons.js +++ /dev/null @@ -1,4 +0,0 @@ -// For getting the icon -export const getCoinIcon = ticker => { - return require(`cryptocurrency-icons/svg/color/${ticker.toLowerCase()}.svg`); -}; diff --git a/app/soapbox/features/ui/components/modal_root.js b/app/soapbox/features/ui/components/modal_root.js index ab690d44e..9f8a90b0a 100644 --- a/app/soapbox/features/ui/components/modal_root.js +++ b/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 }), }; diff --git a/app/soapbox/features/ui/components/profile_info_panel.js b/app/soapbox/features/ui/components/profile_info_panel.js index 219925ca1..71c4e1386 100644 --- a/app/soapbox/features/ui/components/profile_info_panel.js +++ b/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', '')) ? ( - + + {Component => ( + + )} + ) : (
diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js index fb98c4f5b..4a86d4a61 100644 --- a/app/soapbox/features/ui/util/async-components.js +++ b/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'); } diff --git a/app/soapbox/pages/home_page.js b/app/soapbox/pages/home_page.js index fc630d658..b39403c2f 100644 --- a/app/soapbox/pages/home_page.js +++ b/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 {
{showFundingPanel && } - {showCryptoDonatePanel && } + {showCryptoDonatePanel && ( + + {Component => } + + )}