feat(tangle-dapp): Restake Deposit Feature (#2403)

.gitignore

@@ -101,4 +101,5 @@ apps/stats-dapp/graphql.schema.json
 # Next.js telemetry cache folder
 /cache/
 
-tsconfig.tsbuildinfo
+# TypeScript build info
+/**/tsconfig.tsbuildinfo

apps/bridge-dapp/src/pages/Hubble/Bridge/SelectChain.tsx

@@ -41,8 +41,9 @@ const SelectChain: FC<{ chainType: ChainListCardProps['chainType'] }> = ({
   const chains = useMemo<Array<ChainType>>(
     () =>
       chainsCfg.map(
-        (c) =>
+        ([typedChainId, c]) =>
           ({
+            typedChainId,
             name: c.name,
             tag: c.tag,
           }) satisfies ChainType,
@@ -90,7 +91,11 @@ const SelectChain: FC<{ chainType: ChainListCardProps['chainType'] }> = ({
         className="h-[var(--card-height)]"
         chainType={chainType}
         chains={chains}
-        currentActiveChain={activeChain?.name}
+        activeTypedChainId={
+          activeChain
+            ? calculateTypedChainId(activeChain.chainType, activeChain.id)
+            : undefined
+        }
         defaultCategory={defaultCategory}
         onlyCategory={onlyCategory}
         isConnectingToChain={loading}
@@ -110,13 +115,18 @@ export default SelectChain;
  */
 const useChains = (
   chainType: ChainListCardProps['chainType'] = 'source',
-): ReadonlyArray<ChainConfig> => {
+): ReadonlyArray<[number, ChainConfig]> => {
   const { apiConfig } = useWebContext();
 
   const { fungibleCfg } = useCurrenciesFromRoute();
 
   if (chainType === 'source') {
-    return apiConfig.getSupportedChains({ withEnv: true });
+    return apiConfig
+      .getSupportedChains({ withEnv: true })
+      .map(
+        (chain) =>
+          [calculateTypedChainId(chain.chainType, chain.id), chain] as const,
+      );
   }
 
   if (!fungibleCfg) {
@@ -129,10 +139,10 @@ const useChains = (
   }
 
   return Object.keys(anchorRec)
-    .map((typedChainId) => {
-      return apiConfig.chains[parseInt(typedChainId)];
+    .map<[number, ChainConfig]>((typedChainId) => {
+      return [+typedChainId, apiConfig.chains[parseInt(typedChainId)]];
     })
-    .filter(Boolean);
+    .filter(([, chain]) => chain !== undefined);
 };
 
 /**

apps/tangle-dapp/app/nomination/[validatorAddress]/InfoCard.tsx

@@ -16,7 +16,6 @@ import { SocialChip, TangleCard } from '../../../components';
 import { EMPTY_VALUE_PLACEHOLDER } from '../../../constants';
 import useNetworkStore from '../../../context/useNetworkStore';
 import useValidatorInfoCard from '../../../data/validatorDetails/useValidatorInfoCard';
-import useFormatNativeTokenAmount from '../../../hooks/useFormatNativeTokenAmount';
 import { ExplorerType } from '../../../types';
 import ValueSkeleton from './ValueSkeleton';
 
@@ -30,19 +29,9 @@ const InfoCard: FC<InfoCardProps> = ({
   className,
 }: InfoCardProps) => {
   const { network, rpcEndpoint } = useNetworkStore();
-  const formatNativeTokenAmount = useFormatNativeTokenAmount();
 
-  const {
-    name,
-    isActive,
-    totalRestaked,
-    restakingMethod,
-    nominations,
-    twitter,
-    email,
-    web,
-    isLoading,
-  } = useValidatorInfoCard(rpcEndpoint, validatorAddress);
+  const { name, isActive, nominations, twitter, email, web, isLoading } =
+    useValidatorInfoCard(rpcEndpoint, validatorAddress);
 
   return (
     <TangleCard className={twMerge('min-h-[300px]', className)}>
@@ -99,32 +88,7 @@ const InfoCard: FC<InfoCardProps> = ({
           </div>
         </div>
 
-        <div className="flex flex-col md:flex-row gap-3 md:gap-2">
-          {/* Restaked */}
-          <div className="flex-1 space-y-3">
-            <Typography variant="h5" fw="bold" className="!text-mono-100">
-              Total Restaked
-            </Typography>
-            <div className="flex gap-3 items-center">
-              {isLoading ? (
-                <ValueSkeleton />
-              ) : (
-                <Typography
-                  variant="h4"
-                  fw="bold"
-                  className="whitespace-nowrap"
-                >
-                  {totalRestaked
-                    ? formatNativeTokenAmount(totalRestaked)
-                    : EMPTY_VALUE_PLACEHOLDER}
-                </Typography>
-              )}
-              {!isLoading && (
-                <Chip color="dark-grey">{restakingMethod?.value ?? 'N/A'}</Chip>
-              )}
-            </div>
-          </div>
-
+        <div className="flex flex-col gap-3 md:flex-row md:gap-2">
           {/* Nominations */}
           <div className="flex-1 space-y-3">
             <Typography variant="h5" fw="bold" className="!text-mono-100">
@@ -142,7 +106,7 @@ const InfoCard: FC<InfoCardProps> = ({
 
         {/* Socials & Location */}
         <div className="flex gap-2 min-h-[30px]">
-          <div className="flex-1 flex gap-2 items-center">
+          <div className="flex items-center flex-1 gap-2">
             {twitter && <SocialChip type="twitter" href={twitter} />}
             {email && <SocialChip type="email" href={`mailto:${email}`} />}
             {web && <SocialChip type="web" href={web} />}

apps/tangle-dapp/app/nomination/[validatorAddress]/page.tsx

@@ -4,7 +4,6 @@ import { notFound } from 'next/navigation';
 import { IS_PRODUCTION_ENV } from '../../../constants/env';
 import InfoCard from './InfoCard';
 import NodeSpecificationsTable from './NodeSpecificationsTable';
-import RoleDistributionCard from './RoleDistributionCard';
 import ServiceTableTabs from './ServiceTableTabs';
 
 // TODO: might need to add metadata here
@@ -22,12 +21,8 @@ export default function ValidatorDetails({
 
   return (
     <div className="my-5 space-y-10">
-      <div className="flex flex-col lg:flex-row gap-5 items-stretch">
+      <div className="flex flex-col items-stretch gap-5 lg:flex-row">
         <InfoCard validatorAddress={validatorAddress} className="flex-1" />
-        <RoleDistributionCard
-          validatorAddress={validatorAddress}
-          className="flex-1"
-        />
       </div>
 
       {/* TODO: Hide this for now */}

apps/tangle-dapp/app/restake/Card.tsx

@@ -0,0 +1,25 @@
+import type { PropsOf } from '@webb-tools/webb-ui-components/types';
+import { twMerge } from 'tailwind-merge';
+
+export default function Card({
+  children,
+  className,
+  ...props
+}: PropsOf<'div'>) {
+  return (
+    <div
+      {...props}
+      className={twMerge(
+        'w-full max-w-xl min-h-[var(--restake-card-min-height)]',
+        'h-full bg-mono-0 dark:bg-[var(--restake-card-bg-dark)] dark:bg-opacity-90',
+        'mx-auto rounded-xl space-y-4 grow',
+        'border border-mono-40 dark:border-mono-190 p-5 md:p-9',
+        'flex flex-col',
+        'shadow-webb-lg dark:shadow-webb-lg-dark',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}