Beta

src/UI/Auth/Auth.svelte

@@ -22,8 +22,8 @@
   } from "~/store";
   import { nimbus } from "~/lib/network";
   import mixpanel from "mixpanel-browser";
-  import { shorterAddress, clickOutside } from "~/utils";
-  import { useQueryClient } from "@tanstack/svelte-query";
+  import { shorterAddress, clickOutside, triggerFirework } from "~/utils";
+  import { createQuery, useQueryClient } from "@tanstack/svelte-query";
   import QRCode from "qrcode-generator";
   import CopyToClipboard from "svelte-copy-to-clipboard";
   import { wait } from "~/entries/background/utils";
@@ -35,6 +35,7 @@
   import bs58 from "bs58";
   import { walletStore } from "@aztemi/svelte-on-solana-wallet-adapter-core";
   import type { WalletState } from "nimbus-sui-kit";
+  import { handleGetDataDailyCheckin } from "~/lib/queryAPI";
 
   import Tooltip from "~/components/Tooltip.svelte";
   import DarkMode from "~/components/DarkMode.svelte";
@@ -43,6 +44,8 @@
   import Button from "~/components/Button.svelte";
   import GoogleAuth from "./GoogleAuth.svelte";
   import TwitterAuth from "./TwitterAuth.svelte";
+  import DiscordAuth from "./DiscordAuth.svelte";
+  import TelegramAuth from "./TelegramAuth.svelte";
   import SuiAuth from "./SUIAuth.svelte";
   import SolanaAuth from "./SolanaAuth.svelte";
   import TonAuth from "./TonAuth.svelte";
@@ -52,13 +55,16 @@
   import Reload from "~/assets/reload-black.svg";
   import ReloadWhite from "~/assets/reload-white.svg";
   import Evm from "~/assets/chains/evm.png";
+  import goldImg from "~/assets/Gold4.svg";
 
   export let displayName;
   export let publicAddress;
   export let buyPackage = "Free";
   export let navActive;
   export let handleUpdateNavActive = (value) => {};
 
+  const linkRedirect = "https://beta.nimbus-ext.pages.dev/settings?tab=links";
+
   const wallets = [new PhantomWalletAdapter(), new SolflareWalletAdapter()];
 
   const wallets$ = onboard.state.select("wallets");
@@ -81,6 +87,22 @@
     isSuccessToast = false;
   };
 
+  $: queryDailyCheckin = createQuery({
+    queryKey: [$userPublicAddress, "daily-checkin"],
+    queryFn: () => handleGetDataDailyCheckin(),
+    staleTime: Infinity,
+    enabled:
+      $user &&
+      Object.keys($user).length !== 0 &&
+      $userPublicAddress.length !== 0,
+  });
+
+  $: {
+    if (!$queryDailyCheckin.isError && $queryDailyCheckin.data !== undefined) {
+      dataCheckinHistory = $queryDailyCheckin?.data?.checkinLogs;
+    }
+  }
+
   let showPopover = false;
   let invitation = "";
 
@@ -97,13 +119,47 @@
   let loading = false;
   let isShowTooltipCopy = false;
 
+  let discordCode = "";
+  let dataCheckinHistory = [];
+
+  let openScreenBonusScore: boolean = false;
+  let bonusScore: number = 0;
+
+  const triggerBonusScore = async () => {
+    openScreenBonusScore = true;
+    triggerFirework();
+    await wait(2000);
+    openScreenBonusScore = false;
+  };
+
+  $: {
+    if (discordCode) {
+      if (
+        localStorage.getItem("auth_token") ||
+        localStorage.getItem("solana_token") ||
+        localStorage.getItem("sui_token") ||
+        localStorage.getItem("ton_token") ||
+        localStorage.getItem("evm_token")
+      ) {
+        handleDiscordAuthLink(discordCode);
+      } else {
+        handleDiscordAuth(discordCode);
+      }
+    }
+  }
+
   onMount(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const invitationParams = urlParams.get("invitation");
     if (invitationParams) {
       invitation = invitationParams;
     }
 
+    const codeParams = urlParams.get("code");
+    if (codeParams) {
+      discordCode = codeParams;
+    }
+
     const authToken = localStorage.getItem("auth_token");
     const solanaToken = localStorage.getItem("solana_token");
     const suiToken = localStorage.getItem("sui_token");
@@ -202,6 +258,142 @@
     }
   };
 
