chore: add skeleton to staking page

.changeset/big-tables-appear.md

@@ -0,0 +1,5 @@
+---
+'hub': patch
+---
+
+update status wallet discovery

.changeset/pretty-mugs-heal.md

@@ -1,5 +1,5 @@
 ---
-"status.app": patch
+'status.app': patch
 ---
 
 reference new mobile app

.changeset/slimy-ears-judge.md

@@ -0,0 +1,5 @@
+---
+'hub': patch
+---
+
+add skeleton to staking page

.changeset/three-snakes-grab.md

@@ -1,5 +1,5 @@
 ---
-"status.app": patch
+'status.app': patch
 ---
 
 Rename 'Mobile' to 'New mobile' in routes

apps/hub/src/app/_components/stake/compound-status-content.tsx

@@ -3,13 +3,12 @@ import { InfoIcon } from '@status-im/icons/16'
 import { formatUnits } from 'viem'
 
 import { LaunchIcon } from '~components/icons'
+import { SNT_TOKEN } from '~constants/index'
 import { useMultiplierPointsBalance } from '~hooks/useMultiplierPoints'
 import { useStakingVaults } from '~hooks/useStakingVaults'
 import { useWeightedBoost } from '~hooks/useWeightedBoost'
 import { formatSNT } from '~utils/currency'
 
