@fortawesome/free-solid-svg-icons#faChevronRight TypeScript Examples

RepoItem: React.FC<IRepoItemProps> = ({
  name,
  privateRepo,
  skeleton,
  onClick,
}) => {
  return (
    <div className="deploy-site-item-repo-item" onClick={(e) => onClick()}>
      <div className="deploy-site-item-repo-item-details">
        <div className="deploy-site-item-github-icon">
          <FontAwesomeIcon icon={faGithub} />
        </div>
        <div className="deploy-site-item-github-name">
          {skeleton ? <Skeleton width={220} height={24} duration={2} /> : name}
        </div>
      </div>
      {privateRepo && (
        <span className="deploy-site-item-private">
          <span>
            <FontAwesomeIcon icon={faLock} />
          </span>
          <span>Private</span>
        </span>
      )}
      <span className="deploy-site-item-chevron-right">
        <FontAwesomeIcon icon={faChevronRight} />
      </span>
    </div>
  );
}

PaginatorIndicatorIcon: React.FC<IndicatorProps> = ({
  left = false,
  pad = false
}) => (
  <FontAwesomeIcon
    size="sm"
    icon={left ? faChevronLeft : faChevronRight}
    className={pad ? (left ? "margin-right-1" : "margin-left-1") : ""}
  />
)

export function BuyPrepareForm({ disabled, onComplete }: IBuyPrepareFormProps) {
	const connection = useContext(ConnectorContext)
	const form = useForm()
	const { handleSubmit } = form
	const { result, setError } = useRequestResult()

	return (
		<>
			<form onSubmit={handleSubmit(async (formData) => {
				if (!connection.sdk) {
					return
				}
				try {
					onComplete(await connection.sdk.order.buy({
						orderId: toOrderId(formData.orderId)
					}))
				} catch (e) {
					setError(e)
				}
			})}
			>
				<Stack spacing={2}>
					<FormTextInput form={form} name="orderId" label="Order ID"/>
					<Box>
						<FormSubmit
							form={form}
							label="Next"
							state={resultToState(result.type)}
							icon={faChevronRight}
							disabled={disabled}
						/>
					</Box>
				</Stack>
			</form>
			<Box sx={{ my: 2 }}>
				<RequestResult result={result}/>
			</Box>
		</>
	)
}

function ListWithSubtitlesExample(props: Props) {
  const { Root, styles } = useStyles(props);

  return (
    <Root>
      <List className={styles.list}>
        <ListItem>
          <ListItemButton className={styles.listItemButton}>
            <div className={styles.info}>
              <div className={styles.title}>Apples</div>
              <div className={styles.subtitle}>
                Updated at {new Date().toLocaleTimeString()}
              </div>
            </div>
            <FontAwesomeIcon className={styles.icon} icon={faChevronRight} />
          </ListItemButton>
        </ListItem>

        <ListItem>
          <ListItemButton className={styles.listItemButton}>
            <div className={styles.info}>
              <div className={styles.title}>Bananas</div>
              <div className={styles.subtitle}>
                Updated at {new Date().toLocaleTimeString()}
              </div>
            </div>
            <FontAwesomeIcon className={styles.icon} icon={faChevronRight} />
          </ListItemButton>
        </ListItem>

        <ListItem>
          <ListItemButton className={styles.listItemButton}>
            <div className={styles.info}>
              <div className={styles.title}>Oranges</div>
              <div className={styles.subtitle}>
                Updated at {new Date().toLocaleTimeString()}
              </div>
            </div>
            <FontAwesomeIcon className={styles.icon} icon={faChevronRight} />
          </ListItemButton>
        </ListItem>
      </List>
    </Root>
  );
}

