antd#ConfigProvider JavaScript Examples

render() { 
    return (
      <ConfigProvider locale={zhCN}>
        <Provider store={store}>
          <Router />
        </Provider>
      </ConfigProvider>
    );
  }

render() {
    const { path } = this.props.match
    const { history } = this.props
    const { lang } = this.props.langInfo
    // 挂在 histroy 到全局
    GlobalClass.history = history
    return (
      <ConfigProvider locale={lang === CN ? zhCN : enUS}>
        <Switch>
          <Route path={`${path}login`} component={Login} />
          <div id="container">
            <ThemeContext.Provider value="dark">
              <Header />
            </ThemeContext.Provider>
            <section id="content">
              <Sider />
              <div id="main">
                <div id="main-box">
                  <Route exact path={`${path}`}>
                    <Redirect to={`${path}rules`} />
                  </Route>
                  <Route exact path={`${path}rules`} component={Rules} />
                  <Route path={`${path}rules/:id`} component={Rules} />
                  <Route path={`${path}promethus`} component={Promethus} />
                  <Route path={`${path}strategy`} component={Strategy} />
                  <Route path={`${path}alerts`} component={Alerts} />
                  <Route exact path={`${path}alerts_confirm`} component={AlertsConfirm} />
                  <Route path={`${path}alerts_confirm/:id`} component={AlertsConfirmByID} />
                  <Route path={`${path}group`} component={Group} />
                  <Route path={`${path}maintain`} component={Maintain} />
                  <Route path={`${path}user`} component={User} />
                </div>
              </div>
            </section>
          </div>
        </Switch>
      </ConfigProvider>
    );
  }

render() {
    const { children = {} } = this.props
    return (
      <ConfigProvider locale={zhCN}>
        <Layout>
          <Content style={{ minHeight: '100vh' }}>{children}</Content>
        </Layout>
      </ConfigProvider>
    )
  }

Localization = ({ children, settings: { locale } }) => {
  const currentLocale = locales[locale]
  return (
    <ConfigProvider locale={currentLocale.localeAntd}>
      <IntlProvider locale={currentLocale.locale} messages={currentLocale.messages}>
        {children}
      </IntlProvider>
    </ConfigProvider>
  )
}