-import { SNT_TOKEN } from '../../_constants'
-
 export const CompoundStatusContent = () => {
   const { data: vaults } = useStakingVaults()
   const weightedBoost = useWeightedBoost(vaults)

apps/hub/src/app/_components/stake/index.ts

@@ -0,0 +1,8 @@
+export * from './action-status-dialog'
+export * from './compound-status-content'
+export * from './promo-modal'
+export * from './stake-amount-input'
+export * from './stake-faucet-card'
+export * from './stake-form'
+export * from './stake-total-staked-card'
+export * from './stake-weighted-boost-card'

apps/hub/src/app/_components/stake/stake-amount-input.tsx

@@ -0,0 +1,85 @@
+import { Skeleton } from '@status-im/components'
+import { type UseFormRegister } from 'react-hook-form'
+
+import { SNTIcon } from '~components/icons'
+import { formatCurrency, formatSNT } from '~utils/currency'
+
+type StakeAmountInputProps = {
+  balance?: bigint
+  amountInUSD?: number
+  onMaxClick: () => void
+  register: UseFormRegister<any>
+  isConnected: boolean
+  isLoading?: boolean
+}
+
+const StakeAmountInput = ({
+  balance,
+  amountInUSD = 0,
+  onMaxClick,
+  register,
+  isConnected,
+  isLoading = false,
+}: StakeAmountInputProps) => {
+  const showBottomRow = isLoading || isConnected
+  const containerClassName = !isConnected && !isLoading ? 'opacity-[40%]' : ''
+
+  return (
+    <div className={`space-y-2 ${containerClassName}`}>
+      <label
+        htmlFor="stake-amount"
+        className="block text-13 font-medium text-neutral-50"
+      >
+        Amount to stake
+      </label>
+      <div className="rounded-16 border border-neutral-20 bg-white-100 px-4 py-3">
+        <div className="flex items-center justify-between">
+          {isConnected ? (
+            <input
+              id="stake-amount"
+              type="text"
+              inputMode="decimal"
+              {...register('amount')}
+              placeholder="0"
+              className="h-[38px] w-full border-none bg-transparent text-27 font-semibold text-neutral-100 outline-none placeholder:text-neutral-40"
+            />
+          ) : (
+            <span className="text-27 font-semibold text-neutral-40">0</span>
+          )}
+          <div className="flex items-center gap-1">
+            <SNTIcon />
+            <span className="text-19 font-semibold text-neutral-80">SNT</span>
+          </div>
+        </div>
+
+        {showBottomRow && (
+          <>
+            <div className="-mx-4 my-3 h-px w-[calc(100%+32px)] bg-neutral-10" />
+            <div className="flex items-center justify-between text-13 font-500 text-neutral-50">
+              {isLoading ? (
+                <>
+                  <Skeleton height={18} width={100} className="rounded-6" />
+                  <Skeleton height={18} width={100} className="rounded-6" />
+                </>
+              ) : (
+                <>
+                  <span>{formatCurrency(amountInUSD)}</span>
+                  <button
+                    type="button"
+                    onClick={onMaxClick}
+                    className="uppercase text-neutral-100"
+                  >
+                    {`MAX ${formatSNT(balance ?? 0)} SNT`}
+                  </button>
+                </>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export { StakeAmountInput }
+export type { StakeAmountInputProps }

apps/hub/src/app/_components/stake/stake-faucet-card.tsx

@@ -0,0 +1,134 @@
+'use client'
+
+import { useMemo } from 'react'
+
+import { Skeleton } from '@status-im/components'
+import { PlaceholderIcon } from '@status-im/icons/20'
+import { Button } from '@status-im/status-network/components'
+import { useSIWE } from 'connectkit'
+import Image from 'next/image'
+import { useAccount } from 'wagmi'
+
+import { TIME_CONSTANTS } from '~constants/staking'
+import { useFaucetMutation, useFaucetQuery } from '~hooks/useFaucet'
+import { formatSNT } from '~utils/currency'
+
+const FaucetCard = () => {
+  const { data: faucetData, isLoading } = useFaucetQuery()
+  const { isSignedIn, isLoading: isLoadingSIWE } = useSIWE()
+  const { mutate: claimTokens, isPending: isClaimingTokens } =
+    useFaucetMutation()
+  const { isConnected, isConnecting } = useAccount()
+
+  const hasReachedDailyLimit = useMemo(() => {
+    if (!faucetData) return false
+
+    const currentTimestamp = BigInt(
+      Math.floor(Date.now() / TIME_CONSTANTS.MILLISECONDS_PER_SECOND)
+    )
+    const isWithinResetWindow = faucetData.accountResetTime > currentTimestamp
+    const hasExceededLimit =
+      faucetData.accountDailyRequests >= faucetData.dailyLimit
+
+    return hasExceededLimit && isWithinResetWindow
+  }, [faucetData])
+
+  if (isLoading || isConnecting || isLoadingSIWE) {
+    return (
+      <div className="flex flex-col gap-8 rounded-32 border border-neutral-10 bg-white-100 p-6 shadow-2 md:flex-row md:items-center md:justify-between md:p-8">
+        <div className="flex items-start gap-4 md:gap-6">
+          <div className="relative h-[88px]">
+            <Image
+              width="103"
+              height="174"
+              src="/piggy-bank.png"
+              alt="Piggy Bank"
+              className="-mt-12"
+            />
+          </div>
+
+          <div className="space-y-3">
+            <div>
+              <p className="text-19 font-500">Free Testnet SNT faucet</p>
+            </div>
+
+            <div className="flex flex-wrap gap-4 md:gap-6">
+              <div className="min-w-[128px] space-y-1 text-13 font-500">
+                <p className="text-neutral-50">Daily limit</p>
+                <Skeleton height={18} width={80} className="rounded-6" />
+              </div>
+              <div className="min-w-[128px] space-y-1 text-13 font-500">
+                <p className="text-neutral-50">Used today</p>
+                <Skeleton height={18} width={80} className="rounded-6" />
+              </div>
+              <div className="min-w-[128px] space-y-1 text-13 font-500">
+                <p className="text-neutral-50">Available</p>
+                <Skeleton height={18} width={80} className="rounded-6" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <Button className="self-end" disabled>
+          <PlaceholderIcon className="text-blur-white/70" />
+          Claim testnet SNT
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-8 rounded-32 border border-neutral-10 bg-white-100 p-6 shadow-2 md:flex-row md:items-center md:justify-between md:p-8">
+      <div className="flex items-start gap-4 md:gap-6">
+        <div className="relative h-[88px]">
+          <Image
+            width="103"
+            height="174"
+            src="/piggy-bank.png"
+            alt="Piggy Bank"
+            className="-mt-12"
+          />
+        </div>
+
+        <div className="space-y-3">
+          <div>
+            <p className="text-19 font-500">Free Testnet SNT faucet</p>
+          </div>
+
+          <div className="flex flex-wrap gap-4 md:gap-6">
+            <div className="min-w-[128px] space-y-1 text-13 font-500">
+              <p className="text-neutral-50">Daily limit</p>
+              <span>{formatSNT(faucetData?.dailyLimit ?? 0)} SNT</span>
+            </div>
+            <div className="min-w-[128px] space-y-1 text-13 font-500">
+              <p className="text-neutral-50">Used today</p>
+              <span>{formatSNT(faucetData?.actualUsedToday ?? 0)} SNT</span>
+            </div>
+            <div className="min-w-[128px] space-y-1 text-13 font-500">
+              <p className="text-neutral-50">Available</p>
+              <span>{formatSNT(faucetData?.remainingAmount ?? 0)} SNT</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Button
+        className="self-end"
+        disabled={
+          !isConnected ||
+          hasReachedDailyLimit ||
+          isClaimingTokens ||
+          !isSignedIn
+        }
+        onClick={() =>
+          claimTokens({ amount: faucetData?.remainingAmount ?? BigInt(0) })
+        }
+      >
+        <PlaceholderIcon className="text-blur-white/70" />
+        {isClaimingTokens ? 'Claiming...' : 'Claim testnet SNT'}
+      </Button>
+    </div>
+  )
+}
+
+export { FaucetCard }