Governance Page components (#1862)

libs/webb-ui-components/src/components/ChainsRing/ChainsRing.tsx

@@ -5,14 +5,14 @@ import { chainsConfig } from '@webb-tools/dapp-config/chains/chain-config';
 
 import { Tooltip, TooltipBody, TooltipTrigger } from '../Tooltip';
 import { useDarkMode } from '../../hooks/useDarkMode';
-import type { ChainsRingProps, ChainItem } from './types';
+import type { ChainsRingProps, ChainRingItemType } from './types';
 
 const ChainsRing = forwardRef<HTMLDivElement, ChainsRingProps>(
   ({ circleContent, additionalSvgContent, chainItems }, ref) => {
     const [isDarkMode] = useDarkMode();
 
     const getStrokeColor = useCallback(
-      (item?: ChainItem) => {
+      (item?: ChainRingItemType) => {
         if (item === undefined) return '#9CA0B0';
         return item.isActive ? (isDarkMode ? '#4B3AA4' : '#B5A9F2') : '#9CA0B0';
       },

libs/webb-ui-components/src/components/ChainsRing/types.ts

@@ -3,10 +3,10 @@ import { PropsOf } from '../../types';
 export interface ChainsRingProps extends PropsOf<'div'> {
   circleContent?: React.ReactNode;
   additionalSvgContent?: React.ReactNode;
-  chainItems: Array<ChainItem | undefined>;
+  chainItems: Array<ChainRingItemType | undefined>;
 }
 
-export type ChainItem = {
+export type ChainRingItemType = {
   typedChainId: number;
   onClick?: () => void;
   isActive?: boolean;

libs/webb-ui-components/src/components/ListCard/ContractListCard.tsx

@@ -0,0 +1,114 @@
+import { useState, useMemo, forwardRef } from 'react';
+import { ExternalLinkLine, Search } from '@webb-tools/icons';
+import { ScrollArea } from '../ScrollArea';
+import { Typography } from '../../typography';
+import SkeletonLoader from '../SkeletonLoader';
+import { Input } from '../Input';
+import { ListItem } from './ListItem';
+import { ListCardWrapper } from './ListCardWrapper';
+import { isHex } from 'viem';
+
+import { ContractListCardProps } from './types';
+import { shortenHex, shortenString } from '../../utils';
+
+const ContractListCard = forwardRef<HTMLDivElement, ContractListCardProps>(
+  ({ isLoading, selectContractItems, ...props }, ref) => {
+    const [searchText, setSearchText] = useState('');
+
+    const filterList = useMemo(
+      () =>
+        selectContractItems.filter((item) => {
+          return (
+            item.name.toLowerCase().includes(searchText.toLowerCase()) ||
+            item.address.toLowerCase().includes(searchText.toLowerCase()) ||
+            item.blockExplorerUrl
+              ?.toLowerCase()
+              .includes(searchText.toLowerCase())
+          );
+        }),
+      [selectContractItems, searchText]
+    );
+
+    return (
+      <ListCardWrapper
+        title="Select Contract"
+        hideCloseButton
+        {...props}
+        ref={ref}
+      >
+        {/** The search input */}
+        <div className="py-4">
+          <Input
+            id="contract"
+            rightIcon={<Search />}
+            placeholder="Search contracts"
+            value={searchText}
+            onChange={(val) => setSearchText(val.toString())}
+            isDisabled={isLoading || selectContractItems.length === 0}
+          />
+        </div>
+
+        <ScrollArea className="lg:min-w-[350px] h-[376px]">
+          {isLoading && (
+            <div className="space-y-2">
+              <SkeletonLoader size="xl" />
+              <SkeletonLoader size="xl" />
+            </div>
+          )}
+          {!isLoading && (
+            <ul className="py-2">
+              {filterList.map((item, idx) => {
+                const { name, address, blockExplorerUrl, onSelectContract } =
+                  item;
+                return (
+                  <ListItem
+                    key={idx}
+                    className="flex justify-between"
+                    onClick={() => {
+                      onSelectContract && onSelectContract();
+                    }}
+                  >
+                    <div>
+                      <Typography
+                        component="span"
+                        variant="h5"
+                        fw="bold"
+                        className="block cursor-default"
+                      >
+                        {name}
+                      </Typography>
+                      <Typography
+                        component="span"
+                        variant="body1"
+                        fw="bold"
+                        className="cursor-default text-mono-100 dark:text-mono-80"
+                      >
+                        {isHex(address)
+                          ? shortenHex(address)
+                          : shortenString(address)}
+                      </Typography>
+                    </div>
+
+                    {typeof blockExplorerUrl === 'string' && (
+                      <a
+                        href={blockExplorerUrl}
+                        target="_blank"
+                        rel="noreferrer noopener"
+                        className="!text-inherit"
+                        onClick={(event) => event.stopPropagation()}
+                      >
+                        <ExternalLinkLine className="inline-block !fill-current" />
+                      </a>
+                    )}
+                  </ListItem>
+                );
+              })}
+            </ul>
+          )}
+        </ScrollArea>
+      </ListCardWrapper>
+    );
+  }
+);
+
+export default ContractListCard;

libs/webb-ui-components/src/components/ListCard/ListCardWrapper.tsx

@@ -6,7 +6,10 @@ import { Typography } from '../../typography';
 import { ListCardWrapperProps } from './types';
 
 export const ListCardWrapper = forwardRef<HTMLDivElement, ListCardWrapperProps>(
-  ({ children, className, onClose, title, ...props }, ref) => {
+  (
+    { children, className, onClose, title, hideCloseButton = false, ...props },
+    ref
+  ) => {
     return (
       <div
         {...props}
@@ -23,7 +26,9 @@ export const ListCardWrapper = forwardRef<HTMLDivElement, ListCardWrapperProps>(
             {title}
           </Typography>
 
-          <Close onClick={onClose} size="lg" className="cursor-pointer" />
+          {!hideCloseButton && (
+            <Close onClick={onClose} size="lg" className="cursor-pointer" />
+          )}
         </div>
 
         {children}

libs/webb-ui-components/src/components/ListCard/index.ts

@@ -1,4 +1,5 @@
 export { default as ChainListCard } from './ChainListCard';
+export { default as ContractListCard } from './ContractListCard';
 export * from './ListCardWrapper';
 export * from './ListItem';
 export { default as RelayerListCard } from './RelayerListCard';

libs/webb-ui-components/src/components/ListCard/types.ts

@@ -139,6 +139,26 @@ export type AssetType = {
   explorerUrl?: string;
 };
 
+export type ContractType = {
+  /**
+   * The contract name
+   */
+  name: string;
+  /**
+   * The contract address
+   */
+  address: string;
+  /**
+   * The contract block explorer url (optional)
+   */
+  blockExplorerUrl?: string;
+
+  /**
+   * Callback when user hit a contract item
+   */
+  onSelectContract?: () => void;
+};
+
 export interface ListCardWrapperProps
   extends IWebbComponentBase,
     PropsOf<'div'> {
@@ -151,6 +171,11 @@ export interface ListCardWrapperProps
    * The callback involke when pressing the close button
    */
   onClose?: () => void;
+
+  /**
+   * Hide Close buttonƒ
+   */
+  hideCloseButton?: boolean;
 }
 
 export interface ChainListCardProps extends Omit<PropsOf<'div'>, 'onChange'> {
@@ -207,6 +232,12 @@ export interface ChainListCardProps extends Omit<PropsOf<'div'>, 'onChange'> {
   isConnectingToChain?: boolean;
 }
 
+export interface ContractListCardProps
+  extends Omit<PropsOf<'div'>, 'onChange'> {
+  selectContractItems: ContractType[];
+  isLoading?: boolean;
+}
+
 export interface RelayerListCardProps extends Omit<PropsOf<'div'>, 'onChange'> {
   /**
    * If `true`, the component will display in connected view

libs/webb-ui-components/src/components/index.ts

@@ -32,7 +32,6 @@ export * from './FeeDetails';
 export * from './FileUploads';
 export * from './Filter';
 export * from './Footer';
-export { default as GovernanceForm } from './GovernanceForm';
 export * from './IconWithTooltip';
 export * from './IconsGroup';
 export * from './Input';