@@ -54,18 +54,14 @@ function FallBackAvatar({ str, rounded, size = ImageIconSize.Large }: FallBackAv
export function ImageIcon({ src, label, alt = label, fallback, rounded, size }: ImageIconProps) {
const [error, setError] = useState(false);
- return (
-
- {error || !src ? (
-
- ) : (
-
setError(true)}
- />
- )}
-
+ return error || !src ? (
+
+ ) : (
+
setError(true)}
+ />
);
}
diff --git a/apps/core/src/components/providers/ThemeProvider.tsx b/apps/core/src/components/providers/ThemeProvider.tsx
index 43a65cfa558..c69bbf78e13 100644
--- a/apps/core/src/components/providers/ThemeProvider.tsx
+++ b/apps/core/src/components/providers/ThemeProvider.tsx
@@ -1,8 +1,8 @@
// Copyright (c) 2024 IOTA Stiftung
// SPDX-License-Identifier: Apache-2.0
-import { PropsWithChildren, useState, useEffect, useCallback } from 'react';
-import { Theme } from '../../enums';
+import { PropsWithChildren, useState, useEffect } from 'react';
+import { Theme, ThemePreference } from '../../enums';
import { ThemeContext } from '../../contexts';
interface ThemeProviderProps {
@@ -12,40 +12,72 @@ interface ThemeProviderProps {
export function ThemeProvider({ children, appId }: PropsWithChildren
) {
const storageKey = `theme_${appId}`;
- const getSystemTheme = () =>
- window.matchMedia('(prefers-color-scheme: dark)').matches ? Theme.Dark : Theme.Light;
+ const getSystemTheme = () => {
+ return window.matchMedia('(prefers-color-scheme: dark)').matches ? Theme.Dark : Theme.Light;
+ };
- const getInitialTheme = () => {
- if (typeof window === 'undefined') {
- return Theme.System;
- } else {
- const storedTheme = localStorage?.getItem(storageKey);
- return storedTheme ? (storedTheme as Theme) : Theme.System;
- }
+ const getThemePreference = () => {
+ const storedTheme = localStorage?.getItem(storageKey) as ThemePreference | null;
+ return storedTheme ? storedTheme : ThemePreference.System;
};
- const [theme, setTheme] = useState(getInitialTheme);
+ const [systemTheme, setSystemTheme] = useState(Theme.Light);
+ const [themePreference, setThemePreference] = useState(ThemePreference.System);
+ const [isLoadingPreference, setIsLoadingPreference] = useState(true);
- const applyTheme = useCallback((currentTheme: Theme) => {
- const selectedTheme = currentTheme === Theme.System ? getSystemTheme() : currentTheme;
- const documentElement = document.documentElement.classList;
- documentElement.toggle(Theme.Dark, selectedTheme === Theme.Dark);
- documentElement.toggle(Theme.Light, selectedTheme === Theme.Light);
+ // Load the theme values on client
+ useEffect(() => {
+ if (typeof window === 'undefined') return;
+
+ setSystemTheme(getSystemTheme());
+ setThemePreference(getThemePreference());
+
+ // Make the theme preference listener wait
+ // until the preference is loaded in the next render
+ setIsLoadingPreference(false);
}, []);
+ // When the theme preference changes..
useEffect(() => {
- if (typeof window === 'undefined') return;
+ if (typeof window === 'undefined' || isLoadingPreference) return;
+
+ // Update localStorage with the new preference
+ localStorage.setItem(storageKey, themePreference);
- localStorage.setItem(storageKey, theme);
- applyTheme(theme);
+ // In case of SystemPreference, listen for system theme changes
+ if (themePreference === ThemePreference.System) {
+ const handleSystemThemeChange = () => {
+ const systemTheme = getSystemTheme();
+ setSystemTheme(systemTheme);
+ };
+ const systemThemeMatcher = window.matchMedia('(prefers-color-scheme: dark)');
+ systemThemeMatcher.addEventListener('change', handleSystemThemeChange);
+ return () => systemThemeMatcher.removeEventListener('change', handleSystemThemeChange);
+ }
+ }, [themePreference, storageKey, isLoadingPreference]);
- if (theme === Theme.System) {
- const systemTheme = window.matchMedia('(prefers-color-scheme: dark)');
- const handleSystemThemeChange = () => applyTheme(Theme.System);
- systemTheme.addEventListener('change', handleSystemThemeChange);
- return () => systemTheme.removeEventListener('change', handleSystemThemeChange);
+ // Derive the active theme from the preference
+ const theme = (() => {
+ switch (themePreference) {
+ case ThemePreference.Dark:
+ return Theme.Dark;
+ case ThemePreference.Light:
+ return Theme.Light;
+ case ThemePreference.System:
+ return systemTheme;
}
- }, [theme, applyTheme, storageKey]);
+ })();
+
+ // When the theme (preference or derived) changes update the CSS class
+ useEffect(() => {
+ const documentElement = document.documentElement.classList;
+ documentElement.toggle(Theme.Dark, theme === Theme.Dark);
+ documentElement.toggle(Theme.Light, theme === Theme.Light);
+ }, [theme]);
- return {children};
+ return (
+
+ {children}
+
+ );
}
diff --git a/apps/core/src/contexts/ThemeContext.tsx b/apps/core/src/contexts/ThemeContext.tsx
index 3406e50d5c1..b24c0de824d 100644
--- a/apps/core/src/contexts/ThemeContext.tsx
+++ b/apps/core/src/contexts/ThemeContext.tsx
@@ -2,14 +2,16 @@
// SPDX-License-Identifier: Apache-2.0
import { createContext } from 'react';
-import { Theme } from '../enums';
+import { Theme, ThemePreference } from '../enums';
export interface ThemeContextType {
theme: Theme;
- setTheme: (theme: Theme) => void;
+ themePreference: ThemePreference;
+ setThemePreference: (theme: ThemePreference) => void;
}
export const ThemeContext = createContext({
theme: Theme.Light,
- setTheme: () => {},
+ themePreference: ThemePreference.System,
+ setThemePreference: () => {},
});
diff --git a/apps/core/src/enums/theme.enums.ts b/apps/core/src/enums/theme.enums.ts
index 2df40a61af4..1225b1eb403 100644
--- a/apps/core/src/enums/theme.enums.ts
+++ b/apps/core/src/enums/theme.enums.ts
@@ -4,5 +4,10 @@
export enum Theme {
Light = 'light',
Dark = 'dark',
+}
+
+export enum ThemePreference {
+ Light = 'light',
+ Dark = 'dark',
System = 'system',
}
diff --git a/apps/core/src/hooks/index.ts b/apps/core/src/hooks/index.ts
index 2ffa7f95688..026f01c6656 100644
--- a/apps/core/src/hooks/index.ts
+++ b/apps/core/src/hooks/index.ts
@@ -24,6 +24,7 @@ export * from './useGetKioskContents';
export * from './useZodForm';
export * from './useElementDimensions';
export * from './useIotaCoinData';
+export * from './useIsAssetTransferable';
export * from './useLocalStorage';
export * from './useTokenPrice';
export * from './useKioskClient';
diff --git a/apps/core/src/hooks/stake/useValidatorInfo.tsx b/apps/core/src/hooks/stake/useValidatorInfo.tsx
index 2ae4d23c933..f8d6dcd5a2f 100644
--- a/apps/core/src/hooks/stake/useValidatorInfo.tsx
+++ b/apps/core/src/hooks/stake/useValidatorInfo.tsx
@@ -36,7 +36,6 @@ export function useValidatorInfo({ validatorAddress }: { validatorAddress: strin
system,
isPendingValidators,
errorValidators,
-
currentEpoch,
validatorSummary,
name: validatorSummary?.name || '',
diff --git a/apps/core/src/hooks/useGetValidatorsEvents.ts b/apps/core/src/hooks/useGetValidatorsEvents.ts
index c0511d73aae..7be52ae4227 100644
--- a/apps/core/src/hooks/useGetValidatorsEvents.ts
+++ b/apps/core/src/hooks/useGetValidatorsEvents.ts
@@ -12,7 +12,7 @@ type GetValidatorsEvent = {
// NOTE: This copies the query limit from our Rust JSON RPC backend, this needs to be kept in sync!
const QUERY_MAX_RESULT_LIMIT = 50;
-const VALIDATORS_EVENTS_QUERY = '0x3::validator_set::ValidatorEpochInfoEventV2';
+const VALIDATORS_EVENTS_QUERY = '0x3::validator_set::ValidatorEpochInfoEventV1';
//TODO: get validatorEvents by validator address
export function useGetValidatorsEvents({ limit, order }: GetValidatorsEvent) {
diff --git a/apps/core/src/hooks/useIsAssetTransferable.ts b/apps/core/src/hooks/useIsAssetTransferable.ts
new file mode 100644
index 00000000000..7f5e75890a8
--- /dev/null
+++ b/apps/core/src/hooks/useIsAssetTransferable.ts
@@ -0,0 +1,50 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useIotaClient } from '@iota/dapp-kit';
+import { IotaMoveNormalizedStruct, IotaObjectData } from '@iota/iota-sdk/client';
+import { useQuery } from '@tanstack/react-query';
+
+function getObjectTypeParams(obj: IotaObjectData | null | undefined) {
+ const objectType =
+ obj?.type ??
+ (obj?.content?.dataType === 'package' ? 'package' : obj?.content?.type) ??
+ null;
+
+ return objectType?.split('<')[0]?.split('::') || [];
+}
+
+export function useIsAssetTransferable(obj: IotaObjectData | null | undefined) {
+ const client = useIotaClient();
+ const [packageId, moduleName, functionName] = getObjectTypeParams(obj);
+
+ return useQuery({
+ // eslint-disable-next-line @tanstack/query/exhaustive-deps
+ queryKey: ['is-asset-transferable', packageId, moduleName, functionName],
+ queryFn: async () => {
+ if (!packageId || !moduleName || !functionName) {
+ return undefined;
+ }
+
+ return await client.getNormalizedMoveStruct({
+ package: packageId,
+ module: moduleName,
+ struct: functionName,
+ });
+ },
+ select: (moveNormalizedStruct: IotaMoveNormalizedStruct | undefined): boolean => {
+ if (!moveNormalizedStruct) {
+ return false;
+ }
+
+ const structAbilities = moveNormalizedStruct?.abilities?.abilities ?? null;
+
+ if (!structAbilities) {
+ return false;
+ }
+
+ return structAbilities.includes('Store');
+ },
+ enabled: !!packageId && !!moduleName && !!functionName,
+ });
+}
diff --git a/apps/core/src/utils/index.ts b/apps/core/src/utils/index.ts
index 8cbb31afa73..4d57564fa92 100644
--- a/apps/core/src/utils/index.ts
+++ b/apps/core/src/utils/index.ts
@@ -1,7 +1,6 @@
// Copyright (c) 2024 IOTA Stiftung
// SPDX-License-Identifier: Apache-2.0
-export * from './isAssetTransferable';
export * from './calculateStakeShare';
export * from './chunkArray';
export * from './formatAmount';
diff --git a/apps/core/src/utils/isAssetTransferable.ts b/apps/core/src/utils/isAssetTransferable.ts
deleted file mode 100644
index 4dad0779706..00000000000
--- a/apps/core/src/utils/isAssetTransferable.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { IotaObjectData } from '@iota/iota-sdk/client';
-
-export const isAssetTransferable = (obj: IotaObjectData | null | undefined): boolean =>
- // TODO: Either the type abilities will be added to 'IotaParsedData' and
- // we need to check if the object has the 'store' ability or there will be a new endpoint
- // that returns the "transferable" status of a MoveType.
- !!obj && obj.content?.dataType === 'moveObject'; // && obj.content.hasPublicTransfer;
diff --git a/apps/explorer/src/components/IotaTokenCard.tsx b/apps/explorer/src/components/IotaTokenCard.tsx
index 19bb5fa8286..51383f08d43 100644
--- a/apps/explorer/src/components/IotaTokenCard.tsx
+++ b/apps/explorer/src/components/IotaTokenCard.tsx
@@ -3,9 +3,8 @@
// SPDX-License-Identifier: Apache-2.0
import { Panel } from '@iota/apps-ui-kit';
-import { COIN_GECKO_IOTA_URL, useIotaCoinData } from '@iota/core';
-import { ButtonOrLink, ImageIconSize } from '~/components/ui';
-import { CoinIcon } from './owned-coins';
+import { COIN_GECKO_IOTA_URL, CoinIcon, ImageIconSize, useIotaCoinData } from '@iota/core';
+import { ButtonOrLink } from '~/components/ui';
import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
export function IotaTokenCard(): JSX.Element {
diff --git a/apps/explorer/src/components/header/ThemeSwitcher.tsx b/apps/explorer/src/components/header/ThemeSwitcher.tsx
index d8dc4c2fb24..b947cafe76c 100644
--- a/apps/explorer/src/components/header/ThemeSwitcher.tsx
+++ b/apps/explorer/src/components/header/ThemeSwitcher.tsx
@@ -3,46 +3,21 @@
import { Button, ButtonType } from '@iota/apps-ui-kit';
import { DarkMode, LightMode } from '@iota/ui-icons';
-import { useEffect, useLayoutEffect } from 'react';
-import { useTheme, Theme } from '@iota/core';
+import { useTheme, Theme, ThemePreference } from '@iota/core';
export function ThemeSwitcher(): React.JSX.Element {
- const { theme, setTheme } = useTheme();
+ const { theme, themePreference, setThemePreference } = useTheme();
const ThemeIcon = theme === Theme.Dark ? DarkMode : LightMode;
function handleOnClick(): void {
- const newTheme = theme === Theme.Light ? Theme.Dark : Theme.Light;
- setTheme(newTheme);
- saveThemeToLocalStorage(newTheme);
+ const newTheme =
+ themePreference === ThemePreference.Light
+ ? ThemePreference.Dark
+ : ThemePreference.Light;
+ setThemePreference(newTheme);
}
- function saveThemeToLocalStorage(newTheme: Theme): void {
- localStorage.setItem('theme', newTheme);
- }
-
- function updateDocumentClass(theme: Theme): void {
- document.documentElement.classList.toggle('dark', theme === Theme.Dark);
- }
-
- useLayoutEffect(() => {
- const storedTheme = localStorage.getItem('theme') as Theme | null;
- if (storedTheme) {
- setTheme(storedTheme);
- updateDocumentClass(storedTheme);
- } else {
- const prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
- const preferredTheme = prefersDarkTheme ? Theme.Dark : Theme.Light;
-
- setTheme(preferredTheme);
- updateDocumentClass(preferredTheme);
- }
- }, []);
-
- useEffect(() => {
- updateDocumentClass(theme);
- }, [theme]);
-
return (