WIP

app/components/Basic/Card.tsx

@@ -29,7 +29,7 @@ export function Card({
   return (
     <div
       className={cn(
-        `flex flex-wrap flex-row gap-10 w-full border border-solid border-white/20 text-white/60 relative ${
+        `flex flex-wrap flex-row gap-10 w-full border border-solid border-line text-white/60 relative ${
           size === CardSize.Default ? "px-12 py-12 rounded-xl" : cardClass[size]
         }`,
         className

app/components/Task/SegaSwap.tsx

@@ -0,0 +1,297 @@
+"use client";
+import { useState } from "react";
+
+import { Card, CardSize } from "@/app/components/Basic/Card";
+import { Gift } from "@/app/icons/Gift";
+import {
+  useAccountInfo,
+  useSystemInfo,
+  useWalletModal
+} from "@/app/store/account";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+import { useBreakpoint } from "@/app/hooks";
+import { toast } from "@/components/ui/use-toast";
+import { trackClick } from "@/lib/track";
+import { Rules } from "./Rules";
+import { getFaucetUrl } from "@/app/data/config";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { http } from "@/lib/http";
+
+export function SegaSwap() {
+  const { onOpen } = useWalletModal();
+  const { address, token } = useAccountInfo();
+  const { isInMaintenance } = useSystemInfo();
+
+  const isMobile = useBreakpoint() === "mobile";
+
+  const [showRules, setShowRules] = useState(false);
+
+  const { data: segaSwapStatus, refetch: refetchSegaSwapStatus } = useQuery({
+    queryKey: ["sega-swap-status"],
+    queryFn: () => http.get("/user/sega/status"),
+    enabled: !!address && !!token
+  });
+
+  const { mutate: claimReward } = useMutation({
+    mutationKey: ["sega-claim-reward"],
+    mutationFn: (reward_type: string) =>
+      http.post(`/user/sega/claim`, { reward_type }),
+    onSuccess: (res) => {
+      showRewardsToast(res);
+      refetchSegaSwapStatus();
+    },
+    onError: () => {
+      console.log("error");
+    }
+  });
+
+  const showRewardsToast = (res: any) => {
+    toast({
+      title: '"Sega Swap" task completed.',
+      description: (
+        <p role="success" className="block">
+          You've received{" "}
+          <span className="inline-flex items-center text-[#FBB042]">
+            {res?.data?.amount || 2} x mystery boxes
+            <Gift color="#FBB042" className="w-3 h-3 mx-[2px]" />
+          </span>
+          . Open it in the navbar to exchange for rings.
+        </p>
+      )
+    });
+  };
+
+  const socialMediaList = [
+    {
+      id: "sega_swap",
+      name: "Swap Tokens",
+      link: "https://twitter.com/SonicSVM",
+      description: (
+        <div className="sonic-body3 md:sonic-body2 text-tertary">
+          Complete a trade of any token pair and amount on Sega Dex.{" "}
+          <span
+            onClick={() =>
+              window.open(
+                "https://dev.sega.so/swap/?inputMint=7MTK1xGBbwNken7X7aHJhWaLtJFVCRd7x5EeavuUo5Wv&outputMint=sol",
+                "_blank"
+              )
+            }
+            className="text-link hover:text-primary-blue transition-colors cursor-pointer"
+          >
+            Swap on SEGA
+          </span>
+          <p className="sonic-title3 md:sonic-title4 text-secondary font-orbitron mt-2 md:mt-4">
+            Swap Completed:
+            <span className="sonic-body4 font-manrope pl-2">
+              <span className="text-gold-yellow">
+                {segaSwapStatus?.data?.sega_swap?.task_status ? 1 : 0}
+              </span>
+              /1
+            </span>
+          </p>
+        </div>
+      ),
+      buttonText: (
+        <>
+          {segaSwapStatus?.data?.sega_swap?.reward_claimed ? (
+            "Claimed"
+          ) : (
+            <>
+              Claim x 2 <Gift color="white" className="size-5 ml-2" />
+            </>
+          )}
+        </>
+      ),
+      handler: () => {
+        claimReward("swap");
+      }
+    },
+    {
+      id: "sega_liquidity",
+      name: "Provide Liquidities",
+      link: "https://discord.gg/joinmirrorworld",
+      description: (
+        <div className="sonic-body3 md:sonic-body2 text-tertary">
+          Provide liquidity to any pool with any amount on Sega Dex.{" "}
+          <span
+            onClick={() =>
+              window.open("https://dev.sega.so/liquidity-pools/", "_blank")
+            }
+            className="text-link hover:text-primary-blue transition-colors cursor-pointer"
+          >
+            Provide LP on SEGA
+          </span>
+          <p className="sonic-title3 md:sonic-title4 text-secondary font-orbitron mt-2 md:mt-4">
+            Deposit Completed:
+            <span className="sonic-body4 font-manrope pl-2">
+              <span className="text-gold-yellow">
+                {segaSwapStatus?.data?.sega_liquidity?.task_status ? 1 : 0}
+              </span>
+              /1
+            </span>
+          </p>
+        </div>
+      ),
+      buttonText: (
+        <>
+          {segaSwapStatus?.data?.sega_liquidity?.reward_claimed ? (
+            "Claimed"
+          ) : (
+            <>
+              Claim x 1 <Gift color="white" className="size-5 ml-2" />
+            </>
+          )}
+        </>
+      ),
+      handler: () => {
+        claimReward("liquidity");
+      }
+    }
+  ];
+
+  return (
+    <div className="flex flex-col w-full">
+      {/* title */}
+      <h1 className="hidden md:flex text-white font-orbitron font-semibold text-[64px]">
+        Trade on SEGA
+      </h1>
+
+      {/* line */}
+      <div className="hidden md:block w-full max-w-[1024px] h-[2px] bg-white/20 mt-10 mb-20 relative">
+        <div className="w-[540px] h-[2px] bg-[#25A3ED] shadow-[0_0_6px_0_#25A3ED] absolute top-0 left-0"></div>
+      </div>
+
+      {/* content */}
+      <div className="">
+        {/* rules */}
+        <Rules show={showRules} onClose={(show: boolean) => setShowRules(show)}>
+          <ul className="w-full list-disc font-normal pl-6">
+            <li className="">
+              Request test SOL first,{" "}
+              <a
+                className="text-link hover:text-primary-blue transition-colors"
+                href={getFaucetUrl()}
+                target="_blank"
+              >
+                request here
+              </a>
+              .
+            </li>
+            <li>
+              Click the links below to visit the SEGA DEX page, complete the
+              tasks, and earn rewards.
+            </li>
+            <li className="">
+              Complete at least 1 successful swap transaction to earn{" "}
+              <span className="inline-flex items-center text-[#FBB042]">
+                2 x{" "}
+                <Gift
+                  color="#FBB042"
+                  className="w-3 h-3 md:w-[18px] md:h-[18px] mx-[2px]"
+                />{" "}
+                Ring Mystery Boxes.
+              </span>
+              <a
+                className="text-link hover:text-primary-blue transition-colors"
+                href="https://dev.sega.so/swap/?inputMint=7MTK1xGBbwNken7X7aHJhWaLtJFVCRd7x5EeavuUo5Wv&outputMint=sol"
+                target="_blank"
+              >
+                {" "}
+                click here
+              </a>
+            </li>
+            <li className="">
+              Provide liquidity to at least one liquidity pool to earn{" "}
+              <span className="inline-flex items-center text-[#FBB042]">
+                1 x{" "}
+                <Gift
+                  color="#FBB042"
+                  className="w-3 h-3 md:w-[18px] md:h-[18px] mx-[2px]"
+                />{" "}
+                Ring Mystery Boxes.
+              </span>
+              <a
+                className="text-link hover:text-primary-blue transition-colors"
+                href="https://dev.sega.so/liquidity-pools/"
+                target="_blank"
+              >
+                {" "}
+                click here
+              </a>
+            </li>
+
+            <li>Refresh page to claim the corresponding rewards.</li>
+          </ul>
+        </Rules>
+
+        {/* main */}
+        <Card
+          size={CardSize.Medium}
+          className="max-w-[1024px] md:mt-20 p-0 md:p-10 rounded-none md:border border-0"
+          nameClassName="bg-[#000]"
+        >
+          <ul className="list-disc font-normal leading-relaxed">
+            {socialMediaList.map((socialMedia, socialMediaIndex) => (
+              <li
+                className={`flex flex-col xl:flex-row items-start xl:items-center w-full ${
+                  socialMediaIndex > 0
+                    ? "border-t-[1px] border-white/10 border-solid pt-8 md:pt-10"
+                    : "pb-8 md:pb-10"
+                }`}
+                key={socialMediaIndex}
+              >
+                <div className="flex flex-col max-w-[696px] w-full md:pr-20 xl:border-r xl:border-solid xl:border-white/10">
+                  <h5 className="text-sm md:text-xl text-white font-semibold font-orbitron">
+                    {socialMedia.name}
+                  </h5>
+                  <p className="w-full sonic-body3 md:sonic-body2 text-tertary font-normal mt-2 md:mt-4">
+                    {socialMedia.description}
+                  </p>
+                </div>
+                <Button
+                  className={cn(
+                    "sonic-title3 md:sonic-title2 ml-0 md:ml-auto mt-6 w-[140px] md:w-[168px]"
+                  )}
+                  variant={"primary"}
+                  disabled={
+                    !segaSwapStatus?.data?.[socialMedia.id]?.task_status ||
+                    segaSwapStatus?.data?.[socialMedia.id]?.reward_claimed
+                  }
+                  size={isMobile ? "sm" : "lg"}
+                  onClick={() => {
+                    if (isInMaintenance) {
+                      return;
+                    }
+
+                    if (!address || !token) {
+                      onOpen();
+                      return;
+                    }
+                    socialMedia.handler();
+                    trackClick({ text: "Daily SEGA" });
+                  }}
+                >
+                  {address && token ? socialMedia.buttonText : "Connect Wallet"}
+                </Button>
+              </li>
+            ))}
+          </ul>
+        </Card>
+      </div>
+
+      {/* mobile version tools */}
+      <div className="flex md:hidden flex-row fixed bottom-0 right-0 left-0 m-auto bg-[#000] p-5">
+        <Button
+          className="w-full h-12 border border-solid border-line bg-transparent"
+          onClick={() => setShowRules(true)}
+        >
+          <span className="text-white text-base font-bold font-orbitron">
+            Rules
+          </span>
+        </Button>
+      </div>
+    </div>
+  );
+}

app/data/task.tsx

@@ -10,6 +10,7 @@ import { PlayOnSonicxLogo } from "../logos/PlayOnSonicxLogo";
 import { ReferralLogo } from "../logos/ReferralLogo";
 import { NetworkId } from "./config";
 import { RingLotteryLogo } from "../logos/RingLotteryLogo";
+import { SegaLogo } from "../logos/SegaLogo";
 
 export const taskGroupList: TaskGroup[] = [
   {
@@ -59,20 +60,6 @@ export const taskGroupList: TaskGroup[] = [
           testnetv1: true
         }
       }
-
-      // {
-      //   id: "follow-on-tiktok",
-      //   name: "Follow on TikTok",
-      //   description:
-      //     "Follow @SonicSVM on TikTok for the newest updating from sonic.",
-      //   period: "24-Hour Period",
-      //   reward: "",
-      //   iconName: "tiktok",
-      //   available: {
-      //     devnet: true,
-      //     testnet: false
-      //   }
-      // }
     ]
   },
   {
@@ -152,6 +139,21 @@ export const taskGroupList: TaskGroup[] = [
       }
     ]
   },
+  {
+    name: "Defi & Liquidity",
+    list: [
+      {
+        id: "sega-swap",
+        name: "Trade on SEGA",
+        description: "Swap or provide liquidity on Sega to earn extra rewards!",
+        period: "Daily Task",
+        reward: "Test SOL Needed",
+        iconName: "sega",
+        icon: <SegaLogo />,
+        visibleInNetworks: [NetworkId.FrontierV1]
+      }
+    ]
+  },
   {
     name: "Social Tasks",
     list: [

app/globals.css

@@ -131,8 +131,8 @@ html {
   background-blend-mode: overlay, normal;
 }
 
-.banner-hashkey {
-  background: url("/images/banner/hashkey-bg.png") repeat 0 0 / 67px 100px,
-    linear-gradient(83deg, rgba(0, 0, 0, 0.9) 11.45%, #bf2e8e 128.94%);
+.banner-sega {
+  background: url("/images/banner/sega-bg.png") repeat 0 0 / 67px 100px,
+    linear-gradient(83deg, rgba(0, 0, 0, 0.9) 11.45%, #00f 128.94%);
   background-blend-mode: overlay, normal;
 }

app/logos/SegaLogo.tsx

@@ -0,0 +1,21 @@
+import { cn } from "@/lib/utils";
+import { SVGProps } from "react";
+
+export function SegaLogo({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="120"
+      height="120"
+      viewBox="0 0 120 120"
+      fill="none"
+      className={cn("text-[#313131] size-full opacity-50", className)}
+      {...props}
+    >
+      <path
+        d="M46.2046 105.107L15.586 87.4298L33.2637 56.8112L41.8692 61.8816L32.7652 77.6502L67.4178 68.3651L70.006 78.0244L35.3534 87.3095L51.122 96.4135L46.2046 105.107ZM86.7363 63.1887L78.1308 58.1182L87.2348 42.3496L52.5822 51.6348L49.994 41.9755L84.6466 32.6904L68.878 23.5864L73.7954 14.8924L104.414 32.5701L86.7363 63.1887Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}