11 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/packages/constants/src/chains.ts:
--------------------------------------------------------------------------------
1 | export enum ChainId {
2 | MAINNET = 1,
3 | SEPOLIA = 11155111,
4 | MISSISSIPPI_TESTNET = 33784,
5 |
6 | SN_MAIN = "0x534e5f4d41494e",
7 | SN_SEPOLIA = "0x534e5f5345504f4c4941",
8 |
9 | REALMS_L3 = "420",
10 |
11 | SLOT_TESTNET = 555, // TODO: update with the real value
12 |
13 | SN_DEVNET = 556, // TODO: update with the real value
14 | }
15 |
--------------------------------------------------------------------------------
/apps/account-portal/src/utils/auth-client.ts:
--------------------------------------------------------------------------------
1 | import { siwsClientPlugin } from "@/utils/auth/auth-siws-client";
2 | import { createAuthClient } from "better-auth/react";
3 |
4 | // Use type assertion to tell TypeScript this is safe
5 | export const authClient = createAuthClient({
6 | baseURL:
7 | (import.meta.env.VITE_BASE_URL as string | undefined) ??
8 | "http://localhost:3000",
9 | plugins: [siwsClientPlugin()],
10 | });
11 |
--------------------------------------------------------------------------------
/apps/account-portal/src/utils/auth/auth-siws-client.ts:
--------------------------------------------------------------------------------
1 | import type { BetterAuthClientPlugin } from "better-auth";
2 |
3 | import type { siws } from "./auth-siws-plugin";
4 |
5 | type SignInWithStarknetPlugin = typeof siws;
6 |
7 | export const siwsClientPlugin = () => {
8 | return {
9 | id: "sign-in-with-starknet",
10 | $InferServerPlugin: {} as ReturnType
11 |
12 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/apps/account-portal/src/utils/auth.ts:
--------------------------------------------------------------------------------
1 | import { betterAuth } from "better-auth";
2 | import { drizzleAdapter } from "better-auth/adapters/drizzle";
3 | import { env } from "env";
4 |
5 | import { db } from "@realms-world/db/client";
6 |
7 | import { siws } from "./auth/auth-siws-plugin";
8 |
9 | // Create Starknet auth plug
10 |
11 | export const auth = betterAuth({
12 | baseURL: env.VITE_BASE_URL ?? "http://localhost:3000",
13 | database: drizzleAdapter(db, {
14 | provider: "pg",
15 | }),
16 |
17 | // https://www.better-auth.com/docs/concepts/session-management#session-caching
18 | session: {
19 | cookieCache: {
20 | enabled: true,
21 | maxAge: 60 * 60, // 60 minutes
22 | },
23 | },
24 |
25 | plugins: [siws({ domain: env.VITE_BASE_URL ?? "http://localhost:3000" })],
26 | });
27 |
--------------------------------------------------------------------------------
/tooling/eslint/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@realms-world/eslint-config",
3 | "private": true,
4 | "version": "0.3.0",
5 | "type": "module",
6 | "exports": {
7 | "./base": "./base.js",
8 | "./vitejsjs": "./vitejs.js",
9 | "./react": "./react.js"
10 | },
11 | "scripts": {
12 | "clean": "git clean -xdf .cache .turbo dist node_modules",
13 | "format": "prettier --check . --ignore-path ../../.gitignore",
14 | "typecheck": "tsc --noEmit"
15 | },
16 | "dependencies": {
17 | "typescript-eslint": "^8.23.0",
18 | "eslint-plugin-import": "^2.31.0",
19 | "eslint-plugin-jsx-a11y": "^6.10.2",
20 | "eslint-plugin-react": "^7.37.4",
21 | "eslint-plugin-react-hooks": "^5.1.0"
22 | },
23 | "devDependencies": {
24 | "eslint": "catalog:",
25 | "prettier": "catalog:",
26 | "typescript": "catalog:"
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/apps/account-portal/src/lib/queries/execute.ts:
--------------------------------------------------------------------------------
1 | import type { TypedDocumentString } from "@/gql/graphql";
2 |
3 | export async function executeComing Soon
13 |14 | We're working hard to bring you an amazing new experience. Stay tuned! 15 |
16 |
6 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/apps/account-portal/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as LabelPrimitive from "@radix-ui/react-label"
5 | import { cva } from "class-variance-authority"
6 | import type {VariantProps} from "class-variance-authority";
7 |
8 | import { cn } from "@/utils/utils"
9 |
10 | const labelVariants = cva(
11 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
12 | )
13 |
14 | const Label = React.forwardRef<
15 | React.ElementRef
7 | {children ||
9 | The page you are looking for does not exist.
} 8 |10 | 16 | 20 | Start Over 21 | 22 |
23 |
23 | {delegatesQuery.data.items.map((delegate) => (
24 |
27 | );
28 | }
29 |
30 | export default DelegateList;
31 |
--------------------------------------------------------------------------------
/apps/account-portal/codegen.ts:
--------------------------------------------------------------------------------
1 | import type { CodegenConfig } from "@graphql-codegen/cli";
2 |
3 | const config: CodegenConfig = {
4 | generates: {
5 | "./src/gql/eternum/": {
6 | documents: ["src/lib/eternum/*.ts", "!src/gql/**/*"],
7 | preset: "client",
8 | schema: "https://api.cartridge.gg/x/seasonpass-mainnet-2/torii/graphql",
9 | config: {
10 | documentMode: "string",
11 | },
12 | presetConfig: {
13 | fragmentMasking: false,
14 | },
15 | plugins: [],
16 | },
17 | "./src/gql/snapshot/": {
18 | documents: ["src/lib/snapshot/*.ts", "!src/gql/**/*"],
19 | preset: "client",
20 | schema: "https://api.snapshot.box/",
21 | config: {
22 | documentMode: "string",
23 | },
24 | presetConfig: {
25 | fragmentMasking: false,
26 | },
27 | plugins: [],
28 | },
29 | },
30 | };
31 |
32 | export default config;
33 |
--------------------------------------------------------------------------------
/apps/account-portal/src/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
1 | import { useToast } from "@/hooks/use-toast"
2 | import {
3 | Toast,
4 | ToastClose,
5 | ToastDescription,
6 | ToastProvider,
7 | ToastTitle,
8 | ToastViewport,
9 | } from "@/components/ui/toast"
10 |
11 | export function Toaster() {
12 | const { toasts } = useToast()
13 |
14 | return (
15 |
20 | {title && {title} }
21 | {description && (
22 | {description}
23 | )}
24 |
25 | {action}
26 |
20 | {/* Dashboard Statistics */}
21 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/apps/account-portal/src/components/modules/governance/proposal-user-vote-badge.tsx:
--------------------------------------------------------------------------------
1 | import { Badge } from "@/components/ui/badge";
2 | import { CheckCircle2, MinusCircle, XCircle } from "lucide-react";
3 |
4 | export const ProposalUserVoteBadge = ({ choice }: { choice: 1 | 2 | 3 }) => {
5 | return (
6 | <>
7 | {choice === 1 && (
8 |
22 |
30 |
23 |
26 | Dashboard
24 |
3 |
4 |
5 | 
6 |
7 |
8 | [](https://discord.gg/realmsworld)
9 | [](https://opensource.org/licenses/MIT)
10 |
11 | # Realms.World Account Portal
12 |
13 | ### The account potal
14 |
15 | [Realms.World](https://realms.world) is the central hub for the Realms Autonomous World, offering a comprehensive marketplace NFTs on Ethereum and Starknet. Features include:
16 |
17 | - Realms Bridge (Ethereum <> Starknet)
18 | - Realms rewards and VeLords functionality
19 | - Governance (delegation and voting)
20 |
21 | ### Contributing
22 |
23 | We welcome contributions from the community to help improve Realms.World.
24 |
25 | ## Setup
26 |
27 | 1. Copy `.env.example` to `.env` in the root and update the variables
28 | 2. `pnpm i`
29 | 3. `pnpm dev` for running the dash
30 |
31 | We will review your contribution and provide feedback. Once your changes have been approved, they will be merged into the main branch.
32 |
33 | ## License
34 |
35 | Realms.World is an open-source project released under the MIT License. This license allows you to freely use, modify, and distribute the code, as long as you include the original copyright and permission notice in any copy of the software or substantial portions of it
36 |
--------------------------------------------------------------------------------
/apps/account-portal/src/components/modules/governance/proposal-results.tsx:
--------------------------------------------------------------------------------
1 | import type { Proposal } from "@/gql/graphql";
2 | import { Badge } from "@/components/ui/badge";
3 | import { CheckCircle2, MinusCircle, XCircle } from "lucide-react";
4 |
5 | export const ProposalResults = ({ proposal }: { proposal: Proposal }) => {
6 | return (
7 |
8 |
12 |
13 |
17 |
18 |
22 |
23 |
27 |
31 |
32 |
36 |
37 | );
38 | };
39 |
--------------------------------------------------------------------------------
/apps/account-portal/src/components/ui/read-more.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | interface ReadMoreProps {
4 | id: string;
5 | text: string;
6 | amountOfWords?: number;
7 | }
8 |
9 | export const ReadMore = ({ id, text, amountOfWords = 24 }: ReadMoreProps) => {
10 | const [isExpanded, setIsExpanded] = useState(false);
11 | const splittedText = text.split(" ");
12 | const itCanOverflow = splittedText.length > amountOfWords;
13 | const beginText = itCanOverflow
14 | ? splittedText.slice(0, amountOfWords - 1).join(" ")
15 | : text;
16 | const endText = splittedText.slice(amountOfWords - 1).join(" ");
17 |
18 | const handleKeyboard = (e: React.KeyboardEvent26 | {beginText} 27 | {itCanOverflow && ( 28 | <> 29 | {!isExpanded && ... } 30 | 34 | {endText} 35 | 36 | setIsExpanded(!isExpanded)} 44 | > 45 | {isExpanded ? "show less" : "show more"} 46 | 47 | 48 | )} 49 |
50 | ); 51 | }; 52 | -------------------------------------------------------------------------------- /apps/account-portal/src/components/ui/avatar.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as AvatarPrimitive from "@radix-ui/react-avatar" 3 | 4 | import { cn } from "@/utils/utils" 5 | 6 | const Avatar = React.forwardRef< 7 | React.ElementRef
21 |
52 | );
53 | }
54 |
--------------------------------------------------------------------------------
/apps/account-portal/src/abi/L2/RealmsBridge.ts:
--------------------------------------------------------------------------------
1 | import type { Abi } from "starknet";
2 |
3 | export const RealmsBridge = [
4 | {
5 | name: "deposit_tokens",
6 | type: "function",
7 | inputs: [
8 | {
9 | name: "salt",
10 | type: "core::felt252",
11 | },
12 | {
13 | name: "owner_l1",
14 | type: "core::starknet::eth_address::EthAddress",
15 | },
16 | {
17 | name: "token_ids",
18 | type: "core::array::Span::
23 |
31 | {isRoot ? (
32 |
36 | Home
37 |
38 | ) : (
39 | {
43 | e.preventDefault();
44 | window.history.back();
45 | }}
46 | >
47 | Go Back
48 |
49 | )}
50 |
51 |
16 |
19 |
24 |
27 |
28 | {/* Interest badges skeleton */}
29 |
30 |
34 |
35 | {/* Statement skeleton */}
36 |
37 |
41 |
42 | {/* Social media icons skeleton */}
43 |
44 |
48 |
40 | {proposals?.map((proposal) => {
41 | const matchingVote = userVotes?.find((vote) => {
42 | return vote?.proposal === Number(proposal?.id.split("/")[1]);
43 | });
44 | return (
45 |
57 | );
58 | }
59 |
--------------------------------------------------------------------------------
/apps/account-portal/src/lib/getVeLordsBurns.ts:
--------------------------------------------------------------------------------
1 | import type { SQL } from "@realms-world/db";
2 | import { queryOptions } from "@tanstack/react-query";
3 | import { createServerFn } from "@tanstack/react-start";
4 | import { z } from "zod";
5 |
6 | import { and, eq, gte, lte } from "@realms-world/db";
7 | import { db } from "@realms-world/db/client";
8 | import { velords_rewards_received } from "@realms-world/db/schema";
9 |
10 | /* -------------------------------------------------------------------------- */
11 | /* getVelordsBurns Endpoint */
12 | /* -------------------------------------------------------------------------- */
13 |
14 | const GetVelordsBurnsInput = z.object({
15 | sender: z.string().optional(),
16 | startTimestamp: z.date().optional(),
17 | endTimestamp: z.date().optional(),
18 | });
19 |
20 | export const getVelordsBurns = createServerFn({ method: "GET" })
21 | .validator((input: unknown) => GetVelordsBurnsInput.parse(input))
22 | .handler(async (ctx) => {
23 | const { sender, startTimestamp, endTimestamp } = ctx.data;
24 | const whereFilter: SQL[] = [];
25 | if (sender) {
26 | whereFilter.push(
27 | eq(velords_rewards_received.sender, sender.toLowerCase()),
28 | );
29 | }
30 | if (startTimestamp) {
31 | whereFilter.push(gte(velords_rewards_received.timestamp, startTimestamp));
32 | }
33 | if (endTimestamp) {
34 | whereFilter.push(lte(velords_rewards_received.timestamp, endTimestamp));
35 | }
36 | return db.query.velords_rewards_received.findMany({
37 | where: and(...whereFilter),
38 | });
39 | });
40 |
41 | export const getVelordsBurnsQueryOptions = (
42 | input?: z.infer
30 | {/* Sticky search input */}
31 |
44 | {Array.from({ length: 6 }).map((_, index) => (
45 |
48 | }
49 | >
50 |
32 | setSearchQuery(e.target.value)}
38 | />
39 |
41 | {children}
51 |
25 |
46 |
47 | {/* Connect wallet button */}
48 |
49 |
51 |
67 |
73 | );
74 | }
75 |
--------------------------------------------------------------------------------
/apps/account-portal/src/providers/theme.tsx:
--------------------------------------------------------------------------------
1 | import { createContext, useContext, useEffect, useState } from "react";
2 |
3 | type Theme = "dark" | "light" | "system";
4 |
5 | interface ThemeProviderProps {
6 | children: React.ReactNode;
7 | defaultTheme?: Theme;
8 | storageKey?: string;
9 | }
10 |
11 | interface ThemeProviderState {
12 | theme: Theme;
13 | setTheme: (theme: Theme) => void;
14 | }
15 |
16 | const initialState: ThemeProviderState = {
17 | theme: "system",
18 | setTheme: () => null,
19 | };
20 |
21 | const ThemeProviderContext = createContext{icon}
68 |
69 |
72 | {title}
70 |{description}
71 |
34 | {image ? (
35 |
54 |
45 |
47 | )}
48 | {isGrid && (
49 |
50 | #{Number(token.token_id)}
51 |
52 | )}
53 |
68 |
84 | );
85 |
--------------------------------------------------------------------------------
/apps/account-portal/src/providers/ethereum.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useEffect, useState } from "react";
4 | import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
5 |
6 | // 0. Setup queryClient
7 | const queryClient = new QueryClient();
8 |
9 | export function AppKitProvider({ children }: { children: React.ReactNode }) {
10 | const [WagmiProvider, setWagmiProvider] = useState
69 | {token?.name}
70 |
80 |
71 | {/*
79 |
81 |
83 |
45 | {currentDelegate ? (
46 | <>
47 |
48 |
49 | {name}
50 |
51 |
52 | ) : (
53 | address && (
54 |
55 | )
56 | )}
57 |
70 |
71 | );
72 | }
73 |
--------------------------------------------------------------------------------
/apps/account-portal/src/hooks/bridge/useBridgeL2Realms.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useMemo } from "react";
2 | import { ERC721 } from "@/abi/L2/ERC721";
3 | import { SUPPORTED_L2_CHAIN_ID } from "@/utils/utils";
4 |
5 | import {
6 | useAccount,
7 | useReadContract,
8 | useSendTransaction,
9 | } from "@starknet-react/core";
10 |
11 | import {
12 | CollectionAddresses,
13 | REALMS_BRIDGE_ADDRESS,
14 | } from "@realms-world/constants";
15 |
16 | import { useERC721Approval } from "@/hooks/token/L2/useERC721Approval";
17 | import { useWriteInitiateWithdrawRealms } from "./useWriteInitiateWithdrawRealms";
18 |
19 | export function useBridgeL2Realms({
20 | selectedTokenIds,
21 | }: {
22 | selectedTokenIds: string[];
23 | }) {
24 | const l2BridgeAddress = REALMS_BRIDGE_ADDRESS[SUPPORTED_L2_CHAIN_ID];
25 | const { address } = useAccount();
26 | const l2RealmsAddress = CollectionAddresses.realms[
27 | SUPPORTED_L2_CHAIN_ID
28 | ] as `0x${string}`;
29 |
30 | const { data: isApprovedForAll } = useReadContract({
31 | abi: ERC721,
32 | address: l2RealmsAddress,
33 | args: l2BridgeAddress && address ? [address, l2BridgeAddress] : undefined,
34 | functionName: "is_approved_for_all",
35 | watch: true,
36 | });
37 |
38 | const { calls: approveCall } = useERC721Approval({
39 | contractAddress: l2RealmsAddress,
40 | operator: l2BridgeAddress as `0x${string}`,
41 | });
42 | const { calls: removeApprovalCall } = useERC721Approval({
43 | contractAddress: l2RealmsAddress,
44 | operator: l2BridgeAddress as `0x${string}`,
45 | removeApproval: true,
46 | });
47 | const { calls: depositCall } = useWriteInitiateWithdrawRealms({
48 | selectedTokenIds,
49 | });
50 |
51 | const depositCalls = useMemo(() => {
52 | return [...approveCall, ...depositCall, ...removeApprovalCall];
53 | }, [approveCall, depositCall, removeApprovalCall]);
54 |
55 | const { sendAsync, ...writeReturn } = useSendTransaction({
56 | calls: depositCalls,
57 | });
58 |
59 | //const transactions = useStore(useTransactionManager, (state) => state);
60 |
61 | const initiateWithdraw = useCallback(async () => {
62 | const tx = await sendAsync();
63 | /*transactions?.addTx({
64 | hash: tx.transaction_hash,
65 | type: TransactionType.BRIDGE_REALMS_L2_TO_L1_INITIATE,
66 | chainId: SUPPORTED_L2_CHAIN_ID,
67 | status: "pending",
68 | timestamp: new Date(Date.now()),
69 | });*/
70 |
71 | return tx;
72 | }, [sendAsync /*, transactions*/]);
73 |
74 | return {
75 | isApprovedForAll,
76 | initiateWithdraw,
77 | ...writeReturn,
78 | };
79 | }
80 |
--------------------------------------------------------------------------------
/apps/account-portal/src/components/modules/realms/realm-resources.tsx:
--------------------------------------------------------------------------------
1 | import type { TokenMetadataAttribute } from "@/types/ark";
2 | // Assuming you're using a tooltip library
3 | import { Button } from "@/components/ui/button";
4 | import { ResourceIcon } from "@/components/ui/resource-icon";
5 | import {
6 | Tooltip,
7 | TooltipContent,
8 | TooltipProvider,
9 | TooltipTrigger,
10 | } from "@/components/ui/tooltip";
11 | import { useIsMobile } from "@/hooks/use-mobile";
12 |
13 | export default function RealmResources({
14 | traits,
15 | }: {
16 | traits: TokenMetadataAttribute[];
17 | }) {
18 | const resources = traits.filter((trait) => trait.trait_type === "Resource");
19 | const hiddenCount = resources.length - 4;
20 | const isMobile = useIsMobile();
21 |
22 | return (
23 |
24 | {resources.slice(0, isMobile ? 2 : 4).map((resource, index) => (
25 |
37 |
38 |
39 |
42 |
43 |
44 |
49 |
66 |
67 |
68 |
69 | )}
70 |
71 | );
72 | }
73 |
--------------------------------------------------------------------------------
/apps/account-portal/src/utils/utils.ts:
--------------------------------------------------------------------------------
1 | import type { ClassValue } from "clsx";
2 | import { clsx } from "clsx";
3 | import { env } from "env";
4 | import { validateAndParseAddress } from "starknet";
5 | import { twMerge } from "tailwind-merge";
6 |
7 | import { ChainId } from "@realms-world/constants";
8 |
9 | export const SUPPORTED_L1_CHAIN_ID =
10 | env.VITE_PUBLIC_CHAIN == "sepolia" ? ChainId.SEPOLIA : ChainId.MAINNET;
11 |
12 | export const SUPPORTED_L2_CHAIN_ID =
13 | SUPPORTED_L1_CHAIN_ID === ChainId.SEPOLIA
14 | ? ChainId.SN_SEPOLIA
15 | : ChainId.SN_MAIN;
16 |
17 | export function cn(...inputs: ClassValue[]) {
18 | return twMerge(clsx(inputs));
19 | }
20 |
21 | export function shortenAddress(str = "") {
22 | let formatted = formatAddress(str);
23 |
24 | // Only remove extra zeros after "0x" if there's at least one non-zero digit.
25 | if (/[^0]/.test(formatted.slice(2))) {
26 | formatted = formatted.replace(/^(0x)0+/, "$1");
27 | }
28 |
29 | return `${formatted.slice(0, 6)}...${formatted.slice(formatted.length - 4)}`;
30 | }
31 |
32 | export function formatAddress(address: string) {
33 | //if (address.length === 42) return getAddress(address);
34 | try {
35 | return validateAndParseAddress(address);
36 | } catch {
37 | return address;
38 | }
39 | }
40 | export function formatNumber(
41 | amount: number | null | undefined,
42 | maximumFractionDigits = 2,
43 | ) {
44 | if (amount === null || amount === undefined) {
45 | return "-";
46 | }
47 | const formatter = new Intl.NumberFormat("en-US", {
48 | maximumFractionDigits,
49 | });
50 |
51 | return formatter.format(amount);
52 | }
53 | export function abbreviateNumber(value: number | string): string {
54 | const num = typeof value === "number" ? value : parseFloat(value);
55 | if (isNaN(num)) return "0";
56 | if (Math.abs(num) < 1e3) return num.toString();
57 | if (Math.abs(num) >= 1e9)
58 | return (num / 1e9).toFixed(1).replace(/\.0$/, "") + "b";
59 | if (Math.abs(num) >= 1e6)
60 | return (num / 1e6).toFixed(1).replace(/\.0$/, "") + "m";
61 | if (Math.abs(num) >= 1e3)
62 | return (num / 1e3).toFixed(1).replace(/\.0$/, "") + "k";
63 | return num.toString();
64 | }
65 |
66 | export function shortenName(name: string, charLength?: number): string {
67 | if (name.length > (charLength ?? 18)) {
68 | const firstPart = name.substring(0, 22);
69 | return (firstPart + "...").toLowerCase();
70 | } else {
71 | return name.toLowerCase();
72 | }
73 | }
74 | export const trimAddress = (addr?: string): string => {
75 | if (!addr?.startsWith("0x")) return addr ?? "";
76 | return "0x" + addr.slice(2).replace(/^0+/, "");
77 | };
78 |
--------------------------------------------------------------------------------
/apps/account-portal/src/components/layout/nav-main.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import type { LucideIcon } from "lucide-react";
4 | import {
5 | Collapsible,
6 | CollapsibleContent,
7 | CollapsibleTrigger,
8 | } from "@/components/ui/collapsible";
9 | import {
10 | SidebarGroup,
11 | SidebarGroupLabel,
12 | SidebarMenu,
13 | SidebarMenuButton,
14 | SidebarMenuItem,
15 | SidebarMenuSub,
16 | SidebarMenuSubButton,
17 | SidebarMenuSubItem,
18 | } from "@/components/ui/sidebar";
19 | import { Link } from "@tanstack/react-router";
20 | import { ChevronRight } from "lucide-react";
21 |
22 | export function NavMain({
23 | items,
24 | label,
25 | }: {
26 | items: {
27 | title: string;
28 | url: string;
29 | icon?: LucideIcon;
30 | isActive?: boolean;
31 | items?: {
32 | title: string;
33 | url: string;
34 | }[];
35 | }[];
36 | label: string;
37 | }) {
38 | return (
39 |
29 | {resource.value && (
30 |
33 | ))}
34 | {resources.length > (isMobile ? 2 : 4) && (
35 | <>
36 |
50 | {resources.slice(4).map((resource, index) => (
51 |
65 |
52 |
63 | ))}
64 |
53 | {resource.value}
54 | {resource.value && (
55 |
62 | {error.message}
;
39 | }
40 |
41 | return (
42 |
43 |
50 |
52 | );
53 | }
54 | function RealmsComponent() {
55 | const { address } = useAccount();
56 |
57 | const l2RealmsQuery = useSuspenseQuery(
58 | getAccountTokensQueryOptions({
59 | address: address,
60 | collectionAddress: CollectionAddresses.realms[
61 | SUPPORTED_L2_CHAIN_ID
62 | ] as string,
63 | }),
64 | );
65 | const l2Realms = l2RealmsQuery.data;
66 | if (!address) {
67 | return Connect Starknet Wallet to view your Realms
;
68 | }
69 |
70 | return (
71 |
72 |
94 | );
95 | }
96 |
--------------------------------------------------------------------------------
/apps/account-portal/src/components/modules/realms/bridge-tx-skeleton.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | Accordion,
4 | AccordionContent,
5 | AccordionItem,
6 | AccordionTrigger,
7 | } from "@/components/ui/accordion";
8 | import { Badge } from "@/components/ui/badge";
9 | import { Button } from "@/components/ui/button";
10 | import { cn } from "@/utils/utils";
11 | import { ArrowRight } from "lucide-react";
12 |
13 | const BridgeTransactionHistorySkeleton: React.FC = () => {
14 | return (
15 |
73 |
74 |
77 |
78 |
79 |
82 |
83 |
84 |
85 | {l2Realms?.length
86 | ? l2Realms.map((realm) => {
87 | return (
88 |
93 |
20 |
47 |
21 |
28 |
22 |
23 |
24 |
25 |
26 |
27 |
29 |
46 |
30 | {[...Array(3)].map((_, idx) => (
31 |
42 |
43 |
44 |
45 |
50 |
51 |
52 |
53 |
68 |
54 |
55 |
58 |
59 | {[...Array(2)].map((_, idx) => (
60 |
65 | ))}
66 |
67 |
10 |
15 |
16 | ))
17 | Table.displayName = "Table"
18 |
19 | const TableHeader = React.forwardRef<
20 | HTMLTableSectionElement,
21 | React.HTMLAttributes