export function SellPrepareForm({ disabled, onComplete, itemId }: ISellPrepareFormProps) {
	const navigate = useNavigate()
	const connection = useContext(ConnectorContext)
	const form = useForm()
	const { handleSubmit } = form
	const { result, setError } = useRequestResult()

	return (
		<>
			<form onSubmit={handleSubmit(async (formData) => {
				if (!connection.sdk) {
					return
				}
				try {
					onComplete(await connection.sdk.order.sell({
						itemId: toItemId(formData.itemId)
					}))
					navigate(`/sell/${formData.itemId}`, {})
				} catch (e) {
					setError(e)
				}
			})}
			>
				<Stack spacing={2}>
					<FormTextInput form={form} defaultValue={itemId} name="itemId" label="Item ID"/>
					<Box>
						<FormSubmit
							form={form}
							label="Next"
							state={resultToState(result.type)}
							icon={faChevronRight}
							disabled={disabled}
						/>
					</Box>
				</Stack>
			</form>
			<Box sx={{ my: 2 }}>
				<RequestResult result={result}/>
			</Box>
		</>
	)
}

export function BuyPrepareForm({ orderId, disabled, onComplete }: IBuyPrepareFormProps) {
	const navigate = useNavigate()
	const connection = useContext(ConnectorContext)
	const form = useForm()
	const { handleSubmit } = form
	const { result, setError } = useRequestResult()

	return (
		<>
			<form onSubmit={handleSubmit(async (formData) => {
				if (!connection.sdk) {
					return
				}
				try {
					onComplete(await connection.sdk.order.buy({
						orderId: toOrderId(formData.orderId)
					}))
					navigate(`/buy/${formData.orderId}`, {})
				} catch (e) {
					setError(e)
				}
			})}
			>
				<Stack spacing={2}>
					<FormTextInput form={form} defaultValue={orderId} name="orderId" label="Order ID"/>
					<Box>
						<FormSubmit
							form={form}
							label="Next"
							state={resultToState(result.type)}
							icon={faChevronRight}
							disabled={disabled}
						/>
					</Box>
				</Stack>
			</form>
			<Box sx={{ my: 2 }}>
				<RequestResult result={result}/>
			</Box>
		</>
	)
}

export function BidPrepareForm({ itemId, disabled, onComplete }: IBidPrepareFormProps) {
	const navigate = useNavigate()
	const connection = useContext(ConnectorContext)
	const form = useForm()
	const { handleSubmit } = form
	const { result, setError } = useRequestResult()

	return (
		<>

			<form onSubmit={handleSubmit(async (formData) => {
				if (!connection.sdk) {
					return
				}
				try {
					onComplete(await connection.sdk.order.bid({
						itemId: toItemId(formData.itemId)
					}))
					navigate(`/bid/${formData.itemId}`, {})
				} catch (e) {
					setError(e)
				}
			})}
			>
				<Stack spacing={2}>
					<FormTextInput form={form} defaultValue={itemId} name="itemId" label="Item ID"/>
					<Box>
						<FormSubmit
							form={form}
							label="Next"
							state={resultToState(result.type)}
							icon={faChevronRight}
							disabled={disabled}
						/>
					</Box>
				</Stack>
			</form>
			<Box sx={{ my: 2 }}>
				<RequestResult result={result}/>
			</Box>
		</>
	)
}

export function AcceptBidPrepareForm({ orderId, disabled, onComplete }: IAcceptBidPrepareFormProps) {
	const navigate = useNavigate()
	const connection = useContext(ConnectorContext)
	const form = useForm()
	const { handleSubmit } = form
	const { result, setError } = useRequestResult()

	return (
		<>
			<form onSubmit={handleSubmit(async (formData) => {
				if (!connection.sdk) {
					return
				}
				try {
					onComplete(await connection.sdk.order.acceptBid({
						orderId: toOrderId(formData.orderId)
					}))
					navigate(`/accept-bid/${formData.orderId}`, {})
				} catch (e) {
					setError(e)
				}
			})}
			>
				<Stack spacing={2}>
					<FormTextInput form={form} defaultValue={orderId} name="orderId" label="Order ID"/>
					<Box>
						<FormSubmit
							form={form}
							label="Next"
							state={resultToState(result.type)}
							icon={faChevronRight}
							disabled={disabled}
						/>
					</Box>
				</Stack>
			</form>
			<Box sx={{ my: 2 }}>
				<RequestResult result={result}/>
			</Box>
		</>
	)
}

