add brand icons in preparation for improved contacts screen

package.json

@@ -13,14 +13,15 @@
     "start": "npx react-native start",
     "test": "jest",
     "adb": "adb devices && adb reverse tcp:9090 tcp:9090 && adb reverse tcp:3000 tcp:3000 && adb reverse tcp:9001 tcp:9001 && adb reverse tcp:8081 tcp:8081",
-	"adb:unreverse": "adb devices && adb reverse --remove-all",
-	"adb:inspect": "adb shell input keyevent 82",
-	"i18n:missing": "node __tests__/missingTranslations.js", 
+    "adb:unreverse": "adb devices && adb reverse --remove-all",
+    "adb:inspect": "adb shell input keyevent 82",
+    "i18n:missing": "node __tests__/missingTranslations.js",
     "postinstall": "patch-package --exclude 'nothing'"
   },
   "dependencies": {
     "@cashu/cashu-ts": "1.0.0-rc.3",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
     "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-native-fontawesome": "^0.3.0",

src/components/Icon.tsx

@@ -14,6 +14,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
 import { colors, spacing, useThemeColor } from "../theme"
 import { IconDefinition, Transform } from "@fortawesome/fontawesome-svg-core"
 
+import { 
+  faTwitter, 
+  faTelegramPlane,
+  faDiscord,
+  faGithub,
+  faReddit
+} from "@fortawesome/free-brands-svg-icons"
 import {
   faAddressBook,
   faAddressCard,
@@ -78,7 +85,8 @@ import {
   faChevronDown,
   faChevronUp,
   faCircleExclamation,
-  faCircleQuestion
+  faCircleQuestion,
+  faEnvelope
 } from '@fortawesome/free-solid-svg-icons'
 
 
@@ -86,7 +94,7 @@ export type IconTypes = keyof typeof iconRegistry
 
 // TODO remove need for manual iconregistry? 
 // would be best to just import all of them, i guess, or figure out something smart
-export const iconRegistry = { faAddressCard, faAddressBook, faWallet, faQrcode, faClipboard, faSliders, faCoins, faEllipsisVertical, faEllipsis, faArrowUp, faArrowDown, faArrowLeft, faXmark, faInfoCircle, faBug, faCheckCircle, faArrowTurnUp, faArrowTurnDown, faPencil, faTags, faShareFromSquare, faRotate, faCode, faBan, faCircle, faPaperPlane, faBolt, faArrowUpFromBracket, faArrowRightToBracket, faPlus, faShieldHalved, faCloudArrowUp, faPaintbrush, faCopy, faBurst, faUserShield, faLock, faLockOpen, faTriangleExclamation, faDownload, faUpload, faRecycle, faListUl, faExpand, faFingerprint, faWandMagicSparkles, faCircleUser, faComment, faKey, faCircleNodes, faBullseye, faEyeSlash, faUpRightFromSquare, faShareNodes, faPaste, faKeyboard, faMoneyBill1, faGears, faTag, faBank, faChevronDown, faChevronUp, faCircleExclamation, faCircleQuestion }
+export const iconRegistry = { faAddressCard, faAddressBook, faWallet, faQrcode, faClipboard, faSliders, faCoins, faEllipsisVertical, faEllipsis, faArrowUp, faArrowDown, faArrowLeft, faXmark, faInfoCircle, faBug, faCheckCircle, faArrowTurnUp, faArrowTurnDown, faPencil, faTags, faShareFromSquare, faRotate, faCode, faBan, faCircle, faPaperPlane, faBolt, faArrowUpFromBracket, faArrowRightToBracket, faPlus, faShieldHalved, faCloudArrowUp, faPaintbrush, faCopy, faBurst, faUserShield, faLock, faLockOpen, faTriangleExclamation, faDownload, faUpload, faRecycle, faListUl, faExpand, faFingerprint, faWandMagicSparkles, faCircleUser, faComment, faKey, faCircleNodes, faBullseye, faEyeSlash, faUpRightFromSquare, faShareNodes, faPaste, faKeyboard, faMoneyBill1, faGears, faTag, faBank, faChevronDown, faChevronUp, faCircleExclamation, faCircleQuestion, faEnvelope, faTwitter, faTelegramPlane, faDiscord, faGithub, faReddit }
 
 
 interface IconProps extends TouchableOpacityProps {

src/screens/MintInfoScreen.tsx

@@ -4,7 +4,7 @@ import { isObj } from '@cashu/cashu-ts/src/utils'
 import Clipboard from '@react-native-clipboard/clipboard'
 import { observer } from 'mobx-react-lite'
 import { getSnapshot } from 'mobx-state-tree'
-import { DimensionValue, LayoutAnimation, Platform, TextStyle, UIManager, View, ViewStyle } from 'react-native'
+import { DimensionValue, LayoutAnimation, Platform, TextStyle, UIManager, View, ViewStyle, Pressable } from 'react-native'
 import JSONTree from 'react-native-json-tree'
 import {
   $sizeStyles,
@@ -39,12 +39,25 @@ if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental
   UIManager.setLayoutAnimationEnabledExperimental(true)
 }
 
+interface DetailedNutInfo {
+  methods: Array<SwapMethod>;
+  disabled: boolean;
+}
+
 const iconMap: Partial<Record<keyof GetInfoResponse, IconTypes>> = {
   'name': 'faTag',
   'pubkey': 'faKey',
   'version': 'faInfoCircle',
   'contact': 'faAddressCard'
 }
+const contactIconMap: Record<string, IconTypes> = {
+  'email': 'faEnvelope',
+  'twitter': 'faTwitter',
+  'telegram': 'faTelegramPlane',
+  'discord': 'faDiscord',
+  'github': 'faGithub',
+  'reddit': 'faReddit'
+}
 const prettyNamesMap: Partial<Record<keyof GetInfoResponse, string>> = {}
 
 function MOTDCard(props: {info: GetInfoResponse}) {
@@ -84,9 +97,12 @@ function DescriptionCard(props: {info: GetInfoResponse}) {
   />)
 }
 
-interface DetailedNutInfo {
-  methods: Array<SwapMethod>;
-  disabled: boolean;
+const $nutItem: ViewStyle = {
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  gap: spacing.extraSmall,
+  // borderWidth: 1, borderColor: 'red'
 }
 
 function NutItem(props: {
@@ -97,13 +113,6 @@ function NutItem(props: {
   nutInfo?: DetailedNutInfo
 }) {
   const textDim = useThemeColor('textDim')
-  const $nutItem: ViewStyle = {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    gap: spacing.extraSmall,
-    // borderWidth: 1, borderColor: 'red'
-  }
   const $nutIcon: ViewStyle = { paddingHorizontal: 0 }
 
   return (
@@ -187,13 +196,53 @@ function NutsCard(props: {info: GetInfoResponse}) {
   />)
 }
 
+const $contactListItem: ViewStyle = { 
+  flexDirection: 'row',
+  columnGap: spacing.tiny
+}
+
+function ContactCard(props: { info: GetInfoResponse }) {
+  const textDim = useThemeColor('textDim')
+
+  let contacts = props.info.contact.filter(([k, v]) => k.trim() !== '') // filter out empty contacts
+  return (
+    <Card
+      heading="Contacts"
+      HeadingTextProps={{style: [$sizeStyles.sm, {color: textDim}]}}
+      ContentComponent={
+        contacts.length === 0 ? (
+          <Text
+            style={{fontStyle: 'italic'}}
+            size="xs"
+            key={'contacts'}
+            text={translate('mintInfo.emptyValueParam', {param: 'contacts'})}
+          />
+        ) : (
+          <>
+            {contacts.map(([platform, user], index) => (
+              <ListItem
+                style={$contactListItem}
+                key={platform}
+                text={platform}
+                textStyle={$sizeStyles.xs}
+                onPress={() => {}}
+                RightComponent={<View style={{ width: spacing.screenWidth * 0.6 }}><Text text={user}/></View>}
+                topSeparator={index !== 0}
+              />
+            ))}
+          </>
+        )
+      }
+    />
+  )
+}
+
 /** don't render these because they're rendered in separate components */
-const detailsHiddenKeys = new Set(['name', 'motd', 'description', 'description_long', 'nuts'])
+const detailsHiddenKeys = new Set(['name', 'motd', 'description', 'description_long', 'nuts', 'contact'])
 
 /** key-value pairs of details about the mint */
 function MintInfoDetails(props: { info: GetInfoResponse, popupMessage: (msg: string) => void }) {
   const iconColor = useThemeColor('textDim')
-  const contactPlatformColor = useThemeColor('textDim')
 
   const items: React.JSX.Element[] = Object.entries(props.info)
     .filter(([key, value]) => !(detailsHiddenKeys.has(key)))
@@ -215,23 +264,6 @@ function MintInfoDetails(props: { info: GetInfoResponse, popupMessage: (msg: str
         Clipboard.setString(stringValue)
         props.popupMessage(translate('common.copySuccessParam', { param: stringValue }))
       }
-      
-      if (key === 'contact') {
-        let contacts = (value as [string, string][])
-          .filter(([k, v]) => k.trim() !== '') // filter out empty contacts
-        valueComponent = (contacts.length === 0) ? missingComponent : (<>
-          {contacts.map(([platform, user]) => (
-              <View style={$contactListItem} key={platform}>
-                <Text
-                  size="xs"
-                  text={`${platform}:`}
-                  style={{ color: contactPlatformColor }}
-                />
-                <Text size="xs" text={user} />
-              </View>
-            ))}
-        </>)
-      }
 
       // @ts-ignore no-implicit-any
       const leftComponent = key in iconMap ? <Icon icon={iconMap[key]} color={iconColor}/> : void 0
@@ -368,6 +400,8 @@ export const MintInfoScreen: FC<SettingsStackScreenProps<'MintInfo'>> = observer
           <NutsCard info={mintInfo} />
         </>}
         <Card
+          heading={mintInfo && "More Info"}
+          HeadingTextProps={{style: [$sizeStyles.sm, {color: textDim}]}}
           ContentComponent={
             <>
               {mintInfo && (
@@ -383,6 +417,7 @@ export const MintInfoScreen: FC<SettingsStackScreenProps<'MintInfo'>> = observer
           }
           style={$card}
         />
+        {mintInfo && <ContactCard info={mintInfo} />}
         <Card
           style={$card}
           ContentComponent={
@@ -431,16 +466,6 @@ const $listItem: ViewStyle = {
   columnGap: spacing.micro,
   alignItems: 'center',
 }
-const $contactListItem: ViewStyle = { 
-  flexDirection: 'row',
-  columnGap: spacing.tiny
-}
-
-const $headerContainer: TextStyle = {
-  alignItems: 'center',
-  padding: spacing.medium,
-  height: spacing.screenHeight * 0.1,
-}
 
 const $contentContainer: TextStyle = {
   rowGap: spacing.small,

yarn.lock

@@ -1284,6 +1284,13 @@
   dependencies:
     "@fortawesome/fontawesome-common-types" "6.5.2"
 
+"@fortawesome/free-brands-svg-icons@^6.5.2":
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.2.tgz#bfca0cebd2c4713dc93244e1fa8b384f1f023587"
+  integrity sha512-zi5FNYdmKLnEc0jc0uuHH17kz/hfYTg4Uei0wMGzcoCL/4d3WM3u1VMc0iGGa31HuhV5i7ZK8ZlTCQrHqRHSGQ==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.5.2"
+
 "@fortawesome/free-regular-svg-icons@^6.5.2":
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.5.2.tgz#e8e04b4368d49920abdf1bacc63c67c870635222"