@ant-design/icons#WalletOutlined TypeScript Examples

AccountHeader: React.FC<Props> = ({
  account,
  isLink = false,
  hideOptions = false,
}) => {
  const { natricons } = React.useContext(PreferencesContext);
  const isSmallAndLower = !useMediaQuery("(min-width: 576px)");

  return (
    <div
      style={{
        display: "flex",
        alignItems: natricons ? "center" : "",
        fontSize: "16px",
        wordWrap: "break-word",
        position: "relative",
      }}
      className="color-normal"
    >
      {natricons ? (
        <Natricon
          account={account}
          style={{
            margin: "-12px -6px -18px -18px",
            width: "80px",
            height: "80px",
          }}
        />
      ) : (
        <div style={{ alignSelf: "baseline" }}>
          <WalletOutlined
            style={{
              fontSize: "18px",
              marginRight: "6px",
            }}
          />
        </div>
      )}

      {!isLink ? (
        <span className="break-word" style={{ marginRight: "6px" }}>
          <span>
            {account.substr(account.length * -1, account.length - 60)}
          </span>
          <span style={{ color: "#1890ff" }}>{account.substr(-60, 7)}</span>
          <span>{account.substr(-53, 46)}</span>
          <span style={{ color: "#1890ff" }}>{account.substr(-7)}</span>
        </span>
      ) : (
        <Link
          to={`/account/${account}`}
          style={{ fontSize: "14px", marginRight: "6px" }}
          className="break-word"
        >
          {account}
        </Link>
      )}

      {!hideOptions ? (
        <Row gutter={6} justify="start" className="options-wrapper">
          <Col style={{ fontSize: 0, alignSelf: "center" }}>
            <Copy text={account} />
          </Col>
          <Col>
            <Bookmark
              type="account"
              bookmark={account}
              placement={isSmallAndLower ? "left" : "top"}
            />
          </Col>
          <Col>
            <QRCodeModal account={account}>
              <Button shape="circle" icon={<QrcodeOutlined />} size="small" />
            </QRCodeModal>
          </Col>
        </Row>
      ) : null}
    </div>
  );
}

