@ant-design/icons#CheckCircleTwoTone TypeScript Examples

Progress: React.FC<ProgressProps> = ({ isCompleted, hash }) => {
  const { theme } = React.useContext(PreferencesContext);

  return isCompleted || (hash && hash !== "0") ? (
    <Space size={6}>
      <CheckCircleTwoTone
        twoToneColor={
          theme === Theme.DARK ? TwoToneColors.RECEIVE_DARK : "#52c41a"
        }
      />
      {hash && hash !== "0" ? (
        <Link to={`/block/${hash}`}>
          <Button shape="circle" size="small" icon={<SearchOutlined />} />
        </Link>
      ) : null}
    </Space>
  ) : (
    <CloseCircleOutlined />
  );
}

function RunAction({
  id,
  action,
  onFinish,
  icon,
}: {
  id: string;
  action: () => Promise<boolean>;
  onFinish?: () => void;
  icon: JSX.Element;
}) {
  const [state, setRunState] = useState<RunActionState>(
    RunActionState.NotRunning,
  );

  useMemo(() => setRunState(RunActionState.NotRunning), [id]);

  const run = async () => {
    await setRunState(RunActionState.Running);
    const result = await action();
    if (result) {
      await setRunState(RunActionState.Success);
      setTimeout(() => (onFinish ? onFinish() : null), 2000); // Give user a sense of completion before removal from list
    } else {
      await setRunState(RunActionState.Failed);
    }
  };

  let component;
  switch (state) {
    case RunActionState.NotRunning:
      component = (
        <span className="hover-button" onClick={run}>
          {icon}
        </span>
      );
      break;
    case RunActionState.Failed:
      component = (
        <span className="hover-button" onClick={run}>
          <SyncOutlined />
        </span>
      );
      break;
    case RunActionState.Running:
      component = <LoadingOutlined />;
      break;
    case RunActionState.Success:
      component = <CheckCircleTwoTone twoToneColor="#52c41a" />;
  }

  return component;
}

NodeTree = () => {
  const [search, setSearch] = useState('');
  const [expandedKeys, setExpandedKeys] = useState<Key[]>([]);
  const [autoExpandParent, setAutoExpandParent] = useState(true);
  const { appService, refresh } = useContext(AppContext);

  const page = appService.project.getCurrentPage();
  useEffect(() => {
    setAutoExpandParent(true);
    setExpandedKeys([
      // @ts-ignore
      ...new Set([
        ...expandedKeys,
        ...(page?.currentNode.map(({ id }) => id) || []),
      ]),
    ]);
    // eslint-disable-next-line
  }, [appService.project, page?.currentNode[0]]);

  const trees = useMemo((): DataNode[] => {
    const getTree = (node: NodeService | string, id?: number): DataNode => {
      if (isString(node)) {
        return {
          title: node,
          key: `${id}:${node}`,
          icon: (
            <Tooltip placement="right" title="Text">
              <ProfileOutlined />
            </Tooltip>
          ),
        };
      } else {
        const { id, _name, type, children } = node;
        nodeKeyId.set(id, node);
        return {
          title: `${_name}`,
          key: id,
          icon: ({ selected }) =>
            selected ? (
              <CheckCircleTwoTone twoToneColor="#52c41a" />
            ) : type === 'Component' ? (
              <Tooltip placement="right" title="Component">
                <AppstoreOutlined />
              </Tooltip>
            ) : (
              <Tooltip placement="right" title="Element">
                <BuildOutlined />
              </Tooltip>
            ),

          children: isString(children)
            ? [
                {
                  title: children,
                  key: `${id}:${children}`,
                  icon: (
                    <Tooltip placement="right" title="Text">
                      <ProfileOutlined />
                    </Tooltip>
                  ),
                },
              ]
            : (children
                ?.map(child => child && getTree(child, id))
                .filter(_ => _) as DataNode[]),
        };
      }
    };
    return page?.page ? [getTree(page.page)] : [];
    // eslint-disable-next-line
  }, [refresh, page?.page]);

  const filter = (treeData: DataNode[]): DataNode[] => {
    function matchSearch<T extends string>(title: T): boolean {
      return !search || new RegExp(_.escapeRegExp(search), 'ig').test(title);
    }

    return treeData
      .map(tree => {
        const { title, children } = tree;
        tree.children = children && filter(children);
        if (tree.children?.length || matchSearch(title as string)) {
          return tree;
        }
        return false;
      })
      .filter(_ => _) as DataNode[];
  };

  return (
    <div className={styles.container}>
      <div className={styles.search}>
        <Input.Search
          placeholder="Search Node"
          onChange={e => setSearch(e.target.value)}
        />
      </div>
      <div className={styles.scrollWarper}>
        <Tree
          showIcon
          onSelect={(_, { node }) => {
            if (node) {
              const nodeService = nodeKeyId.get(node.key);
              if (nodeService) {
                page.setCurrentNode([nodeService]);
              }
            }
          }}
          showLine={{ showLeafIcon: false }}
          selectedKeys={
            appService.project.getCurrentPage()?.currentNode.map(({ id }) => id) ||
            []
          }
          autoExpandParent={autoExpandParent}
          expandedKeys={expandedKeys}
          onExpand={expandedKeysValue => {
            setAutoExpandParent(false);
            setExpandedKeys(expandedKeysValue);
          }}
          treeData={filter(cloneJsxObject(trees))}
        />
      </div>
    </div>
  );
}