export function SellPrepareForm({ disabled, onComplete }: ISellPrepareFormProps) {
	const connection = useContext(ConnectorContext)
	const form = useForm()
	const { handleSubmit } = form
	const { result, setError } = useRequestResult()

	return (
		<>
			<form onSubmit={handleSubmit(async (formData) => {
				if (!connection.sdk) {
					return
				}
				try {
					onComplete(await connection.sdk.order.sell({
						itemId: toItemId(formData.itemId)
					}))
				} catch (e) {
					setError(e)
				}
			})}
			>
				<Stack spacing={2}>
					<FormTextInput form={form} name="itemId" label="Item ID"/>
					<Box>
						<FormSubmit
							form={form}
							label="Next"
							state={resultToState(result.type)}
							icon={faChevronRight}
							disabled={disabled}
						/>
					</Box>
				</Stack>
			</form>
			<Box sx={{ my: 2 }}>
				<RequestResult result={result}/>
			</Box>
		</>
	)
}

export function MintPrepareForm({ disabled, onComplete }: IMintPrepareFormProps) {
	const connection = useContext(ConnectorContext)
	const form = useForm()
	const { handleSubmit } = form
	const { result, setError } = useRequestResult()

	return (
		<>
			<form onSubmit={handleSubmit(async (formData) => {
				if (!connection.sdk) {
					return
				}
				try {
					const collection = await connection.sdk.apis.collection.getCollectionById({
						collection: formData.collectionId
					})
					onComplete(await connection.sdk.nft.mint({ collection }))
				} catch (e) {
					setError(e)
				}
			})}
			>
				<Stack spacing={2}>
					<FormTextInput form={form} name="collectionId" label="Collection ID"/>
					<Box>
						<FormSubmit
							form={form}
							label="Next"
							state={resultToState(result.type)}
							icon={faChevronRight}
							disabled={disabled}
						/>
					</Box>
				</Stack>
			</form>
			<Box sx={{ my: 2 }}>
				<RequestResult result={result}/>
			</Box>
		</>
	)
}

export function BidPrepareForm({ disabled, onComplete }: IBidPrepareFormProps) {
	const connection = useContext(ConnectorContext)
	const form = useForm()
	const { handleSubmit } = form
	const { result, setError } = useRequestResult()

	return (
		<>

			<form onSubmit={handleSubmit(async (formData) => {
				if (!connection.sdk) {
					return
				}
				try {
					onComplete(await connection.sdk.order.bid({
						itemId: toItemId(formData.itemId)
					}))
				} catch (e) {
					setError(e)
				}
			})}
			>
				<Stack spacing={2}>
					<FormTextInput form={form} name="itemId" label="Item ID"/>
					<Box>
						<FormSubmit
							form={form}
							label="Next"
							state={resultToState(result.type)}
							icon={faChevronRight}
							disabled={disabled}
						/>
					</Box>
				</Stack>
			</form>
			<Box sx={{ my: 2 }}>
				<RequestResult result={result}/>
			</Box>
		</>
	)
}

export function AcceptBidPrepareForm({ disabled, onComplete }: IAcceptBidPrepareFormProps) {
	const connection = useContext(ConnectorContext)
	const form = useForm()
	const { handleSubmit } = form
	const { result, setError } = useRequestResult()

	return (
		<>
			<form onSubmit={handleSubmit(async (formData) => {
				if (!connection.sdk) {
					return
				}
				try {
					onComplete(await connection.sdk.order.acceptBid({
						orderId: toOrderId(formData.orderId)
					}))
				} catch (e) {
					setError(e)
				}
			})}
			>
				<Stack spacing={2}>
					<FormTextInput form={form} name="orderId" label="Order ID"/>
					<Box>
						<FormSubmit
							form={form}
							label="Next"
							state={resultToState(result.type)}
							icon={faChevronRight}
							disabled={disabled}
						/>
					</Box>
				</Stack>
			</form>
			<Box sx={{ my: 2 }}>
				<RequestResult result={result}/>
			</Box>
		</>
	)
}

