diff --git a/package.json b/package.json index 8d09df56677..0249a794203 100644 --- a/package.json +++ b/package.json @@ -145,7 +145,7 @@ "edge-currency-monero": "^1.1.1", "edge-currency-plugins": "^2.5.1", "edge-exchange-plugins": "^2.0.0", - "edge-info-server": "^1.2.0", + "edge-info-server": "^1.4.0", "edge-login-ui-rn": "^2.20.0", "ethers": "^5.7.2", "expo": "^48.0.0", diff --git a/src/components/ui4/BlogCard.tsx b/src/components/ui4/BlogCard.tsx index 9ee3ee835a7..b851beb0d8c 100644 --- a/src/components/ui4/BlogCard.tsx +++ b/src/components/ui4/BlogCard.tsx @@ -1,86 +1,84 @@ -// import { BlogPost } from 'edge-info-server/types' -// import * as React from 'react' -// import { Platform, View } from 'react-native' -// import FastImage from 'react-native-fast-image' +import { BlogPost } from 'edge-info-server/types' +import * as React from 'react' +import { Platform, View } from 'react-native' +import FastImage from 'react-native-fast-image' -// import { useHandler } from '../../hooks/useHandler' -// import { getLocaleOrDefaultString } from '../../locales/intl' -// import { openBrowserUri } from '../../util/WebUtils' -// import { cacheStyles, Theme, useTheme } from '../services/ThemeContext' -// import { EdgeText } from '../themed/EdgeText' -// import { CardUi4 } from './CardUi4' +import { useHandler } from '../../hooks/useHandler' +import { getLocaleOrDefaultString } from '../../locales/intl' +import { openBrowserUri } from '../../util/WebUtils' +import { cacheStyles, Theme, useTheme } from '../services/ThemeContext' +import { EdgeText } from '../themed/EdgeText' +import { CardUi4 } from './CardUi4' -// interface Props { -// blogPost: BlogPost -// } +interface Props { + blogPost: BlogPost +} -// const IMAGE_HEIGHT_RATIO = '65%' +const IMAGE_HEIGHT_RATIO = '65%' -// /** -// * Blog post card with a top image and text below. -// */ -// export const BlogCard = (props: Props) => { -// const { localeTitle, localeBody, localeBlogUrl, lightImageUrl, darkImageUrl } = props.blogPost +/** + * Blog post card with a top image and text below. + */ +export const BlogCard = (props: Props) => { + const { localeTitle, localeBody, localeBlogUrl, lightImageUrl, darkImageUrl } = props.blogPost -// const theme = useTheme() -// const styles = getStyles(theme) + const theme = useTheme() + const styles = getStyles(theme) -// const textShadow = Platform.OS === 'ios' ? theme.shadowTextIosUi4 : theme.shadowTextAndroidUi4 + const textShadow = Platform.OS === 'ios' ? theme.shadowTextIosUi4 : theme.shadowTextAndroidUi4 -// const title = getLocaleOrDefaultString(localeTitle) -// const body = getLocaleOrDefaultString(localeBody) -// const url = getLocaleOrDefaultString(localeBlogUrl) -// const image = theme.isDark ? darkImageUrl : lightImageUrl + const title = getLocaleOrDefaultString(localeTitle) + const body = getLocaleOrDefaultString(localeBody) + const url = getLocaleOrDefaultString(localeBlogUrl) + const image = theme.isDark ? darkImageUrl : lightImageUrl -// const handlePress = useHandler(() => { -// if (url != null) openBrowserUri(url) -// }) + const handlePress = useHandler(() => { + if (url != null) openBrowserUri(url) + }) -// return ( -// -// -// -// } -// > -// -// -// -// {title} -// -// -// {body} -// -// -// -// ) -// } + return ( + + + + } + > + + + + {title} + + + {body} + + + + ) +} -// const getStyles = cacheStyles((theme: Theme) => ({ -// backgroundSpacing: { -// height: IMAGE_HEIGHT_RATIO -// }, -// textContainer: { -// margin: theme.rem(0.5) -// }, -// titleText: { -// fontFamily: theme.fontFaceMedium, -// marginBottom: theme.rem(0.25) -// }, -// bodyText: { -// fontSize: theme.rem(0.65) -// }, -// nodeBackground: { -// height: IMAGE_HEIGHT_RATIO, -// justifyConent: 'center', -// alignItems: 'center' -// }, -// bannerImage: { -// height: '100%', -// width: '100%' -// } -// })) - -export const BlogCard = (props: any) => null // TODO +const getStyles = cacheStyles((theme: Theme) => ({ + backgroundSpacing: { + height: IMAGE_HEIGHT_RATIO + }, + textContainer: { + margin: theme.rem(0.5) + }, + titleText: { + fontFamily: theme.fontFaceMedium, + marginBottom: theme.rem(0.25) + }, + bodyText: { + fontSize: theme.rem(0.65) + }, + nodeBackground: { + height: IMAGE_HEIGHT_RATIO, + justifyConent: 'center', + alignItems: 'center' + }, + bannerImage: { + height: '100%', + width: '100%' + } +})) diff --git a/src/components/ui4/CarouselUi4.tsx b/src/components/ui4/CarouselUi4.tsx index c59fc74af18..ba807d6df33 100644 --- a/src/components/ui4/CarouselUi4.tsx +++ b/src/components/ui4/CarouselUi4.tsx @@ -46,7 +46,10 @@ export const CarouselUi4 = (props: Props) => { lockScrollWhileSnapping /> { if (ctaButton == null) return - const { url } = ctaButton + const { localeUrls } = ctaButton + const url = getLocaleOrDefaultString(localeUrls) + if (url == null) { + showError('No PromoCard URL found') + return + } dispatch(linkReferralWithCurrencies(navigation, url)).catch(err => showError(err)) }) diff --git a/src/components/ui4/scenes/HomeSceneUi4.tsx b/src/components/ui4/scenes/HomeSceneUi4.tsx index 2ab5c22f693..f29a5e5bfa4 100644 --- a/src/components/ui4/scenes/HomeSceneUi4.tsx +++ b/src/components/ui4/scenes/HomeSceneUi4.tsx @@ -1,3 +1,4 @@ +import { asBlogPosts, BlogPost } from 'edge-info-server/types' import * as React from 'react' import { View } from 'react-native' import FastImage from 'react-native-fast-image' @@ -11,6 +12,7 @@ import { config } from '../../../theme/appConfig' import { useSelector } from '../../../types/reactRedux' import { EdgeSceneProps } from '../../../types/routerTypes' import { getUi4ImageUri } from '../../../util/CdnUris' +import { fetchInfo } from '../../../util/network' import { EdgeAnim } from '../../common/EdgeAnim' import { SceneWrapper } from '../../common/SceneWrapper' import { PasswordReminderModal } from '../../modals/PasswordReminderModal' @@ -57,8 +59,17 @@ export const HomeSceneUi4 = (props: Props) => { navigation.navigate('walletsTab', { screen: 'walletList' }) }) - // TODO: Reimplement after info server is published - const blogData: any[] = [] + const [blogPosts, setBlogPosts] = React.useState([]) + + // Check for AssetStatuses from info server (known sync issues, etc): + React.useEffect(() => { + fetchInfo(`v1/blogPosts/${config.appId ?? 'edge'}`) + .then(async res => { + const infoData = await res.json() + setBlogPosts(asBlogPosts(infoData)) + }) + .catch(e => console.log(String(e))) + }, []) // Show the password reminder on mount if required: useAsyncEffect( @@ -133,12 +144,12 @@ export const HomeSceneUi4 = (props: Props) => { {/* TODO: Reimplement after info server is published */} - {blogData == null || blogData.length === 0 ? null : ( + {blogPosts == null || blogPosts.length === 0 ? null : ( <> - {blogData.map((blogPost, index) => ( + {blogPosts.map((blogPost, index) => ( ))} diff --git a/yarn.lock b/yarn.lock index 660b05cf81c..06cdb8d1662 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8730,10 +8730,10 @@ edge-exchange-plugins@^2.0.0: regenerator-runtime "0.13.11" xrpl "^2.10.0" -edge-info-server@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/edge-info-server/-/edge-info-server-1.2.0.tgz#3b3e701c92f4c02966e4a198f306841d59b7d7ee" - integrity sha512-gUUfv1nBg2KbPLIstma7osVWJMT0u1Ue5d4Cbu85h9G55HbXIlUVn7zU+l5y/bn7P6r1ywKeif1atlSEwCinDw== +edge-info-server@^1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/edge-info-server/-/edge-info-server-1.4.0.tgz#5da9420c71b1d63a92f74358db1c52fd4f530b5a" + integrity sha512-2Svi1hO6vCwt0I6WnMOd/XrNQNilVTqyvw6i7yVdnnqAwT7eL+efSzMprtr/wWO05DLGE7H8W9saMEX+/EhXLg== dependencies: cleaners "^0.3.16"