);
};
diff --git a/apps/dashboard/src/components/onboarding/Steps.tsx b/apps/dashboard/src/components/onboarding/Steps.tsx
index 0f8878eca53..adb424a649a 100644
--- a/apps/dashboard/src/components/onboarding/Steps.tsx
+++ b/apps/dashboard/src/components/onboarding/Steps.tsx
@@ -1,5 +1,7 @@
"use client";
-import { cn } from "@/lib/utils";
+
+import { Button } from "@/components/ui/button";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
import {
AccountStatus,
@@ -8,27 +10,28 @@ import {
useApiKeys,
} from "@3rdweb-sdk/react/hooks/useApi";
import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
-import { Flex, useBreakpointValue } from "@chakra-ui/react";
-import { ChakraNextImage } from "components/Image";
import { OPSponsoredChains } from "constants/chains";
import { useTrack } from "hooks/analytics/useTrack";
import { useLocalStorage } from "hooks/useLocalStorage";
+import { ExternalLinkIcon } from "lucide-react";
import { useTheme } from "next-themes";
import type { StaticImageData } from "next/image";
-import { useRouter } from "next/router";
+import Image from "next/image";
+import Link from "next/link";
import { useEffect, useMemo } from "react";
import { useActiveWalletChain } from "thirdweb/react";
-import { Button, Card, Heading, Link, LinkButton, Text } from "tw-components";
-enum Step {
- Keys = "keys",
- Docs = "docs",
- OptimismCredits = "optimismCredits",
- Payment = "payment",
-}
+const Step = {
+ keys: "keys",
+ docs: "docs",
+ optimismCredits: "optimismCredits",
+ payment: "payment",
+} as const;
+
+type StepId = keyof typeof Step;
type StepData = {
- key: Step;
+ key: StepId;
title: string;
description: string | JSX.Element;
cta: string;
@@ -47,11 +50,10 @@ interface OnboardingStepsProps {
export const OnboardingSteps: React.FC = ({
onlyOptimism,
}) => {
- const isMobile = useBreakpointValue({ base: true, md: false });
const { isLoggedIn } = useLoggedInUser();
const meQuery = useAccount();
const apiKeysQuery = useApiKeys();
- const router = useRouter();
+ const router = useDashboardRouter();
const trackEvent = useTrack();
const { theme } = useTheme();
const { data: credits } = useAccountCredits();
@@ -89,9 +91,9 @@ export const OnboardingSteps: React.FC = ({
}
}, [chainId]);
- const currentStep = useMemo(() => {
+ const currentStep: StepId | null = useMemo(() => {
if (onlyOptimism && (!hasAppliedForOpGrant || !opCredit)) {
- return Step.OptimismCredits;
+ return Step.optimismCredits;
}
if (!isLoggedIn) {
@@ -99,16 +101,16 @@ export const OnboardingSteps: React.FC = ({
}
if (isSponsoredChain && (!hasAppliedForOpGrant || !opCredit)) {
- return Step.OptimismCredits;
+ return Step.optimismCredits;
}
if (!onboardingKeys && !hasApiKeys) {
- return Step.Keys;
+ return Step.keys;
}
if (!hasValidPayment && !onboardingPaymentMethod) {
- return Step.Payment;
+ return Step.payment;
}
if (!onboardingDocs) {
- return Step.Docs;
+ return Step.docs;
}
return null;
}, [
@@ -131,7 +133,7 @@ export const OnboardingSteps: React.FC = ({
onClick,
}: {
isSkip?: true;
- step: Step;
+ step: StepId;
href?: string;
onClick?: () => void;
}) => {
@@ -151,15 +153,15 @@ export const OnboardingSteps: React.FC = ({
onClick();
}
- if (step === Step.Keys) {
+ if (step === Step.keys) {
setOnboardingKeys(true);
}
- if (step === Step.Docs) {
+ if (step === Step.docs) {
setOnboardingDocs(true);
}
- if (step === Step.Payment) {
+ if (step === Step.payment) {
setOnboardingPaymentMethod(true);
}
@@ -185,7 +187,7 @@ export const OnboardingSteps: React.FC = ({
const STEPS: StepData[] = useMemo(
() => [
{
- key: Step.Keys,
+ key: Step.keys,
title: "Create an API Key",
description:
"An API key is required to use thirdweb's services through the SDK and CLI.",
@@ -194,7 +196,7 @@ export const OnboardingSteps: React.FC = ({
canSkip: true,
},
{
- key: Step.Payment,
+ key: Step.payment,
title: "Add Payment Method",
description:
"Add your payment method to ensure no disruption to thirdweb services when you exceed free monthly limits.",
@@ -203,31 +205,29 @@ export const OnboardingSteps: React.FC = ({
canSkip: true,
},
{
- key: Step.OptimismCredits,
+ key: Step.optimismCredits,
title: "Apply to join the Optimism Superchain App Accelerator!",
description: (
-
-
- Successful applicants will receive gas grants which can be used
- across all supported{" "}
-
- Optimism Superchain networks
-
- . These can be used with our Account Abstraction tools to sponsor
- gas fees for any on-chain activity.
-
-
+
+ Successful applicants will receive gas grants which can be used
+ across all supported{" "}
+
+ Optimism Superchain networks
+
+ . These can be used with our Account Abstraction tools to sponsor
+ gas fees for any on-chain activity.
+