antd#ConfigProvider JavaScript Examples

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

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

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>
  );
}

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>
    );
  }

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>
      </>
    );
  }

Localization = ({ children, settings: { locale } }) => {
  const currentLocale = locales[locale]
  return (
    <ConfigProvider locale={currentLocale.localeAntd}>
      <IntlProvider locale={currentLocale.locale} messages={currentLocale.messages}>
        {children}
      </IntlProvider>
    </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'),
  );
}

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

render() {
    const { children = {} } = this.props
    return (
      <ConfigProvider locale={zhCN}>
        <Layout>
          <Content style={{ minHeight: '100vh' }}>{children}</Content>
        </Layout>
      </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>
    );
  }

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>
  );
}

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

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

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={locale}>
    <Provider store={store}>
      <Routers />
    </Provider>
  </ConfigProvider>,
  document.getElementById('root'),
);

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 customizeRenderEmpty = () => (
      <EmptyTableIndicator
        text={this.props.placeHolder}
        loading={this.props.loading}
      />
    );



    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 = (
          <span
            style={{ color: theme.highlight, textAlign: "left" }}
          >
            <StatusFontAwesomeIcon icon={faCircleNotch} spin />
            <span>
              <I s="Processing" />
            </span>
          </span>
        );
      } else if (transaction.status === "processed") {
        status = (
          <span
            style={{ color: theme.green, textAlign: "left" }}
          >
            <StatusFontAwesomeIcon icon={faCheckCircle} />
            <span>
              <I s="Succeeded" />
            </span>
          </span>
        );
      } else if (transaction.status === "failed") {
        status = (
          <span style={{ color: theme.red, textAlign: "left" }}>
            <StatusFontAwesomeIcon icon={faExclamationCircle} />
            <span>
              <I s="Failed" />
            </span>
          </span>
        );
      } else if (transaction.status === "received") {
        status = (
          <Tooltip placement="bottom" title={<I s={"StatusConfirming"} />}>
            <span
              style={{ color: theme.orange, textAlign: "left" }}
            >
              <StatusFontAwesomeIcon icon={faClock} />

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

      data.push({
        key: i,
        asset: (
          <span
            style={{
              paddingLeft: "14px",
            }}
          >
            {transaction.symbol} - <I s={transaction.tokenName} />
          </span>
        ),
        icon: (
          <Avatar src={`assets/images/${transaction.symbol}.svg`} />
        ),
        amount: (
          <span
            style={{
              color:
                transaction.receiver === window.wallet.accountId
                  ? theme.buyPrimary
                  : theme.sellPrimary,
            }}
          >
            <span>
              {transaction.receiver === window.wallet.accountId ? "+" : "-"}
            </span>
            {transaction.amountInUI} {transaction.symbol}
          </span>
        ),
        recipient: (
          <span>
            {transaction.receiver === window.wallet.accountId ? transaction.senderInUI : transaction.recipientInUI}
          </span>
        ),
        type: (
          <span>
            {transaction.receiver === window.wallet.accountId ? "Received" : "Sent" }
          </span>
        ),
        memo: (
          <span>
            {transaction.memo}
          </span>
        ),
        status: (
          <span
            style={{
              display: "inlineBlock",
              paddingLeft: "8px",
            }}
          >
            {status}
          </span>
        )
      });
    }

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

    return (
      <ConfigProvider renderEmpty={data.length === 0 && customizeRenderEmpty}>
        <List
          itemLayout="horizontal"
          dataSource={data}
          size="large"
          renderItem={transaction => (
            <List.Item style={{
              paddingLeft: '0',
              paddingRight: '0',
            }}>
              
              <List.Item.Meta
                avatar={transaction.icon}
                title={<span>{transaction.type}{transaction.status}</span>}
                description={transaction.recipient}
              />
              <div className="">
                <span className="text-weight-bold d-block mt-3 ml-5 pl-4 mt-lg-0 ml-lg-0 pl-lg-0 text-lg-right">{transaction.amount} <I s={transaction.symbol} /></span>
                <span className="text-weight-bold d-block ml-5 pl-4 ml-lg-0 pl-lg-0 h5 text-lg-right">{transaction.memo}</span>
              </div>
            </List.Item>
          )}
        />
      </ConfigProvider>
    );
  }

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


    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 = (
          <span
            style={{ color: theme.highlight, textAlign: "left" }}
          >
            <StatusFontAwesomeIcon icon={faCircleNotch} spin />
            <span>
              <I s="Processing" /> <WhyIcon text="StatusProcessing" />
            </span>
          </span>
        );
      } else if (transaction.status === "processed") {
        status = (
          <span
            style={{ color: theme.green, textAlign: "left" }}
          >
            <StatusFontAwesomeIcon icon={faCheckCircle} />
            <span>
              <I s="Succeeded" />
            </span>
          </span>
        );
      } else if (transaction.status === "failed") {
        status = (
          <span style={{ color: theme.red, textAlign: "left" }}>
            <StatusFontAwesomeIcon icon={faExclamationCircle} />
            <span>
              <I s="Failed" />
            </span>
          </span>
        );
      } else if (transaction.status === "received") {
        status = (
          <span
            style={{ color: theme.orange, textAlign: "left" }}
          >
            <StatusFontAwesomeIcon icon={faClock} />

            <span>
              {this.props.blockNum - transaction.blockNum <= 30 ? (
                <span>
                  <I s="Confirming" /> <WhyIcon text="StatusConfirming" />(
                  {Math.max(this.props.blockNum - transaction.blockNum, 0)} /
                  30)
                </span>
              ) : (
                <span>
                  <I s="Processing" /> <WhyIcon text="StatusProcessing" />
                </span>
              )}
            </span>
          </span>
        );
      }
      data.push({
        key: i,
        asset: (
          <span
            style={{
              paddingLeft: "14px",
            }}
          >
            {transaction.symbol} - <I s={transaction.tokenName} />
          </span>
        ),
        icon: (
          <Avatar src={`assets/images/${transaction.symbol}.svg`} />
        ),
        amount: (
          <span>
            {transaction.amountInUI} {transaction.symbol}
          </span>
        ),
        realAmount: (
          <span>
            {transaction.realAmountInUI} {transaction.symbol}
          </span>
        ),
        fee: (
          <span>
            {transaction.feeInUI} ETH
          </span>
        ),
        date: (
          <span
            style={{
              paddingLeft: "14px",
              color: theme.textDim,
            }}
          >
            {Moment(transaction.timestamp).format(theme.timeFormat)}
          </span>
        ),
        txHash: (
          <span>
            <a
              href={`${getEtherscanLink(this.props.chainId)}/tx/${
                transaction.txHash
              }`}
              target="_blank"
              rel="noopener noreferrer"
            >
              {transaction.txHashInUI}
            </a>
          </span>
        ),
        withdrawHash: (
          <span>
            <a
              href={`${getEtherscanLink(this.props.chainId)}/tx/${
                transaction.distributeHash
              }`}
              target="_blank"
              rel="noopener noreferrer"
            >
              {transaction.distributeHashInUI}
            </a>
          </span>
        ),
        status: (
          <span>
            {status}
          </span>
        ),
      });
    }

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

    return (
      <ConfigProvider renderEmpty={data.length === 0 && customizeRenderEmpty}>
      <List
        itemLayout="horizontal"
        dataSource={data}
        size="large"
        renderItem={transaction => (
          <List.Item style={{
            paddingLeft: '0',
            paddingRight: '0',
          }}>
            
            <List.Item.Meta
              avatar={transaction.icon}
              title={"Withdrawn"}
              description={transaction.status}
            />
            <div>
              <span className="text-weight-bold d-block mt-3 ml-5 pl-4 mt-lg-0 ml-lg-0 pl-lg-0 text-lg-right">{transaction.amount} <I s={transaction.symbol} /></span>
              <span className="text-weight-bold d-block ml-5 pl-4 ml-lg-0 pl-lg-0 h5 text-lg-right">Loopring fee: {transaction.fee}</span>
            </div>
          </List.Item>
        )}
      />
    </ConfigProvider>
    );
  }

