diff --git a/src/components/TabButtons.tsx b/src/components/TabButtons.tsx
new file mode 100644
index 000000000..edf9fa845
--- /dev/null
+++ b/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 (
+
+ {tabs.map((tab) => (
+
+ ))}
+
+ )
+}
diff --git a/src/components/TaskCard.tsx b/src/components/TaskCard.tsx
new file mode 100644
index 000000000..6c1682c7b
--- /dev/null
+++ b/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 = (
+
+ {topBanner && (
+
+
+ {topBanner.icon}
+
+ {topBanner.text}
+
+
+
+
+
+
{title}
+
+ {!withoutDiamondIcon && (
+
+ )}
+ {isLoadingReward ? (
+
+ ) : (
+
+ {typeof reward === 'number'
+ ? `+${formatNumber(reward)}`
+ : reward}
+
+ )}
+
+
+
+ {completed ? (
+
+ ) : customAction ? (
+ customAction
+ ) : (
+
+ )}
+
+
+ )
+ if (href) {
+ return (
+
+ {card}
+
+ )
+ }
+ return card
+}
diff --git a/src/components/auth/common/evm/CommonEvmModalContent.tsx b/src/components/auth/common/evm/CommonEvmModalContent.tsx
index d49192f00..bb320db16 100644
--- a/src/components/auth/common/evm/CommonEvmModalContent.tsx
+++ b/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 && (
+
+ )
+ }
loadingText={!isSigned ? 'Pending Confirmation...' : 'Please wait...'}
/>
)
diff --git a/src/components/auth/common/evm/CustomConnectButton.tsx b/src/components/auth/common/evm/CustomConnectButton.tsx
index ef2405516..790652597 100644
--- a/src/components/auth/common/evm/CustomConnectButton.tsx
+++ b/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
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}
)
}
@@ -102,17 +106,22 @@ export const CustomConnectButton = ({
}
return (
-
+ <>
+ {!hideButton && (
+
+ )}
+ {additionalSecondActionLabel}
+
)
}}
@@ -126,7 +135,9 @@ export const CustomConnectButton = ({