Merge branch 'tooling-epic/explorer-darkmode-support' into tooling-ex…

…plorer/improve-code-blocks
iotaledger · Nov 26, 2024 · dc80bb3 · dc80bb3
2 parents c3b9bf0 + 2826800
commit dc80bb3
Show file tree

Hide file tree

Showing 154 changed files with 2,231 additions and 1,332 deletions.
diff --git a/.github/actions/diffs/action.yml b/.github/actions/diffs/action.yml
@@ -40,6 +40,7 @@ runs:
             - "Cargo.toml"
             - "Cargo.lock"
             - ".config/nextest.toml"
+            - "rust-toolchain.toml"
           isDoc:
             - "docs/content/**"
             - "docs/site/**"

diff --git a/.github/workflows/_rust.yml b/.github/workflows/_rust.yml
@@ -5,11 +5,6 @@ on:
     inputs:
       isRust:
         type: boolean
-    secrets:
-      SSH_PRIVATE_KEY_IOTA_CI:
-        required: true
-      SSH_GITHUB_KNOWN_HOSTS:
-        required: true
 
 env:
   CARGO_TERM_COLOR: always

diff --git a/.github/workflows/_rust_lints.yml b/.github/workflows/_rust_lints.yml
@@ -62,3 +62,8 @@ jobs:
       # See '.cargo/config' for list of enabled/disabled clippy lints
       - name: Check Clippy Lints
         run: cargo ci-clippy
+
+      - name: Check Clippy Lints with msim
+        run: |
+          git clean -fd
+          ./scripts/simtest/clippy.sh
diff --git a/Cargo.toml b/Cargo.toml
@@ -461,5 +461,3 @@ transaction-fuzzer = { path = "crates/transaction-fuzzer" }
 typed-store = { path = "crates/typed-store" }
 typed-store-derive = { path = "crates/typed-store-derive" }
 typed-store-error = { path = "crates/typed-store-error" }