LayoutTable = memo(function LayoutTable({ btnGrounp,
  iconGrounp, tableTitle, tableProps, pagaTionProps, loading, receive, children }) {

  const [tableSize, setTableSize] = useState('middle');

  const [pagaTionSize, setPagaTionSize] = useState('default');

  const [columns, setColumns] = useState(tableProps.columns);

  const elemet = useRef(null);

  const tableSizeFunc = (size) => {
    setTableSize(size)
    setPagaTionSize(size === "small" ? 'small' : 'default')
  }

  const filterColunsFunc = (val) => { // 动态控制colum
    setColumns(val);
  }

  const defauluIcon = [
    {
      component: <Tooltip title='刷新' placement="bottom">
        <SyncOutlined onClick={(event) => receive(event)} className='svg-fontSize' />
      </Tooltip>
    }, {
      component: <Filter tablecolumns={tableProps.columns} filterColunsFunc={filterColunsFunc} className='svg-fontSize' />
    }, {
      component: <TableSize tableSize={tableSizeFunc} className='svg-fontSize' />
    }, {
      component: <FullScreeOut elementObj={elemet.current} className='svg-fontSize' />
    }
  ];
  return (
    <ConfigProvider getPopupContainer={() => (elemet.current || document.body)}>
      <div className={style.layoutTable} ref={elemet}>
        {
          // 占位，可以是select或者其他外传的组件
          children ? <div className={style['header-others']}>{children}</div> : null
        }
        <div className={style['header-option']}>
          <div className={style['header-option-title']}>{tableTitle}</div>
          <div className={style['header-option-func']}>
            <div className={style['option-btn']}>
              {
                btnGrounp?.length ? btnGrounp.map((item, index) => (
                  <div key={index}>
                    {
                      item.component ? <>{item.component}</> : (<Buttons
                        title={item.title}
                        iconClass={item.iconClass}
                        {...item}
                      />
                      )
                    }
                  </div>
                )) : null
              }
            </div>
            <div className={style['option-icon']}>
              {(btnGrounp?.length) ? <Line /> : null}
              <div className={style['icon-grounp']}>
                {
                  defauluIcon.map((item, index) => <div className={style['icon-data']} key={index}>
                    <div>{item.component}</div>
                  </div>)
                }
                {
                  iconGrounp ? iconGrounp.map((item, index) => (
                    (<div className={style['icon-data']} key={index}>
                      {
                        item.component ? <div>{item.component}</div> : (
                          <Tooltip title={item.title} placement="bottom">
                            <div>{item.icon}</div>
                          </Tooltip>
                        )
                      }
                    </div>))) : null
                }
              </div>
            </div>
          </div>
        </div>
        <Table loading={loading} size={tableSize} {...tableProps} columns={columns} />
        <Pagination {...pagaTionProps} className='view-pagitaion' size={pagaTionSize} />
      </div>
    </ConfigProvider>
  )
})

