feat: whats new section (#1063)

* feat: whats new

* update apps/web/src/components/Home/Popping/index.tsx

* feat: scroll

* update LiveStreamCard.tsx, trimLensHandle.ts and packages/helpers/generic/index.ts

* update 6 files

* update 6 files

* update ZoraNft.tsx

* update Metadata.tsx and ZoraNft.tsx

* update ZoraNft.tsx

* update LiveStreamCard.tsx, ZoraNft.tsx, UnlonelyStreams.tsx and useDid.ts

* update apps/web/src/components/Stream/index.tsx

* update 5 files

* style: format code with Prettier

This commit fixes the style issues introduced in 98b2105 according to the output
from Prettier.

Details: #1063

* update 5 files

* update Collect.tsx, ZoraNft.tsx, UnlonelyStreams.tsx and WhatsPoppingSectionShimmer.tsx

* chore: i18n

* build(deps): update yarn.lock

* update 6 files

* update 13 files

* build(deps): update package.json and yarn.lock

* Merge branch 'main' into streams

* style: format code with Prettier

This commit fixes the style issues introduced in 795475f according to the output
from Prettier.

Details: #1063

* update messages.po

* update messages.po, messages.po, messages.po and messages.po

* update Feed.tsx and TimelineShimmer.tsx

* update Collect.tsx, Metadata.tsx and apps/web/src/components/Home/Popping/index.tsx

* update LiveVideo.tsx and apps/web/src/components/Stream/index.tsx

* update apps/web/src/components/Home/Popping/index.tsx

* update apps/web/src/components/Home/Popping/index.tsx, apps/web/src/components/Stream/index.tsx and general.ts

* delete 5 files

* update apps/web/src/components/Stream/index.tsx

* chore: i18n

* chore: i18n

* update Metadata.tsx and ZoraNft.tsx

* update Collect.tsx

* update SignInWithQR.tsx, general.ts and wrangler.toml

---------

Co-authored-by: Sasi <me@sasi.codes>
Co-authored-by: deepsource-autofix[bot] <62050782+deepsource-autofix[bot]@users.noreply.github.com>

apps/mobile/src/components/common/auth/SignInWithQR.tsx

@@ -69,7 +69,7 @@ const SignInWithQR = () => {
           }}
         >
           <Text style={style.text}>
-            Open auth.lenstube.xyz and scan the QR after you sign in with lens
+            Open auth.tape.xyz and scan the QR after you sign in with lens
           </Text>
         </View>
       </Sheet>

apps/mobile/src/components/watch/Metadata.tsx

@@ -1,6 +1,7 @@
 import { getRelativeTime, trimNewLines } from '@lenstube/generic'
 import type { Publication } from '@lenstube/lens'
 import type { MobileThemeConfig } from '@lenstube/lens/custom-types'
+import { getRelativeTime } from '@lib/formatTime'
 import type { FC } from 'react'
 import React, { useState } from 'react'
 import { Pressable, StyleSheet, Text, View } from 'react-native'

apps/mobile/src/components/watch/Player.tsx

@@ -1,12 +1,12 @@
 import Ionicons from '@expo/vector-icons/Ionicons'
+import { useNavigation } from '@react-navigation/native'
 import {
   getPublicationHlsUrl,
   getThumbnailUrl,
   imageCdn
-} from '@lenstube/generic'
-import type { Publication } from '@lenstube/lens'
-import type { MobileThemeConfig } from '@lenstube/lens/custom-types'
-import { useNavigation } from '@react-navigation/native'
+} from '@tape.xyz/generic'
+import type { Publication } from '@tape.xyz/lens'
+import type { MobileThemeConfig } from '@tape.xyz/lens/custom-types'
 import { ResizeMode, Video } from 'expo-av'
 import type { FC } from 'react'
 import React from 'react'

apps/web/lingui.config.js

@@ -1,11 +1,20 @@
 /** @type {import('@lingui/conf').LinguiConfig} */
 module.exports = {
   locales: ['en', 'es', 'fr', 'zh'],
+  sourceLocale: 'en',
   catalogs: [
     {
       path: 'src/locales/{locale}/messages',
       include: ['src']
     }
   ],
-  format: 'po'
+  orderBy: 'origin',
+  format: 'po',
+  fallbackLocales: {
+    default: 'en'
+  },
+  formatOptions: {
+    origins: true,
+    lineNumbers: false
+  }
 }

apps/web/next.config.js

