Channels Integration

.github/workflows/build-deploy.yml

@@ -81,6 +81,8 @@ jobs:
             GH_NEYNAR_API_KEY=${{ secrets.GH_NEYNAR_API_KEY }}
             GH_NEXT_PUBLIC_TELEGRAM_BOT_ID=6523818125
             GH_NEXT_PUBLIC_TELEGRAM_BOT_USERNAME=EpicAppBot
+            GH_NEXT_PUBLIC_DAPP_PUBLIC_KEY=7iXtxm8bXK7XGSvnHzYZSojYHYoNiMa4m59ZovYwBzy5
+            GH_DAPP_SECRET_KEY=${{ secrets.GH_DAPP_SECRET_KEY }}
           target: runner
           tags: |
             ${{ env.image }}
@@ -135,6 +137,8 @@ jobs:
             GH_NEXT_PUBLIC_TELEGRAM_BOT_USERNAME=subsocial_staging_bot
             GH_NEXT_PUBLIC_NEYNAR_CLIENT_ID=e8dc01b0-046c-4698-98ac-05432050961d
             GH_FRAMES_SECRET=JG/W96svVHQ3bdaEKWm1h8xJXqxDtqZ6t7tKCZNWhh0=
+            GH_NEXT_PUBLIC_DAPP_PUBLIC_KEY=GqJKFQavHPEvngh6hNwt9FbqcEYsNvduGvyQuT6ARTHk
+            GH_DAPP_SECRET_KEY=85Nb7L8gVozH99wYYu4Ggx64DVFKUXH15iwxSNGCgHBs
           target: runner
           tags: |
             ${{ env.image }}

ci.env

@@ -14,6 +14,8 @@ NEXT_PUBLIC_IS_MAINTENANCE='$GH_NEXT_PUBLIC_IS_MAINTENANCE'
 NEXT_PUBLIC_NEYNAR_CLIENT_ID='$GH_NEXT_PUBLIC_NEYNAR_CLIENT_ID'
 FRAMES_SECRET='$GH_FRAMES_SECRET'
 NEYNAR_API_KEY='$GH_NEYNAR_API_KEY'
+NEXT_PUBLIC_DAPP_PUBLIC_KEY='$GH_NEXT_PUBLIC_DAPP_PUBLIC_KEY'
+DAPP_SECRET_KEY='$GH_DAPP_SECRET_KEY'
 NEXT_PUBLIC_TELEGRAM_BOT_ID='$GH_NEXT_PUBLIC_TELEGRAM_BOT_ID'
 NEXT_PUBLIC_TELEGRAM_BOT_USERNAME='$GH_NEXT_PUBLIC_TELEGRAM_BOT_USERNAME'
 MODERATION_URL='$GH_MODERATION_URL'
@@ -48,4 +50,4 @@ NEXT_PUBLIC_OFFCHAIN_POSTING_HUBS='$GH_NEXT_PUBLIC_OFFCHAIN_POSTING_HUBS'
 NEXT_PUBLIC_TELEGRAM_NOTIFICATION_BOT='$GH_NEXT_PUBLIC_TELEGRAM_NOTIFICATION_BOT'
 NEXTAUTH_SECRET='$GH_NEXTAUTH_SECRET'
 NEXTAUTH_URL='$GH_NEXTAUTH_URL'
-NEXT_PUBLIC_BASE_URL='$GH_NEXT_PUBLIC_BASE_URL'
+NEXT_PUBLIC_BASE_URL='$GH_NEXT_PUBLIC_BASE_URL'

docker/Dockerfile

@@ -22,6 +22,7 @@ ARG GH_NEXT_PUBLIC_IS_MAINTENANCE
 ARG GH_NEXT_PUBLIC_NEYNAR_CLIENT_ID
 ARG GH_FRAMES_SECRET
 ARG GH_NEYNAR_API_KEY
+ARG GH_NEXT_PUBLIC_DAPP_PUBLIC_KEY
 ARG GH_NEXT_PUBLIC_TELEGRAM_BOT_ID
 ARG GH_NEXT_PUBLIC_TELEGRAM_BOT_USERNAME
 ARG GH_NEXT_PUBLIC_AMP_ID