render() {
    const tokens = this.props.market.split("-");
    const quoteToken = tokens[1];

    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: "70%",
      },
      {
        title: (
          <TextCompactTableHeader>
            <div
              style={{
                textAlign: "right",
                paddingRight: "14px",
                width: "100%",
              }}
            >
              <I s="Amount" /> ({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"] - 3600000).format(theme.shortTimeFormat)}{" "}
            - {Moment(reward["startAt"]).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 tokens = this.props.market.split("-");
    const quoteToken = tokens[1];

    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" /> ({quoteToken})
            </div>
          </TextCompactTableHeader>
        ),
        dataIndex: "reward",
      },
    ];

    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: "300px",
          }}
        >
          <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>
    );
  }

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",
            }}
          >
            {order.market}
          </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",
            }}
          >
            {order.market}
          </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>{order.sizeInString}</LargeTableRow>,
        fill_pctg: (
          <LargeTableRow
            style={{
              color: theme.textWhite,
            }}
          >
            {order.filled}
          </LargeTableRow>
        ),
        price: (
          <LargeTableRow
            style={{
              color:
                order.side === "BUY" ? theme.buyPrimary : theme.sellPrimary,
            }}
          >
            {order.price}
          </LargeTableRow>
        ),
        total: (
          <LargeTableRow>
            {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>
    );
  }

function App() {
  useInjectSaga({ key: 'app', saga });

  const { locale } = useSelector(stateSelector);

  const getLocale = (language) => {
    switch (language) {
      case 'de':
        return deDE;
      case 'pl':
        return plPL;
      case 'en':
        return enUS;
    }
  };

  return (
    <ConfigProvider locale={getLocale(locale)}>
      <div>
        <Switch>
          <Route
            restricted
            exact
            path={routes.home.path}
            component={HomePage}
          />
          <PublicRoute
            restricted
            path={routes.login.path}
            component={LoginPage}
          />
          <PublicRoute
            restricted
            path={routes.register.path}
            component={RegisterPage}
          />
          <PublicRoute path={routes.privacy.path} component={PrivacyPage} />
          <PublicRoute
            restricted
            path={routes.forgetPassword.path}
            component={ForgetPassword}
          />
          <PublicRoute
            restricted
            path={`${routes.resetPassword.path}/:token`}
            component={ResetPassword}
          />
          <PublicRoute
            exact
            path={routes.notFound.path}
            component={NotFoundPage}
          />

          <Layout>
            <Switch>
              <PrivateRoute
                exact
                path={routes.dashboard.path}
                component={DashboardPage}
              />
              <PrivateRoute
                path={routes.payment.path}
                component={PaymentPage}
              />
              <PrivateRoute
                path={routes.history.path}
                component={HistoryPage}
              />
              <PrivateRoute
                path={routes.settings.path}
                component={SettingsPage}
              />

              <Redirect to={routes.notFound.path} />
            </Switch>
          </Layout>
        </Switch>
        <GlobalStyle />
      </div>
    </ConfigProvider>
  );
}