+  // handle link Discord social
+  const handleDiscordAuthLink = async (code: string) => {
+    mixpanel.track("user_login_discord");
+    try {
+      const res: any = await nimbus.get(`/auth/discord/redirect?code=${code}`);
+      if (res && res?.data) {
+        handleLinkDiscord(
+          res?.data.userInfo.id,
+          res?.data.userInfo.email,
+          res?.data.userInfo.global_name
+        );
+      }
+    } catch (e) {
+      console.log("error: ", e);
+    }
+  };
+
+  const handleLinkDiscord = async (id, info, displayName) => {
+    try {
+      let params: any = {
+        kind: "social",
+        id,
+        type: "discord",
+        info,
+        displayName,
+      };
+
+      if ($userPublicAddress && $userPublicAddress.length === 0) {
+        params = {
+          ...params,
+          userPublicAddress: $userPublicAddress,
+        };
+      }
+
+      const response: any = await nimbus.post("/accounts/link", params);
+      if (response && response?.error) {
+        toastMsg = response?.error;
+        isSuccessToast = false;
+        trigger();
+      } else {
+        const quest =
+          dataCheckinHistory &&
+          dataCheckinHistory.length !== 0 &&
+          dataCheckinHistory.find(
+            (item) => item.type === "QUEST" && item.note === "link-discord"
+          );
+        if (!quest) {
+          handleAddBonusQuest();
+        }
+
+        queryClient?.invalidateQueries(["link-socials"]);
+
+        toastMsg = "Successfully link Discord account!";
+        isSuccessToast = true;
+        trigger();
+
+        window.location.assign(linkRedirect);
+      }
+    } catch (e) {
+      console.log(e);
+      toastMsg =
+        "There are some problem when link X account. Please try again!";
+      isSuccessToast = false;
+      trigger();
+    }
+  };
+
+  const handleAddBonusQuest = async () => {
+    try {
+      const res: any = await nimbus.post(`/v2/checkin/quest/link-discord`, {});
+      if (res && res?.data === null) {
+        toastMsg = "You are already finished this quest";
+        isSuccessToast = false;
+      }
+      if (res?.data?.bonus !== undefined) {
+        triggerBonusScore();
+        bonusScore = res?.data?.bonus;
+        queryClient.invalidateQueries([$userPublicAddress, "daily-checkin"]);
+        queryClient.invalidateQueries(["users-me"]);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  // handle Discord login
+  const handleDiscordAuth = async (code: string) => {
+    mixpanel.track("user_login_discord");
+    try {
+      const res: any = await nimbus.get(`/auth/discord/redirect?code=${code}`);
+      if (res && res?.data) {
+        handleGetDiscordToken(
+          res?.data.userInfo.id,
+          res?.data.userInfo.username,
+          res?.data.userInfo.global_name,
+          res?.data.userInfo.email
+        );
+      }
+    } catch (e) {
+      console.log("error: ", e);
+    }
+  };
+
+  const handleGetDiscordToken = async (id, username, global_name, email) => {
+    try {
+      const res: any = await nimbus.post("/auth/discord", {
+        id,
+        username,
+        global_name,
+        email,
+      });
+      if (res?.data?.result) {
+        triggerConnectWallet.update((n) => (n = false));
+        localStorage.setItem("auth_token", res?.data?.result);
+        user.update(
+          (n) =>
+            (n = {
+              picture: User,
+            })
+        );
+        toastMsg = "Login with Discord successfully!";
+        isSuccessToast = true;
+        trigger();
+        queryClient?.invalidateQueries(["users-me"]);
+        queryClient.invalidateQueries(["list-address"]);
+        queryClient?.invalidateQueries(["link-socials"]);
+      } else {
+        toastMsg = res?.error;
+        isSuccessToast = false;
+        trigger();
+      }
+    } catch (e) {
+      console.error("error: ", e);
+    }
+  };
+
   // handle EVM login
   const connect = async () => {
     try {
@@ -819,6 +1011,8 @@
       <SuiAuth />
       <GoogleAuth />
       <TwitterAuth />
+      <DiscordAuth />
+      <TelegramAuth />
     </div>
   </div>
 </AppOverlay>
@@ -869,6 +1063,28 @@
   </div>
 {/if}
 
+{#if openScreenBonusScore}
+  <div
+    class="fixed h-screen w-screen top-0 left-0 flex items-center justify-center bg-[#000000cc]"
+    style="z-index: 2147483648;"
+    on:click={() => {
+      setTimeout(() => {
+        openScreenBonusScore = false;
+      }, 500);
+    }}
+  >
+    <div class="flex flex-col items-center justify-center gap-10">
+      <div class="xl:text-2xl text-4xl text-white font-medium">
+        Congratulation!!!
+      </div>
+      <img src={goldImg} alt="" class="w-40 h-40" />
+      <div class="xl:text-2xl text-4xl text-white font-medium">
+        You have received {bonusScore} Bonus GM Points
+      </div>
+    </div>
+  </div>
+{/if}
+
 <style windi:preflights:global windi:safelist:global>
   .connect {
     animation: pulse 0.5s infinite alternate; /* Adjust the duration and other parameters as needed */

src/UI/Auth/DiscordAuth.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  const handleRedirectDiscordAuth = () => {
+    window.location.assign(
+      "https://discord.com/oauth2/authorize?client_id=1236967408204517396&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A5173&scope=identify+guilds+guilds.members.read"
+    );
+  };
+</script>
+
+<div
+  class="flex items-center justify-center gap-2 text-white border cursor-pointer py-3 px-6 rounded-[12px] min-w-[250px] bg-[#5865F2] text-white"
+  on:click={handleRedirectDiscordAuth}
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="28"
+    height="28"
+    viewBox="0 0 29 22"
+    fill="none"
+    ><script xmlns=""></script>
+    <path
+      d="M24.6361 1.96176C22.8237 1.13014 20.8801 0.517433 18.848 0.166511C18.811 0.159738 18.774 0.176664 18.755 0.210515C18.505 0.65509 18.2281 1.23507 18.0342 1.69094C15.8486 1.36372 13.6741 1.36372 11.5332 1.69094C11.3393 1.22494 11.0524 0.65509 10.8013 0.210515C10.7822 0.177793 10.7453 0.160868 10.7082 0.166511C8.67724 0.516312 6.73367 1.12902 4.9201 1.96176C4.9044 1.96853 4.89095 1.97983 4.88201 1.99449C1.19547 7.50211 0.185568 12.8744 0.68099 18.18C0.683232 18.206 0.697803 18.2308 0.717979 18.2466C3.15026 20.0328 5.50633 21.1172 7.81866 21.8359C7.85567 21.8472 7.89488 21.8337 7.91843 21.8032C8.46541 21.0562 8.95299 20.2686 9.37105 19.4404C9.39572 19.3919 9.37217 19.3343 9.32175 19.3151C8.54835 19.0218 7.81193 18.6641 7.10354 18.2579C7.04751 18.2251 7.04303 18.145 7.09457 18.1066C7.24364 17.9949 7.39275 17.8787 7.5351 17.7613C7.56085 17.7399 7.59673 17.7354 7.62701 17.7489C12.2808 19.8737 17.3191 19.8737 21.918 17.7489C21.9483 17.7343 21.9842 17.7388 22.0111 17.7602C22.1534 17.8776 22.3025 17.9949 22.4527 18.1066C22.5042 18.145 22.5009 18.2251 22.4449 18.2579C21.7365 18.6719 21 19.0218 20.2255 19.314C20.1751 19.3332 20.1527 19.3919 20.1773 19.4404C20.6044 20.2675 21.092 21.0551 21.6288 21.8021C21.6513 21.8337 21.6916 21.8472 21.7286 21.8359C24.0522 21.1172 26.4082 20.0328 28.8405 18.2466C28.8618 18.2308 28.8753 18.2071 28.8775 18.1811C29.4704 12.0472 27.8844 6.71902 24.6731 1.99561C24.6653 1.97983 24.6518 1.96853 24.6361 1.96176ZM10.066 14.9494C8.6649 14.9494 7.51042 13.6631 7.51042 12.0833C7.51042 10.5036 8.64252 9.21727 10.066 9.21727C11.5007 9.21727 12.644 10.5149 12.6216 12.0833C12.6216 13.6631 11.4895 14.9494 10.066 14.9494ZM19.5149 14.9494C18.1138 14.9494 16.9593 13.6631 16.9593 12.0833C16.9593 10.5036 18.0914 9.21727 19.5149 9.21727C20.9496 9.21727 22.0929 10.5149 22.0705 12.0833C22.0705 13.6631 20.9496 14.9494 19.5149 14.9494Z"
+      fill="#fff"
+    />
+    <script xmlns=""></script></svg
+  >
+  <div class="font-semibold text-[15px]">Log in with Discord</div>
+</div>
+
+<style windi:preflights:global windi:safelist:global></style>

src/UI/Auth/GoogleAuth.svelte

@@ -144,5 +144,4 @@
   </div>
 {/if}
 
-<style>
-</style>
+<style windi:preflights:global windi:safelist:global></style>

src/UI/Auth/SUIAuth.svelte

@@ -222,5 +222,4 @@
   </div>
 {/if}
 
-<style>
-</style>
+<style windi:preflights:global windi:safelist:global></style>

src/UI/Auth/TelegramAuth.svelte

@@ -0,0 +1,24 @@
+<!-- <script>
+  function onTelegramAuth(user) {
+    alert(
+      "Logged in as " +
+        user.first_name +
+        " " +
+        user.last_name +
+        " (" +
+        user.id +
+        (user.username ? ", @" + user.username : "") +
+        ")"
+    );
+  }
+</script> -->
+
+<script
+  async
+  src="https://telegram.org/js/telegram-widget.js?22"
+  data-telegram-login="Nimbus Bot"
+  data-size="large"
+  data-radius="12"
+  data-request-access="write"
+  data-preload
+></script>

src/UI/Auth/TonAuth.svelte

@@ -193,5 +193,4 @@
   </div>
 {/if}
 
-<style>
-</style>
+<style windi:preflights:global windi:safelist:global></style>

src/UI/Auth/TwitterAuth.svelte

@@ -87,20 +87,32 @@
 </script>
 
 <div
-  class={`flex items-center justify-center gap-2 text-white border cursor-pointer py-3 px-6 rounded-[12px] min-w-[250px] ${
-    $isDarkMode ? "border-white text-white" : "border-[#27326f] text-[#27326f]"
-  }`}
+  class="flex items-center justify-center gap-2 text-white border cursor-pointer py-3 px-6 rounded-[12px] min-w-[250px] bg-black"
   on:click={handleTwitterAuth}
 >
-  <img
-    alt="link Twitter"
-    loading="lazy"
-    decoding="async"
-    data-nimg="1"
-    style="color:transparent"
-    src="https://getnimbus.io/logoSocialMedia/twitterX1.svg"
-    class="w-[24px] h-[24px]"
-  />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    fill="none"
+    viewBox="0 0 512 512"
+    id="twitter"
+    ><script xmlns=""></script>
+    <g clip-path="url(#clip0_84_15697)">
+      <rect width="512" height="512" fill="#000" rx="60" />
+      <path
+        fill="#fff"
+        d="M355.904 100H408.832L293.2 232.16L429.232 412H322.72L239.296 302.928L143.84 412H90.8805L214.56 270.64L84.0645 100H193.28L268.688 199.696L355.904 100ZM337.328 380.32H366.656L177.344 130.016H145.872L337.328 380.32Z"
+      >
+      </path>
+    </g>
+    <defs>
+      <clipPath id="clip0_84_15697">
+        <rect width="512" height="512" fill="#fff" />
+      </clipPath>
+    </defs>
+    <script xmlns=""></script></svg
+  >
   <div class="font-semibold text-[15px]">Login with X</div>
 </div>
 
@@ -148,3 +160,5 @@
     </Toast>
   </div>
 {/if}
+
+<style windi:preflights:global windi:safelist:global></style>

src/UI/Header/Header.svelte

@@ -379,7 +379,7 @@
 
   onMount(() => {
     const urlParams = new URLSearchParams(window.location.search);
-    const syncCodeParams = urlParams.get("code");
+    const syncCodeParams = urlParams.get("syncCode");
 
     if (syncCodeParams) {
       handleMobileSignIn(syncCodeParams);

src/UI/Option/TabLinks.svelte

@@ -1,15 +1,19 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { userPublicAddress } from "~/store";
-  import { nimbus } from "~/lib/network";
   import { i18n } from "~/lib/i18n";
   import mixpanel from "mixpanel-browser";
   import { createQuery } from "@tanstack/svelte-query";
-  import { getUserInfo, handleValidateAddress } from "~/lib/queryAPI";
+  import {
+    getLinkData,
+    getUserInfo,
+    handleValidateAddress,
+  } from "~/lib/queryAPI";
 
   import ConnectedBtn from "./TabLinks/MainWalletLinks/ConnectedBtn.svelte";
   import Google from "./TabLinks/SocialLinks/Google.svelte";
   import Twitter from "./TabLinks/SocialLinks/Twitter.svelte";
+  import Discord from "./TabLinks/SocialLinks/Discord.svelte";
   import Evm from "./TabLinks/MainWalletLinks/Evm.svelte";
   import Solana from "./TabLinks/MainWalletLinks/Solana.svelte";
   import Sui from "./TabLinks/MainWalletLinks/Sui.svelte";
@@ -36,11 +40,6 @@
     retry: false,
   });
 
-  const getLinkData = async () => {
-    const response: any = await nimbus.get("/accounts/link");
-    return response;
-  };
-
   $: {
     if (!$queryLinkSocial.isError && $queryLinkSocial.data !== undefined) {
       data = $queryLinkSocial?.data?.data;
@@ -104,6 +103,14 @@
   const handleUpdateSelectedDisplayName = (name) => {
     selectedDisplayName = name;
   };
+
+  $: dataSocials =
+    data?.filter(
+      (item) =>
+        item.type === "twitter" ||
+        item.type === "google" ||
+        item.type === "discord"
+    ) || [];
 </script>
 
 <div class="flex flex-col gap-4">
@@ -122,7 +129,7 @@
         Link your social accounts
       </div>
       <div class="flex md:flex-row flex-col items-center gap-6">
-        {#each data?.filter((item) => item.type === "twitter" || item.type === "google") as item}
+        {#each dataSocials as item}
           {#if item.type === "google"}
             <Google
               data={item}
@@ -137,24 +144,91 @@
               {handleUpdateSelectedDisplayName}
             />
           {/if}
+          {#if item.type === "discord"}
+            <Discord
+              data={item}
+              {selectedDisplayName}
+              {handleUpdateSelectedDisplayName}
+            />
+          {/if}
         {/each}
 
-        {#if data && data.length === 1 && data.find((item) => item.type === "google")}
+        {#if dataSocials && dataSocials.length === 1 && dataSocials.find((item) => item.type === "google")}
+          <Twitter
+            data={{}}
+            {selectedDisplayName}
+            {handleUpdateSelectedDisplayName}
+          />
+          <Discord
+            data={{}}
+            {selectedDisplayName}
+            {handleUpdateSelectedDisplayName}
+          />
+        {/if}
+
+        {#if dataSocials && dataSocials.length === 1 && dataSocials.find((item) => item.type === "twitter")}
+          <Google
+            data={{}}
+            {selectedDisplayName}
+            {handleUpdateSelectedDisplayName}
+          />
+          <Discord
+            data={{}}
+            {selectedDisplayName}
+            {handleUpdateSelectedDisplayName}
+          />
+        {/if}
+
+        {#if dataSocials && dataSocials.length === 1 && dataSocials.find((item) => item.type === "discord")}
+          <Twitter
+            data={{}}
+            {selectedDisplayName}
+            {handleUpdateSelectedDisplayName}
+          />
+          <Google
+            data={{}}
+            {selectedDisplayName}
+            {handleUpdateSelectedDisplayName}
+          />
+        {/if}
+
+        {#if dataSocials && dataSocials.length === 1 && dataSocials.find((item) => item.type === "discord")}
           <Twitter
             data={{}}
             {selectedDisplayName}
             {handleUpdateSelectedDisplayName}
           />
+          <Google
+            data={{}}
+            {selectedDisplayName}
+            {handleUpdateSelectedDisplayName}
+          />
         {/if}
 
-        {#if data && data.length === 1 && data.find((item) => item.type === "twitter")}
+        {#if dataSocials && dataSocials.length === 2 && dataSocials.find((item) => item.type === "discord") && dataSocials.find((item) => item.type === "twitter")}
           <Google
             data={{}}
             {selectedDisplayName}
             {handleUpdateSelectedDisplayName}
           />
         {/if}
 
+        {#if dataSocials && dataSocials.length === 2 && dataSocials.find((item) => item.type === "discord") && dataSocials.find((item) => item.type === "google")}
+          <Twitter
+            data={{}}
+            {selectedDisplayName}
+            {handleUpdateSelectedDisplayName}
+          />
+        {/if}
+
+        {#if dataSocials && dataSocials.length === 2 && dataSocials.find((item) => item.type === "twitter") && dataSocials.find((item) => item.type === "google")}
+          <Discord
+            data={{}}
+            {selectedDisplayName}
+            {handleUpdateSelectedDisplayName}
+          />
+        {/if}
+
         {#if data && data.length === 0}
           <Google
             data={{}}
@@ -166,6 +240,11 @@
             {selectedDisplayName}
             {handleUpdateSelectedDisplayName}
           />
+          <Discord
+            data={{}}
+            {selectedDisplayName}
+            {handleUpdateSelectedDisplayName}
+          />
         {/if}
       </div>
     </div>

src/UI/Option/TabLinks/SocialLinks/Discord.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+  import { nimbus } from "~/lib/network";
+  import { Toast } from "flowbite-svelte";
+  import { blur } from "svelte/transition";
+  import { useQueryClient } from "@tanstack/svelte-query";
+
+  import Button from "~/components/Button.svelte";
+
+  export let data: any;
+  export let selectedDisplayName;
+  export let handleUpdateSelectedDisplayName = (name) => {};
+
+  const queryClient = useQueryClient();
+
+  let toastMsg = "";
+  let isSuccessToast = false;
+  let counter = 3;
+  let showToast = false;
+
+  let checked = false;
+
+  const trigger = () => {
+    showToast = true;
+    counter = 3;
+    timeout();
+  };
+
+  const timeout = () => {
+    if (--counter > 0) return setTimeout(timeout, 1000);
+    showToast = false;
+    toastMsg = "";
+    isSuccessToast = false;
+  };
+
+  $: {
+    if (selectedDisplayName === data?.name) {
+      checked = true;
+    } else {
+      checked = false;
+    }
+  }
+
+  const handleRedirectDiscordAuth = () => {
+    window.location.assign(
+      "https://discord.com/oauth2/authorize?client_id=1236967408204517396&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A5173&scope=identify+guilds+guilds.members.read"
+    );
+  };
+
+  const handleDisplayName = async () => {
+    try {
+      checked = !checked;
+      handleUpdateSelectedDisplayName(checked ? data?.name : "");
+      await nimbus.put(
+        `/users/displayName?name=${checked ? data?.name : ""}`,
+        {}
+      );
+      queryClient.invalidateQueries(["users-me"]);
+      toastMsg = `Successfully ${checked ? "set" : "unset"} display X account!`;
+      isSuccessToast = true;
+      trigger();
+    } catch (e) {
+      console.log(e);
+      toastMsg =
+        "There are some problem when set display X account. Please try again!";
+      isSuccessToast = true;
+      trigger();
+    }
+  };
+</script>
+
+<div
+  id="discord"
+  class="max-w-[350px] md:w-[350px] w-full bg_f4f5f8 rounded-[10px] px-4 py-5 flex flex-col"
+>
+  <div class="flex flex-col gap-3">
+    <div class="p-4 rounded-[10px] shadow-sm bg-[#5865F2] w-max">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="26"
+        height="26"
+        viewBox="0 0 29 22"
+        fill="none"
+        ><script xmlns=""></script>
+        <path
+          d="M24.6361 1.96176C22.8237 1.13014 20.8801 0.517433 18.848 0.166511C18.811 0.159738 18.774 0.176664 18.755 0.210515C18.505 0.65509 18.2281 1.23507 18.0342 1.69094C15.8486 1.36372 13.6741 1.36372 11.5332 1.69094C11.3393 1.22494 11.0524 0.65509 10.8013 0.210515C10.7822 0.177793 10.7453 0.160868 10.7082 0.166511C8.67724 0.516312 6.73367 1.12902 4.9201 1.96176C4.9044 1.96853 4.89095 1.97983 4.88201 1.99449C1.19547 7.50211 0.185568 12.8744 0.68099 18.18C0.683232 18.206 0.697803 18.2308 0.717979 18.2466C3.15026 20.0328 5.50633 21.1172 7.81866 21.8359C7.85567 21.8472 7.89488 21.8337 7.91843 21.8032C8.46541 21.0562 8.95299 20.2686 9.37105 19.4404C9.39572 19.3919 9.37217 19.3343 9.32175 19.3151C8.54835 19.0218 7.81193 18.6641 7.10354 18.2579C7.04751 18.2251 7.04303 18.145 7.09457 18.1066C7.24364 17.9949 7.39275 17.8787 7.5351 17.7613C7.56085 17.7399 7.59673 17.7354 7.62701 17.7489C12.2808 19.8737 17.3191 19.8737 21.918 17.7489C21.9483 17.7343 21.9842 17.7388 22.0111 17.7602C22.1534 17.8776 22.3025 17.9949 22.4527 18.1066C22.5042 18.145 22.5009 18.2251 22.4449 18.2579C21.7365 18.6719 21 19.0218 20.2255 19.314C20.1751 19.3332 20.1527 19.3919 20.1773 19.4404C20.6044 20.2675 21.092 21.0551 21.6288 21.8021C21.6513 21.8337 21.6916 21.8472 21.7286 21.8359C24.0522 21.1172 26.4082 20.0328 28.8405 18.2466C28.8618 18.2308 28.8753 18.2071 28.8775 18.1811C29.4704 12.0472 27.8844 6.71902 24.6731 1.99561C24.6653 1.97983 24.6518 1.96853 24.6361 1.96176ZM10.066 14.9494C8.6649 14.9494 7.51042 13.6631 7.51042 12.0833C7.51042 10.5036 8.64252 9.21727 10.066 9.21727C11.5007 9.21727 12.644 10.5149 12.6216 12.0833C12.6216 13.6631 11.4895 14.9494 10.066 14.9494ZM19.5149 14.9494C18.1138 14.9494 16.9593 13.6631 16.9593 12.0833C16.9593 10.5036 18.0914 9.21727 19.5149 9.21727C20.9496 9.21727 22.0929 10.5149 22.0705 12.0833C22.0705 13.6631 20.9496 14.9494 19.5149 14.9494Z"
+          fill="#fff"
+        />
+        <script xmlns=""></script></svg
+      >
+    </div>
+    <div class="xl:text-lg text-xl">Discord</div>
+  </div>
+
+  <div class="flex flex-col gap-3">
+    {#if data && Object.keys(data).length !== 0}
+      <div class="xl:text-base text-lg text-gray-400">@{data?.name}</div>
+      <div class="flex items-center justify-start gap-2">
+        <input
+          type="checkbox"
+          bind:checked
+          on:change={handleDisplayName}
+          class="cursor-pointer relative w-5 h-5 appearance-none rounded-[0.25rem] border outline-none before:pointer-events-none before:absolute before:h-[0.875rem] before:w-[0.875rem] before:scale-0 before:rounded-full before:bg-transparent before:opacity-0 before:shadow-[0px_0px_0px_13px_transparent] before:content-[''] checked:border-primary checked:bg-primary checked:before:opacity-[0.16] checked:after:absolute checked:after:-mt-px checked:after:ml-[0.25rem] checked:after:block checked:after:h-[0.8125rem] checked:after:w-[0.375rem] checked:after:rotate-45 checked:after:border-[0.125rem] checked:after:border-l-0 checked:after:border-t-0 checked:after:border-solid checked:after:border-white checked:after:bg-transparent checked:after:content-[''] hover:cursor-pointer hover:before:opacity-[0.04] hover:before:shadow-[0px_0px_0px_13px_rgba(0,0,0,0.6)] focus:shadow-none focus:transition-[border-color_0.2s] focus:before:scale-100 focus:before:opacity-[0.12] focus:before:shadow-[0px_0px_0px_13px_rgba(0,0,0,0.6)] focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-[0.875rem] focus:after:w-[0.875rem] focus:after:rounded-[0.125rem] focus:after:content-[''] checked:focus:before:scale-100 checked:focus:before:shadow-[0px_0px_0px_13px_#3b71ca] checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] checked:focus:after:-mt-px checked:focus:after:ml-[0.25rem] checked:focus:after:h-[0.8125rem] checked:focus:after:w-[0.375rem] checked:focus:after:rotate-45 checked:focus:after:rounded-none checked:focus:after:border-[0.125rem] checked:focus:after:border-l-0 checked:focus:after:border-t-0 checked:focus:after:border-solid checked:focus:after:border-white checked:focus:after:bg-transparent dark:border-neutral-600 dark:checked:border-primary dark:checked:bg-primary dark:focus:before:shadow-[0px_0px_0px_13px_rgba(255,255,255,0.4)] dark:checked:focus:before:shadow-[0px_0px_0px_13px_#3b71ca]"
+        />
+        <div class="text-lg xl:text-sm">Display on Nimbus</div>
+      </div>
+    {:else}
+      <div class="xl:text-base text-lg text-gray-400">@username</div>
+      <Button
+        variant="tertiary"
+        on:click={handleRedirectDiscordAuth}
+        className="py-3 px-6"
+      >
+        <div class="font-semibold text-[15px]">Connect</div>
+      </Button>
+    {/if}
+  </div>
+</div>
+
+{#if showToast}
+  <div class="fixed top-3 right-3 w-full" style="z-index: 2147483648;">
+    <Toast
+      transition={blur}
+      params={{ amount: 10 }}
+      position="top-right"
+      color={isSuccessToast ? "green" : "red"}
+      bind:open={showToast}
+    >
+      <svelte:fragment slot="icon">
+        {#if isSuccessToast}
+          <svg
+            aria-hidden="true"
+            class="w-5 h-5"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+            ><path
+              fill-rule="evenodd"
+              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+              clip-rule="evenodd"
+            /></svg
+          >
+          <span class="sr-only">Check icon</span>
+        {:else}
+          <svg
+            aria-hidden="true"
+            class="w-5 h-5"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+            ><path
+              fill-rule="evenodd"
+              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+              clip-rule="evenodd"
+            /></svg
+          >
+          <span class="sr-only">Error icon</span>
+        {/if}
+      </svelte:fragment>
+      {toastMsg}
+    </Toast>
+  </div>
+{/if}
+
+<style windi:preflights:global windi:safelist:global>
+</style>

src/UI/Option/TabLinks/SocialLinks/Twitter.svelte

@@ -183,16 +183,30 @@
   class="max-w-[350px] md:w-[350px] w-full bg_f4f5f8 rounded-[10px] px-4 py-5 flex flex-col"
 >
   <div class="flex flex-col gap-3">
-    <div class="p-4 rounded-[10px] shadow-sm bg-white w-max">
-      <img
-        alt="link X"
-        loading="lazy"
-        decoding="async"
-        data-nimg="1"
-        style="color:transparent"
-        src="https://getnimbus.io/logoSocialMedia/twitterX1.svg"
-        class="w-[26px] h-[26px]"
-      />
+    <div class="p-4 rounded-[10px] shadow-sm bg-black w-max">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="26"
+        height="26"
+        fill="none"
+        viewBox="0 0 512 512"
+        id="twitter"
+        ><script xmlns=""></script>
+        <g clip-path="url(#clip0_84_15697)">
+          <rect width="512" height="512" fill="#000" rx="60" />
+          <path
+            fill="#fff"
+            d="M355.904 100H408.832L293.2 232.16L429.232 412H322.72L239.296 302.928L143.84 412H90.8805L214.56 270.64L84.0645 100H193.28L268.688 199.696L355.904 100ZM337.328 380.32H366.656L177.344 130.016H145.872L337.328 380.32Z"
+          >
+          </path>
+        </g>
+        <defs>
+          <clipPath id="clip0_84_15697">
+            <rect width="512" height="512" fill="#fff" />
+          </clipPath>
+        </defs>
+        <script xmlns=""></script></svg
+      >
     </div>
     <div class="xl:text-lg text-xl">X</div>
   </div>

src/lib/queryAPI.ts

@@ -20,6 +20,11 @@ export const getUserInfo = async () => {
   return response?.data;
 };
 
+export const getLinkData = async () => {
+  const response: any = await nimbus.get("/accounts/link");
+  return response;
+};
+
 export const handleValidateAddress = async (address: string) => {
   const response: any = await nimbus.get(`/v2/address/${address}/validate`);
   return (