add viewer button

ui/src/app/components/notifications/SpecialBeast.tsx

@@ -8,6 +8,7 @@ import TwitterShareButton from "../buttons/TwitterShareButtons";
 import { getAppUrl } from "@/app/lib/constants";
 import useAdventurerStore from "@/app/hooks/useAdventurerStore";
 import { Button } from "../buttons/Button";
+import { getTokenViewerUrl } from "@/app/lib/constants";
 
 export const SpecialBeast = () => {
   const adventurer = useAdventurerStore((state) => state.adventurer);
@@ -63,12 +64,15 @@ export const SpecialBeast = () => {
               />
             </div>
           )}
-          <div className="flex flex-col gap-20 items-center justify-center w-1/6">
+          <div className="flex flex-col gap-5 items-center justify-center w-1/6">
             <TwitterShareButton
               text={`${
                 adventurer?.name
               } just defeated the first ${beastName} and collects the 1:1 Beast #LootSurvivor.\n\nSee the token here: ${getAppUrl()}👹\n\nEnter here and try to survive: ${getAppUrl()}\n\n@lootrealms #Starknet #Play2Die #LootSurvivor`}
             />
+            <a href={getTokenViewerUrl()} target="_blank">
+              <Button>View Token</Button>
+            </a>
             <Button onClick={() => resetBeast()}>Continue</Button>
           </div>
         </div>

ui/src/app/lib/constants.ts

@@ -74,6 +74,15 @@ export function getAppUrl() {
   }
 }
 
+export function getTokenViewerUrl() {
+  switch (NETWORK) {
+    case "goerli":
+      return "https://goerli-realms.world/token-viewer/";
+    case "mainnet":
+      return "https://realms.world/token-viewer/";
+  }
+}
+
 export const notificationAnimations = [
   { name: "idle", startFrame: 0, frameCount: 4 },
   { name: "run", startFrame: 9, frameCount: 5 },