ConnectionPreferences: React.FC<Props> = ({ isDetailed }) => {
  const { t } = useTranslation();
  const {
    rpcDomain,
    setRpcDomain,
    websocketDomain,
    setWebsocketDomain,
  } = React.useContext(PreferencesContext);
  const [isEnabled, setIsEnabled] = React.useState(!!rpcDomain);
  const {
    control,
    handleSubmit,
    setValue,
    getValues,
    formState: { errors, isValid },
  } = useForm({
    defaultValues: {
      rpcDomain: rpcDomain || "",
      websocketDomain: websocketDomain || "",
    },
    mode: "onChange",
  });

  const onSubmit = async ({
    rpcDomain,
    websocketDomain,
  }: {
    rpcDomain?: string;
    websocketDomain?: string;
  }) => {
    if (rpcDomain) {
      setRpcDomain(rpcDomain);
    }
    if (websocketDomain) {
      setWebsocketDomain(websocketDomain);
    }
    window.location.reload();
  };

  return (
    <>
      <Row style={{ alignItems: !isDetailed ? "center" : "flex-start" }}>
        <Col xs={18}>
          <Text>{t("pages.preferences.connectionDetailed")}</Text>
        </Col>

        <Col xs={6} style={{ textAlign: "right" }}>
          <Switch
            checkedChildren={<CheckOutlined />}
            unCheckedChildren={<CloseOutlined />}
            onChange={(checked: boolean) => {
              setIsEnabled(checked);
              if (!checked) {
                setRpcDomain("");
                setWebsocketDomain("");
                setValue("rpcDomain", "");
                setValue("websocketDomain", "");
              }
            }}
            checked={isEnabled}
          />
        </Col>

        {isEnabled ? (
          <Col xs={24}>
            <form onSubmit={handleSubmit(onSubmit)}>
              <div
                style={{
                  display: "flex",
                  justifyContent: "flex-end",
                  marginTop: 12,
                }}
              >
                <Space size={12} direction="vertical">
                  <Space size={3} direction="vertical">
                    <Text>{t("pages.preferences.rpcDomain")}</Text>
                    <Controller
                      render={({ field }) => (
                        <Input
                          {...field}
                          type="text"
                          style={{ width: "400px", maxWidth: "100%" }}
                          placeholder={`http://127.0.0.1:7076`}
                          maxLength={255}
                          suffix={
                            getValues("rpcDomain") && !errors?.rpcDomain ? (
                              <CheckCircleTwoTone twoToneColor={"#52c41a"} />
                            ) : (
                              " "
                            )
                          }
                        />
                      )}
                      rules={{
                        // @ts-ignore
                        validate: (value: string) => {
                          return !value || value.length >= 15;
                        },
                      }}
                      control={control}
                      name="rpcDomain"
                      defaultValue={getValues("rpcDomain")}
                    />
                  </Space>
                  <Space size={3} direction="vertical">
                    <Text>{t("pages.preferences.websocketDomain")}</Text>
                    <Controller
                      render={({ field }) => (
                        <Input
                          {...field}
                          type="text"
                          style={{ width: "400px", maxWidth: "100%" }}
                          placeholder={`wss://www.nanolooker.com/ws`}
                          maxLength={255}
                          suffix={
                            getValues("websocketDomain") &&
                            !errors?.websocketDomain ? (
                              <CheckCircleTwoTone twoToneColor={"#52c41a"} />
                            ) : (
                              " "
                            )
                          }
                        />
                      )}
                      rules={{
                        // @ts-ignore
                        validate: (value: string) => {
                          return !value || value.length >= 15;
                        },
                      }}
                      control={control}
                      name="websocketDomain"
                      defaultValue={getValues("websocketDomain")}
                    />
                  </Space>
                </Space>
              </div>
              <div style={{ textAlign: "right", marginTop: 12 }}>
                <Button
                  type="primary"
                  disabled={!isValid}
                  onClick={handleSubmit(onSubmit)}
                >
                  Save
                </Button>
              </div>
            </form>
          </Col>
        ) : null}
      </Row>
    </>
  );
}

