SoapboxConfig: normalize cryptoAddresses

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

@@ -1,4 +1,3 @@
-import { trimStart } from 'lodash';
 import React from 'react';
 
 import { Stack } from 'soapbox/components/ui';
@@ -6,36 +5,22 @@ 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> =
+  const { cryptoAddresses } = useSoapboxConfig();
-    useSoapboxConfig().cryptoAddresses.map(normalizeAddress);
+  const addresses = typeof limit === 'number' ? cryptoAddresses.take(limit) : cryptoAddresses;
-
-  const coinList = typeof limit === 'number' ? addresses.take(limit) : addresses;
 
   return (
     <Stack space={4}>
-      {coinList.map(coin => (
+      {addresses.map(address => (
         <CryptoAddress
-          key={coin.get('ticker')}
+          key={address.ticker}
-          address={coin.get('address')}
+          address={address.address}
-          ticker={coin.get('ticker')}
+          ticker={address.ticker}
-          note={coin.get('note')}
+          note={address.note}
         />
       ))}
     </Stack>

app/soapbox/normalizers/soapbox/soapbox_config.ts

@@ -4,6 +4,13 @@ import {
   Record as ImmutableRecord,
   fromJS,
 } from 'immutable';
+import { trimStart } from 'lodash';
+
+import type {
+  PromoPanelItem,
+  FooterItem,
+  CryptoAddress,
+} from 'soapbox/types/soapbox';
 
 const DEFAULT_COLORS = ImmutableMap({
   gray: ImmutableMap({
@@ -47,6 +54,23 @@ const DEFAULT_COLORS = ImmutableMap({
   'sea-blue': '#2feecc',
 });
 
+export const PromoPanelItemRecord = ImmutableRecord({
+  icon: '',
+  text: '',
+  url: '',
+});
+
+export const FooterItemRecord = ImmutableRecord({
+  title: '',
+  url: '',
+});
+
+export const CryptoAddressRecord = ImmutableRecord({
+  address: '',
+  note: '',
+  ticker: '',
+});
+
 export const SoapboxConfigRecord = ImmutableRecord({
   logo: '',
   banner: '',
@@ -59,10 +83,10 @@ export const SoapboxConfigRecord = ImmutableRecord({
   extensions: ImmutableMap(),
   greentext: false,
   promoPanel: ImmutableMap({
-    items: ImmutableList(),
+    items: ImmutableList<PromoPanelItem>(),
   }),
   navlinks: ImmutableMap({
-    homeFooter: ImmutableList(),
+    homeFooter: ImmutableList<FooterItem>(),
   }),
   allowedEmoji: ImmutableList<string>([
     '👍',
@@ -75,7 +99,7 @@ export const SoapboxConfigRecord = ImmutableRecord({
   verifiedIcon: '',
   verifiedCanEditName: false,
   displayFqn: true,
-  cryptoAddresses: ImmutableList<ImmutableMap<string, any>>(),
+  cryptoAddresses: ImmutableList<CryptoAddress>(),
   cryptoDonatePanel: ImmutableMap({
     limit: 1,
   }),
@@ -89,6 +113,17 @@ export const SoapboxConfigRecord = ImmutableRecord({
 
 type SoapboxConfigMap = ImmutableMap<string, any>;
 
+const normalizeCryptoAddress = (address: unknown): CryptoAddress => {
+  return CryptoAddressRecord(ImmutableMap(fromJS(address))).update('ticker', ticker => {
+    return trimStart(ticker, '$').toLowerCase();
+  });
+};
+
+const normalizeCryptoAddresses = (soapboxConfig: SoapboxConfigMap): SoapboxConfigMap => {
+  const addresses = ImmutableList(soapboxConfig.get('cryptoAddresses'));
+  return soapboxConfig.set('cryptoAddresses', addresses.map(normalizeCryptoAddress));
+};
+
 const normalizeColors = (soapboxConfig: SoapboxConfigMap): SoapboxConfigMap => {
   const colors = DEFAULT_COLORS.mergeDeep(soapboxConfig.get('colors'));
   return soapboxConfig.set('colors', colors);
@@ -98,6 +133,7 @@ export const normalizeSoapboxConfig = (soapboxConfig: Record<string, any>) => {
   return SoapboxConfigRecord(
     ImmutableMap(fromJS(soapboxConfig)).withMutations(soapboxConfig => {
       normalizeColors(soapboxConfig);
+      normalizeCryptoAddresses(soapboxConfig);
     }),
   );
 };

app/soapbox/types/soapbox.ts

@@ -1,5 +1,18 @@
-import { SoapboxConfigRecord } from 'soapbox/normalizers';
+import {
+  PromoPanelItemRecord,
+  FooterItemRecord,
+  CryptoAddressRecord,
+  SoapboxConfigRecord,
+} from 'soapbox/normalizers/soapbox/soapbox_config';
 
+type PromoPanelItem = ReturnType<typeof PromoPanelItemRecord>;
+type FooterItem = ReturnType<typeof FooterItemRecord>;
+type CryptoAddress = ReturnType<typeof CryptoAddressRecord>;
 type SoapboxConfig = ReturnType<typeof SoapboxConfigRecord>;
 
-export { SoapboxConfig };
+export {
+  PromoPanelItem,
+  FooterItem,
+  CryptoAddress,
+  SoapboxConfig,
+};