UI4: Finish Blog Posts/Learn Section

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",

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 (
-//     <CardUi4
-//       onPress={handlePress}
-//       nodeBackground={
-//         <View style={styles.nodeBackground}>
-//           <FastImage source={{ uri: image }} style={styles.bannerImage} />
-//         </View>
-//       }
-//     >
-//       <View style={styles.backgroundSpacing} />
-//       <View style={styles.textContainer}>
-//         <EdgeText style={[textShadow, styles.titleText]} numberOfLines={1}>
-//           {title}
-//         </EdgeText>
-//         <EdgeText style={[styles.bodyText, textShadow]} numberOfLines={2}>
-//           {body}
-//         </EdgeText>
-//       </View>
-//     </CardUi4>
-//   )
-// }
+  return (
+    <CardUi4
+      onPress={handlePress}
+      nodeBackground={
+        <View style={styles.nodeBackground}>
+          <FastImage source={{ uri: image }} style={styles.bannerImage} />
+        </View>
+      }
+    >
+      <View style={styles.backgroundSpacing} />
+      <View style={styles.textContainer}>
+        <EdgeText style={[textShadow, styles.titleText]} numberOfLines={1}>
+          {title}
+        </EdgeText>
+        <EdgeText style={[styles.bodyText, textShadow]} numberOfLines={2} disableFontScaling>
+          {body}
+        </EdgeText>
+      </View>
+    </CardUi4>
+  )
+}
 
-// 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%'
+  }
+}))

src/components/ui4/CarouselUi4.tsx

@@ -46,7 +46,10 @@ export const CarouselUi4 = (props: Props) => {
         lockScrollWhileSnapping
       />
       <Pagination
-        dotContainerStyle={{ marginTop: -theme.rem(2) }}
+        containerStyle={{
+          marginTop: -theme.rem(1),
+          marginBottom: -theme.rem(1)
+        }}
         dotsLength={numChildren}
         activeDotIndex={activeIndex}
         tappableDots

src/components/ui4/PromoCardUi4.tsx

@@ -35,7 +35,12 @@ export function PromoCardUi4Component(props: Props) {
 
   const handlePress = useHandler(() => {
     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))
   })

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<BlogPost[]>([])
+
+  // 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) => {
             <MarketsCardUi4 navigation={navigation} numRows={5} />
           </>
           {/* TODO: Reimplement after info server is published */}
-          {blogData == null || blogData.length === 0 ? null : (
+          {blogPosts == null || blogPosts.length === 0 ? null : (
             <>
               <SectionHeaderUi4 leftTitle={lstrings.title_learn} />
               <View style={styles.carouselContainer}>
                 <CarouselUi4 height={theme.rem(13)} width={screenWidth}>
-                  {blogData.map((blogPost, index) => (
+                  {blogPosts.map((blogPost, index) => (
                     <BlogCard blogPost={blogPost} key={`${JSON.stringify(blogPost.localeTitle)}-${index}`} />
                   ))}
                 </CarouselUi4>

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"