Register: React.FC = () => {
  const { t } = useTranslation();
  const [isOpen, setIsOpen] = React.useState(false);
  const [isSending, setIsSending] = React.useState(false);
  const [registerError, setRegisterError] = React.useState("");
  const [invalidQrCode, setInvalidQrCode] = React.useState("");
  const [section, setSection] = React.useState(Sections.REGISTER);
  const {
    nanoQuakeJSUsername,
    setNanoQuakeJSUsername,
    nanoQuakeJSAccount,
    setNanoQuakeJSAccount,
  } = React.useContext(PreferencesContext);

  const {
    control,
    handleSubmit,
    trigger,
    setValue,
    getValues,
    formState: { errors, isValid },
  } = useForm({
    defaultValues: {
      username: nanoQuakeJSUsername || "",
      account: nanoQuakeJSAccount || "",
    },
    mode: "onChange",
  });
  const onSubmit = async ({
    username,
    account,
  }: {
    username: string;
    account: string;
  }) => {
    setIsSending(true);
    setRegisterError("");

    // Prefix account with nano_
    const address = getPrefixedAccount(account);

    try {
      const res = await fetch("/api/nanoquakejs/register", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          username,
          address,
        }),
      });
      const json = await res.json();
      if (!json.error) {
        setNanoQuakeJSUsername(username);
        setNanoQuakeJSAccount(address);
        setIsOpen(false);
        Tracker.ga4?.gtag("event", "NanoQuakeJS - Register");
      } else {
        setRegisterError(
          json.error === "already_registered"
            ? t("pages.nanoquakejs.registerErrorUsername")
            : t("pages.nanoquakejs.registerError"),
        );
      }
    } catch (err) {
      setRegisterError(t("pages.nanoquakejs.registerError"));
    }

    setIsSending(false);
  };

  React.useEffect(() => {
    if (!isOpen) {
      setSection(Sections.REGISTER);
      setInvalidQrCode("");
      setRegisterError("");
    }
  }, [isOpen]);

  React.useEffect(() => {
    if (section !== Sections.SCAN) return;

    function onScanSuccess(qrMessage: any) {
      if (isValidAccountAddress(qrMessage)) {
        setValue("account", getPrefixedAccount(qrMessage));
        trigger("account");

        document.getElementById("html5-qrcode-scan-stop-btn")?.click();
        setSection(Sections.REGISTER);
      } else {
        setInvalidQrCode(qrMessage);
      }
    }

    const html5QrcodeScanner = new window.Html5QrcodeScanner("qrcode-reader", {
      fps: 10,
      qrbox: 250,
    });
    html5QrcodeScanner.render(onScanSuccess);

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [section]);

  return (
    <>
      <Row
        style={{
          textAlign: "center",
          paddingBottom: "3px",
          border: "none",
          marginTop: -12,
        }}
      >
        <Col xs={24}>
          <Space size={12} align="center" direction="vertical">
            {nanoQuakeJSUsername && nanoQuakeJSAccount ? (
              <Play />
            ) : (
              <Button
                type="primary"
                size="large"
                shape="round"
                onClick={() => setIsOpen(true)}
              >
                {t("pages.nanoquakejs.register")}
              </Button>
            )}

            <QRCodeModal
              account={NANOQUAKEJS_DONATION_ACCOUNT}
              header={<Text>NanoQuakeJS</Text>}
            >
              <Button ghost type="primary" size="small" shape="round">
                {t("pages.nanoquakejs.donatePrizePool")}
              </Button>
            </QRCodeModal>

            <p className="default-color" style={{ textAlign: "left" }}>
              {t("pages.nanoquakejs.payoutDescription")}
            </p>
          </Space>
        </Col>
      </Row>

      <Modal
        title={
          section === Sections.REGISTER
            ? t("pages.nanoquakejs.register")
            : t("pages.nanoquakejs.scanWallet")
        }
        visible={isOpen}
        // @ts-ignore
        onOk={
          Sections.REGISTER
            ? handleSubmit(onSubmit)
            : setSection(Sections.REGISTER)
        }
        okText={t("pages.nanoquakejs.register")}
        okButtonProps={{
          disabled: !isValid,
        }}
        confirmLoading={isSending}
        onCancel={() => {
          section === Sections.REGISTER
            ? setIsOpen(false)
            : setSection(Sections.REGISTER);
        }}
        cancelText={t("common.cancel")}
      >
        {section === Sections.REGISTER ? (
          <>
            {registerError ? (
              <Alert
                message={registerError}
                type="error"
                showIcon
                style={{ marginBottom: 12 }}
              />
            ) : null}
            <form onSubmit={handleSubmit(onSubmit)}>
              <Space size={12} direction="vertical" style={{ width: "100%" }}>
                <Text>{t("pages.nanoquakejs.registerDescription")}</Text>

                <Space size={3} direction="vertical" style={{ width: "100%" }}>
                  <Text>{t("pages.nanoquakejs.inGameUsername")}</Text>
                  <Controller
                    render={({ field }) => (
                      <Input
                        {...field}
                        type="text"
                        readOnly={isSending}
                        maxLength={32}
                        autoFocus={!!getValues("username")}
                        suffix={
                          getValues("username") && !errors?.username ? (
                            <CheckCircleTwoTone twoToneColor={"#52c41a"} />
                          ) : (
                            " "
                          )
                        }
                      />
                    )}
                    rules={{
                      validate: (value: string) =>
                        value.length >= 3 && !/\s/.test(value),
                    }}
                    control={control}
                    name="username"
                    defaultValue={getValues("username")}
                  />
                </Space>
                <Space size={3} direction="vertical" style={{ width: "100%" }}>
                  <Text>{t("pages.nanoquakejs.accountReceivePayouts")}</Text>
                  <Controller
                    render={({ field }) => (
                      <Input
                        {...field}
                        readOnly={isSending}
                        placeholder="nano_"
                        suffix={
                          getValues("account") && !errors?.account ? (
                            <CheckCircleTwoTone twoToneColor={"#52c41a"} />
                          ) : (
                            <Button
                              size="small"
                              type="text"
                              style={{ margin: "-1px -7px -1px" }}
                              onClick={() => setSection(Sections.SCAN)}
                            >
                              <CameraOutlined />
                            </Button>
                          )
                        }
                      />
                    )}
                    rules={{
                      validate: (value: string) => isValidAccountAddress(value),
                    }}
                    control={control}
                    name="account"
                    defaultValue={getValues("account")}
                  />
                </Space>
                <Text style={{ fontSize: 12 }} className="color-muted">
                  * {t("pages.nanoquakejs.registerNote")}
                </Text>
              </Space>
            </form>
          </>
        ) : null}
        {section === Sections.SCAN ? (
          <>
            {invalidQrCode ? (
              <Alert
                message={t("pages.nanoquakejs.invalidAccount")}
                description={invalidQrCode}
                type="error"
                showIcon
                style={{ marginBottom: 12 }}
              />
            ) : null}
            <div id="qrcode-reader" className="qrcode-reader"></div>
          </>
        ) : null}
      </Modal>
    </>
  );
}