FormSizeDemo = () => {
  const [componentSize, setComponentSize] = useState('small');
  return (
    <div>
      <Radio.Group
        value={componentSize}
        onChange={e => {
          setComponentSize(e.target.value);
        }}
      >
        <Radio.Button value="small">Small</Radio.Button>
        <Radio.Button value="middle">Middle</Radio.Button>
        <Radio.Button value="large">Large</Radio.Button>
      </Radio.Group>
      <Divider />
      <ConfigProvider componentSize={componentSize}>
        <div className="example">
          <Input />
        </div>
        <div className="example">
          <Tabs defaultActiveKey="1">
            <TabPane tab="Tab 1" key="1">
              Content of Tab Pane 1
            </TabPane>
            <TabPane tab="Tab 2" key="2">
              Content of Tab Pane 2
            </TabPane>
            <TabPane tab="Tab 3" key="3">
              Content of Tab Pane 3
            </TabPane>
          </Tabs>
        </div>
        <div className="example">
          <Input.Search allowClear />
        </div>
        <div className="example">
          <Input.TextArea allowClear />
        </div>
        <div className="example">
          <Select defaultValue="demo" options={[{ value: 'demo' }]} />
        </div>
        <div className="example">
          <DatePicker />
        </div>
        <div className="example">
          <DatePicker.RangePicker />
        </div>
        <div className="example">
          <Button>Button</Button>
        </div>
        <div className="example">
          <Card title="Card">
            <Table
              columns={[
                { title: 'Name', dataIndex: 'name' },
                { title: 'Age', dataIndex: 'age' },
              ]}
              dataSource={[
                {
                  key: '1',
                  name: 'John Brown',
                  age: 32,
                },
                {
                  key: '2',
                  name: 'Jim Green',
                  age: 42,
                },
                {
                  key: '3',
                  name: 'Joe Black',
                  age: 32,
                },
              ]}
            />
          </Card>
        </div>
      </ConfigProvider>
    </div>
  );
}

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

    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 = (
          <span
            style={{ color: theme.highlight, textAlign: "left" }}
          >
            <StatusFontAwesomeIcon icon={faCircleNotch} spin />
            <span>
              <I s="Processing" /> <WhyIcon text="StatusProcessing" />
            </span>
          </span>
        );
      } else if (transaction.status === "processed") {
        status = (
          <span
            style={{ color: theme.green, textAlign: "left" }}
          >
            <StatusFontAwesomeIcon icon={faCheckCircle} />
            <span>
              <I s="Succeeded" />
            </span>
          </span>
        );
      } else if (transaction.status === "failed") {
        status = (
          <span style={{ color: theme.red, textAlign: "left" }}>
            <StatusFontAwesomeIcon icon={faExclamationCircle} />
            <span>
              <I s="Failed" />
            </span>
          </span>
        );
      } else if (transaction.status === "received") {
        status = (
          <span
            style={{ color: theme.orange, textAlign: "left" }}
          >
            <StatusFontAwesomeIcon icon={faClock} />

            <span>
              {this.props.blockNum - transaction.blockNum <= 30 ? (
                <span>
                  <I s="Confirming" /> <WhyIcon text="StatusConfirming" />(
                  {Math.max(this.props.blockNum - transaction.blockNum, 0)} /
                  30)
                </span>
              ) : (
                <span>
                  <I s="Processing" /> <WhyIcon text="StatusProcessing" />
                </span>
              )}
            </span>
          </span>
        );
      }

      let type = "-";

      if (transaction.depositType === "deposit") {
        type = <I s="Deposit" />;
      } else if (transaction.depositType === "update_account") {
        type = <I s="Key Reset" />;
      } else {
        type = <I s="Registration" />;
      }

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

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

    return (
      <ConfigProvider renderEmpty={data.length === 0 && customizeRenderEmpty}>
        <List
          itemLayout="horizontal"
          dataSource={data}
          size="large"
          renderItem={transaction => (
            <List.Item style={{
              paddingLeft: '0',
              paddingRight: '0',
            }}>
              
              <List.Item.Meta
                avatar={transaction.icon}
                title={<span>{transaction.depositType}</span>}
                description={transaction.status}
              />
              <div>
                <span className="text-dark text-weight-bold d-block">{transaction.amount} <I s={transaction.symbol} /></span>
              </div>
            </List.Item>
          )}
        />
      </ConfigProvider>
    );
  }