IconSymbol: FC = () => {
  return (
    <Row>
      {/*<CaretUpOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/1.CaretUpOutlined'}*/}
      {/*/>*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.MailOutlined'}*/}
      {/*/>*/}
      {/*<StepBackwardOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
      {/*/>*/}
      {/*<StepForwardOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
      {/*/>*/}
      <StepForwardOutlined />
      <ShrinkOutlined />
      <ArrowsAltOutlined />
      <DownOutlined />
      <UpOutlined />
      <LeftOutlined />
      <RightOutlined />
      <CaretUpOutlined />
      <CaretDownOutlined />
      <CaretLeftOutlined />
      <CaretRightOutlined />
      <VerticalAlignTopOutlined />
      <RollbackOutlined />
      <FastBackwardOutlined />
      <FastForwardOutlined />
      <DoubleRightOutlined />
      <DoubleLeftOutlined />
      <VerticalLeftOutlined />
      <VerticalRightOutlined />
      <VerticalAlignMiddleOutlined />
      <VerticalAlignBottomOutlined />
      <ForwardOutlined />
      <BackwardOutlined />
      <EnterOutlined />
      <RetweetOutlined />
      <SwapOutlined />
      <SwapLeftOutlined />
      <SwapRightOutlined />
      <ArrowUpOutlined />
      <ArrowDownOutlined />
      <ArrowLeftOutlined />
      <ArrowRightOutlined />
      <LoginOutlined />
      <LogoutOutlined />
      <MenuFoldOutlined />
      <MenuUnfoldOutlined />
      <BorderBottomOutlined />
      <BorderHorizontalOutlined />
      <BorderInnerOutlined />
      <BorderOuterOutlined />
      <BorderLeftOutlined />
      <BorderRightOutlined />
      <BorderTopOutlined />
      <BorderVerticleOutlined />
      <PicCenterOutlined />
      <PicLeftOutlined />
      <PicRightOutlined />
      <RadiusBottomleftOutlined />
      <RadiusBottomrightOutlined />
      <RadiusUpleftOutlined />
      <RadiusUprightOutlined />
      <FullscreenOutlined />
      <FullscreenExitOutlined />
      <QuestionOutlined />
      <PauseOutlined />
      <MinusOutlined />
      <PauseCircleOutlined />
      <InfoOutlined />
      <CloseOutlined />
      <ExclamationOutlined />
      <CheckOutlined />
      <WarningOutlined />
      <IssuesCloseOutlined />
      <StopOutlined />
      <EditOutlined />
      <CopyOutlined />
      <ScissorOutlined />
      <DeleteOutlined />
      <SnippetsOutlined />
      <DiffOutlined />
      <HighlightOutlined />
      <AlignCenterOutlined />
      <AlignLeftOutlined />
      <AlignRightOutlined />
      <BgColorsOutlined />
      <BoldOutlined />
      <ItalicOutlined />
      <UnderlineOutlined />
      <StrikethroughOutlined />
      <RedoOutlined />
      <UndoOutlined />
      <ZoomInOutlined />
      <ZoomOutOutlined />
      <FontColorsOutlined />
      <FontSizeOutlined />
      <LineHeightOutlined />
      <SortAscendingOutlined />
      <SortDescendingOutlined />
      <DragOutlined />
      <OrderedListOutlined />
      <UnorderedListOutlined />
      <RadiusSettingOutlined />
      <ColumnWidthOutlined />
      <ColumnHeightOutlined />
      <AreaChartOutlined />
      <PieChartOutlined />
      <BarChartOutlined />
      <DotChartOutlined />
      <LineChartOutlined />
      <RadarChartOutlined />
      <HeatMapOutlined />
      <FallOutlined />
      <RiseOutlined />
      <StockOutlined />
      <BoxPlotOutlined />
      <FundOutlined />
      <SlidersOutlined />
      <AndroidOutlined />
      <AppleOutlined />
      <WindowsOutlined />
      <IeOutlined />
      <ChromeOutlined />
      <GithubOutlined />
      <AliwangwangOutlined />
      <DingdingOutlined />
      <WeiboSquareOutlined />
      <WeiboCircleOutlined />
      <TaobaoCircleOutlined />
      <Html5Outlined />
      <WeiboOutlined />
      <TwitterOutlined />
      <WechatOutlined />
      <AlipayCircleOutlined />
      <TaobaoOutlined />
      <SkypeOutlined />
      <FacebookOutlined />
      <CodepenOutlined />
      <CodeSandboxOutlined />
      <AmazonOutlined />
      <GoogleOutlined />
      <AlipayOutlined />
      <AntDesignOutlined />
      <AntCloudOutlined />
      <ZhihuOutlined />
      <SlackOutlined />
      <SlackSquareOutlined />
      <BehanceSquareOutlined />
      <DribbbleOutlined />
      <DribbbleSquareOutlined />
      <InstagramOutlined />
      <YuqueOutlined />
      <AlibabaOutlined />
      <YahooOutlined />
      <RedditOutlined />
      <SketchOutlined />
      <AccountBookOutlined />
      <AlertOutlined />
      <ApartmentOutlined />
      <ApiOutlined />
      <QqOutlined />
      <MediumWorkmarkOutlined />
      <GitlabOutlined />
      <MediumOutlined />
      <GooglePlusOutlined />
      <AppstoreAddOutlined />
      <AppstoreOutlined />
      <AudioOutlined />
      <AudioMutedOutlined />
      <AuditOutlined />
      <BankOutlined />
      <BarcodeOutlined />
      <BarsOutlined />
      <BellOutlined />
      <BlockOutlined />
      <BookOutlined />
      <BorderOutlined />
      <BranchesOutlined />
      <BuildOutlined />
      <BulbOutlined />
      <CalculatorOutlined />
      <CalendarOutlined />
      <CameraOutlined />
      <CarOutlined />
      <CarryOutOutlined />
      <CiCircleOutlined />
      <CiOutlined />
      <CloudOutlined />
      <ClearOutlined />
      <ClusterOutlined />
      <CodeOutlined />
      <CoffeeOutlined />
      <CompassOutlined />
      <CompressOutlined />
      <ContactsOutlined />
      <ContainerOutlined />
      <ControlOutlined />
      <CopyrightCircleOutlined />
      <CopyrightOutlined />
      <CreditCardOutlined />
      <CrownOutlined />
      <CustomerServiceOutlined />
      <DashboardOutlined />
      <DatabaseOutlined />
      <DeleteColumnOutlined />
      <DeleteRowOutlined />
      <DisconnectOutlined />
      <DislikeOutlined />
      <DollarCircleOutlined />
      <DollarOutlined />
      <DownloadOutlined />
      <EllipsisOutlined />
      <EnvironmentOutlined />
      <EuroCircleOutlined />
      <EuroOutlined />
      <ExceptionOutlined />
      <ExpandAltOutlined />
      <ExpandOutlined />
      <ExperimentOutlined />
      <ExportOutlined />
      <EyeOutlined />
      <FieldBinaryOutlined />
      <FieldNumberOutlined />
      <FieldStringOutlined />
      <DesktopOutlined />
      <DingtalkOutlined />
      <FileAddOutlined />
      <FileDoneOutlined />
      <FileExcelOutlined />
      <FileExclamationOutlined />
      <FileOutlined />
      <FileImageOutlined />
      <FileJpgOutlined />
      <FileMarkdownOutlined />
      <FilePdfOutlined />
      <FilePptOutlined />
      <FileProtectOutlined />
      <FileSearchOutlined />
      <FileSyncOutlined />
      <FileTextOutlined />
      <FileUnknownOutlined />
      <FileWordOutlined />
      <FilterOutlined />
      <FireOutlined />
      <FlagOutlined />
      <FolderAddOutlined />
      <FolderOutlined />
      <FolderOpenOutlined />
      <ForkOutlined />
      <FormatPainterOutlined />
      <FrownOutlined />
      <FunctionOutlined />
      <FunnelPlotOutlined />
      <GatewayOutlined />
      <GifOutlined />
      <GiftOutlined />
      <GlobalOutlined />
      <GoldOutlined />
      <GroupOutlined />
      <HddOutlined />
      <HeartOutlined />
      <HistoryOutlined />
      <HomeOutlined />
      <HourglassOutlined />
      <IdcardOutlined />
      <ImportOutlined />
      <InboxOutlined />
      <InsertRowAboveOutlined />
      <InsertRowBelowOutlined />
      <InsertRowLeftOutlined />
      <InsertRowRightOutlined />
      <InsuranceOutlined />
      <InteractionOutlined />
      <KeyOutlined />
      <LaptopOutlined />
      <LayoutOutlined />
      <LikeOutlined />
      <LineOutlined />
      <LinkOutlined />
      <Loading3QuartersOutlined />
      <LoadingOutlined />
      <LockOutlined />
      <MailOutlined />
      <ManOutlined />
      <MedicineBoxOutlined />
      <MehOutlined />
      <MenuOutlined />
      <MergeCellsOutlined />
      <MessageOutlined />
      <MobileOutlined />
      <MoneyCollectOutlined />
      <MonitorOutlined />
      <MoreOutlined />
      <NodeCollapseOutlined />
      <NodeExpandOutlined />
      <NodeIndexOutlined />
      <NotificationOutlined />
      <NumberOutlined />
      <PaperClipOutlined />
      <PartitionOutlined />
      <PayCircleOutlined />
      <PercentageOutlined />
      <PhoneOutlined />
      <PictureOutlined />
      <PoundCircleOutlined />
      <PoundOutlined />
      <PoweroffOutlined />
      <PrinterOutlined />
      <ProfileOutlined />
      <ProjectOutlined />
      <PropertySafetyOutlined />
      <PullRequestOutlined />
      <PushpinOutlined />
      <QrcodeOutlined />
      <ReadOutlined />
      <ReconciliationOutlined />
      <RedEnvelopeOutlined />
      <ReloadOutlined />
      <RestOutlined />
      <RobotOutlined />
      <RocketOutlined />
      <SafetyCertificateOutlined />
      <SafetyOutlined />
      <ScanOutlined />
      <ScheduleOutlined />
      <SearchOutlined />
      <SecurityScanOutlined />
      <SelectOutlined />
      <SendOutlined />
      <SettingOutlined />
      <ShakeOutlined />
      <ShareAltOutlined />
      <ShopOutlined />
      <ShoppingCartOutlined />
      <ShoppingOutlined />
      <SisternodeOutlined />
      <SkinOutlined />
      <SmileOutlined />
      <SolutionOutlined />
      <SoundOutlined />
      <SplitCellsOutlined />
      <StarOutlined />
      <SubnodeOutlined />
      <SyncOutlined />
      <TableOutlined />
      <TabletOutlined />
      <TagOutlined />
      <TagsOutlined />
      <TeamOutlined />
      <ThunderboltOutlined />
      <ToTopOutlined />
      <ToolOutlined />
      <TrademarkCircleOutlined />
      <TrademarkOutlined />
      <TransactionOutlined />
      <TrophyOutlined />
      <UngroupOutlined />
      <UnlockOutlined />
      <UploadOutlined />
      <UsbOutlined />
      <UserAddOutlined />
      <UserDeleteOutlined />
      <UserOutlined />
      <UserSwitchOutlined />
      <UsergroupAddOutlined />
      <UsergroupDeleteOutlined />
      <VideoCameraOutlined />
      <WalletOutlined />
      <WifiOutlined />
      <BorderlessTableOutlined />
      <WomanOutlined />
      <BehanceOutlined />
      <DropboxOutlined />
      <DeploymentUnitOutlined />
      <UpCircleOutlined />
      <DownCircleOutlined />
      <LeftCircleOutlined />
      <RightCircleOutlined />
      <UpSquareOutlined />
      <DownSquareOutlined />
      <LeftSquareOutlined />
      <RightSquareOutlined />
      <PlayCircleOutlined />
      <QuestionCircleOutlined />
      <PlusCircleOutlined />
      <PlusSquareOutlined />
      <MinusSquareOutlined />
      <MinusCircleOutlined />
      <InfoCircleOutlined />
      <ExclamationCircleOutlined />
      <CloseCircleOutlined />
      <CloseSquareOutlined />
      <CheckCircleOutlined />
      <CheckSquareOutlined />
      <ClockCircleOutlined />
      <FormOutlined />
      <DashOutlined />
      <SmallDashOutlined />
      <YoutubeOutlined />
      <CodepenCircleOutlined />
      <AliyunOutlined />
      <PlusOutlined />
      <LinkedinOutlined />
      <AimOutlined />
      <BugOutlined />
      <CloudDownloadOutlined />
      <CloudServerOutlined />
      <CloudSyncOutlined />
      <CloudUploadOutlined />
      <CommentOutlined />
      <ConsoleSqlOutlined />
      <EyeInvisibleOutlined />
      <FileGifOutlined />
      <DeliveredProcedureOutlined />
      <FieldTimeOutlined />
      <FileZipOutlined />
      <FolderViewOutlined />
      <FundProjectionScreenOutlined />
      <FundViewOutlined />
      <MacCommandOutlined />
      <PlaySquareOutlined />
      <OneToOneOutlined />
      <RotateLeftOutlined />
      <RotateRightOutlined />
      <SaveOutlined />
      <SwitcherOutlined />
      <TranslationOutlined />
      <VerifiedOutlined />
      <VideoCameraAddOutlined />
      <WhatsAppOutlined />

      {/*</Col>*/}
    </Row>
  );
}