@@ -56,6 +57,8 @@ ENV NEXTAUTH_URL=${GH_NEXTAUTH_URL} \
     NEXT_PUBLIC_NEYNAR_CLIENT_ID=${GH_NEXT_PUBLIC_NEYNAR_CLIENT_ID} \
     FRAMES_SECRET=${GH_FRAMES_SECRET} \
     NEYNAR_API_KEY=${GH_NEYNAR_API_KEY} \
+    NEXT_PUBLIC_DAPP_PUBLIC_KEY=${GH_NEXT_PUBLIC_DAPP_PUBLIC_KEY} \
+    DAPP_SECRET_KEY=${GH_DAPP_SECRET_KEY} \
     NEXT_PUBLIC_TELEGRAM_BOT_ID=${GH_NEXT_PUBLIC_TELEGRAM_BOT_ID} \
     NEXT_PUBLIC_TELEGRAM_BOT_USERNAME=${GH_NEXT_PUBLIC_TELEGRAM_BOT_USERNAME} \
     NEXT_PUBLIC_SUBSTRATE_WSS=${GH_NEXT_PUBLIC_SUBSTRATE_WSS} \
@@ -119,6 +122,8 @@ ARG GH_NEXT_PUBLIC_BASE_PATH
 ARG GH_NEXT_PUBLIC_IS_MAINTENANCE
 ARG GH_NEXT_PUBLIC_NEYNAR_CLIENT_ID
 ARG GH_FRAMES_SECRET
+ARG GH_NEXT_PUBLIC_DAPP_PUBLIC_KEY
+ARG GH_DAPP_SECRET_KEY
 ARG GH_NEYNAR_API_KEY
 ARG GH_NEXT_PUBLIC_TELEGRAM_BOT_ID
 ARG GH_NEXT_PUBLIC_TELEGRAM_BOT_USERNAME
@@ -154,6 +159,8 @@ ENV NEXTAUTH_URL=${GH_NEXTAUTH_URL} \
     NEXT_PUBLIC_NEYNAR_CLIENT_ID=${GH_NEXT_PUBLIC_NEYNAR_CLIENT_ID} \
     FRAMES_SECRET=${GH_FRAMES_SECRET} \
     NEYNAR_API_KEY=${GH_NEYNAR_API_KEY} \
+    NEXT_PUBLIC_DAPP_PUBLIC_KEY=${GH_NEXT_PUBLIC_DAPP_PUBLIC_KEY} \
+    DAPP_SECRET_KEY=${GH_DAPP_SECRET_KEY} \
     NEXT_PUBLIC_TELEGRAM_BOT_ID=${GH_NEXT_PUBLIC_TELEGRAM_BOT_ID} \
     NEXT_PUBLIC_TELEGRAM_BOT_USERNAME=${GH_NEXT_PUBLIC_TELEGRAM_BOT_USERNAME} \
     NEXT_PUBLIC_SUBSTRATE_WSS=${GH_NEXT_PUBLIC_SUBSTRATE_WSS} \

package.json

@@ -41,6 +41,10 @@
     "@polkadot/react-identicon": "^3.6.5",
     "@polkadot/util": "^12.1.2",
     "@rainbow-me/rainbowkit": "^1.3.5",
+    "@solana/wallet-adapter-base": "^0.9.23",
+    "@solana/wallet-adapter-react": "^0.15.35",
+    "@solana/wallet-adapter-react-ui": "^0.9.35",
+    "@solana/wallet-adapter-wallets": "^0.19.32",
     "@solana/web3.js": "^1.95.3",
     "@subsocial/api": "^0.8.14",
     "@subsocial/data-hub-sdk": "dappforce/subsocial-data-hub-sdk#staging",

src/components/BottomDrawer.tsx

@@ -56,7 +56,7 @@ export default function BottomDrawer({
         )}
         <div className='mx-auto flex w-full max-w-screen-md flex-col gap-6 overflow-auto px-5 py-6 pb-6'>
           <div className='flex flex-col gap-2'>
