input-output-hk · DominikGuzei · Dec 19, 2024 · Dec 20, 2024
@@ -7,7 +7,8 @@ export const getDefaultFeatureFlags = (): FallbackConfiguration => ({
   [ExperimentName.SHARED_WALLETS]: false,
   [ExperimentName.WEBSOCKET_API]: false,
   [ExperimentName.BLOCKFROST_ASSET_PROVIDER]: false,
-  [ExperimentName.EXTENSION_STORAGE]: false
+  [ExperimentName.EXTENSION_STORAGE]: false,
+  [ExperimentName.DAPP_EXPLORER]: false
 });
 
 export const experiments: ExperimentsConfig = {
@@ -38,5 +39,9 @@ export const experiments: ExperimentsConfig = {
   [ExperimentName.EXTENSION_STORAGE]: {
     value: false,
     default: false
+  },
+  [ExperimentName.DAPP_EXPLORER]: {
+    value: false,
+    default: false
   }
 };
@@ -12,7 +12,8 @@ export enum ExperimentName {
   SHARED_WALLETS = 'shared-wallets',
   WEBSOCKET_API = 'websocket-api',
   BLOCKFROST_ASSET_PROVIDER = 'blockfrost-asset-provider',
-  EXTENSION_STORAGE = 'extension-storage'
+  EXTENSION_STORAGE = 'extension-storage',
+  DAPP_EXPLORER = 'dapp-explorer'
 }
 
 interface FeatureFlag {

@@ -25,14 +25,7 @@ import { ExperimentName } from '@providers/ExperimentsProvider/types';
 import { BehaviorSubject, distinctUntilChanged, Observable, Subscription } from 'rxjs';
 import { PostHogAction, PostHogProperties } from '@lace/common';
 
-type FeatureFlag =
-  | 'create-paper-wallet'
-  | 'restore-paper-wallet'
-  | 'shared-wallets'
-  | 'use-switch-to-nami-mode'
-  | 'websocket-api'
-  | ExperimentName.BLOCKFROST_ASSET_PROVIDER
-  | ExperimentName.EXTENSION_STORAGE;
+type FeatureFlag = `${ExperimentName}`;
 
 type FeatureFlags = {
   [key in FeatureFlag]: boolean;

@@ -8,6 +8,8 @@ import { sideMenuConfig } from './side-menu-config';
 import { SideMenuContent } from './SideMenuContent';
 import { walletRoutePaths as routes } from '@routes/wallet-paths';
 import { useWalletStore } from '@stores';
+import { ExperimentName } from '@providers/ExperimentsProvider/types';
+import { usePostHogClientContext } from '@providers/PostHogClientProvider';
 
 const isPathAvailable = (path: string) => Object.values(routes).includes(path);
 
@@ -18,6 +20,9 @@ export const SideMenu = (): React.ReactElement => {
     listen
   } = useHistory();
   const analytics = useAnalyticsContext();
+  const posthog = usePostHogClientContext();
+  const isDappExplorerEnabled = posthog.isFeatureEnabled(ExperimentName.DAPP_EXPLORER);
+
   const { isSharedWallet } = useWalletStore();
 
   const [currentHoveredItem, setCurrentHoveredItem] = useState<MenuItemList | undefined>();
@@ -62,8 +67,14 @@ export const SideMenu = (): React.ReactElement => {
   // eslint-disable-next-line unicorn/no-useless-undefined
   const onMouseLeaveItem = () => setCurrentHoveredItem(undefined);
 
-  const menuItems = isSharedWallet ? sideMenuConfig.filter((item) => item.id !== MenuItemList.STAKING) : sideMenuConfig;
-
+  const excludeItems: MenuItemList[] = [];
+  if (isSharedWallet) {
+    excludeItems.push(MenuItemList.STAKING);
+  }
+  if (!isDappExplorerEnabled) {
+    excludeItems.push(MenuItemList.DAPPS);
+  }
+  const menuItems = sideMenuConfig.filter((item) => !excludeItems.includes(item.id));
   return (
     <SideMenuContent
       menuItems={menuItems}

@@ -7,7 +7,7 @@ import { mixins } from '../../../global/styles/Themes';
 import { IogText } from '../../Typography';
 
 import './styles.scss';
-import { omit } from 'lodash';
+import omit from 'lodash/omit';
 
 const getThemeClasses = ({
   primary = true,

@@ -1,4 +1,4 @@
-import { omit } from 'lodash';
+import omit from 'lodash/omit';
 import * as React from 'react';
 import { Icon } from '../../Icon';
 import { IIogButtonIconProps } from '../types';

@@ -11,7 +11,7 @@ export const IogCardClassic: React.FC<IogCardProps> = ({ onClick, ...props }) =>
 
   return (
     <article
-      onClick={() => onClick && onClick(props)}
+      onClick={() => onClick && onClick()}
       className="iog-card-container"
       data-testid={`dapp-grid-app-card-${title}`}
       role="card"

@@ -11,5 +11,5 @@ export interface IogCardProps {
   description?: string;
   isCertified?: boolean;
   image?: Partial<IIogCardImage>;
-  onClick?: (value?: any) => void;
+  onClick?: () => void;
 }
@@ -8,8 +8,8 @@ interface IIogCardImage {
 export interface IogCardProps {
   categories?: string[];
   title?: string;
-  color?: string | any;
+  color?: string;
   description?: string;
   image?: Partial<IIogCardImage>;
-  onClick?: (value?: any) => void;
+  onClick?: () => void;
 }
@@ -3,7 +3,7 @@ import SimpleView from './SimpleView';
 import DappLayout from '../layout/dapp';
 import React from 'react';
 
-export const DAppExplorer = () => (
+export const DAppExplorer: React.FC = () => (
   <>
     <Layout>
       <SectionLayout>

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Empty = () => (
+const Empty: React.FC = () => (
   <svg width="118" height="118" viewBox="0 0 118 118" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       fillRule="evenodd"

@@ -20,6 +20,7 @@ import { getFormArrayError } from '../../../services/helpers';
 
 // Style
 import './styles.scss';
+import { MouseEventHandler } from 'react';
 
 const { useRef, useState } = React;
 
@@ -41,12 +42,15 @@ export const IogInput = React.memo(
     label,
     e2ePrefix,
     placeholder = ' ',
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     checkProfanity,
     children,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     setError,
     onClearField,
     ...rest
-  }: IInputProps) => {
+  }: // eslint-disable-next-line sonarjs/cognitive-complexity
+  IInputProps) => {
     const inputRef = useRef<HTMLInputElement | null>(null);
     const [showPassword, setShowPassword] = useState<boolean>(false);
 
@@ -58,15 +62,16 @@ export const IogInput = React.memo(
           ...isSearchOptions,
           required
         })
-      : { ref: () => {} };
+      : // eslint-disable-next-line @typescript-eslint/no-empty-function
+        { ref: () => {} };
     const { field } = useController({ control, name });
     const { errors } = useFormState({ control, name });
 
     const errorMessage = Array.isArray(errors?.[name.split('.')[0]])
       ? getFormArrayError(errors, name)
       : (errors?.[name]?.message as string);
 
-    const handleTogglePasswordVisibility = (e: any): void => {
+    const handleTogglePasswordVisibility: MouseEventHandler<HTMLButtonElement> = (e): void => {
       e.preventDefault();
 
       if (!inputRef.current) return;

@@ -10,15 +10,13 @@ interface IInputLink {
 interface IInputStyles {
   size?: TIogBoxSizes;
   spacer?: number;
-  position?: any;
   secondary?: boolean;
 }
 
 interface IInputHookFromProperties<T extends FieldValues> {
   registerOptions?: RegisterOptions<T>;
   control?: Control<T>;
   register?: UseFormRegister<T>;
-  fieldsName?: any;
   required?: boolean;
   setError?: UseFormSetError<T>;
 }
@@ -37,7 +35,6 @@ export interface IInputProps<T extends FieldValues = FieldValues>
   label?: string;
   requireMessage?: string;
   inputLink?: IInputLink;
-  ref?: any;
   e2ePrefix?: string;
   checkProfanity?: boolean;
   onClearField?: () => void;

@@ -24,7 +24,7 @@ const getSizeValue = (size: ISvgIcon['size']): number => {
 };
 
 const iconCreator = (props: TIconCreator) => {
-  const { family, name, type, size, svgPathKey, ...otherProps } = props;
+  const { type, size, svgPathKey, ...otherProps } = props;
 
   const svgIconsProps = {
     svgPathKey,

@@ -3,7 +3,7 @@ import { IThemeStyledProps } from '../../global/styles/Themes/types';
 import { EIconsName, EIconsTypes } from './enum';
 import { SVGAttributes } from 'react';
 
-interface IIconStyle extends Partial<IThemeStyledProps>, Pick<SVGAttributes<any>, 'style'> {
+interface IIconStyle extends Partial<IThemeStyledProps>, Pick<SVGAttributes<unknown>, 'style'> {
   color?: string;
   strokeColor?: string;
   strokeColorByFill?: boolean;
@@ -17,7 +17,7 @@ interface IIconRules {
 
 export interface IIcon extends IIconStyle, IIconRules {}
 
-type IconStylePickProperties =  'strokeColorByFill' | 'strokeColor';
+type IconStylePickProperties = 'strokeColorByFill' | 'strokeColor';
 
 interface ICommonIconsMetaDataValue {
   type?: EIconsTypes;
@@ -35,12 +35,12 @@ export interface ISvgIconsMetaDataValue
 }
 
 export interface ISvgIcon
-  extends SVGAttributes<any>,
+  extends SVGAttributes<unknown>,
     Omit<ISvgIconsMetaDataValue, 'type'>,
     Pick<IIconStyle, IconStylePickProperties> {}
 
 export interface IVendorIconsMetaDataValue extends ICommonIconsMetaDataValue {
-  family?: any;
+  family?: string;
   name?: string;
 }
 

@@ -12,7 +12,7 @@ export interface IogImageProps extends ImageProps {
   overflow?: boolean;
   circle?: boolean;
   fit?: React.CSSProperties['objectFit'];
-  className?: any;
+  className?: string;
   // onMouseOver?: React.DOMAttributes<unknown>['onMouseOver'];
   // onMouseLeave?: React.DOMAttributes<unknown>['onMouseLeave'];
 }
@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { useDrawer } from '../drawer';
 import FeaturesCarousel from '../FeaturesCarousel';
 
-export const AboutDapp = () => {
+export const AboutDapp: React.FC = () => {
   const {
     state: { data }
   } = useDrawer<ISectionCardItem>();

@@ -16,7 +16,7 @@ interface IAuditHeaderProps {
   style?: React.CSSProperties;
 }
 
-export const AuditHeader = ({ title, subtitle, image }: IAuditHeaderProps) => (
+export const AuditHeader: React.FC<IAuditHeaderProps> = ({ title, subtitle, image }) => (
   <IogRow className="iog-audit-header">
     <IogBox>
       <IogTitle as="h3" smallest>

@@ -3,15 +3,15 @@ export const getCompletionDate = (date?: string): string =>
     .toLocaleDateString('en', { day: 'numeric', month: 'short', year: 'numeric' })
     .replace(/(,)/g, '');
 
-export const download = (path: string, filename: string) => {
+export const download = (path: string, filename: string): void => {
   const anchor = document.createElement('a');
   anchor.href = path;
   anchor.download = filename;
 
   anchor.click();
 };
 
-export const handleDownloadCertificate = async (url: string, fileName: string) => {
+export const handleDownloadCertificate = async (url: string, fileName: string): Promise<void> => {
   const options: RequestInit = {
     method: 'get',
     mode: 'no-cors',

@@ -13,7 +13,7 @@ import { CERTIFICATION_AUDIT_DOWNLOAD_CERTIFICATION_TEST_ID } from './constants'
 
 const { Panel } = Collapse;
 
-export const CertificationAndAudit = () => {
+export const CertificationAndAudit: React.FC = () => {
   const {
     state: { data }
   } = useDrawer<ISectionCardItem>();

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { EIconsName, Icon } from '../../../../components/Icon';
 
-export const SocialIcon = (data: { iconId: string }) => {
+// eslint-disable-next-line complexity
+export const SocialIcon: React.FC<{ iconId: string }> = (data) => {
   const iconFun = (icon: EIconsName) => <Icon name={icon} size={24} strokeColor="#6F7786" />;
 
   switch (data.iconId) {

@@ -16,7 +16,7 @@ export const Contact: React.FC = () => {
   const mailIcon = <Icon name={EIconsName.MAIL} size={24} strokeColor="#6F7786" />;
   const websiteIcon = <Icon name={EIconsName.WEBSITE} size={24} strokeColor="#6F7786" />;
 
-  if (!data) return null;
+  if (!data) return <></>;
 
   return (
     <>

@@ -3,7 +3,7 @@ import { IScreenshot } from '../../../services/helpers/apis-formatter/types';
 import { IogImage } from '../../../components/Image';
 import './styles.scss';
 
-const FeaturesCarousel = ({ url }: Partial<IScreenshot>) => (
+const FeaturesCarousel: React.FC<Partial<IScreenshot>> = ({ url }) => (
   <div className="iog-feature-carousel-container">
     <div className="iog-feature-carousel-border-container" data-testid="carousel-image">
       <IogImage src={url || ''} fit="cover" fluid alt="logo" />

@@ -11,15 +11,17 @@ export type TDrawerAction = 'open' | 'close';
 interface IDrawerActionOptions {
   type?: TDrawerAction;
 }
-
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export interface Action<Data = any> {
   type: TDrawerAction;
   data?: Data;
   options?: IDrawerActionOptions;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Dispatch<Data = any> = (action: Action<Data>) => void;
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 interface State<Data = any> {
   type?: TDrawerAction;
   open: boolean;
@@ -30,10 +32,12 @@ const INITIAL_STATE = {
   open: false
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const DrawerStateContext = React.createContext<{ state: State; dispatch: Dispatch } | undefined>(undefined as any);
 
 DrawerStateContext.displayName = 'DrawerStateContext';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const drawerReducer = (state: State, action: Action): any => {
   switch (action.type) {
     case 'open':
@@ -52,6 +56,7 @@ const DrawerProvider = React.memo(({ children }: { children: React.ReactElement[
 });
 DrawerProvider.displayName = 'DrawerProvider';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const useDrawer = <Data extends Record<any, any>>(): {
   state: State<Data>;
   dispatch: Dispatch<Data>;

@@ -3,6 +3,7 @@ import { Portal } from 'react-portal';
 import ProjectDetail from '../ProjectDetail';
 import { DrawerProvider } from './drawer';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const withDrawer = <P extends Record<any, any>>(Component: React.ComponentType<P>): React.FC<P> =>
   React.memo((props) => (
     <DrawerProvider>