public constructor(private _matIconRegistry: MatIconRegistry, private _sanitizer: DomSanitizer) {
    this.addSvg(faAngleDoubleDown);
    this.addSvg(faArrowUp);
    this.addSvg(faArrowDown);
    this.addSvg(faSyncAlt);
    this.addSvg(faTimes);
    this.addSvg(faExternalLinkAlt);
    this.addSvg(faQuestionCircle);
    this.addSvg(faPlay);
    this.addSvg(faClock);
    this.addSvg(faBug);
    this.addSvg(faLink);
    this.addSvg(faDiscord);
    this.addSvg(faGithub);
    this.addSvg(faInfoCircle);
    this.addSvg(faCodeBranch);
    this.addSvg(faCaretDown);
    this.addSvg(faExclamationTriangle);
    this.addSvg(faCode);
    this.addSvg(faPatreon);
    this.addSvg(faCoins);
    this.addSvg(faCompressArrowsAlt);
    this.addSvg(faPencilAlt);
    this.addSvg(faCheckCircle);
    this.addSvg(faDiceD6);
    this.addSvg(faSearch);
    this.addSvg(faInfoCircle);
    this.addSvg(faNewspaper);
    this.addSvg(faCog);
    this.addSvg(faAngleUp);
    this.addSvg(faAngleDown);
    this.addSvg(faChevronRight);
    this.addSvg(faUserCircle);
    this.addSvg(faEllipsisV);
    this.addSvg(faCopy);
    this.addSvg(farCheckCircle);
    this.addSvg(faExclamation);
    this.addSvg(faTrash);
    this.addSvg(faHistory);
    this.addSvg(faCaretSquareRight);
    this.addSvg(faCaretSquareLeft);
    this.addSvg(faMinimize);
    this.addSvg(faUpRightFromSquare);
  }