-            <span className='text-2xl font-medium'>{title}</span>
+            <span className={cx('text-2xl font-medium')}>{title}</span>
             <span className='text-text-muted'>{description}</span>
           </div>
           <div className='flex w-full flex-col'>

src/components/TabButtons.tsx

@@ -0,0 +1,39 @@
+import { cx } from '@/utils/class-names'
+import Button from './Button'
+
+export default function TabButtons({
+  className,
+  selectedTab,
+  setSelectedTab,
+  tabs,
+}: {
+  className?: string
+  tabs: string[]
+  selectedTab: string
+  setSelectedTab: (tab: string) => void
+}) {
+  return (
+    <div
+      className={cx(
+        'grid grid-cols-2 gap-px rounded-full bg-background-light text-sm font-medium',
+        className
+      )}
+    >
+      {tabs.map((tab) => (
+        <Button
+          key={tab}
+          variant={selectedTab === tab ? 'primary' : 'transparent'}
+          className={cx(
+            'h-10 py-0',
+            selectedTab === tab
+              ? 'bg-background-primary/30'
+              : 'bg-background-light'
+          )}
+          onClick={() => setSelectedTab(tab)}
+        >
+          {tab}
+        </Button>
+      ))}
+    </div>
+  )
+}

src/components/TaskCard.tsx

@@ -0,0 +1,105 @@
+import Diamond from '@/assets/emojis/diamond.png'
+import Check from '@/assets/icons/check.svg'
+import Card from '@/components/Card'
+import { Skeleton } from '@/components/SkeletonFallback'
+import { cx } from '@/utils/class-names'
+import { formatNumber } from '@/utils/strings'
+import Image, { ImageProps } from 'next/image'
+import Link from 'next/link'
+import { CSSProperties } from 'react'
+import { FaChevronRight } from 'react-icons/fa6'
+
+export default function TaskCard({
+  completed,
+  image,
+  reward,
+  title,
+  customAction,
+  onClick,
+  href,
+  openInNewTab,
+  isLoadingReward,
+  withoutDiamondIcon,
+  topBanner,
+}: {
+  image: ImageProps['src']
+  title: React.ReactNode
+  reward: number | string
+  completed: boolean
+  customAction?: React.ReactNode
+  onClick?: () => void
+  href?: string
+  openInNewTab?: boolean
+  isLoadingReward?: boolean
+  withoutDiamondIcon?: boolean
+  topBanner?: {
+    icon: JSX.Element
+    text: string
+    className?: string
+    textStyle?: CSSProperties
+    textClassName?: string
+  }
+}) {
+  const card = (
+    <Card className='flex cursor-pointer flex-col overflow-clip rounded-2xl p-0'>
+      {topBanner && (
+        <div className='bg-background'>
+          <div
+            className={cx(
+              'flex items-center justify-center gap-1 py-1.5 text-xs',
+              topBanner.className
+            )}
+          >
+            <span className='text-sm'>{topBanner.icon}</span>
+            <span
+              className={cx('font-medium', topBanner.textClassName)}
+              style={topBanner.textStyle}
+            >
+              {topBanner.text}
+            </span>
+          </div>
+        </div>
+      )}
+      <div
+        className='flex items-center gap-2.5 bg-background-light p-2.5 transition active:bg-background-lighter'
+        onClick={onClick}
+      >
+        <Image src={image} alt='' className='h-14 w-14' />
+        <div className='flex flex-col gap-1'>
+          <span className='font-bold'>{title}</span>
+          <div className='flex items-center gap-0.5'>
+            {!withoutDiamondIcon && (
+              <Image src={Diamond} alt='' className='relative top-px h-5 w-5' />
+            )}
+            {isLoadingReward ? (
+              <Skeleton className='w-12' />
+            ) : (
+              <span className='text-text-muted'>
+                {typeof reward === 'number'
+                  ? `+${formatNumber(reward)}`
+                  : reward}
+              </span>
+            )}
+          </div>
+        </div>
+        <div className='ml-auto flex items-center justify-center pr-1'>
+          {completed ? (
+            <Check />
+          ) : customAction ? (
+            customAction
+          ) : (
+            <FaChevronRight className='text-text-muted' />
+          )}
+        </div>
+      </div>
+    </Card>
+  )
+  if (href) {
+    return (
+      <Link target={openInNewTab ? '_blank' : undefined} href={href}>
+        {card}
+      </Link>
+    )
+  }
+  return card
+}