ReactDOM.render(
  <React.StrictMode>
    <StoreProvider>
      <ConfigProvider locale={heIL} direction="rtl">
        <Router>
          <App />
        </Router>
      </ConfigProvider>
    </StoreProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

function App() {
  return (
    <ConfigProvider locale={zhCN}>
      <Provider store={store}>
        <Router />
      </Provider>
    </ConfigProvider>
  )
}

function init() {
  ReactDOM.render(<Footer />, document.getElementById('footer'));
  ReactDOM.render(<Nav />, document.getElementById('user-nav'));
  ReactDOM.render(
    <ConfigProvider locale={zhCN}>
      <App callback={structure} />
    </ConfigProvider>, document.getElementById('root'),
  );
}

render() {
    const { direction, popupPlacement } = this.state;
    return (
      <>
        <div style={{ marginBottom: 16 }}>
          <span style={{ marginRight: 16 }}>Change direction of components: </span>
          <Radio.Group defaultValue="ltr" onChange={this.changeDirection}>
            <Radio.Button key="ltr" value="ltr">
              LTR
            </Radio.Button>
            <Radio.Button key="rtl" value="rtl">
              RTL
            </Radio.Button>
          </Radio.Group>
        </div>
        <ConfigProvider direction={direction}>
          <Page className={direction} popupPlacement={popupPlacement} />
        </ConfigProvider>
      </>
    );
  }

render() {
    const { locale } = this.state;
    return (
      <div>
        <div className="change-locale">
          <span style={{ marginRight: 16 }}>Change locale of components: </span>
          <Radio.Group value={locale} onChange={this.changeLocale}>
            <Radio.Button key="en" value={enUS}>
              English
            </Radio.Button>
            <Radio.Button key="cn" value={zhCN}>
              中文
            </Radio.Button>
          </Radio.Group>
        </div>
        <ConfigProvider locale={locale}>
          <Page
            key={locale ? locale.locale : 'en' /* Have to refresh for production environment */}
          />
        </ConfigProvider>
      </div>
    );
  }

FormSizeDemo = () => {
  const [prefixCls, setPrefixCls] = useState('light');
  return (
    <div>
      <Button style={{ marginBottom: '12px' }} type="primary" onClick={() => setPrefixCls('dark')}>
        toggle prefixCls
      </Button>
      <div>
        <ConfigProvider prefixCls={prefixCls} iconPrefixCls="bamboo">
          <SmileOutlined />
          <Select />
        </ConfigProvider>
      </div>
    </div>
  );
}

SimpleTableWidget = ({
  columnBuilders,
  rowData,
  emptyText,
  margin,
  loading,
}) => {
  const _rowData = rowData || [];
  const customizeRenderEmpty = () => <EmptyTableIndicator text={emptyText} />;

  const columns = columnBuilders.map((builder, j) => ({
    ...builder,
    title: (
      <Header margin={margin}>
        <I s={builder.label} />
      </Header>
    ),
    dataIndex: 'col_' + j,
  }));

  const dataSource = _rowData.map((row, i) => {
    var rowValue = { key: i };

    columnBuilders.forEach((builder, j) => {
      rowValue['col_' + j] = (
        <Cell margin={margin} sortedValue={builder.sortedValue(row)}>
          {builder.getColValue(row)}
        </Cell>
      );
    });

    return rowValue;
  });

  return (
    <SimpleTableContainer>
      <ConfigProvider
        renderEmpty={dataSource.length === 0 && customizeRenderEmpty}
      >
        <TableLoadingSpin loading={loading}>
          <Table
            tableLayout="auto"
            dataSource={dataSource}
            columns={columns}
            pagination={false}
          />
        </TableLoadingSpin>
      </ConfigProvider>
    </SimpleTableContainer>
  );
}

ReactDOM.render(
    <ConfigProvider locale={zhCN}>
        <Router>
            <App/>
        </Router>
    </ConfigProvider>,
    document.getElementById('root')
);

render() {
        return (
            <ConfigProvider locale={zhCN}>
                <AppRouter/>
            </ConfigProvider>
        );
    }

ReactDOM.render(
  <ConfigProvider locale={locale}>
    <Provider store={store}>
      <Routers />
    </Provider>
  </ConfigProvider>,
  document.getElementById('root'),
);

PayTable = ({
  columnBuilders,
  rowData,
  emptyText,
  margin,
  loading,
}) => {
  const theme = useContext(ThemeContext);
  const _rowData = rowData || [];
  const customizeRenderEmpty = () => <EmptyTableIndicator text={emptyText} />;

  const columns = columnBuilders.map((builder, j) => ({
    ...builder,
    dataIndex: "col_" + j,
  }));

  const dataSource = _rowData.map((row, i) => {
    var rowValue = { key: i };

    columnBuilders.forEach((builder, j) => {
      rowValue["col_" + j] = (
        <Cell margin={margin}>{builder.getColValue(row)}</Cell>
      );
    });

    return rowValue;
  });

  return (
    <SimpleTableContainer>
      <ConfigProvider
        renderEmpty={dataSource.length === 0 && customizeRenderEmpty}
      >
        <TableLoadingSpin loading={loading}>
          <Table
            showHeader={false}
            tableLayout="auto"
            dataSource={dataSource}
            columns={columns}
            pagination={false}
          />
        </TableLoadingSpin>
        {/* {dataSource.length > 10 ? (
          <Pagination
            style={{
              padding: '30px 0px',
              background: theme.background,
              textAlign: 'center',
            }}
            size=""
            total={dataSource.length}
            pageSize={10}
          />
        ) : (
          <div />
        )} */}
      </ConfigProvider>
    </SimpleTableContainer>
  );
}

SimpleTableWidget = ({
  columnBuilders,
  rowData,
  emptyText,
  margin,
  loading,
}) => {
  const theme = useContext(ThemeContext);
  const _rowData = rowData || [];
  const customizeRenderEmpty = () => <EmptyTableIndicator text={emptyText} />;

  const columns = columnBuilders.map((builder, j) => ({
    ...builder,
    title: (
      <Header margin={margin}>
        <I s={builder.label} />
      </Header>
    ),
    dataIndex: "col_" + j,
  }));

  const dataSource = _rowData.map((row, i) => {
    var rowValue = { key: i };

    columnBuilders.forEach((builder, j) => {
      rowValue["col_" + j] = (
        <Cell margin={margin}>{builder.getColValue(row)}</Cell>
      );
    });

    return rowValue;
  });

  return (
    <SimpleTableContainer>
      <ConfigProvider
        renderEmpty={dataSource.length === 0 && customizeRenderEmpty}
      >
        <TableLoadingSpin loading={loading}>
          <Table
            tableLayout="auto"
            dataSource={dataSource}
            columns={columns}
            pagination={false}
          />
        </TableLoadingSpin>
        {/* {dataSource.length > 10 ? (
          <Pagination
            style={{
              padding: '30px 0px',
              background: theme.background,
              textAlign: 'center',
            }}
            size=""
            total={dataSource.length}
            pageSize={10}
          />
        ) : (
          <div />
        )} */}
      </ConfigProvider>
    </SimpleTableContainer>
  );
}

render() {
    const { children, helmetContext = {}, ...restProps } = this.props;
    const { appLocale, direction, isMobile } = this.state;
    const title = 'Stack Labs';

    const description = appLocale.locale === 'zh-CN' ? 'Stack' : 'Stack';
    let pageWrapperClass = 'page-wrapper';
    if (direction === 'rtl') {
      pageWrapperClass += ' page-wrapper-rtl';
    }
    return (
      <SiteContext.Provider value={{ isMobile }}>
        <HelmetProvider context={helmetContext}>
          <Helmet encodeSpecialCharacters={false}>
            <html lang={appLocale.locale === 'zh-CN' ? 'zh' : 'en'} data-direction={direction} />
            <title>{title}</title>
            <link rel="apple-touch-icon-precomposed" sizes="144x144" href={microLogo} />
            <meta name="description" content={description} />
            <meta property="og:title" content={title} />
            <meta property="og:type" content="website" />
            <meta property="og:image" content={microLogo} />
          </Helmet>
          <IntlProvider
            locale={appLocale.locale}
            messages={appLocale.messages}
            defaultLocale="zh-CN"
          >
            <ConfigProvider
              locale={appLocale.locale === 'zh-CN' ? zhCN : null}
              direction={direction}
            >
              <div className={pageWrapperClass}>
                <Header {...restProps} changeDirection={this.changeDirection} />
                {children}
              </div>
            </ConfigProvider>
          </IntlProvider>
        </HelmetProvider>
      </SiteContext.Provider>
    );
  }

render() {
    const { customize } = this.state;
    return (
      <div>
        <Switch
          unCheckedChildren="default"
          checkedChildren="customize"
          checked={customize}
          onChange={val => {
            this.setState({ customize: val });
          }}
        />

        <Divider />

        <ConfigProvider renderEmpty={customize && customizeRenderEmpty}>
          <div className="config-provider">
            <h4>Select</h4>
            <Select style={style} />

            <h4>TreeSelect</h4>
            <TreeSelect style={style} treeData={[]} />

            <h4>Cascader</h4>
            <Cascader style={style} options={[]} showSearch />

            <h4>Transfer</h4>
            <Transfer />

            <h4>Table</h4>
            <Table
              style={{ marginTop: 8 }}
              columns={[
                {
                  title: 'Name',
                  dataIndex: 'name',
                  key: 'name',
                },
                {
                  title: 'Age',
                  dataIndex: 'age',
                  key: 'age',
                },
              ]}
            />

            <h4>List</h4>
            <List />
          </div>
        </ConfigProvider>
      </div>
    );
  }

render() {
    const theme = this.props.theme;
    const { account } = this.props.dexAccount;

    const onMaintenancePage = this.props.pathname.includes('/maintenance');
    const onTradePage =
      this.props.pathname.includes('/trade/') ||
      this.props.pathname.includes('/invite');
    const disableTopTabs =
      this.props.pathname.includes('/document/') ||
      this.props.pathname.includes('/legal/') ||
      this.props.pathname.includes('/support/');

    const usesidepanelbackground =
      onTradePage || disableTopTabs ? 'true' : 'false';
    return (
      <div>
        <ConfigProvider>
          <div
            className="desktop-layout"
            style={{
              borderTopStyle: 'none',
              borderBottomStyle: 'none',
            }}
            ref={(menuButton) => (this._settingsButtonElement = menuButton)}
          >
            <RegisterAccountModal refer_id={this.state.refer_id} />
            <LoginModal />
            <DepositModal />
            <TransferModal />
            <ResetAccountKeyModal />
            <ResetApiKeyModal />
            <WithdrawModal />
            <MetaMaskService />
            <WalletConnectService />
            <MewConnectService />
            <AuthereumService />
            <WalletService />
            <WalletLinkService />
            <DexAccountBalanceService />
            <DexAccountOrderService />
            <DexAccountService />
            <WebSocketService {...this.props} />

            <WechatModal />
            <ReferralModal />
            <ConfirmLogoutModal />
            <ConnectToWalletModal />
            <ExportAccountModal />
            <NavMenu
              mode="horizontal"
              style={{
                borderBottomColor: 'transparent',
              }}
            >
              <NavButtonWrapper
                key="logo"
                usesidepanelbackground={usesidepanelbackground}
                style={{
                  width: `calc(${AppLayout.tradePanelWidth})`,
                  height: AppLayout.topNavBarHeight,
                  marginLeft: '0px',
                }}
              >
                <SiteLogo pushToTradePage={this.pushToTradePage} />
              </NavButtonWrapper>

              {onMaintenancePage === false && (
                <NavButtonWrapper key="trade" disabled={disableTopTabs}>
                  <NavButton
                    active={onTradePage ? 1 : 0}
                    onClick={() => {
                      this.pushToTradePage();
                    }}
                  >
                    <I s="Trade" />
                  </NavButton>
                </NavButtonWrapper>
              )}

              {/* {onMaintenancePage === false && (
                <NavButtonWrapper key="swap" disabled={disableTopTabs}>
                  <NavButton
                    active={this.props.pathname.includes('swap') ? 1 : 0}
                    onClick={() => {
                      history.push('/swap');
                    }}
                  >
                    <I s="Swap" />
                  </NavButton>
                </NavButtonWrapper>
              )} */}

              {onMaintenancePage === false && (
                <NavButtonWrapper
                  key="liquidity-mining"
                  disabled={disableTopTabs}
                >
                  <NavButton
                    active={
                      this.props.pathname.includes('liquidity-mining') ? 1 : 0
                    }
                    onClick={() => {
                      history.push('/liquidity-mining/rewards');
                    }}
                  >
                    <I s="Liquidity Mining" />
                  </NavButton>
                </NavButtonWrapper>
              )}

              {onMaintenancePage === false && (
                <NavButtonWrapper key="orders" disabled={disableTopTabs}>
                  <NavButton
                    active={this.props.pathname.includes('orders') ? 1 : 0}
                    onClick={() => {
                      history.push(`/orders/${getLastOrderPage()}`);
                    }}
                    disabled={account.state !== LOGGED_IN}
                  >
                    <I s="Orders" />
                  </NavButton>
                </NavButtonWrapper>
              )}
              {onMaintenancePage === false && (
                <NavButtonWrapper key="account" disabled={disableTopTabs}>
                  <NavButton
                    active={this.props.pathname.includes('account') ? 1 : 0}
                    onClick={() => {
                      history.push(`/account/${getLastAccountPage()}`);
                    }}
                    disabled={account.state !== LOGGED_IN}
                  >
                    <I s="Account" />
                  </NavButton>
                </NavButtonWrapper>
              )}

              {onMaintenancePage === false && (
                <NavButtonWrapper
                  key="entrance-button"
                  style={{
                    float: 'right',
                    paddingLeft: '0px',
                    paddingRight: '0px',
                    height: '50px',
                  }}
                >
                  <EntranceButton />
                </NavButtonWrapper>
              )}

              {onMaintenancePage === false && (
                <NavButtonWrapper
                  key="entrance-button-setting-popover"
                  style={{
                    float: 'right',
                    paddingLeft: '0px',
                    paddingRight: '0px',
                    height: '50px',
                  }}
                >
                  <span
                    style={{
                      display: 'inline-block',
                    }}
                  >
                    <SettingsPopover
                      visible={this.state.isSettingsVisible}
                      onVisibleChange={this.handleSettingsVisibleChange}
                    />
                  </span>
                </NavButtonWrapper>
              )}

              <NavButtonWrapper
                key="loopring-wallet-button"
                style={{
                  float: 'right',
                  paddingLeft: '0px',
                  paddingRight: '0px',
                  height: '50px',
                }}
              >
                <div
                  style={{
                    cursor: 'default',
                    display: 'flex',

                    alignItems: 'center',
                    justifyContent: 'center',
                    height: AppLayout.topNavBarHeight,
                  }}
                >
                  <LoopringWalletButton
                    onClick={() => {
                      window.open('https://loopring.io', '_blank');
                    }}
                  >
                    <I s="Loopring Wallet" />
                  </LoopringWalletButton>
                </div>
              </NavButtonWrapper>

              <NavButtonWrapper
                key="loopring-3-1-button"
                style={{
                  float: 'right',
                  paddingLeft: '0px',
                  paddingRight: '0px',
                  height: '50px',
                }}
              >
                <div
                  style={{
                    cursor: 'default',
                    display: 'flex',

                    alignItems: 'center',
                    justifyContent: 'center',
                    height: AppLayout.topNavBarHeight,
                  }}
                >
                  <LoopringWalletButton
                    style={{
                      paddingRight: '0px',
                    }}
                    onClick={() => {
                      window.open('https://exchange.loopring.io', '_blank');
                    }}
                  >
                    <I s="Goto Loopring v2" />
                  </LoopringWalletButton>
                </div>
              </NavButtonWrapper>
            </NavMenu>
          </div>

          <div className="mobile-layout">
            <NavMenu mode="horizontal">
              <NavButtonWrapper
                key="logo"
                style={{
                  width: `calc(${AppLayout.tradePanelWidth})`,
                  height: AppLayout.topNavBarHeight,
                  background: theme.background + '!important',
                  borderRightStyle: 'solid',
                  borderRightWidth: '1px',
                  borderRightColor: theme.foreground,
                }}
              >
                <SiteLogo />
              </NavButtonWrapper>
            </NavMenu>
          </div>
        </ConfigProvider>
      </div>
    );
  }

render() {
    const userPreferences = this.props.userPreferences;
    const language = userPreferences.language;
    let placeholder = language === 'en' ? 'Search market' : '搜索市场对';

    const { filter, groupSelect } = this.state;
    const { theme, exchange } = this.props;
    let markets =
      filter !== ''
        ? this.props.exchange.markets.filter(
            (x) => x.market.includes(filter.toUpperCase()) && x.enabled
          )
        : this.props.exchange.markets.filter((x) => x.enabled);

    markets = checkMarketIsNew(markets);

    if (groupSelect === 'new') {
      markets = markets.filter((x) => x.isNew);
    } else if (groupSelect === 'usdt') {
      markets = markets.filter(
        (x) =>
          x.market.includes('USDT') ||
          x.market.includes('USDC') ||
          x.market.includes('DAI')
      );
    } else if (groupSelect !== 'all') {
      markets = markets.filter((x) =>
        x.market.includes(groupSelect.toUpperCase())
      );
    }

    let updatedMarkets = [];
    for (let i = 0; i < markets.length; i = i + 1) {
      const market = markets[i];
      const tickers = this.state.tickers.filter(
        (x) => x.market === market.market
      );

      let updatedMarket = {
        ...market,
        baseToken: config.getTokenBySymbol(
          market.market.split('-')[0],
          this.props.exchange.tokens
        ),
        quoteToken: config.getTokenBySymbol(
          market.market.split('-')[1],
          this.props.exchange.tokens
        ),
      };
      if (tickers.length === 1) {
        updatedMarket['ticker'] = tickers[0];
      } else {
        updatedMarket['ticker'] = {
          percentChange24h: '-',
          volume: '-',
          close: '-',
        };
      }
      updatedMarkets.push(updatedMarket);
    }

    // Sort by volume. No need to sort alphabetically.
    updatedMarkets = sortByVolume(
      updatedMarkets,
      this.props.legalPrice.prices,
      exchange.tokens
    );

    const customizeRenderEmpty = () => (
      <EmptyTableIndicator text={'NoMarketSelects'} loading={false} />
    );

    return (
      <div
        style={{
          width: '400px',
        }}
      >
        <Radio.Group
          style={{
            width: '100%',
            paddingTop: '8px',
            paddingBottom: '8px',
          }}
          onChange={this.onGroupSelectChange}
          defaultValue="all"
        >
          <RadioButton value="all">ALL</RadioButton>
          <RadioButton value="lrc">LRC</RadioButton>
          <RadioButton value="eth">ETH</RadioButton>
          <RadioButton value="usdt">USD*</RadioButton>
          <RadioButton value="btc">BTC</RadioButton>
          <RadioButton value="new">New</RadioButton>
        </Radio.Group>

        <Row gutter={8}>
          <Col
            style={{
              paddingLeft: '10px',
              paddingRight: '0px',
              margin: 'auto 0px',
              color: theme.textWhite,
            }}
          >
            <span>
              <FontAwesomeIcon icon={faSearch} />
            </span>
          </Col>
          <Col span={5}>
            <SearchInput
              style={{
                margin: '4px 0',
                width: '140px',
                height: '30px !important',
                fontSize: '0.9rem !important',
              }}
              placeholder={placeholder}
              onChange={this.onSearchInputChange}
            />
          </Col>
        </Row>

        <div
          style={{
            paddingTop: '8px',
            maxHeight: 'calc(100vh - 230px)',
            overflowY: 'scroll',
          }}
        >
          <Spin spinning={this.state.tickers.length === 0}>
            <ConfigProvider
              renderEmpty={updatedMarkets.length === 0 && customizeRenderEmpty}
            >
              <List
                bordered
                dataSource={updatedMarkets}
                renderItem={(updatedMarket) => (
                  <div
                    onClick={() => {
                      this.clickedMarketItem(updatedMarket);
                    }}
                  >
                    <ListItem>
                      <AssetIcon
                        href={this.getAssetUrl(
                          updatedMarket.baseToken,
                          this.props.exchange.exchangeAddress
                        )}
                        target="_blank"
                        style={{
                          backgroundImage: this.getAssetIconUrl(
                            updatedMarket.baseToken
                          ),
                        }}
                      />

                      <span
                        style={{
                          width: '20%',
                          minWidth: '120px',
                        }}
                      >
                        <ColumnWrapper
                          textAlign="left"
                          isNew={updatedMarket.isNew}
                          row1={updatedMarket.market}
                          row2={<I s={updatedMarket.baseToken.name} />}
                        />
                      </span>
                      <span
                        style={{
                          width: '46%',
                          marginRight: '4%',
                        }}
                      >
                        <ColumnWrapper
                          textAlign="right"
                          row1={`${updatedMarket.ticker.volume} ${updatedMarket.quoteToken.symbol}`}
                          row2={<I s="24h Volume" />}
                        />
                      </span>
                      <span
                        style={{
                          width: '30%',
                        }}
                      >
                        <ColumnWrapper
                          textAlign="right"
                          row1={
                            updatedMarket.ticker.close
                              ? updatedMarket.ticker.close
                              : '-'
                          }
                          row2={`${updatedMarket.ticker.percentChange24h}%`}
                          row2Color={
                            updatedMarket.ticker.percentChange24h &&
                            updatedMarket.ticker.percentChange24h.startsWith(
                              '-'
                            )
                              ? theme.downColor
                              : theme.upColor
                          }
                        />
                      </span>
                    </ListItem>
                  </div>
                )}
              />
            </ConfigProvider>
          </Spin>
        </div>
      </div>
    );
  }

render() {
    const theme = this.props.theme;
    const customizeRenderEmpty = () => (
      <EmptyTableIndicator
        text={this.props.placeHolder}
        loading={this.props.loading}
      />
    );

    const columns = [
      {
        title: (
          <TextCompactTableHeader style={{ paddingLeft: '14px' }}>
            <I s="Timestamp" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'date',
        width: '10%',
      },
      {
        title: (
          <TextCompactTableHeader
            style={{
              paddingLeft: '14px',
            }}
          >
            <I s="Asset" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'asset',
        width: '16%',
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Amount" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'amount',
        width: '12%',
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Fee" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'fee',
        width: '12%',
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Tx Hash" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'txHash',
        width: '18%',
      },

      {
        title: (
          <TextCompactTableHeader>
            <I s="Type" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'depositType',
        width: '10%',
      },
      {
        title: (
          <TextCompactTableHeader
            style={{
              width: '100%',
              textAlign: 'center',
            }}
          >
            <div
              style={{
                textAlign: 'left',
                paddingRight: '14px',
              }}
            >
              <I s="Status" />
            </div>
          </TextCompactTableHeader>
        ),
        dataIndex: 'status',
        width: '14%',
      },
    ];

    const data = [];
    for (let i = 0; i < this.props.data.length; i++) {
      const transaction = this.props.data[i];
      var status = '-';
      if (transaction.status === 'processing') {
        status = (
          <LargeTableRowProcessing
            style={{ color: theme.highlight, textAlign: 'left' }}
          >
            <StatusFontAwesomeIcon icon={faCircleNotch} spin />
            <div>
              <I s="Processing" /> <WhyIcon text="StatusProcessing" />
            </div>
          </LargeTableRowProcessing>
        );
      } else if (transaction.status === 'processed') {
        status = (
          <LargeTableRowProcessed
            style={{ color: theme.green, textAlign: 'left' }}
          >
            <StatusFontAwesomeIcon icon={faCheckCircle} />
            <div>
              <I s="Succeeded" />
            </div>
          </LargeTableRowProcessed>
        );
      } else if (transaction.status === 'failed') {
        status = (
          <LargeTableRowFailed style={{ color: theme.red, textAlign: 'left' }}>
            <StatusFontAwesomeIcon icon={faExclamationCircle} />
            <div>
              <I s="Failed" />
            </div>
          </LargeTableRowFailed>
        );
      } else if (transaction.status === 'received') {
        status =
          this.props.blockNum - transaction.blockNum <= 30 ? (
            <LargeTableRowProcessing
              style={{ color: theme.orange, textAlign: 'left' }}
            >
              <StatusFontAwesomeIcon icon={faClock} />
              <div>
                <I s="Confirming" />(
                {Math.max(this.props.blockNum - transaction.blockNum, 0)} / 30)
                <WhyIcon text="StatusConfirming" />
              </div>
            </LargeTableRowProcessing>
          ) : (
            <LargeTableRowProcessing
              style={{ color: theme.highlight, textAlign: 'left' }}
            >
              <StatusFontAwesomeIcon icon={faCircleNotch} spin />
              <div>
                <I s="Processing" /> <WhyIcon text="StatusProcessing" />
              </div>
            </LargeTableRowProcessing>
          );
      }

      let type = '-';

      if (transaction.depositType === 'deposit') {
        type = <I s="Deposit" />;
      } else if (transaction.depositType === 'update_account') {
        type = <I s="Reset Layer-2 Keypair" />;
      } else {
        type = <I s="Activate Layer-2" />;
      }

      data.push({
        key: i,
        asset: (
          <LargeTableRow
            style={{
              paddingLeft: '14px',
            }}
          >
            {transaction.symbol} - <I s={transaction.tokenName} />
          </LargeTableRow>
        ),
        amount: (
          <LargeTableRow>
            {transaction.amountInUI} {transaction.symbol}
          </LargeTableRow>
        ),
        fee: (
          <LargeTableRow
            style={{
              color: theme.textDim,
            }}
          >
            {transaction.feeInUI} ETH
          </LargeTableRow>
        ),
        date: (
          <LargeTableRow
            style={{
              paddingLeft: '14px',
              color: theme.textDim,
            }}
          >
            {Moment(transaction.timestamp).format(theme.timeFormat)}
          </LargeTableRow>
        ),
        txHash: (
          <LargeTableRow>
            <a
              href={`${getEtherscanLink(this.props.chainId)}/tx/${
                transaction.txHash
              }`}
              target="_blank"
              rel="noopener noreferrer"
            >
              {transaction.txHashInUI}
            </a>
          </LargeTableRow>
        ),
        status: (
          <div
            style={{
              textAlign: 'center',
              paddingRight: '14px',
            }}
          >
            {status}
          </div>
        ),
        depositType: <LargeTableRow>{type}</LargeTableRow>,
      });
    }

    const hasPagination = this.props.total > this.props.limit;

    return (
      <SimpleTableContainer>
        <ConfigProvider renderEmpty={data.length === 0 && customizeRenderEmpty}>
          <TableLoadingSpin loading={this.props.loading}>
            <Table
              style={{
                height: `${data.length * 34 + 35}px`,
              }}
              columns={columns}
              dataSource={data}
              pagination={false}
              scroll={{
                y: `${data.length * 34}px`,
              }}
            />
          </TableLoadingSpin>
          {hasPagination ? (
            <Pagination
              style={{
                padding: '30px 0px 30px 0px',
                background: theme.background,
                textAlign: 'center',
              }}
              size=""
              total={this.props.total}
              current={this.props.current}
              onChange={this.props.onChange}
              pageSize={this.props.limit}
            />
          ) : (
            <div />
          )}
        </ConfigProvider>
      </SimpleTableContainer>
    );
  }

render() {
    const theme = this.props.theme;
    const customizeRenderEmpty = () => (
      <EmptyTableIndicator
        text={this.props.placeHolder}
        loading={this.props.loading}
      />
    );

    const columns = [
      {
        title: (
          <TextCompactTableHeader style={{ paddingLeft: '14px' }}>
            <I s="Timestamp" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'date',
        width: '10%',
      },
      {
        title: (
          <TextCompactTableHeader
            style={{
              paddingLeft: '14px',
            }}
          >
            <I s="Asset" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'asset',
        width: '16%',
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Amount" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'amount',
        width: '12%',
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="From/To" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'recipient',
        width: '12%',
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Fee" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'fee',
        width: '12%',
      },
      {
        title: (
          <TextCompactTableHeader
            style={{
              width: '100%',
              textAlign: 'center',
            }}
          >
            <I s="Memo" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'memo',
        width: '14%',
      },
      {
        title: (
          <TextCompactTableHeader
            style={{
              width: '100%',
              textAlign: 'center',
            }}
          >
            <div
              style={{
                textAlign: 'left',
                paddingRight: '14px',
              }}
            >
              <I s="Status" />
            </div>
          </TextCompactTableHeader>
        ),
        dataIndex: 'status',
        width: '14%',
      },
    ];

    const data = [];
    for (let i = 0; i < this.props.data.length; i++) {
      const transaction = this.props.data[i];
      var status = '-';
      if (transaction.status === 'processing') {
        status = (
          <LargeTableRowProcessing
            style={{ color: theme.highlight, textAlign: 'left' }}
          >
            <StatusFontAwesomeIcon icon={faCircleNotch} spin />
            <div>
              <I s="Processing" />
            </div>
          </LargeTableRowProcessing>
        );
      } else if (transaction.status === 'processed') {
        status = (
          <LargeTableRowProcessed
            style={{ color: theme.green, textAlign: 'left' }}
          >
            <StatusFontAwesomeIcon icon={faCheckCircle} />
            <div>
              <I s="Succeeded" />
            </div>
          </LargeTableRowProcessed>
        );
      } else if (transaction.status === 'failed') {
        status = (
          <LargeTableRowFailed style={{ color: theme.red, textAlign: 'left' }}>
            <StatusFontAwesomeIcon icon={faExclamationCircle} />
            <div>
              <I s="Failed" />
            </div>
          </LargeTableRowFailed>
        );
      } else if (transaction.status === 'received') {
        status = (
          <Tooltip placement="bottom" title={<I s={'StatusConfirming'} />}>
            <LargeTableRowProcessing
              style={{ color: theme.orange, textAlign: 'left' }}
            >
              <StatusFontAwesomeIcon icon={faClock} />

              <div>
                <I s="Confirming" />
              </div>
            </LargeTableRowProcessing>
          </Tooltip>
        );
      }

      let memo = transaction.memo;
      if (transaction.memo.toLowerCase() === 'update account reward') {
        memo = <I s="Update Account Reward" />;
      } else if (transaction.memo.toLowerCase() === 'reward') {
        memo = <I s="Reward" />;
      }

      data.push({
        key: i,
        asset: (
          <LargeTableRow
            style={{
              paddingLeft: '14px',
            }}
          >
            {transaction.symbol} - <I s={transaction.tokenName} />
          </LargeTableRow>
        ),
        amount: (
          <LargeTableRow
            style={{
              color:
                transaction.receiver === window.wallet.accountId
                  ? theme.buyPrimary
                  : theme.sellPrimary,
            }}
          >
            <span>
              {transaction.receiver === window.wallet.accountId ? '+' : '-'}
            </span>
            {transaction.amountInUI} {transaction.symbol}
          </LargeTableRow>
        ),
        recipient: (
          <LargeTableRow>
            <a
              href={`${getEtherscanLink(this.props.chainId)}/address/${
                transaction.receiver === window.wallet.accountId
                  ? transaction.senderAddress
                  : transaction.receiverAddress
              }`}
              target="_blank"
              rel="noopener noreferrer"
            >
              {transaction.receiver === window.wallet.accountId
                ? transaction.senderInUI
                : transaction.recipientInUI}
            </a>
          </LargeTableRow>
        ),
        fee: (
          <LargeTableRow
            style={{
              color: theme.textDim,
            }}
          >
            {transaction.feeInUI} {transaction.symbol}
          </LargeTableRow>
        ),
        date: (
          <LargeTableRow
            style={{
              paddingLeft: '14px',
              color: theme.textDim,
            }}
          >
            {Moment(transaction.timestamp).format(theme.timeFormat)}
          </LargeTableRow>
        ),
        status: (
          <div
            style={{
              textAlign: 'center',
              paddingRight: '14px',
            }}
          >
            {status}
          </div>
        ),
        memo: (
          <LargeTableRow
            style={{
              color: theme.textDim,
            }}
          >
            {memo}
          </LargeTableRow>
        ),
      });
    }

    const hasPagination = this.props.total > this.props.limit;

    return (
      <SimpleTableContainer>
        <ConfigProvider renderEmpty={data.length === 0 && customizeRenderEmpty}>
          <TableLoadingSpin loading={this.props.loading}>
            <Table
              style={{
                height: `${data.length * 34 + 35}px`,
              }}
              columns={columns}
              dataSource={data}
              pagination={false}
              scroll={{
                y: `${data.length * 34}px`,
              }}
            />
          </TableLoadingSpin>
          {hasPagination ? (
            <Pagination
              style={{
                padding: '30px 0px 30px 0px',
                background: theme.background,
                textAlign: 'center',
              }}
              size=""
              total={this.props.total}
              current={this.props.current}
              onChange={this.props.onChange}
              pageSize={this.props.limit}
            />
          ) : (
            <div />
          )}
        </ConfigProvider>
      </SimpleTableContainer>
    );
  }

render() {
    const theme = this.props.theme;
    const customizeRenderEmpty = () => (
      <EmptyTableIndicator
        text={this.props.placeHolder}
        loading={this.props.loading}
      />
    );

    const columns = [
      {
        title: (
          <TextCompactTableHeader
            style={{
              paddingLeft: '14px',
            }}
          >
            <I s="Timestamp" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'date',
        width: '10%',
      },
      {
        title: (
          <TextCompactTableHeader
            style={{
              paddingLeft: '14px',
            }}
          >
            <I s="Asset" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'asset',
        width: '16%',
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Amount Requested" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'amount',
        width: '10%',
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Amount Withdrawn" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'realAmount',
        width: '10%',
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Fee" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'fee',
        width: '10%',
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Request Tx" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'txHash',
        width: '12%',
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Withdraw Tx" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'withdrawHash',
        width: '12%',
      },
      {
        title: (
          <TextCompactTableHeader
            style={{
              width: '100%',
              textAlign: 'center',
            }}
          >
            <div
              style={{
                textAlign: 'left',
                paddingRight: '4px',
              }}
            >
              <I s="Status / Operations" />
            </div>
          </TextCompactTableHeader>
        ),
        dataIndex: 'status',
        width: '12%',
      },
    ];

    const data = [];
    for (let i = 0; i < this.props.data.length; i++) {
      const transaction = this.props.data[i];
      var status = '-';
      if (transaction.status === 'processing') {
        status = (
          <LargeTableRowProcessing
            style={{ color: theme.highlight, textAlign: 'left' }}
          >
            <StatusFontAwesomeIcon icon={faCircleNotch} spin />
            <div>
              <I s="Processing" /> <WhyIcon text="StatusProcessing" />
            </div>
          </LargeTableRowProcessing>
        );
      } else if (transaction.status === 'processed') {
        status = (
          <LargeTableRowProcessed
            style={{ color: theme.green, textAlign: 'left' }}
          >
            <StatusFontAwesomeIcon icon={faCheckCircle} />
            <div>
              <I s="Succeeded" />
            </div>
          </LargeTableRowProcessed>
        );
      } else if (transaction.status === 'failed') {
        status = (
          <LargeTableRowFailed style={{ color: theme.red, textAlign: 'left' }}>
            <StatusFontAwesomeIcon icon={faExclamationCircle} />
            <div>
              <I s="Claimable" />
              <DepositOutlineButton
                style={{
                  marginLeft: '8px',
                  marginRight: '8px',
                }}
                onClick={() => this.props.claim(transaction.requestId)}
              >
                <I s="Claim" />
              </DepositOutlineButton>
            </div>
          </LargeTableRowFailed>
        );
      } else if (transaction.status === 'received') {
        status =
          this.props.blockNum - transaction.blockNum <= 30 ? (
            <LargeTableRowProcessing
              style={{ color: theme.orange, textAlign: 'left' }}
            >
              <StatusFontAwesomeIcon icon={faClock} />
              <div>
                <I s="Confirming" />(
                {Math.max(this.props.blockNum - transaction.blockNum, 0)} / 30)
                <WhyIcon text="StatusConfirming" />
              </div>
            </LargeTableRowProcessing>
          ) : (
            <LargeTableRowProcessing
              style={{ color: theme.highlight, textAlign: 'left' }}
            >
              <StatusFontAwesomeIcon icon={faCircleNotch} spin />
              <div>
                <I s="Processing" /> <WhyIcon text="StatusProcessing" />
              </div>
            </LargeTableRowProcessing>
          );
      }
      data.push({
        key: i,
        asset: (
          <LargeTableRow
            style={{
              paddingLeft: '14px',
            }}
          >
            {transaction.symbol} - <I s={transaction.tokenName} />
          </LargeTableRow>
        ),
        amount: (
          <LargeTableRow>
            {transaction.amountInUI} {transaction.symbol}
          </LargeTableRow>
        ),
        realAmount: (
          <LargeTableRow>
            {transaction.realAmountInUI} {transaction.symbol}
          </LargeTableRow>
        ),
        fee: (
          <LargeTableRow
            style={{
              color: theme.textDim,
            }}
          >
            {transaction.feeInUI} ETH
          </LargeTableRow>
        ),
        date: (
          <LargeTableRow
            style={{
              paddingLeft: '14px',
              color: theme.textDim,
            }}
          >
            {Moment(transaction.timestamp).format(theme.timeFormat)}
          </LargeTableRow>
        ),
        txHash: (
          <LargeTableRow>
            <a
              href={`${getEtherscanLink(this.props.chainId)}/tx/${
                transaction.txHash
              }`}
              target="_blank"
              rel="noopener noreferrer"
            >
              {transaction.txHashInUI}
            </a>
          </LargeTableRow>
        ),
        withdrawHash: (
          <LargeTableRow>
            <a
              href={`${getEtherscanLink(this.props.chainId)}/tx/${
                transaction.distributeHash
              }`}
              target="_blank"
              rel="noopener noreferrer"
            >
              {transaction.distributeHashInUI}
            </a>
          </LargeTableRow>
        ),
        status: (
          <div
            style={{
              textAlign: 'center',
              paddingRight: '14px',
            }}
          >
            {status}
          </div>
        ),
      });
    }

    const hasPagination = this.props.total > this.props.limit;

    return (
      <SimpleTableContainer>
        <ConfigProvider renderEmpty={data.length === 0 && customizeRenderEmpty}>
          <TableLoadingSpin loading={this.props.loading}>
            <Table
              style={{
                height: `${data.length * 34 + 35}px`,
              }}
              columns={columns}
              dataSource={data}
              pagination={false}
              scroll={{
                y: `${data.length * 34}px`,
              }}
            />
          </TableLoadingSpin>
          {hasPagination ? (
            <Pagination
              style={{
                padding: '30px 0px 30px 0px',
                background: theme.background,
                textAlign: 'center',
              }}
              size=""
              total={this.props.total}
              current={this.props.current}
              onChange={this.props.onChange}
              pageSize={this.props.limit}
            />
          ) : (
            <div />
          )}
        </ConfigProvider>
      </SimpleTableContainer>
    );
  }

render() {
    const theme = this.props.theme;
    const customizeRenderEmpty = () => (
      <EmptyTableIndicator
        text={this.props.placeHolder}
        loading={this.props.loading}
        marginTop={'100px'}
      />
    );

    const columns = [
      {
        title: (
          <TextCompactTableHeader
            style={{
              paddingLeft: '14px',
            }}
          >
            <I s="Time" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'time',
        width: '40%',
      },
      {
        title: (
          <TextCompactTableHeader>
            <div
              style={{
                textAlign: 'right',
                paddingRight: '14px',
                width: '100%',
              }}
            >
              <I s="My Amount" /> ({this.props.quoteToken})
            </div>
          </TextCompactTableHeader>
        ),
        dataIndex: 'amount',
      },
    ];

    const data = [];
    for (let i = 0; i < this.props.data.length; i++) {
      const reward = this.props.data[i];
      data.push({
        key: i,
        time: (
          <LargeTableRow
            style={{
              paddingLeft: '14px',
            }}
          >
            {Moment(reward['startAt']).format(theme.shortTimeFormat)} -{' '}
            {Moment(reward['startAt'] + 3600000).format('HH:mm')}
          </LargeTableRow>
        ),
        market: <LargeTableRow>{reward['market']}</LargeTableRow>,
        amount: (
          <LargeTableRow
            style={{
              textAlign: 'right',
              paddingRight: '14px',
            }}
          >
            {reward['amount']}
          </LargeTableRow>
        ),
      });
    }

    const hasPagination = this.props.total > this.props.limit;

    return (
      <div>
        <SimpleTableContainer
          style={{
            minHeight: '300px',
            background: theme.foreground,
          }}
        >
          <ConfigProvider
            renderEmpty={data.length === 0 && customizeRenderEmpty}
          >
            <TableLoadingSpin loading={this.props.loading}>
              <Table
                style={{
                  height: `${10 * 34 + 35}px`,
                }}
                columns={columns}
                dataSource={data}
                pagination={false}
                scroll={{
                  y: `${data.length * 34}px`,
                }}
              />
            </TableLoadingSpin>
            {hasPagination ? (
              <Pagination
                style={{
                  padding: '10px 0px 30px 0px',
                  background: theme.background,
                  textAlign: 'center',
                }}
                size=""
                total={this.props.total}
                current={this.props.current}
                onChange={this.props.onChange}
                pageSize={this.props.limit}
                showLessItems={true}
              />
            ) : (
              <div />
            )}
          </ConfigProvider>
        </SimpleTableContainer>
      </div>
    );
  }

render() {
    const theme = this.props.theme;
    const customizeRenderEmpty = () => (
      <EmptyTableIndicator
        text={this.props.placeHolder}
        loading={this.props.loading}
        marginTop={'100px'}
      />
    );

    const columns = [
      {
        title: (
          <TextCompactTableHeader
            style={{
              paddingLeft: '14px',
            }}
          >
            <I s="Ranking" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'rank',
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Account ID" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'accountId',
      },
      {
        title: (
          <TextCompactTableHeader>
            <div
              style={{
                textAlign: 'right',
                paddingRight: '14px',
                width: '100%',
              }}
            >
              <I s="Rewards" /> ({this.props.quoteToken})
            </div>
          </TextCompactTableHeader>
        ),
        dataIndex: 'reward',
        width: '40%',
      },
    ];

    const data = [];
    for (let i = 0; i < this.props.data.length; i++) {
      const reward = this.props.data[i];
      const rewardNum = Number(reward['rank']);
      const icon =
        rewardNum <= 3 ? (
          <FontAwesomeIcon
            icon={faCrown}
            style={{
              margin: 'auto auto auto 4px',
              color: this.props.theme.orange,
            }}
          />
        ) : (
          <div />
        );
      data.push({
        key: i,
        rank: (
          <LargeTableRow
            style={{
              paddingLeft: '14px',
            }}
          >
            {rewardNum}
          </LargeTableRow>
        ),
        accountId: (
          <LargeTableRow>
            {reward['accountId']} {icon}
          </LargeTableRow>
        ),
        reward: (
          <LargeTableRow
            style={{
              textAlign: 'right',
              paddingRight: '14px',
            }}
          >
            {reward['reward']}
          </LargeTableRow>
        ),
      });
    }

    const hasPagination = this.props.total > this.props.limit;

    return (
      <div>
        <SimpleTableContainer
          style={{
            minHeight: '715px',
            background: theme.popupHeaderBackground,
          }}
        >
          <ConfigProvider
            renderEmpty={data.length === 0 && customizeRenderEmpty}
          >
            <TableLoadingSpin loading={this.props.loading}>
              <Table
                style={{
                  height: `${data.length * 34 + 35}px`,
                }}
                columns={columns}
                dataSource={data}
                pagination={false}
                scroll={{
                  y: `${data.length * 34}px`,
                }}
              />
            </TableLoadingSpin>
            {hasPagination ? (
              <Pagination
                style={{
                  padding: '30px 0px 30px 0px',
                  background: theme.background,
                  textAlign: 'center',
                }}
                size=""
                total={this.props.total}
                current={this.props.current}
                onChange={this.props.onChange}
                pageSize={this.props.limit}
              />
            ) : (
              <div />
            )}
          </ConfigProvider>
        </SimpleTableContainer>
      </div>
    );
  }

CommisionRewardMyRewardTable = ({
  placeHolder,
  loading,
  data,
  total,
  limit,
  current,
  onChange,
}) => {
  const theme = useContext(ThemeContext);
  const customizeRenderEmpty = () => (
    <EmptyTableIndicator
      text={placeHolder}
      loading={loading}
      marginTop={'100px'}
    />
  );

  const columns = [
    {
      title: (
        <TextCompactTableHeader
          style={{
            paddingLeft: '14px',
          }}
        >
          <I s="Time" />
        </TextCompactTableHeader>
      ),
      dataIndex: 'time',
      width: '40%',
    },
    {
      title: (
        <TextCompactTableHeader>
          <div
            style={{
              textAlign: 'right',
              paddingRight: '14px',
              width: '100%',
            }}
          >
            <I s="Amount" />
          </div>
        </TextCompactTableHeader>
      ),
      dataIndex: 'amount',
    },
  ];

  const dataSource = [];
  for (let i = 0; i < data.length; i++) {
    const reward = data[i];
    dataSource.push({
      key: i,
      time: (
        <LargeTableRow
          style={{
            paddingLeft: '14px',
          }}
        >
          {Moment(reward['startAt']).format(theme.shortTimeFormat)} -{' '}
          {Moment(reward['startAt'] + 3600000).format('HH:mm')}
        </LargeTableRow>
      ),
      market: <LargeTableRow>{reward['market']}</LargeTableRow>,
      amount: (
        <LargeTableRow
          style={{
            textAlign: 'right',
            paddingRight: '14px',
          }}
        >
          {reward['amount']}
        </LargeTableRow>
      ),
    });
  }

  const hasPagination = total > limit;

  return (
    <div>
      <SimpleTableContainer
        style={{
          minHeight: '300px',
          background: theme.foreground,
        }}
      >
        <ConfigProvider
          renderEmpty={dataSource.length === 0 && customizeRenderEmpty}
        >
          <TableLoadingSpin loading={loading}>
            <Table
              style={{
                height: `${10 * 34 + 35}px`,
              }}
              columns={columns}
              dataSource={dataSource}
              pagination={false}
              scroll={{
                y: `${dataSource.length * 34}px`,
              }}
            />
          </TableLoadingSpin>
          {hasPagination ? (
            <Pagination
              style={{
                padding: '10px 0px 30px 0px',
                background: theme.background,
                textAlign: 'center',
              }}
              size=""
              total={total}
              current={current}
              onChange={onChange}
              pageSize={limit}
              showLessItems={true}
            />
          ) : (
            <div />
          )}
        </ConfigProvider>
      </SimpleTableContainer>
    </div>
  );
}

render() {
    const theme = this.props.theme;
    const current =
      Math.floor(
        this.props.myOrderPage.transactionsOffset /
          this.props.myOrderPage.transactionsLimit
      ) + 1;

    const customizeRenderEmpty = () => (
      <EmptyTableIndicator
        text={'NoHistoryOrders'}
        loading={this.props.myOrderPage.isTransactionsLoading}
      />
    );

    const columns = [
      {
        title: (
          <TextCompactTableHeader
            style={{
              paddingLeft: '14px',
            }}
          >
            <I s="Filled At" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'date',
        width: '15%',
      },
      {
        title: (
          <TextCompactTableHeader
            style={{
              paddingLeft: '14px',
            }}
          >
            <I s="Market" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'market',
        width: '10%',
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Side" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'side',
        width: '8%',
      },

      {
        title: (
          <TextCompactTableHeader>
            <I s="Fill Amount" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'size',
        width: '15%',
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Price" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'price',
        width: '15%',
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Order Total" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'total',
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Fee" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'fee',
        width: '15%',
      },
    ];

    const data = [];
    for (let i = 0; i < this.props.myOrderPage.transactions.length; i++) {
      const order = this.props.myOrderPage.transactions[i];

      data.push({
        key: i,
        side: (
          <LargeTableRow
            style={{
              color:
                order.side === 'BUY' ? theme.buyPrimary : theme.sellPrimary,
            }}
          >
            {order.side === 'BUY' ? <I s="Buy" /> : <I s="Sell" />}
          </LargeTableRow>
        ),
        market: (
          <LargeTableRow
            style={{
              paddingLeft: '14px',
            }}
          >
            <a
              onClick={() => {
                history.push(`/trade/${order.market}`);
              }}
            >
              {order.market}{' '}
            </a>
          </LargeTableRow>
        ),
        size: (
          <LargeTableRow>
            {order.sizeInString} {order.market.split('-')[0]}
          </LargeTableRow>
        ),
        price: (
          <LargeTableRow
            style={{
              color:
                order.side === 'BUY' ? theme.buyPrimary : theme.sellPrimary,
            }}
          >
            {Number(order.price)} {order.market.split('-')[1]}
          </LargeTableRow>
        ),
        total: (
          <LargeTableRow>
            {order.totalInString} {order.quoteToken}
          </LargeTableRow>
        ),
        fee: (
          <LargeTableRow
            style={{
              color: theme.textDim,
            }}
          >
            {order.feeInString}{' '}
            {order.side === 'BUY'
              ? order.market.split('-')[0]
              : order.market.split('-')[1]}
          </LargeTableRow>
        ),
        date: (
          <LargeTableRow
            style={{
              color: theme.textDim,
              textAlign: 'left',
              paddingLeft: '14px',
            }}
          >
            {Moment(order.timestamp).format(theme.timeFormat)}
          </LargeTableRow>
        ),
      });
    }

    const hasPagination =
      this.props.myOrderPage.transactionsTotalNum >
      this.props.myOrderPage.transactionsLimit;

    return (
      <div>
        <Header />
        <LargeTableContainer>
          <ConfigProvider
            renderEmpty={data.length === 0 && customizeRenderEmpty}
          >
            <TableLoadingSpin
              loading={this.props.myOrderPage.isTransactionsLoading}
            >
              <Table
                style={{
                  borderStyle: 'none',
                  borderWidth: '0px',
                  height: `${
                    this.props.myOrderPage.transactions.length * 34 + 35
                  }px`,
                  minHeight: '500px',
                }}
                columns={columns}
                dataSource={data}
                pagination={false}
                scroll={{
                  y: `${this.props.myOrderPage.transactions.length * 34}px`,
                }}
              />
            </TableLoadingSpin>
            {hasPagination ? (
              <Pagination
                style={{
                  padding: '30px 0px 30px 0px',
                  background: theme.background,
                  textAlign: 'center',
                }}
                size=""
                total={this.props.myOrderPage.transactionsTotalNum}
                current={current}
                onChange={this.onChange}
                pageSize={this.props.myOrderPage.transactionsLimit}
              />
            ) : (
              <div />
            )}
          </ConfigProvider>
        </LargeTableContainer>
      </div>
    );
  }

render() {
    const theme = this.props.theme;
    const customizeRenderEmpty = () => (
      <EmptyTableIndicator
        text={'NoHistoryOrders'}
        loading={this.props.loading}
      />
    );

    const columns = [
      {
        title: (
          <TextCompactTableHeader
            style={{
              paddingLeft: '14px',
            }}
          >
            <I s="CreatedAt" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'createdAt',
        width: 180,
      },
      {
        title: (
          <TextCompactTableHeader
            style={{
              paddingLeft: '14px',
            }}
          >
            <I s="Market" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'market',
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Side" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'side',
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Fill Amount" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'fillAmount',
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Fill Pctg" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'filled',
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Amount" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'size',
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Order Price" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'price',
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Order Total" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'total',
      },
      {
        title: (
          <TextCompactTableHeader>
            <I s="Fee" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'fee',
      },
      {
        title: (
          <TextCompactTableHeader
            style={{
              width: '100%',
              textAlign: 'center',
              paddingRight: '14px',
            }}
          >
            <I s="Status / Operations" />
          </TextCompactTableHeader>
        ),
        dataIndex: 'status',
      },
    ];

    const data = [];
    for (let i = 0; i < this.props.data.length; i++) {
      const order = this.props.data[i];

      var status = '-';
      if (order.status === 'processing' || order.status === 'waiting') {
        status = (
          <LargeTableRowStatus
            style={{
              textAlign: 'left',
            }}
          >
            <CancelOrderButton
              onClick={(e) => {
                e.preventDefault();
                this.onClickCancel(order);
              }}
            >
              <I s="Cancel" />
            </CancelOrderButton>
          </LargeTableRowStatus>
        );
      } else if (order.status === 'processed') {
        status = (
          <LargeTableRowProcessed
            style={{
              textAlign: 'left',
            }}
          >
            <div>
              <I s="Filled" />
            </div>
          </LargeTableRowProcessed>
        );
      } else if (order.status === 'failed') {
        status = (
          <LargeTableRowFailed
            style={{
              textAlign: 'left',
            }}
          >
            <div>
              <I s="Failed" />
            </div>
          </LargeTableRowFailed>
        );
      } else if (
        order.status === 'cancelling' ||
        order.status === 'cancelled'
      ) {
        status = (
          <LargeTableRowStatus
            style={{
              textAlign: 'left',
            }}
          >
            <div>
              <I s="Cancelled" />
            </div>
          </LargeTableRowStatus>
        );
      } else if (order.status === 'expired') {
        status = (
          <LargeTableRowStatus>
            <div>
              <I s="Expired" />
            </div>
          </LargeTableRowStatus>
        );
      }
      data.push({
        key: i,
        side: (
          <LargeTableRow
            style={{
              color:
                order.side === 'BUY' ? theme.buyPrimary : theme.sellPrimary,
            }}
          >
            {order.side === 'BUY' ? <I s="Buy" /> : <I s="Sell" />}
          </LargeTableRow>
        ),
        market: (
          <LargeTableRow
            style={{
              paddingLeft: '14px',
            }}
          >
            <a
              onClick={() => {
                history.push(`/trade/${order.market}`);
              }}
            >
              {order.market}{' '}
            </a>
          </LargeTableRow>
        ),
        size: <LargeTableRow>{order.sizeInString} </LargeTableRow>,
        filled: (
          <LargeTableRow
            style={{
              color: theme.textWhite,
            }}
          >
            {order.filled}
          </LargeTableRow>
        ),
        fillAmount: <LargeTableRow>{order.filledSizeInString} </LargeTableRow>,
        price: (
          <LargeTableRow
            style={{
              color:
                order.side === 'BUY' ? theme.buyPrimary : theme.sellPrimary,
            }}
          >
            {order.price}
          </LargeTableRow>
        ),
        total: (
          <LargeTableRow>
            {order.totalInString} {order.quoteToken}
          </LargeTableRow>
        ),
        fee: (
          <LargeTableRow
            style={{
              color: theme.textDim,
            }}
          >
            {order.feeInString}{' '}
            {order.feeInString !== '-'
              ? order.side === 'BUY'
                ? order.market.split('-')[0]
                : order.market.split('-')[1]
              : ''}
          </LargeTableRow>
        ),
        createdAt: (
          <LargeTableRow
            style={{
              paddingLeft: '14px',
              color: theme.textDim,
            }}
          >
            {Moment(order.createdAt).format(theme.timeFormat)}
          </LargeTableRow>
        ),
        status: (
          <div
            style={{
              textAlign: 'center',
              paddingRight: '14px',
            }}
          >
            {status}
          </div>
        ),
      });
    }

    const hasPagination = this.props.total > this.props.limit;

    return (
      <LargeTableContainer>
        <ConfigProvider renderEmpty={data.length === 0 && customizeRenderEmpty}>
          <TableLoadingSpin loading={this.props.loading}>
            <Table
              style={{
                borderStyle: 'none',
                borderWidth: '0px',
                height: `${data.length * 34 + 35}px`,
                minHeight: '500px',
              }}
              columns={columns}
              dataSource={data}
              pagination={false}
              scroll={{
                y: `${data.length * 34}px`,
              }}
            />
          </TableLoadingSpin>
          {hasPagination ? (
            <Pagination
              style={{
                padding: '30px 0px 30px 0px',
                background: theme.background,
                textAlign: 'center',
              }}
              size=""
              total={this.props.total}
              current={this.props.current}
              onChange={this.props.onChange}
              pageSize={this.props.limit}
            />
          ) : (
            <div />
          )}
        </ConfigProvider>
      </LargeTableContainer>
    );
  }

render() {
    const theme = this.props.theme;
    const emptyTableIndicator = () => (
      <EmptyTableIndicator
        text={'NoOpenOrders'}
        marginTop={'4%'}
        loading={this.props.loading}
      />
    );

    const data = [];
    for (let i = 0; i < this.props.data.length; i++) {
      const order = this.props.data[i];

      var status = '-';
      if (order.status === 'processing' || order.status === 'waiting') {
        status = (
          <CancelOrderButton
            onClick={(e) => {
              e.preventDefault();
              this.onClickCancel(order);
            }}
          >
            <I s="Cancel" />
          </CancelOrderButton>
        );
      } else if (order.status === 'processed') {
        status = <I s="Filled" />;
      } else if (order.status === 'failed') {
        status = <I s="Failed" />;
      } else if (
        order.status === 'cancelling' ||
        order.status === 'cancelled'
      ) {
        status = <I s="Cancelled" />;
      } else if (order.status === 'expired') {
        status = <I s="Expired" />;
      }
      data.push({
        key: i,
        side: (
          <LargeTableRow
            style={{
              color:
                order.side === 'BUY' ? theme.buyPrimary : theme.sellPrimary,
            }}
          >
            {order.side === 'BUY' ? <I s="Buy" /> : <I s="Sell" />}
          </LargeTableRow>
        ),
        market: <LargeTableRow>{order.market}</LargeTableRow>,
        size: (
          <LargeTableRow>
            {isNaN(order.sizeInString) ? '--' : order.sizeInString}
          </LargeTableRow>
        ),
        fill_pctg: (
          <LargeTableRow
            style={{
              color: theme.textWhite,
            }}
          >
            {isNaN(order.filled.substr(0, order.filled.length - 1))
              ? '--'
              : order.filled}
          </LargeTableRow>
        ),
        price: (
          <LargeTableRow
            style={{
              color:
                order.side === 'BUY' ? theme.buyPrimary : theme.sellPrimary,
            }}
          >
            {order.price}
          </LargeTableRow>
        ),
        total: (
          <LargeTableRow>
            {isNaN(order.totalInString)
              ? '--'
              : `${order.totalInString} ${order.quoteToken}`}
          </LargeTableRow>
        ),
        date: (
          <LargeTableRow
            style={{
              paddingLeft: '14px',
              color: theme.textDim,
            }}
          >
            {Moment(order.createdAt).format(theme.timeFormat)}
          </LargeTableRow>
        ),
        status: (
          <LargeTableRow
            style={{
              color: theme.textDim,
              textAlign: 'center',
            }}
          >
            {status}
          </LargeTableRow>
        ),
      });
    }

    return (
      <TableWrapper>
        <ConfigProvider renderEmpty={data.length === 0 && emptyTableIndicator}>
          <TableLoadingSpin loading={this.props.loading}>
            <Table
              style={{
                borderStyle: 'none',
                borderWidth: '0px',
                height:
                  this.props.total > this.props.limit
                    ? AppLayout.tradeOrderBaseTableHeight
                    : AppLayout.tradeOrderBaseTableHeightNoPagination,
              }}
              size="middle"
              tableLayout={'fixed'}
              columns={this.state.columns}
              dataSource={data}
              pagination={false}
              scroll={{
                y:
                  this.props.total > this.props.limit
                    ? AppLayout.tradeOrderBaseTableScrollY
                    : AppLayout.tradeOrderBaseTableScrollYNoPagination,
              }}
            />
          </TableLoadingSpin>
          {this.props.total > this.props.limit ? (
            <SmallPagination
              size="small"
              style={{ background: theme.spreadAggregationBackground }}
              total={this.props.total}
              current={this.props.current}
              onChange={this.props.onChange}
              pageSize={this.props.limit}
            />
          ) : (
            <div />
          )}
        </ConfigProvider>
      </TableWrapper>
    );
  }