render() {
    const {
      folderKey,
      folderStructure,
      ctxMenuKey,
      readOnly,
      renamedAsset,
      selectFile,
      openMenu,
      enterEditMode,
      onRename,
      saveAsset,
      selectedFileKey,
      feedbacks,
    } = this.props;
    let { folders, files, name } = folderStructure.getFolder(folderKey).folder;
    const { isOpen } = this.state;

    files = files.map((f) => ({ ...f, icon: FileIcons.getIcon(f.name) }));

    return (
      <div className={`
        ${styles['folder-browse']}
        ${isOpen ? styles['is--open'] : ''}
        ${this.containsFileWithFeedback() ? styles['has--file-with-feedback'] : ''}`}
      >
        <div
          onClick={() => this.toggle()}
          onContextMenu={this.onContextMenu}
          data-key={folderKey}
          className={`
            ${styles['folder-button']} 
            btn--transparent 
            ellipsis-overflow
            ${renamedAsset.key === folderKey ? 'is-being-renamed' : ''}
            ${folderKey === ctxMenuKey ? 'is--ctx-selected' : ''}`}
        >
          <form noValidate onSubmit={saveAsset} className="d-flex align-items-center">
            <>
              {isOpen
                ? <FontAwesomeIcon style={{ marginRight: '0.5em' }} icon={faChevronDown} width="18" height="18" />
                : <FontAwesomeIcon style={{ marginRight: '0.5em' }} icon={faChevronRight} width="18" height="18" /> }
            </>
            <input
              className={styles['folder-input']}
              type="text"
              value={renamedAsset.key === folderKey ? renamedAsset.name : name}
              disabled={renamedAsset.key !== folderKey}
              onChange={onRename}
              // eslint-disable-next-line jsx-a11y/no-autofocus
              autoFocus={renamedAsset.key === folderKey}
              onBlur={saveAsset}
            />
            {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
            <Button hidden disabled={renamedAsset.key !== folderKey} type="submit" />
          </form>
        </div>
        {folders.map((folder) => (
          <FolderBrowse
            key={folder.key}
            folderKey={folder.key}
            folderStructure={folderStructure}
            feedbacks={feedbacks}
            readOnly={readOnly}
            selectFile={selectFile}
            selectedFileKey={selectedFileKey}
            renamedAsset={renamedAsset}
            ctxMenuKey={ctxMenuKey}
            openMenu={openMenu}
            enterEditMode={enterEditMode}
            onRename={onRename}
            saveAsset={saveAsset}
          />
        ))}
        <FilesList
          readOnly={readOnly}
          files={files}
          feedbacks={feedbacks}
          ctxMenuKey={ctxMenuKey}
          selectFile={selectFile}
          selectedFileKey={selectedFileKey}
          enterEditMode={enterEditMode}
          openMenu={openMenu}
          renamedAsset={renamedAsset}
          onRename={onRename}
          saveAsset={saveAsset}
        />
      </div>
    );
  }

render() {
    return(
      <div className="table-content-viewer">
        <div className={this.props.selectedTableType === TableType.COMPUTED ? 'content-view-header computed ' : this.props.selectedTableType === TableType.IMPORTED  ? 'content-view-header imported' : this.props.selectedTableType === TableType.LOOKUP ? 'content-view-header lookup' : this.props.selectedTableType === TableType.MANUAL ? 'content-view-header manual' : 'content-view-header part'}>
          <div className={this.props.selectedTableType === TableType.COMPUTED ? 'computed table-type-tag' : this.props.selectedTableType === TableType.IMPORTED  ? 'imported table-type-tag' : this.props.selectedTableType === TableType.LOOKUP ? 'lookup table-type-tag' : this.props.selectedTableType === TableType.MANUAL ? 'manual table-type-tag' : 'part table-type-tag'}>{TableType[this.props.selectedTableType]}</div>
          <h4 className="table-name">{this.props.selectedTableName}</h4>
          {this.getTableActionButtons()}
        </div>
        {this.state.hideTableActionMenu ? '' : <this.getCurrentTableActionMenuComponent/>}
        {this.state.showWarning ? <this.getShowWarningComponent />: ''}
        <div className="content-view-area">
          <table className="table">
            <thead>
              <tr className="headerRow" onMouseMove={(event) => {this.cellResizeMouseMove(event)}} onMouseUp={(event) => {this.cellResizeMouseUp(event)}}　ref={this.state.headerRowReference}>
                <th className="buffer"></th>
                {this.getPrimaryKeys().map((attributeName, index) => {
                  return(
                    <th key={attributeName} className="headings">
                      <div className="headerContent primary">{attributeName}</div>
                    </th>
                  )
                })}
                {this.getSecondaryKeys().map((attributeName, index) => {
                  return(
                    <th key={attributeName} className="headings">
                      <div className="headerContent secondary" style={{color: 'inherit'}}>{attributeName}</div>
                    </th>
                  )
                })}
              </tr>
            </thead>
            <tbody>
            {this.props.contentData.map((entry: any, tupleIndex: number) => {
              // creating reference for each body column to track the width
              return (
                <tr key={entry} className="tableRow" onMouseMove={(event) => {this.cellResizeMouseMove(event)}} onMouseUp={(event) => {this.cellResizeMouseUp(event)}}　ref={this.state.tuplesReference[tupleIndex]}>
                  <td className="check-box-cell">
                    <input type="checkbox" 
                      // disable multiple check for insert mode as well until multiple insert is supported.
                      disabled={this.state.selectedTupleIndex > -1 && this.state.selectedTupleIndex !== tupleIndex} 
                      onChange={(event) => this.handleCheckedEntry(event, tupleIndex)} 
                      checked={this.state.selectedTupleIndex === tupleIndex}/>
                  </td>
                  {entry.map((column: any, index: number) => {
                    return (
                      <td key={`${column}-${index}`} className="tableCell">{column} 
                      </td>)
                  })
                  }</tr>)
              })}
            </tbody>
          </table>
          <div className="paginator">
            <p>Total Table Entries: {this.props.totalNumOfTuples}</p>
            <div className="number-of-rows-per-page-input">
              <p>Number of row per page</p>
              <input type='number' value={this.props.tuplePerPage} onChange={this.handleNumberOfTuplesPerPageChange}></input>
            </div>
            {Object.entries(this.props.contentData).length ?
              <div className="controls">
                <FontAwesomeIcon className={true ? "backAll icon" : "backAll icon disabled"} icon={faStepBackward} onClick={() => this.goToFirstPage()} />
                <FontAwesomeIcon className={true  ? "backOne icon" : "backOne icon disabled"} icon={faChevronLeft} onClick={() => this.goBackwardAPage()} />
                Page: ({this.props.currentPageNumber + ' / ' + this.props.maxPageNumber})
                <FontAwesomeIcon className={true  ? "forwardOne icon" : "forwardOne icon disabled"} icon={faChevronRight} onClick={() => this.goForwardAPage()} />
                <FontAwesomeIcon className={true  ? "forwardAll icon" : "forwardAll icon disabled"} icon={faStepForward} onClick={() => this.goToLastPage()} />
              </div>
              : ''
            }
          </div>
        </div>
        {this.state.isWaiting ? (
          <div className="loadingBackdrop">
            <div className="loadingPopup">
              <BasicLoadingIcon size={80} />
              <p>{this.tableActionEnumToString(this.state.currentSelectedTableActionMenu)} in action, please hold.</p>
            </div>
          </div>
        ) : ''}
      </div>
    )
  }

DeploymentItem: React.FC<IDeploymentItemProps> = ({
  index,
  type,
  deployment,
}) => {
  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: animationData,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid",
    },
  };

  const params = useParams<any>();
  const history = useHistory();
  const { selectedProject } = useContext<IStateModel>(StateContext);

  const domains =
    selectedProject && deployment?.sitePreview
      ? selectedProject.domains.filter(
          (d) => deployment?.sitePreview.indexOf(d.link) !== -1,
        )
      : [];

  const subdomains =
    selectedProject && deployment?.sitePreview
      ? selectedProject.subdomains.filter(
          (d) => deployment?.sitePreview.indexOf(d.link) !== -1,
        )
      : [];

  const hnsDomains =
    selectedProject && deployment?.sitePreview
      ? selectedProject.handshakeDomains.filter(
          (d) => deployment?.sitePreview.indexOf(d.link) !== -1,
        )
      : [];

  const hnsSubdomains =
    selectedProject && deployment?.sitePreview
      ? selectedProject.handshakeSubdomains.filter(
          (d) => deployment?.sitePreview.indexOf(d.link) !== -1,
        )
      : [];

  const ensDomains =
    selectedProject && deployment?.sitePreview
      ? selectedProject.ensDomains.filter(
          (d) => deployment?.sitePreview.indexOf(d.link) !== -1,
        )
      : [];

  const isDomainOrSubPresent =
    [...domains, ...subdomains, ...hnsDomains, ...hnsSubdomains, ...ensDomains]
      .length > 0;

  const showProtocolTag = (protocol: string) => {
    switch (protocol) {
      case "arweave":
        return <span className="protocol-tag-arweave">Arweave</span>;
      case "skynet":
        return <span className="protocol-tag-skynet">Skynet</span>;
      case "neofs":
        return <span className="protocol-tag-neofs">NeoFS</span>;
      case "ipfs-filecoin":
        return <span className="protocol-tag-filecoin">Filecoin</span>;
      case "ipfs-pinata":
        return <span className="protocol-tag-pinata">Pinata</span>;

      default:
    }
  };
  const imageUrl = (imageUrl: string | undefined) => {
    if (imageUrl) {
      return imageUrl;
    }
    return config.urls.IMAGE_NOT_FOUND;
  };

  const openDeployment = () => {
    history.push(
      `/org/${params.orgid}/sites/${params.siteid}/deployments/${deployment?._id}`,
    );
  };

  return (
    <div className="deployment-item" key={index} onClick={openDeployment}>
      {type === "filled" && (
        <>
          <div className="deployment-left">
            <img
              className="deployment-screenshot"
              src={imageUrl(deployment?.screenshot?.url)}
              alt={"Preview not Available"}
            />
            <div className="deployment-left-detail">
              {isDomainOrSubPresent && (
                <div className="deployment-domains-detail">
                  <span className="bold-text">Published at: </span>
                  {
                    <>
                      {domains.map((d: IDomain, i: number, a: IDomain[]) => (
                        <>
                          <a
                            href={`https://${d.name}`}
                            className="deployment-link"
                            target="_blank"
                            rel="noopener noreferrer"
                          >
                            {d.name}
                          </a>
                          {(i !== a.length - 1 ||
                            subdomains.length > 0 ||
                            hnsDomains.length > 0 ||
                            hnsSubdomains.length > 0 ||
                            ensDomains.length > 0) && (
                            <span className="comma-sep">,</span>
                          )}
                        </>
                      ))}
                      {subdomains.map((s: IDomain, i: number, a: IDomain[]) => (
                        <>
                          <a
                            href={`https://${s.name}`}
                            className="deployment-link"
                            target="_blank"
                            rel="noopener noreferrer"
                          >
                            {s.name}
                          </a>
                          {(i !== a.length - 1 ||
                            hnsDomains.length > 0 ||
                            hnsSubdomains.length > 0 ||
                            ensDomains.length > 0) && (
                            <span className="comma-sep">,</span>
                          )}
                        </>
                      ))}
                      {hnsDomains.map((s: IDomain, i: number, a: IDomain[]) => (
                        <>
                          <a
                            href={`http://${s.name}`}
                            className="deployment-link"
                            target="_blank"
                            rel="noopener noreferrer"
                          >
                            {s.name}
                          </a>
                          {(i !== a.length - 1 ||
                            hnsSubdomains.length > 0 ||
                            ensDomains.length > 0) && (
                            <span className="comma-sep">,</span>
                          )}
                        </>
                      ))}
                      {hnsSubdomains.map((s: IDomain, i: number, a: IDomain[]) => (
                        <>
                          <a
                            href={`http://${s.name}`}
                            className="deployment-link"
                            target="_blank"
                            rel="noopener noreferrer"
                          >
                            {s.name}
                          </a>
                          {(i !== a.length - 1 || ensDomains.length > 0) && (
                            <span className="comma-sep">,</span>
                          )}
                        </>
                      ))}
                      {ensDomains.map((s: IDomain, i: number, a: IDomain[]) => (
                        <>
                          <a
                            href={`http://${s.name}`}
                            className="deployment-link"
                            target="_blank"
                            rel="noopener noreferrer"
                          >
                            {s.name}
                          </a>
                          {i !== a.length - 1 && (
                            <span className="comma-sep">,</span>
                          )}
                        </>
                      ))}
                    </>
                  }
                </div>
              )}
              <div className="deployment-publish-detail">
                <span className="bold-text">Preview: </span>
                {deployment?.sitePreview ? (
                  <a
                    href={deployment?.sitePreview}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="deployment-link"
                  >
                    {deployment?.sitePreview}
                  </a>
                ) : (
                  <span>Site preview not available</span>
                )}
              </div>
              <div className="deployment-commit-details">
                <span className="bold-text">Production: </span>
                <span>
                  {deployment?.configuration.branch}
                  {deployment?.commitId ? (
                    <>
                      @
                      <a
                        href={`${selectedProject?.githubUrl.substring(
                          0,
                          selectedProject?.githubUrl.length - 4,
                        )}/commit/${deployment?.commitId}`}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="deployment-link"
                      >
                        {deployment?.commitId.substr(0, 7)}{" "}
                        {deployment?.commitMessage
                          ? `- ${deployment?.commitMessage.substr(0, 64)}...`
                          : ""}
                      </a>
                    </>
                  ) : null}
                </span>
              </div>
              <div className="protocol-tag-container">
                {showProtocolTag(deployment?.configuration.protocol!)}
              </div>
            </div>
            <div className="deployment-time-details">
              <div className="bold-text">
                {moment(`${deployment?.createdAt}`).format("MMM DD")} at{" "}
                {moment(`${deployment?.createdAt}`).format("hh:mm A")}
              </div>
              <div className="deployment-status">
                <span className="deployment-status-icon">
                  {deployment?.status.toLowerCase() === "pending" && (
                    <Lottie options={defaultOptions} height={42} width={58} />
                  )}
                  {deployment?.status.toLowerCase() === "deployed" && (
                    <LazyLoadedImage height={16} once>
                      <img
                        src={require("../../../../../../assets/svg/rocket_background.svg")}
                        alt="rocket"
                        className="rocket-icon"
                        height={16}
                        width={16}
                        loading="lazy"
                      />
                    </LazyLoadedImage>
                  )}
                  {deployment?.status.toLowerCase() === "failed" && (
                    <LazyLoadedImage height={16} once>
                      <img
                        src={require("../../../../../../assets/svg/error.svg")}
                        alt="rocket"
                        className="rocket-icon"
                        height={16}
                        width={16}
                        loading="lazy"
                      />
                    </LazyLoadedImage>
                  )}
                </span>
                {deployment?.status}
              </div>
            </div>
          </div>
          <div className="deployment-right">
            <FontAwesomeIcon icon={faChevronRight} />
          </div>
        </>
      )}
      {type === "skeleton" && (
        <>
          <div className="deployment-left">
            <Skeleton height={100} width={190} duration={2} />
            <div className="deployment-left-detail">
              <div className="deployment-publish-detail">
                <Skeleton width={300} duration={2} />
              </div>
              <div className="deployment-commit-details">
                <Skeleton width={180} duration={2} />
              </div>
            </div>
            <div className="deployment-time-details">
              <div className="bold-text">
                <Skeleton width={60} duration={2} />
              </div>
            </div>
          </div>
        </>
      )}
    </div>
  );
}