-
-[patch.crates-io]
diff --git a/apps/core/src/components/Inputs/SendTokenFormInput.tsx b/apps/core/src/components/Inputs/SendTokenFormInput.tsx
@@ -19,6 +19,7 @@ export interface SendTokenInputProps {
     onActionClick: () => Promise<void>;
     isMaxActionDisabled?: boolean;
     name: string;
+    isPayAllIota: boolean;
 }
 
 export function SendTokenFormInput({
@@ -30,6 +31,7 @@ export function SendTokenFormInput({
     onActionClick,
     isMaxActionDisabled,
     name,
+    isPayAllIota,
 }: SendTokenInputProps) {
     const { values, setFieldValue, isSubmitting, validateField } = useFormikContext<TokenForm>();
     const { data: gasBudgetEstimation } = useGasBudgetEstimation({
@@ -38,7 +40,7 @@ export function SendTokenFormInput({
         activeAddress,
         to: to,
         amount: values.amount,
-        isPayAllIota: values.isPayAllIota,
+        isPayAllIota,
     });
     const [formattedGasBudgetEstimation, gasToken] = useFormatCoin(
         gasBudgetEstimation,
@@ -61,8 +63,8 @@ export function SendTokenFormInput({
 
     // gasBudgetEstimation should change when the amount above changes
     useEffect(() => {
-        setFieldValue('gasBudgetEst', formattedGasBudgetEstimation, false);
-    }, [formattedGasBudgetEstimation, setFieldValue, values.amount]);
+        setFieldValue('gasBudgetEst', gasBudgetEstimation, false);
+    }, [gasBudgetEstimation, setFieldValue, values.amount]);
 
     return (
         <Input
@@ -74,7 +76,7 @@ export function SendTokenFormInput({
             placeholder="0.00"
             label="Send Amount"
             suffix={` ${symbol}`}
-            prefix={values.isPayAllIota ? '~ ' : undefined}
+            prefix={isPayAllIota ? '~ ' : undefined}
             allowNegative={false}
             errorMessage={errorMessage}
             amountCounter={!errorMessage ? (coins ? gasAmount : '--') : undefined}

diff --git a/apps/core/src/components/coin/CoinIcon.tsx b/apps/core/src/components/coin/CoinIcon.tsx
@@ -3,10 +3,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from 'react';
-import { useCoinMetadata } from '../../hooks';
+import { useCoinMetadata, ImageIcon, ImageIconSize } from '../../';
 import { IotaLogoMark } from '@iota/ui-icons';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
-import { ImageIcon, ImageIconSize } from '../icon';
 import cx from 'clsx';
 
 interface NonIotaCoinProps {
@@ -18,7 +17,7 @@ interface NonIotaCoinProps {
 function NonIotaCoin({ coinType, size = ImageIconSize.Full, rounded }: NonIotaCoinProps) {
     const { data: coinMeta } = useCoinMetadata(coinType);
     return (
-        <div className="flex h-full w-full items-center justify-center rounded-full bg-neutral-96 dark:bg-neutral-92">
+        <div className="flex h-full w-full items-center justify-center rounded-full bg-neutral-96 dark:bg-neutral-12">
             <ImageIcon
                 src={coinMeta?.iconUrl}
                 label={coinMeta?.name || coinType}
@@ -47,7 +46,7 @@ export function CoinIcon({
 
     return coinType === IOTA_TYPE_ARG ? (
         <Component {...coinWrapperProps}>
-            <div className={cx(size, 'text-neutral-10')}>
+            <div className={cx(size, 'text-neutral-10 dark:text-neutral-92')}>
                 <IotaLogoMark className="h-full w-full" />
             </div>
         </Component>

diff --git a/apps/core/src/components/coin/CoinItem.tsx b/apps/core/src/components/coin/CoinItem.tsx
@@ -39,13 +39,8 @@ export function CoinItem({
     return (
         <Card type={CardType.Default} onClick={onClick}>
             <CardImage type={ImageType.BgTransparent}>
-                <div className="flex h-10 w-10 items-center justify-center rounded-full">
-                    <CoinIcon
-                        coinType={coinType}
-                        rounded
-                        size={ImageIconSize.Small}
-                        hasCoinWrapper
-                    />
+                <div className="flex h-10 w-10 items-center justify-center rounded-full border border-shader-neutral-light-8 text-neutral-10 dark:text-neutral-92">
+                    <CoinIcon coinType={coinType} rounded size={ImageIconSize.Small} />
                 </div>
             </CardImage>
             <CardBody

diff --git a/apps/core/src/components/coin/CoinSelector.tsx b/apps/core/src/components/coin/CoinSelector.tsx
@@ -66,7 +66,7 @@ function CoinSelectOption({
                         hasCoinWrapper={hasCoinWrapper}
                     />
                 </div>
-                <span className="text-body-lg text-neutral-10">
+                <span className="text-body-lg text-neutral-10 dark:text-neutral-92">
                     {isIota ? (coinMeta?.name || '').toUpperCase() : coinMeta?.name || symbol}
                 </span>
             </div>

diff --git a/apps/core/src/components/icon/ImageIcon.tsx b/apps/core/src/components/icon/ImageIcon.tsx
@@ -42,9 +42,8 @@ function FallBackAvatar({ str, rounded, size = ImageIconSize.Large }: FallBackAv
     return (
         <div
             className={cn(
-                'flex items-center justify-center bg-neutral-96 bg-gradient-to-r capitalize text-neutral-10 dark:bg-neutral-92 dark:text-primary-100',
-                { 'rounded-full': rounded, 'rounded-lg': !rounded },
-                size,
+                'flex h-full w-full items-center justify-center bg-neutral-96 bg-gradient-to-r capitalize text-neutral-10 dark:bg-neutral-12 dark:text-neutral-92',
+                { 'rounded-full': rounded },
                 generateTextSize(size),
             )}
         >

diff --git a/apps/core/src/components/providers/ThemeProvider.tsx b/apps/core/src/components/providers/ThemeProvider.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { PropsWithChildren, useState, useEffect } from 'react';
+import { PropsWithChildren, useState, useEffect, useCallback } from 'react';
 import { Theme } from '../../enums';
 import { ThemeContext } from '../../contexts';
 
@@ -11,34 +11,41 @@ interface ThemeProviderProps {
 
 export function ThemeProvider({ children, appId }: PropsWithChildren<ThemeProviderProps>) {
     const storageKey = `theme_${appId}`;
-    const [theme, setTheme] = useState<Theme>(() => {
-        if (typeof window !== 'undefined') {
-            const storedTheme = localStorage.getItem(storageKey);
-            if (storedTheme) {
-                return storedTheme as Theme;
-            } else {
-                const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
-                return prefersDarkScheme ? Theme.Dark : Theme.Light;
-            }
+
+    const getSystemTheme = () =>
+        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;
         }
-        return Theme.Light;
-    });
+    };
+
+    const [theme, setTheme] = useState<Theme>(getInitialTheme);
+
+    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);
+    }, []);
 
     useEffect(() => {
-        if (typeof window !== 'undefined') {
-            localStorage.setItem(storageKey, theme);
+        if (typeof window === 'undefined') return;
+
+        localStorage.setItem(storageKey, theme);
+        applyTheme(theme);
+
+        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);
         }
-        document.documentElement.classList.toggle(Theme.Dark, theme === Theme.Dark);
-    }, [theme, storageKey]);
-
-    return (
-        <ThemeContext.Provider
-            value={{
-                theme,
-                setTheme,
-            }}
-        >
-            {children}
-        </ThemeContext.Provider>
-    );
+    }, [theme, applyTheme, storageKey]);
+
+    return <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>;
 }
diff --git a/apps/core/src/constants/staking.constants.ts b/apps/core/src/constants/staking.constants.ts
@@ -6,3 +6,6 @@ export const UNSTAKING_REQUEST_EVENT = '0x3::validator::UnstakingRequestEvent';
 
 export const DELEGATED_STAKES_QUERY_STALE_TIME = 10_000;
 export const DELEGATED_STAKES_QUERY_REFETCH_INTERVAL = 30_000;
+
+export const NUM_OF_EPOCH_BEFORE_STAKING_REWARDS_REDEEMABLE = 2;
+export const NUM_OF_EPOCH_BEFORE_STAKING_REWARDS_STARTS = 1;
diff --git a/apps/core/src/enums/theme.enums.ts b/apps/core/src/enums/theme.enums.ts
@@ -4,4 +4,5 @@
 export enum Theme {
     Light = 'light',
     Dark = 'dark',
+    System = 'system',
 }
diff --git a/apps/core/src/forms/token.ts b/apps/core/src/forms/token.ts
@@ -4,6 +4,5 @@
 export type TokenForm = {
     amount: string;
     to: string;
-    isPayAllIota: boolean;
     gasBudgetEst: string;
 };
diff --git a/apps/core/src/hooks/stake/index.ts b/apps/core/src/hooks/stake/index.ts
@@ -4,3 +4,5 @@
 export * from './useGetDelegatedStake';
 export * from './useTotalDelegatedRewards';
 export * from './useTotalDelegatedStake';
+export * from './useValidatorInfo';
+export * from './useStakeTxnInfo';
diff --git a/apps/core/src/hooks/stake/useStakeTxnInfo.ts b/apps/core/src/hooks/stake/useStakeTxnInfo.ts
@@ -0,0 +1,52 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+import {
+    useGetTimeBeforeEpochNumber,
+    useTimeAgo,
+    TimeUnit,
+    NUM_OF_EPOCH_BEFORE_STAKING_REWARDS_REDEEMABLE,
+    NUM_OF_EPOCH_BEFORE_STAKING_REWARDS_STARTS,
+} from '../../';
+
+export function useStakeTxnInfo(startEpoch?: string | number) {
+    const startEarningRewardsEpoch =
+        Number(startEpoch || 0) + NUM_OF_EPOCH_BEFORE_STAKING_REWARDS_STARTS;
+
+    const redeemableRewardsEpoch =
+        Number(startEpoch || 0) + NUM_OF_EPOCH_BEFORE_STAKING_REWARDS_REDEEMABLE;
+
+    const { data: timeBeforeStakeRewardsStarts } =
+        useGetTimeBeforeEpochNumber(startEarningRewardsEpoch);
+    const timeBeforeStakeRewardsStartsAgo = useTimeAgo({
+        timeFrom: timeBeforeStakeRewardsStarts,
+        shortedTimeLabel: false,
+        shouldEnd: true,
+        maxTimeUnit: TimeUnit.ONE_HOUR,
+    });
+    const stakedRewardsStartEpoch =
+        timeBeforeStakeRewardsStarts > 0
+            ? `in ${timeBeforeStakeRewardsStartsAgo}`
+            : startEpoch
+              ? `Epoch #${Number(startEarningRewardsEpoch)}`
+              : '--';
+
+    const { data: timeBeforeStakeRewardsRedeemable } =
+        useGetTimeBeforeEpochNumber(redeemableRewardsEpoch);
+    const timeBeforeStakeRewardsRedeemableAgo = useTimeAgo({
+        timeFrom: timeBeforeStakeRewardsRedeemable,
+        shortedTimeLabel: false,
+        shouldEnd: true,
+        maxTimeUnit: TimeUnit.ONE_HOUR,
+    });
+    const timeBeforeStakeRewardsRedeemableAgoDisplay =
+        timeBeforeStakeRewardsRedeemable > 0
+            ? `in ${timeBeforeStakeRewardsRedeemableAgo}`
+            : startEpoch
+              ? `Epoch #${Number(redeemableRewardsEpoch)}`
+              : '--';
+
+    return {
+        stakedRewardsStartEpoch,
+        timeBeforeStakeRewardsRedeemableAgoDisplay,
+    };
+}
diff --git a/apps/core/src/hooks/stake/useValidatorInfo.tsx b/apps/core/src/hooks/stake/useValidatorInfo.tsx
@@ -0,0 +1,50 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+import { useIotaClientQuery } from '@iota/dapp-kit';
+import { useGetValidatorsApy } from '../';
+
+export function useValidatorInfo({ validatorAddress }: { validatorAddress: string }) {
+    const {
+        data: system,
+        isPending: isPendingValidators,
+        isError: errorValidators,
+    } = useIotaClientQuery('getLatestIotaSystemState');
+    const { data: rollingAverageApys } = useGetValidatorsApy();
+
+    const validatorSummary =
+        system?.activeValidators.find((validator) => validator.iotaAddress === validatorAddress) ||
+        null;
+
+    const currentEpoch = Number(system?.epoch || 0);
+
+    const stakingPoolActivationEpoch = Number(validatorSummary?.stakingPoolActivationEpoch || 0);
+
+    // flag as new validator if the validator was activated in the last epoch
+    // for genesis validators, this will be false
+    const newValidator = currentEpoch - stakingPoolActivationEpoch <= 1 && currentEpoch !== 0;
+
+    // flag if the validator is at risk of being removed from the active set
+    const isAtRisk = system?.atRiskValidators.some((item) => item[0] === validatorAddress);
+
+    const { apy, isApyApproxZero } = rollingAverageApys?.[validatorAddress] ?? {
+        apy: null,
+    };
+
+    const commission = validatorSummary ? Number(validatorSummary.commissionRate) / 100 : 0;
+
+    return {
+        system,
+        isPendingValidators,
+        errorValidators,
+
+        currentEpoch,
+        validatorSummary,
+        name: validatorSummary?.name || '',
+        stakingPoolActivationEpoch,
+        commission,
+        newValidator,
+        isAtRisk,
+        apy,
+        isApyApproxZero,
+    };
+}
diff --git a/apps/core/src/hooks/useGetStakingValidatorDetails.ts b/apps/core/src/hooks/useGetStakingValidatorDetails.ts
@@ -75,6 +75,7 @@ export function useGetStakingValidatorDetails({
     return {
         epoch: Number(system?.epoch) || 0,
         totalStake: totalStakeFormatted,
+        totalStakeOriginal: totalStake,
         totalValidatorsStake: totalValidatorsStakeFormatted,
         totalStakePercentage,
         validatorApy,

diff --git a/.../ui/app/staking/stake/utils/validation.ts → ...src/utils/stake/createValidationSchema.ts b/.../ui/app/staking/stake/utils/validation.ts → ...src/utils/stake/createValidationSchema.ts
@@ -2,7 +2,7 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { CoinFormat, formatBalance } from '@iota/core';
+import { CoinFormat, formatBalance } from '../../';
 import BigNumber from 'bignumber.js';
 import { mixed, object } from 'yup';
 

diff --git a/apps/core/src/utils/stake/index.ts b/apps/core/src/utils/stake/index.ts
@@ -6,3 +6,4 @@ export * from './formatDelegatedStake';
 export * from './createStakeTransaction';
 export * from './createTimelockedUnstakeTransaction';
 export * from './createTimelockedStakeTransaction';
+export * from './createValidationSchema';