renderRunning = () => {
    return (
      <div className="content-content">
        <Row className="content-content-row" gutter={[16, 16]} justify="center">
          <Col className="content-content-col" span={24}>
            {(() => {
              if (Number.isNaN(this.state.time)) {
                return <QuestionCircleTwoTone className="content-content-icon" />;
              } else {
                return <CheckCircleTwoTone className="content-content-icon" twoToneColor="#52c41a" />;
              }
            })()}
          </Col>
        </Row>
        <Row className="content-content-row" gutter={[16, 32]} justify="center">
          <Col className="content-content-col" span={24}>
            <Paragraph>
              <Title level={3}>
                {(() => {
                  if (Number.isNaN(this.state.time)) {
                    return "未运行";
                  } else {
                    return "运行中";
                  }
                })()}
              </Title>
            </Paragraph>
          </Col>
        </Row>
        <Row gutter={[16, 0]} justify="center">
          <Col xs={24} sm={12} md={6} style={{ marginBottom: "16px" }}>
            <Card className="card" hoverable>
              <Statistic
                precision={2}
                prefix={<ClockCircleOutlined />}
                title="运行时间"
                value={Convert.convertTime(this.state.time)}
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={6} style={{ marginBottom: "16px" }}>
            <Card className="card" hoverable>
              <Statistic
                prefix={<HourglassOutlined />}
                title="延迟"
                value={Convert.convertDuration(this.state.latency)}
                valueStyle={(() => {
                  if (this.state.latency === Infinity) {
                    return { color: "#cf1322" };
                  } else if (this.state.latency >= 100) {
                    return { color: "#faad14" };
                  }
                })()}
                suffix={Convert.convertDurationUnit(this.state.latency)}
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={6} style={{ marginBottom: "16px" }}>
            <Card hoverable onClick={this.switchTraffic}>
              <Statistic
                precision={2}
                prefix={<ArrowUpOutlined />}
                title="上传"
                value={this.showUploadValue()}
                suffix={this.showUploadUnit()}
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={6} style={{ marginBottom: "16px" }}>
            <Card hoverable onClick={this.switchTraffic}>
              <Statistic
                precision={2}
                prefix={<ArrowDownOutlined />}
                title="下载"
                value={this.showDownloadValue()}
                suffix={this.showDownloadUnit()}
              />
            </Card>
          </Col>
        </Row>
      </div>
    );
  };