export function ConnectOptions() {
	const { environment, setEnvironment } = useContext(EnvironmentContext)
	const connection = useContext(ConnectorContext)
	const { connector, state } = connection

	const options$ = useMemo(() => connector ? from(connector.getOptions()) : from([]), [connector])
	const envSelectHandler = useCallback((e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
		setEnvironment?.(e.target.value as RaribleSdkEnvironment)
	}, [setEnvironment])

	if (!connector) {
		return null
	}

	const style = {
		justifyContent: "start",
		pl: "3rem",
		"& .MuiButton-startIcon": {
			position: "absolute",
			left: "1.25rem"
		}
	}

	return <Box sx={{
		maxWidth: 300
	}}>
		<Rx value$={options$}>
			{options => (
				<Stack spacing={1}>
					<TextField
						select
						size="small"
						label="Environment"
						disabled={state?.status === "connected"}
						value={environment}
						onChange={envSelectHandler}
					>
						{ENVIRONMENTS.map((option) => (
							<MenuItem key={option.value} value={option.value}>
								{option.label}
							</MenuItem>
						))}
					</TextField>
					{
						options.map(o => {
							const walletInfo = getWalletInfo(o.option)
							return <LoadingButton
								key={o.option}
								onClick={() => connector.connect(o)}
								loading={state.status === "connecting" && state.providerId === o.provider.getId()}
								loadingPosition="start"
								startIcon={<Icon icon={faChevronRight}/>}
								sx={style}
								variant="outlined"
								disabled={state?.status === "connected"}
								fullWidth
							>
								{walletInfo.label}
							</LoadingButton>
						})
					}
					<Button
						onClick={(state as StateConnected<any>).disconnect}
						startIcon={<Icon icon={faLinkSlash}/>}
						color="error"
						sx={style}
						variant="outlined"
						disabled={state?.status !== "connected"}
						fullWidth
					>
						Disconnect
					</Button>
				</Stack>
			)}
		</Rx>
	</Box>
}