Fixed the alias featured on the dashboard

src/modules/channelDashboard/components/ChannelAddDelegate.tsx

@@ -1,4 +1,4 @@
-import { FC, useContext, useState } from 'react';
+import { FC, useContext, useMemo, useState } from 'react';
 
 import { useSelector } from 'react-redux';
 
@@ -14,6 +14,7 @@ import { useAddDelegate, useGetChannelDelegates } from 'queries';
 import { UserStoreType } from 'types';
 import { DashboardActiveState } from '../ChannelDashboard.types';
 import { createDelegateForm } from '../forms';
+import { convertAddressToAddrCaip } from 'helpers/CaipHelper';
 
 type ChannelAddDelegateProps = {
  setActiveState: (activeState: DashboardActiveState) => void;
@@ -26,16 +27,20 @@ const ChannelAddDelegate: FC<ChannelAddDelegateProps> = ({
  return state.user;
  });
 
- const { wallet } = useAccount();
+ const { wallet, chainId, account } = useAccount();
 
  // @ts-expect-error
  const { handleConnectWalletAndEnableProfile } = useContext(AppContext);
 
  const [addDelegateError, setAddDelegateError] = useState<string | null>(null);
 
- const { data: channel_delegates, refetch: refetchChannelDelegate } = useGetChannelDelegates(userPushSDKInstance);
+ const addressinCaip = useMemo(() => {
+ return convertAddressToAddrCaip(account, chainId);
+ }, [chainId, account]);
 
 
+ const { data: channel_delegates, refetch: refetchChannelDelegate } = useGetChannelDelegates(userPushSDKInstance, addressinCaip);
+
  const { mutate: addDelegate, isPending } = useAddDelegate();
 
  const handleAddDelegate = async () => {
@@ -52,7 +57,7 @@ const ChannelAddDelegate: FC<ChannelAddDelegateProps> = ({
  addDelegate(
  {
  userPushSDKInstance: userPushInstance,
- delegateAddress: delegateForm.values.delegateAddress,
+ delegateAddress: convertAddressToAddrCaip(delegateForm.values.delegateAddress, chainId),
  },
  {
  onSuccess: () => {
@@ -129,7 +134,7 @@ const ChannelAddDelegate: FC<ChannelAddDelegateProps> = ({
  >
  Back
  </Button>
- <Button disabled={isPending}>{isPending ? 'Adding' : 'Add'}</Button>
+ <Button disabled={isPending} loading={isPending}>{isPending ? 'Adding' : 'Add'}</Button>
  </Box>
  </Box>
  </form>

src/modules/channelDashboard/components/ChannelDashboardBody.tsx

@@ -1,45 +1,43 @@
-import { FC } from "react";
-import { useSelector } from "react-redux";
+import { FC, useMemo } from 'react';
+import { useSelector } from 'react-redux';
 
-import { Box } from "blocks";
-import { useAccount } from "hooks";
+import { Box } from 'blocks';
+import { useAccount } from 'hooks';
 
-import { useGetChannelDelegates, useGetChannelDetails } from "queries";
+import { useGetChannelDelegates, useGetChannelDetails } from 'queries';
 
-import { ChannelDashboardNotificationSettings } from "./ChannelDashboardNotificationSettings";
-import { ChannelDashboardDelegates } from "./ChannelDashboardDelegates";
+import { ChannelDashboardNotificationSettings } from './ChannelDashboardNotificationSettings';
+import { ChannelDashboardDelegates } from './ChannelDashboardDelegates';
 
-import { DashboardActiveState } from "../ChannelDashboard.types";
-import { UserStoreType } from "types";
+import { DashboardActiveState } from '../ChannelDashboard.types';
+import { UserStoreType } from 'types';
+import { convertAddressToAddrCaip } from 'helpers/CaipHelper';
 
 type ChannelDashboardBodyProps = {
  setActiveState: (activeState: DashboardActiveState) => void;
  setChannelDashboardError: (error: string) => void;
+};
 
-}
-
-const ChannelDashboardBody: FC<ChannelDashboardBodyProps> = ({
- setActiveState,
- setChannelDashboardError
-}) => {
-
- const { account } = useAccount();
+const ChannelDashboardBody: FC<ChannelDashboardBodyProps> = ({ setActiveState, setChannelDashboardError }) => {
+ const { account, chainId } = useAccount();
  const { userPushSDKInstance } = useSelector((state: UserStoreType) => {
  return state.user;
  });
 
  const { data: channelDetails, isLoading: loadingChannelSettings } = useGetChannelDetails(account);
 
- const { data: channel_delegates, refetch: refetchChannelDelegate, isLoading: loadingDelegates } = useGetChannelDelegates(userPushSDKInstance);
+ const addressinCaip = useMemo(() => {
+ return convertAddressToAddrCaip(account, chainId);
+ }, [chainId, account]);
 
- return (
- <Box
- display='flex'
- gap='spacing-md'
- width='100%'
- flexDirection={{ ml: 'column', initial: 'row' }}
- >
+ const {
+ data: channel_delegates,
+ refetch: refetchChannelDelegate,
+ isLoading: loadingDelegates
+ } = useGetChannelDelegates(userPushSDKInstance, addressinCaip);
 
+ return (
+ <Box display="flex" gap="spacing-md" width="100%" flexDirection={{ ml: 'column', initial: 'row' }}>
  <ChannelDashboardNotificationSettings
  channel_settings={channelDetails?.channel_settings}
  loadingChannelSettings={loadingChannelSettings}
@@ -52,9 +50,8 @@ const ChannelDashboardBody: FC<ChannelDashboardBodyProps> = ({
  refetchChannelDelegate={refetchChannelDelegate}
  setActiveState={setActiveState}
  />
-
  </Box>
  );
 };
 
-export { ChannelDashboardBody };
+export { ChannelDashboardBody };

src/modules/channelDashboard/components/ChannelDashboardHeader.tsx

@@ -13,22 +13,31 @@ import {
  Skeleton,
 } from 'blocks';
 
-import { ChannelDetails } from 'queries';
+import { Alias, ChannelDetails } from 'queries';
+
+import { useAccount } from 'hooks';
+import { appConfig } from 'config';
 
 import { ChannelDashboardInfo } from './ChannelDashboardInfo';
 import { DashboardActiveState } from '../ChannelDashboard.types';
 
+
 type ChannelDashboardHeaderProps = {
  channelDetails?: ChannelDetails;
  setActiveState: (activeState: DashboardActiveState) => void;
  onActiveNetwork: boolean;
+ currentAliasDetails?: Alias;
 };
 
 const ChannelDashboardHeader: FC<ChannelDashboardHeaderProps> = ({
  channelDetails,
  setActiveState,
- onActiveNetwork
+ onActiveNetwork,
+ currentAliasDetails
 }) => {
+ const { chainId } = useAccount();
+ const isAliasVerified = currentAliasDetails && currentAliasDetails?.is_alias_verified === 0;
+ const onCoreNetwork: boolean = appConfig.coreContractChain === chainId;
  return (
  <Box
  display="flex"
@@ -41,10 +50,11 @@ const ChannelDashboardHeader: FC<ChannelDashboardHeaderProps> = ({
  channelDetails={channelDetails}
  showAddNewChain
  onActiveNetwork={onActiveNetwork}
+ isAliasVerified={isAliasVerified}
  />
 
- {/* Edit Channel and Dropdown */}
- {onActiveNetwork && (
+ {/* Edit Channel and Dropdown only visible on Core network */}
+ {onCoreNetwork && (
  <Box
  display="flex"
  height="fit-content"

src/modules/channelDashboard/components/ChannelDashboardInfo.tsx

@@ -17,12 +17,14 @@ type ChannelDashboardInfoProps = {
  channelDetails?: ChannelDetails;
  showAddNewChain?: boolean;
  onActiveNetwork?: boolean;
+ isAliasVerified?: boolean;
 };
 
 const ChannelDashboardInfo: FC<ChannelDashboardInfoProps> = ({
  channelDetails,
  showAddNewChain = false,
- onActiveNetwork = true
+ onActiveNetwork = true,
+ isAliasVerified,
 }) => {
  const navigate = useNavigate();
 
@@ -41,7 +43,7 @@ const ChannelDashboardInfo: FC<ChannelDashboardInfoProps> = ({
 
  return (
  <Box display="flex" gap="spacing-sm" alignItems="center">
- <Skeleton isLoading={!channelDetails?.name}>
+ <Skeleton isLoading={!channelDetails?.name || isAliasVerified}>
  <Box
  width="90px"
  height="90px"
@@ -58,7 +60,7 @@ const ChannelDashboardInfo: FC<ChannelDashboardInfoProps> = ({
  </Skeleton>
 
  <Box display="flex" flexDirection="column" gap="spacing-xxxs">
- <Skeleton isLoading={!channelDetails?.name} width="200px" height="30px">
+ <Skeleton isLoading={!channelDetails?.name || isAliasVerified} width="200px" height="30px">
  <Box
  display="flex"
  alignItems={{ initial: 'center', ml: 'baseline' }}
@@ -103,7 +105,7 @@ const ChannelDashboardInfo: FC<ChannelDashboardInfoProps> = ({
  </Skeleton>
 
  <Box display="flex" flexDirection="column" gap="spacing-xs">
- <Skeleton isLoading={!channelDetails?.name} width="100%">
+ <Skeleton isLoading={!channelDetails?.name || isAliasVerified} width="100%">
  <Box display="flex" gap="spacing-xxxs">
  <Text color="text-tertiary" variant="c-regular">
  {shortenText(channelDetails ? channelDetails?.channel : '', 5)}
@@ -118,7 +120,7 @@ const ChannelDashboardInfo: FC<ChannelDashboardInfoProps> = ({
  </Skeleton>
 
  <Box display="flex" gap="spacing-xs">
- <Skeleton isLoading={!channelDetails?.name}>
+ <Skeleton isLoading={!channelDetails?.name || isAliasVerified}>
  <Text color="text-tertiary" variant="c-regular">
  {channelDetails?.subscriber_count} subscribers
  </Text>
@@ -174,12 +176,6 @@ const ChannelDashboardInfo: FC<ChannelDashboardInfoProps> = ({
  </>
  )}
 
-
-
-
-
-
-
  </Box>
  </Box>
  </Box>

src/modules/channelDashboard/components/ChannelDashboardNullChain.tsx

@@ -1,11 +1,20 @@
+import { FC } from 'react';
+
 import { useNavigate } from 'react-router-dom';
 
-import { Box, Button, PlusCircle, Text } from 'blocks';
+import { Box, Button, PlusCircle, Spinner, Text } from 'blocks';
 
 import APP_PATHS from 'config/AppPaths';
 
+import { Alias } from 'queries';
+
+type ChannelDashboardNullChainProps = {
+ currentAliasDetails?: Alias;
+}
 
-const ChannelDashboardNullChain = () => {
+const ChannelDashboardNullChain: FC<ChannelDashboardNullChainProps> = ({
+ currentAliasDetails
+}) => {
  const navigate = useNavigate();
 
  return (
@@ -19,30 +28,39 @@ const ChannelDashboardNullChain = () => {
  alignItems='center'
  alignSelf='stretch'
  >
- <Box
-  display='flex'
- flexDirection='column'
- gap='spacing-xl'
- alignItems='center'
- alignSelf='stretch'
- >
+
+ {currentAliasDetails && currentAliasDetails?.is_alias_verified === 0 ? (
+ <Box height="100%" display="flex" justifyContent="center" alignItems="center" gap='spacing-xxs'>
+  <Spinner variant='default' />
+  <Text variant='bs-semibold'>Channel is being created on the new network. Please wait...</Text>
+ </Box>
+ ) : (
  <Box
  display='flex'
- padding='spacing-none spacing-md'
  flexDirection='column'
- justifyContent='center'
- gap='spacing-sm'
- alignSelf='stretch'
+ gap='spacing-xl'
  alignItems='center'
+ alignSelf='stretch'
  >
- <Text variant='bs-semibold'>
- Channel does not exist on this chain. Please setup channel on new chain to proceed.
- </Text>
+ <Box
+ display='flex'
+ padding='spacing-none spacing-md'
+ flexDirection='column'
+ justifyContent='center'
+ gap='spacing-sm'
+ alignSelf='stretch'
+ alignItems='center'
+ >
+ <Text variant='bs-semibold'>
+ Channel does not exist on this chain. Please setup channel on new chain to proceed.
+ </Text>
+ </Box>
+ <Button onClick={() => navigate(APP_PATHS.AddNewChain)} leadingIcon={<PlusCircle />}>
+ Add New Chain
+ </Button>
  </Box>
- <Button onClick={() => navigate(APP_PATHS.AddNewChain)} leadingIcon={<PlusCircle />}>
- Add New Chain
- </Button>
- </Box>
+
+ )}
  </Box>
  );
 };

src/modules/channelDashboard/components/ChannelDelegateList.tsx

@@ -11,6 +11,7 @@ import { useAccount } from 'hooks';
 import { useRemoveDelegate } from 'queries';
 
 import { UserStoreType } from 'types';
+import { convertAddressToAddrCaip } from 'helpers/CaipHelper';
 
 type ChannelDelegateListProps = {
  delegate_address: string;
@@ -25,7 +26,7 @@ const ChannelDelegateList: FC<ChannelDelegateListProps> = ({
  const { userPushSDKInstance } = useSelector((state: UserStoreType) => {
  return state.user;
  });
- const { wallet } = useAccount();
+ const { wallet, chainId } = useAccount();
 
  // @ts-expect-error
  const { handleConnectWalletAndEnableProfile } = useContext(AppContext);
@@ -46,7 +47,7 @@ const ChannelDelegateList: FC<ChannelDelegateListProps> = ({
  removeDelegate(
  {
  userPushSDKInstance: userPushInstance,
- delegateAddress: delegate_address,
+ delegateAddress: convertAddressToAddrCaip(delegate_address, chainId),
  },
  {
  onSuccess: () => {

src/modules/channelDashboard/components/DeactivateChannel.tsx

@@ -118,6 +118,7 @@ const DeactivateChannel: FC<DeactivateChannelProps> = ({
  disabled={isPending}
  variant="danger"
  onClick={handleDeactivateChannel}
+ loading={isPending}
  >
  {isPending ? 'Deactivating' : 'Deactivate'}
  </Button>

src/modules/channelDashboard/components/ReactivateChannel.tsx

@@ -193,13 +193,15 @@ const ReactivateChannel: FC<ReactivateChannelProps> = ({
  <Button
  disabled={isPending}
  onClick={handleReactivate}
+ loading={isPending}
  >
  {isPending ? 'Activating' : 'Activate'}
  </Button>
  ) : (
  <Button
  disabled={approvingPUSH}
  onClick={handleApprovePUSH}
+ loading={approvingPUSH}
  >
  {approvingPUSH ? 'Approving' : 'Approve PUSH'}
  </Button>