src/components/auth/common/evm/CommonEvmModalContent.tsx

@@ -11,6 +11,7 @@ import {
   getLinkedIdentityQuery,
 } from '@/services/datahub/identity/query'
 import { useMyAccount, useMyGrillAddress } from '@/stores/my-account'
+import { lastRedirectProtocol } from '@/utils/globals'
 import { getCurrentUrlOrigin } from '@/utils/links'
 import { openNewWindow, twitterShareUrl } from '@/utils/social-share'
 import { IdentityProvider as SDKIdentityProvider } from '@subsocial/data-hub-sdk'
@@ -146,6 +147,19 @@ export const CommonEVMLoginContent = ({
       className='w-full'
       label={buttonLabel}
       secondLabel='Sign Message'
+      hideButton={isSigning}
+      additionalSecondActionLabel={
+        isSigning && (
+          <Button
+            size='lg'
+            href={`${lastRedirectProtocol.protocol}://`}
+            target='_blank'
+            className='w-full'
+          >
+            Open wallet
+          </Button>
+        )
+      }
       loadingText={!isSigned ? 'Pending Confirmation...' : 'Please wait...'}
     />
   )

src/components/auth/common/evm/CustomConnectButton.tsx

@@ -12,9 +12,11 @@ type CustomConnectButtonProps = ButtonProps & {
   className?: string
   label?: React.ReactNode
   secondLabel?: React.ReactNode
+  additionalSecondActionLabel?: React.ReactNode
   withWalletActionImage?: boolean
   onSuccessConnect: (evmAddress: string) => Promise<void>
   isLoading: boolean
+  hideButton?: boolean
 }
 
 export const CustomConnectButton = ({
@@ -23,6 +25,8 @@ export const CustomConnectButton = ({
   label = 'Connect Ethereum Address',
   withWalletActionImage = true,
   secondLabel,
+  additionalSecondActionLabel,
+  hideButton,
   isLoading,
   ...buttonProps
 }: CustomConnectButtonProps) => {
@@ -81,7 +85,7 @@ export const CustomConnectButton = ({
                 commonButtonProps.onClick?.(e as any)
               }}
             >
-              {usedLabel}
+              {label}
             </Button>
           )
         }
@@ -102,17 +106,22 @@ export const CustomConnectButton = ({
         }
 
         return (
-          <Button
-            {...commonButtonProps}
-            onClick={async () => {
-              setHasInteractedOnce(true)
-              const connector = getConnector()
-              isTouchDevice() && (await openMobileWallet({ connector }))
-              onSuccess(account.address)
-            }}
-          >
-            {usedLabel}
-          </Button>
+          <>
+            {!hideButton && (
+              <Button
+                {...commonButtonProps}
+                onClick={async () => {
+                  setHasInteractedOnce(true)
+                  const connector = getConnector()
+                  isTouchDevice() && (await openMobileWallet({ connector }))
+                  onSuccess(account.address)
+                }}
+              >
+                {usedLabel}
+              </Button>
+            )}
+            {additionalSecondActionLabel}
+          </>
         )
       }}
     </ConnectButton.Custom>
@@ -126,7 +135,9 @@ export const CustomConnectButton = ({
           <LinkingDark className='hidden w-full dark:block' />
         </div>
 
-        {customButton}
+        <div className='flex w-full flex-col items-center gap-2'>
+          {customButton}
+        </div>
       </div>
     )
   }

src/components/chats/ChatForm.tsx

@@ -250,7 +250,7 @@ export default function ChatForm({
       const isSufficient = await refetch()
       if (!isSufficient.data) {
         refetch()
-        setOpenMessageModal('not-enough-balance', chatId)
+        setOpenMessageModal('not-enough-balance', { chatId })
         return
       }
       resetForm()