@@ -1,3 +1,5 @@
+const linguiConfig = require('./lingui.config')
+
 /** @type {import('next').NextConfig} */
 const headers = [{ key: 'Cache-Control', value: 'public, max-age=3600' }]
 const moduleExports = {
@@ -13,6 +15,10 @@ const moduleExports = {
     newNextLinkBehavior: true,
     swcPlugins: [['@lingui/swc-plugin', {}]]
   },
+  i18n: {
+    locales: linguiConfig.locales,
+    defaultLocale: linguiConfig.sourceLocale
+  },
   async rewrites() {
     return [
       {

apps/web/src/components/Channel/Tabs/SharedLinks.tsx

@@ -73,15 +73,8 @@ const SharedLinks: FC<Props> = ({ channel }) => {
       {!error && !loading && (
         <>
           <div className="grid gap-x-4 gap-y-2 md:grid-cols-4 md:gap-y-8 lg:grid-cols-5">
-            {links?.map(({ metadata, profile, createdAt }: Publication, i) => {
-              return (
-                <SharedLink
-                  key={i}
-                  metadata={metadata}
-                  sharedBy={profile}
-                  postedAt={createdAt}
-                />
-              )
+            {links?.map(({ metadata }: Publication, i) => {
+              return <SharedLink key={i} metadata={metadata} />
             })}
           </div>
           {pageInfo?.next && (

apps/web/src/components/Common/LiveStreamCard.tsx

@@ -0,0 +1,92 @@
+import { getShortHandTime } from '@lib/formatTime'
+import { FALLBACK_COVER_URL } from '@tape.xyz/constants'
+import {
+  getRandomProfilePicture,
+  trimLensHandle,
+  useDid
+} from '@tape.xyz/generic'
+import Link from 'next/link'
+import type { FC, ReactNode } from 'react'
+import React from 'react'
+
+type Props = {
+  name: string
+  description: string
+  thumbnailUrl: string
+  isLive: boolean
+  address: string
+  username: string
+  createdAt: string
+  slug: string
+  app: ReactNode
+}
+
+const LiveStreamCard: FC<Props> = ({
+  name,
+  description,
+  thumbnailUrl,
+  address,
+  isLive,
+  createdAt,
+  username,
+  app,
+  slug
+}) => {
+  const { did } = useDid({ address, enabled: Boolean(address) })
+
+  return (
+    <div className="w-72">
+      <Link href={`/stream/${slug}`}>
+        <div className="aspect-w-16 aspect-h-9 relative overflow-hidden">
+          <img
+            src={thumbnailUrl}
+            className="h-full w-full rounded-xl bg-gray-100 object-cover object-center dark:bg-gray-900 lg:h-full lg:w-full"
+            alt="thumbnail"
+            draggable={false}
+            onError={({ currentTarget }) => {
+              currentTarget.src = FALLBACK_COVER_URL
+            }}
+          />
+          {isLive && (
+            <div>
+              <span className="absolute bottom-1 right-1 rounded-xl bg-red-500 px-2 text-sm font-semibold text-white">
+                Live
+              </span>
+            </div>
+          )}
+        </div>
+      </Link>
+      <div className="py-1">
+        <div className="flex items-start space-x-2.5">
+          <img
+            className="mt-1 h-8 w-8 rounded-full"
+            src={getRandomProfilePicture(address ?? '')}
+            alt={username}
+            draggable={false}
+          />
+          <div className="grid flex-1">
+            <div className="flex w-full min-w-0 items-start justify-between space-x-1.5">
+              <div className="ultrawide:line-clamp-1 ultrawide:break-all line-clamp-2 break-words font-semibold">
+                {name}
+              </div>
+            </div>
+            <p className="line-clamp-1">{description}</p>
+            <div className="flex items-center overflow-hidden text-xs opacity-70">
+              <span>{trimLensHandle(did) ?? username}</span>
+              <span className="middot" />
+              {app}
+              <span className="middot" />
+              {createdAt && (
+                <span className="whitespace-nowrap">
+                  {getShortHandTime(createdAt)}
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default LiveStreamCard

apps/web/src/components/Home/OpenActions/SharedLink.tsx

@@ -1,5 +1,5 @@
 import { getOpenActionNftMetadata, getURLs } from '@tape.xyz/generic'
-import type { MetadataOutput, Profile } from '@tape.xyz/lens'
+import type { MetadataOutput } from '@tape.xyz/lens'
 import type { BasicNftMetadata } from '@tape.xyz/lens/custom-types'
 import type { FC } from 'react'
 import React from 'react'
@@ -8,11 +8,9 @@ import ZoraNft from './Zora/ZoraNft'
 
 type Props = {
   metadata: MetadataOutput
-  sharedBy: Profile
-  postedAt: string
 }
 
-const SharedLink: FC<Props> = ({ metadata, sharedBy, postedAt }) => {
+const SharedLink: FC<Props> = ({ metadata }) => {
   const content = metadata.content
   const urls = getURLs(content)
   const nftMetadata = getOpenActionNftMetadata(urls)
@@ -22,11 +20,7 @@ const SharedLink: FC<Props> = ({ metadata, sharedBy, postedAt }) => {
 
   const provider = nftMetadata?.provider
   return provider === 'zora' ? (
-    <ZoraNft
-      nftMetadata={nftMetadata as BasicNftMetadata}
-      sharedBy={sharedBy}
-      postedAt={postedAt}
-    />
+    <ZoraNft nftMetadata={nftMetadata as BasicNftMetadata} />
   ) : null
 }
 

apps/web/src/components/Home/OpenActions/Zora/Collect.tsx

@@ -38,7 +38,7 @@ const Collect = ({ nft, link }: { nft: ZoraNft; link: string }) => {
   const mintReferral = TAPE_ADMIN_ADDRESS
   const mintFee = parseEther('0.000777')
 
-  const price = quantity * parseInt(nft.price)
+  const price = quantity * parseInt(nft.price ?? 0)
   const nftPriceInEth = price / 10 ** 18
   const platformFeesInEth = quantity * 0.000777
 
@@ -47,16 +47,23 @@ const Collect = ({ nft, link }: { nft: ZoraNft; link: string }) => {
 
   const abi =
     nft.contractStandard === 'ERC721' ? ZoraERC721Drop : ZoraCreator1155Impl
-  const args =
-    nft.contractStandard === 'ERC721'
-      ? [recipient, BigInt(quantity), comment, mintReferral]
-      : [
-          FIXED_PRICE_SALE_STRATEGY,
-          parseInt(nft.tokenId),
-          BigInt(quantity),
-          encodeAbiParameters(parseAbiParameters('address'), [recipient]),
-          mintReferral
-        ]
+
+  const getArgs = () => {
+    if (!recipient) {
+      return
+    }
+    const args =
+      nft.contractStandard === 'ERC721'
+        ? [recipient, BigInt(quantity), comment, mintReferral]
+        : [
+            FIXED_PRICE_SALE_STRATEGY,
+            parseInt(nft.tokenId),
+            BigInt(quantity),
+            encodeAbiParameters(parseAbiParameters('address'), [recipient]),
+            mintReferral
+          ]
+    return args
+  }
 
   const {
     config,
@@ -68,7 +75,7 @@ const Collect = ({ nft, link }: { nft: ZoraNft; link: string }) => {
     address: nftAddress,
     functionName: 'mintWithRewards',
     abi,
-    args,
+    args: getArgs(),
     value
   })
   const {
@@ -93,24 +100,27 @@ const Collect = ({ nft, link }: { nft: ZoraNft; link: string }) => {
   )
 
   return (
-    <div className="mt-4 flex flex-wrap items-center justify-between gap-3">
+    <div className="mt-4 flex flex-wrap items-center justify-between gap-3 md:mt-8">
       <div>
-        <div className="flex items-center space-x-4">
+        <div className="flex items-center space-x-4 text-lg">
           <button
-            className="px-1 disabled:opacity-25"
+            className="h-8 w-8 border disabled:opacity-25 dark:border-gray-500"
             disabled={quantity === 1}
             onClick={() => setQuantity((q) => q - 1)}
           >
             -
           </button>
-          <span className="font-bold">{quantity}</span>
-          <button className="px-1" onClick={() => setQuantity((q) => q + 1)}>
+          <span className="text-lg font-bold">{quantity}</span>
+          <button
+            className="h-8 w-8 border dark:border-gray-500"
+            onClick={() => setQuantity((q) => q + 1)}
+          >
             +
           </button>
+          <span className="pl-4 text-sm">
+            {nftPriceInEth} ETH + {platformFeesInEth} ETH mint fees
+          </span>
         </div>
-        <span className="text-xs">
-          {nftPriceInEth} ETH + {platformFeesInEth} ETH mint fees
-        </span>
       </div>
       {isDisconnected ? (
         <Button onClick={openConnectModal}>Connect Wallet</Button>