Search = ({ isHome = false }) => {
  const { t } = useTranslation();
  const { theme } = React.useContext(PreferencesContext);
  const { knownAccounts } = React.useContext(KnownAccountsContext);
  const { bookmarks } = React.useContext(BookmarksContext);
  const hasAccountBookmarks = !!Object.keys(bookmarks?.account || {}).length;
  const [isExpanded, setIsExpanded] = React.useState(isHome);
  const [isError, setIsError] = React.useState(false);
  const [filteredResults, setFilteredResults] = React.useState([] as any);
  const { searchValue, setSearchValue } = useSearch();
  const [accountBookmarks, setAccountBookmarks] = React.useState<
    { alias: string; account: string }[]
  >([]);
  const {
    searchHistory,
    addSearchHistory,
    removeSearchHistory,
  } = useSearchHistory();
  const searchRef = React.useRef(null);
  const [isOpen, setIsOpen] = React.useState(false);
  const [invalidQrCode, setInvalidQrCode] = React.useState("");

  let history = useHistory();

  const validateSearch = React.useCallback(
    async (value: any) => {
      if (!value) {
        setIsError(false);
        setFilteredResults([]);
      } else {
        const isValidAccount = isValidAccountAddress(value);
        const isValidBlock = isValidBlockHash(value);

        setIsError(!isValidAccount && !isValidBlock && value.length > 30);

        if (isValidBlock) {
          addSearchHistory(value.toUpperCase());
          history.push(`/block/${value.toUpperCase()}`);
        } else if (isValidAccount) {
          let account = getPrefixedAccount(value);

          setSearchValue(account);
          addSearchHistory(account);
          history.push(`/account/${account}`);
        } else {
          const filteredKnownAccounts = knownAccounts
            .filter(({ alias }) =>
              alias.toLowerCase().includes(value.toLowerCase()),
            )
            .map(item => renderItem(item));

          const filteredAccountBookmarks = accountBookmarks
            .filter(({ alias }) =>
              alias.toLowerCase().includes(value.toLowerCase()),
            )
            .map(item => renderItem(item as KnownAccount));

          setFilteredResults(
            filteredAccountBookmarks.concat(filteredKnownAccounts),
          );
        }
      }
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [addSearchHistory, knownAccounts, accountBookmarks],
  );

  React.useEffect(() => {
    if (hasAccountBookmarks) {
      setAccountBookmarks(
        Object.entries(bookmarks?.account).map(([account, alias]) => ({
          account,
          alias,
        })),
      );
    } else {
      setAccountBookmarks([]);
    }

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

  React.useEffect(() => {
    validateSearch(searchValue);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [searchValue]);

  React.useEffect(() => {
    if (!isOpen) return;

    function onScanSuccess(qrMessage: any) {
      if (isValidAccountAddress(qrMessage)) {
        setIsOpen(false);
        setSearchValue(getPrefixedAccount(qrMessage));
        document.getElementById("html5-qrcode-scan-stop-btn")?.click();
      } else {
        setInvalidQrCode(qrMessage);
      }
    }

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

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

  const renderItem = ({ alias, account }: KnownAccount) => ({
    value: account,
    label: (
      <>
        <strong style={{ display: "block" }}>{alias}</strong>
        {account}
      </>
    ),
  });

  return (
    <>
      <AutoComplete
        style={{
          float: isExpanded ? "right" : "none",
          maxWidth: "calc(100vw - 24px)",
          width: isExpanded ? "650px" : "100%",
          // transitionDelay: `${isExpanded ? 0 : 0.2}s`,
        }}
        dropdownClassName={`search-autocomplete-dropdown ${
          theme === Theme.DARK ? "theme-dark" : ""
        }`}
        dropdownStyle={{
          maxWidth: "calc(100vw - 40px)",
        }}
        options={filteredResults}
        // @ts-ignore
        onSelect={validateSearch}
        onChange={value => {
          setSearchValue(value);
        }}
        // @ts-ignore
        onPaste={e => {
          e.preventDefault();

          // @ts-ignore
          const paste = (e.clipboardData || window.clipboardData).getData(
            "text",
          );

          const account = getAccountAddressFromText(paste);
          const hash = getAccountBlockHashFromText(paste);
          if (account || hash) {
            setSearchValue(account || hash);
          } else {
            setSearchValue(paste);
          }
        }}
        value={searchValue}
      >
        <Input
          ref={searchRef}
          allowClear
          suffix={
            <>
              <CameraOutlined
                onClick={() => setIsOpen(true)}
                className="search-history-icon"
                style={{ padding: "6px", marginRight: "3px" }}
              />
              <Dropdown
                key="search-history-dropdown"
                overlayStyle={{ zIndex: 1050 }}
                overlayClassName={theme === Theme.DARK ? "theme-dark" : ""}
                overlay={
                  <Menu>
                    {!searchHistory.length ? (
                      <Menu.Item disabled>{t("search.noHistory")}</Menu.Item>
                    ) : (
                      searchHistory.map(history => (
                        <Menu.Item
                          onClick={() => setSearchValue(history)}
                          key={history}
                        >
                          <div
                            className="color-normal"
                            style={{
                              display: "flex",
                              alignItems: "flex-start",
                            }}
                          >
                            <div>
                              {isValidAccountAddress(history) ? (
                                <WalletOutlined />
                              ) : (
                                <BlockOutlined />
                              )}
                            </div>
                            <div
                              className="break-word"
                              style={{ margin: "0 6px", whiteSpace: "normal" }}
                            >
                              {history}
                            </div>
                            <DeleteButton
                              onClick={(e: Event) => {
                                e.stopPropagation();
                                removeSearchHistory(history);
                              }}
                            />
                          </div>
                        </Menu.Item>
                      ))
                    )}
                  </Menu>
                }
                placement="bottomRight"
              >
                <HistoryOutlined
                  className="search-history-icon"
                  style={{ padding: "6px", marginRight: "6px" }}
                />
              </Dropdown>
              <SearchOutlined />
            </>
          }
          className={`ant-input-search ${isError ? "has-error" : ""}`}
          placeholder={t("search.searchBy")}
          onFocus={({ target: { value } }) => {
            validateSearch(value);
            setIsExpanded(true);
          }}
          onBlur={() => setIsExpanded(isHome || false)}
          size={isHome ? "large" : "middle"}
          spellCheck={false}
        />
      </AutoComplete>
      <Modal
        title={t("search.scanWallet")}
        visible={isOpen}
        onCancel={() => setIsOpen(false)}
        footer={[
          <Button key="back" onClick={() => setIsOpen(false)}>
            {t("common.cancel")}
          </Button>,
        ]}
      >
        {invalidQrCode ? (
          <Alert
            message={t("pages.nanoquakejs.invalidAccount")}
            description={invalidQrCode}
            type="error"
            showIcon
            style={{ marginBottom: 12 }}
          />
        ) : null}
        <div
          id={`qrcode-reader-search${isHome ? "-home" : ""}`}
          className="qrcode-reader"
        ></div>
      </Modal>
    </>
  );
}

ExchangeTrackerPage: React.FC = () => {
  const { t } = useTranslation();
  const [activeWallets, setActiveWallets] = React.useState<string[]>(
    exchangeWallets
      .map(({ account, name }) =>
        !name.toLowerCase().includes("cold") ? account : "",
      )
      .filter(Boolean),
  );
  const [
    exchangeBalances,
    setExchangeBalances,
  ] = React.useState<ExchangeBalances>();
  const [data, setData] = React.useState<LineChartData[]>();
  const [totalExchangeBalance, setTotalExchangeBalance] = React.useState(0);
  const [isSelectedExchanges, setIsSelectedExchanges] = React.useState(false);

  const toggleActiveWallet = (account: string) => {
    if (activeWallets.includes(account)) {
      setActiveWallets(oldActiveWallets =>
        oldActiveWallets.filter(wallet => wallet !== account),
      );
    } else {
      setActiveWallets(oldActiveWallets => [...oldActiveWallets, account]);
    }
  };

  React.useEffect(() => {
    if (!exchangeBalances) return;
    filterData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [activeWallets, exchangeBalances, isSelectedExchanges]);

  React.useEffect(() => {
    getExchangeBalances().then(balance => {
      setExchangeBalances(balance);
      // setIsLoading(false);
    });

    return () => {
      exchangeTrackerChart?.destroy();
      exchangeTrackerChart = null;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const filterData = React.useCallback(() => {
    let data: LineChartData[] = [];
    let exchangeData: { [key: string]: any } = {};

    const lastExchangeValues: { [key: string]: number } = {};

    let totalExchangeBalance = 0;
    for (let account in exchangeBalances) {
      if (!activeWallets.includes(account)) continue;

      lastExchangeValues[account] = 0;

      // eslint-disable-next-line no-loop-func
      exchangeBalances[account].forEach(({ date, balance }, index) => {
        const day = date.replace(/T.+/, "");

        const value = balance < 1 ? 0 : balance;

        data.push({
          day,
          value,
          category: account,
        });

        if (isSelectedExchanges) {
          if (exchangeData[day]) {
            exchangeData[day].value = new BigNumber(exchangeData[day].value)
              .plus(value)
              .toNumber();
          } else {
            exchangeData[day] = {
              day,
              value,
              category: "ALL",
            };
          }
        }
      });

      totalExchangeBalance = new BigNumber(totalExchangeBalance)
        .plus(data[data.length - 1]?.value || 0)
        .toNumber();
    }

    const orderedExchangeData = orderBy(
      Object.values(exchangeData),
      ["day"],
      ["asc"],
    ).filter(({ value }) => !!value);

    const combinedData = data.concat(orderedExchangeData);

    setTotalExchangeBalance(totalExchangeBalance);
    setData(combinedData);
  }, [activeWallets, exchangeBalances, isSelectedExchanges]);

  React.useEffect(() => {
    if (!data?.length) return;

    const config = {
      data,
      xField: "day",
      yField: "value",
      seriesField: "category",
      xAxis: {
        type: "time",
      },
      tooltip: {
        // @ts-ignore
        customItems: (originalItems: any) => {
          // @ts-ignore
          const items = originalItems.map(data => {
            let { name, value, ...rest } = data;

            if (name === "ALL") {
              name = t("pages.exchangeTracker.selectedWallets");
            } else {
              name =
                exchangeWallets.find(({ account }) => account === name)?.name ||
                name;
            }

            return {
              ...rest,
              name,
              value: new BigNumber(value).toFormat(),
            };
          });

          return items;
        },
      },
      yAxis: {
        label: {
          formatter: (value: string) =>
            `${new BigNumber(value).dividedBy(1000000).toFormat()}M`,
        },
      },
      legend: {
        visible: false,
      },
      color: accountToLineColorMap
        .map(({ account, color }) =>
          activeWallets.includes(account) ? color : undefined,
        )
        .filter(Boolean),
    };

    if (!exchangeTrackerChart) {
      exchangeTrackerChart = new Line(
        document.getElementById("exchange-tracker-chart") as HTMLElement,
        // @ts-ignore
        config,
      );

      exchangeTrackerChart.render();
    } else {
      exchangeTrackerChart.update(config);
    }

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

  return (
    <>
      <Helmet>
        <title>Nano {t("menu.exchangeTracker")}</title>
      </Helmet>
      <Title level={3}>{t("menu.exchangeTracker")}</Title>

      <Card size="small" bordered={false}>
        <div style={{ marginBottom: "12px" }}>
          <Text style={{ fontSize: "12px" }}>
            {t("pages.exchangeTracker.description")}
          </Text>
        </div>
        <div>
          {exchangeWallets.map(({ name, account }, index) => {
            const [tagColor, lineColor] = activeWallets.includes(account)
              ? [
                  tagColors[index % tagColors.length],
                  lineColors[index % lineColors.length],
                ]
              : [];
            return (
              <Tag
                key={account}
                style={{ cursor: "pointer", marginBottom: "8px" }}
                color={tagColor}
                onClick={() => toggleActiveWallet(account)}
              >
                <span style={{ marginRight: "3px" }}>{name}</span>
                <a
                  onClick={e => e.stopPropagation()}
                  style={{
                    display: "inline-block",
                    padding: "0 3px",
                    marginRight: "-3px",
                  }}
                  href={`/account/${account}`}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <WalletOutlined color={lineColor} />
                </a>
              </Tag>
            );
          })}
        </div>

        <div>
          <Tag
            style={{ cursor: "pointer", marginBottom: "8px" }}
            color={
              isSelectedExchanges
                ? tagColors[(tagColors.length - 1) % tagColors.length]
                : "default"
            }
            onClick={() => {
              setIsSelectedExchanges(!isSelectedExchanges);
              toggleActiveWallet("ALL");
            }}
          >
            <span style={{ marginRight: "3px" }}>
              {t("pages.exchangeTracker.selectedWallets")} (
              {activeWallets.filter(account => account !== "ALL").length})
            </span>
          </Tag>
        </div>

        <LoadingStatistic
          title={t("pages.exchangeTracker.totalSelected")}
          prefix="Ӿ"
          value={totalExchangeBalance}
          isLoading={!exchangeBalances}
        />

        <div id="exchange-tracker-chart" />
      </Card>
    </>
  );
}