diff --git a/package.json b/package.json index a034bb57..9a8fae62 100644 --- a/package.json +++ b/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", diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index f0157cea..14774be1 100644 --- a/src/components/Icon.tsx +++ b/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 { diff --git a/src/screens/MintInfoScreen.tsx b/src/screens/MintInfoScreen.tsx index 25270b36..c473326e 100644 --- a/src/screens/MintInfoScreen.tsx +++ b/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; + disabled: boolean; +} + const iconMap: Partial> = { 'name': 'faTag', 'pubkey': 'faKey', 'version': 'faInfoCircle', 'contact': 'faAddressCard' } +const contactIconMap: Record = { + 'email': 'faEnvelope', + 'twitter': 'faTwitter', + 'telegram': 'faTelegramPlane', + 'discord': 'faDiscord', + 'github': 'faGithub', + 'reddit': 'faReddit' +} const prettyNamesMap: Partial> = {} function MOTDCard(props: {info: GetInfoResponse}) { @@ -84,9 +97,12 @@ function DescriptionCard(props: {info: GetInfoResponse}) { />) } -interface DetailedNutInfo { - methods: Array; - 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 ( + + ) : ( + <> + {contacts.map(([platform, user], index) => ( + {}} + RightComponent={} + 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]) => ( - - - - - ))} - ) - } // @ts-ignore no-implicit-any const leftComponent = key in iconMap ? : void 0 @@ -368,6 +400,8 @@ export const MintInfoScreen: FC> = observer } {mintInfo && ( @@ -383,6 +417,7 @@ export const MintInfoScreen: FC> = observer } style={$card} /> + {mintInfo && }