antd#Result JavaScript Examples

Authorized = ({
  children,
  authority,
  noMatch = (
    <Result
      status="403"
      title="403"
      subTitle="Sorry, you are not authorized to access this page."
    />
  ),
}) => {
  const childrenRender = typeof children === 'undefined' ? null : children;
  const dom = check(authority, childrenRender, noMatch);
  return <>{dom}</>;
}

CreateCarburetor = ({ pending, setPending }) => {
  const { activeWallet } = useSelector((state) => state.settings);
  const { t } = useTranslation();

  if (pending) {
    return (
      <Result
        icon={<LoadingOutlined />}
        style={{ paddingBottom: 24 }}
        title={t("modals.redeem-both.create_title", "We are waiting for the transaction to become stable")}
        extra={<Button type="primary" danger onClick={() => setPending(false)}>{t("modals.common.cancel", "Cancel")}</Button>}
      />
    )
  }

  return (
    <Result
      title={t("modals.redeem-both.create_title_action", "Create an intermediary agent")}
      icon={<InteractionOutlined />}
      extra={<div style={{ display: "flex", alignItems: "center", flexDirection: "column" }}>
        <QRButton
          href={generateLink(1e4, { create: 1 }, activeWallet, config.CARBURETOR_FACTORY, "base", true)}
          type="primary"
          size="large"
          onClick={() => setPending(true)}
        >
          {t("modals.redeem-both.create_btn", "Create intermediary agent")}
        </QRButton>
        <div style={{ fontSize: 10, textAlign: "center", marginTop: 10 }}>{t("modals.redeem-both.info", "The address from which the request will be sent will be the owner of intermediary agent.")}</div>
      </div>}
    />
  )
}

export function EmptyChannel() {
    const { t } = useTranslation()

    return (
        <div
            style={{
                height: 'calc(100vh - 2px)',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
            }}
        >
            <Result
                icon={<Logo />}
                title={t('src.screens.dashboard.components.YM')}
                subTitle={t('src.screens.dashboard.components.SPPAMTAFOG')}
                extra={[
                    <Button type="primary" key="console">
                        {t('src.screens.dashboard.components.SM')}
                    </Button>,
                ]}
            />
        </div>
    )
}

function EnrollmentStatus({ title, status, prev }) {
  const failure = {
    title: `Enrollment in to ${title} failed`,
    subtitle: 'Kindly try again',
  };
  const success = {
    title: `Successfully Enrolled to the ${title} track`,
    subtitle:
      'A mentor will be assigned to you, and he/she will contact you soon',
  };

  return (
    // <DisplayEnrollmentStatus status={}/>
    <Result
      status={status}
      title={status === 'success' ? success.title : failure.title}
      subTitle={status === 'success' ? success.subtitle : failure.subtitle}
      extra={[
        <Button type="primary" key="console">
          {status === 'success' ? (
            <Link to="/dashboard">Go to dashboard</Link>
          ) : (
            <span onClick={() => prev()}>Go back</span>
          )}
        </Button>,
      ]}
    />
  );
}

render() {

        return (
            <Spin spinning={this.state.loading} tip={this.state.tip}>
                <div>
                    {
                        this.state.closed ?
                            <Result
                                title="远程连接已关闭"
                            /> :
                            <div className="container" style={{
                                overflow: this.state.containerOverflow,
                                width: this.state.width,
                                height: this.state.height
                            }}>

                                <div id="display"/>
                            </div>
                    }


                </div>
            </Spin>
        );
    }

noMatch = (
  <Result
    status="403"
    title="403"
    subTitle="Sorry, you are not authorized to access this page."
    extra={
      <Button type="primary">
        <Link to="/user/login">Go Login</Link>
      </Button>
    }
  />
)

renderNothingToLabel(store) {
    return (
      <Block
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          flexDirection: "column",
          paddingBottom: "30vh",
        }}
      >
        <Result status="success" title={getEnv(this.props.store).messages.NO_NEXT_TASK} />
        <Block name="sub__result">You have completed all tasks in the queue!</Block>
        {store.canGoPrevTask && (
          <Button onClick={() => store.prevTask()} look="outlined" style={{ margin: "16px 0" }}>
            Go to Previous Task
          </Button>
        )}
      </Block>
    );
  }

NotFound = () => {
  useEffect(() => {
    history.replace('/notfound');
  }, []);
  return (
    <>
      <Result
        status="404"
        title="404"
        subTitle="Sorry, the page you visited does not exist."
        extra={
          <Button href="/" type="primary">
            Back Home
          </Button>
        }
      />
    </>
  );
}

function App() {
  const { isOnline: isNetwork } = useNetwork();

  if (!isNetwork)
    return (
      <>
        <Result
          status="404"
          title="No Internet Connection"
          subTitle="Check your Internet Connection or your network."
          extra={
            <Button href="/" type="primary">
              Try Again
            </Button>
          }
        />
      </>
    );
  else {
    return (
      <RouterHistory history={history}>
        <Provider store={store}>
          <Router />
        </Provider>
      </RouterHistory>
    );
  }
}

Error = memo(function Error() {
  return (
    <div className='Error404'>
      <Result
        status="404"
        title="404"
        subTitle="sorry，没有找到相关的页面。"
        extra={<Button type="primary">
          <Link to='/home'>返回主页</Link>
        </Button>}
      />
    </div>
  )
})

render() {
        const { Content } = Layout;
        return (
            <Content
                style={{
                    margin: "6px",
                    padding: 24,
                    background: "#fff",
                    height: '80vh'
                }}
            >
            <Result title="Connection Error" status="error" extra={<span>Kindly check your internet connection and reload.</span>} />
            </Content>
        );
    }

export default function ErrorScreen() {
  ReactGA.event({
    category: 'Error',
    action: 'Error screen displayed',
  });

  return (
    <div>
      <Result
        status="500"
        title="Error 500"
        subTitle="Sorry, something went wrong."
        extra={
          <Button className="rounded" type="primary">
            <Link to={'/'}>Back Home</Link>
          </Button>
        }
      />
    </div>
  );
}

noMatch = (
  <Result
    status={403}
    title="403"
    subTitle="Sorry, you are not authorized to access this page."
    extra={
      <Button type="primary">
        <Link to="/user/login">Go Login</Link>
      </Button>
    }
  />
)

storiesOf('antd/result', module).add('403', () => 
  <Result
    status="403"
    title="403"
    subTitle="Sorry, you are not authorized to access this page."
    extra={<Button type="primary">Back Home</Button>}
  />,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>you are not authorized to access this page.</p></>) } });

render() {
        return (
            <Result
                status="404"
                title="404"
                subTitle="不存在此界面, 点击按钮, 返回到首页"
                extra={<Button type="primary">
                    <Link to={"/"}>返回首页</Link>
                </Button>}
            />
        )
    }

noMatch = (
  <Result
    status="403"
    title="403"
    subTitle="Sorry, you are not authorized to access this page."
    extra={
      <Button type="primary">
        <Link to="/user/login">Go Login</Link>
      </Button>
    }
  />
)

CreateStep = ({ data, setCurrent, type }) => {
  const pendings = useSelector((state) => state.pendings.stablecoin);
  const { sendReq, addressIssued } = pendings;
  const dispatch = useDispatch();
  const { t } = useTranslation();
  const link = generateLink(1.5e4, data, undefined, config.FACTORY_AAS[config.FACTORY_AAS.length + (type === 2 ? -1 : -4)]);

  useEffect(() => {
    dispatch(pendingIssue(data));
  }, [dispatch, data]);

  if (addressIssued) {
    // dispatch(changeActive(addressIssued));
    dispatch(resetIssueStablecoin());
  }

  if (sendReq) {
    return (
      <Result
        icon={<LoadingOutlined />}
        title={t("create.received.title", "Request received")}
        subTitle={t("create.received.subTitle", "Once the transaction is stable, you'll be redirected to the page of the new stablecoin")}
        extra={[
          <Button
            onClick={() => {
              setCurrent(0);
              dispatch(resetIssueStablecoin());
            }}
            type="danger"
            key="CreateStep-reset-req"
          >
            {t("create.received.close", "Close")}
          </Button>,
        ]}
      />
    );
  }

  return (
    <Result
      status="info"
      icon={<WalletOutlined />}
      title={t("create.sending_request.title", "Almost ready!")}
      subTitle={t("create.sending_request.subTitle", "Please click the «Create» button below, this will open your Obyte wallet and you'll send a transaction that will create the new stablecoin.")}
      extra={[
        <QRButton
          href={link}
          type="primary"
          key="CreateStep-create"
          onClick={() => {
            ReactGA.event({
              category: "Stablecoin",
              action: "Create stablecoin",
            });
          }}
        >
          {t("create.sending_request.create", "Create")}
        </QRButton>,
        <Button
          onClick={() => {
            setCurrent(0);
          }}
          type="danger"
          key="CreateStep-reset"
        >
          {t("create.sending_request.reset", "Reset")}
        </Button>,
      ]}
    />
  );
}

renderSuccess() {
    return <Result status="success" title={getEnv(this.props.store).messages.DONE} />;
  }

PipelineRedirectToDataProcessing = ({ experimentId, pipelineStatus }) => {
  const path = '/experiments/[experimentId]/data-processing';

  const texts = {
    error: {
      status: 'error',
      title: 'We\'ve had an issue while working on your project.',
      subTitle: 'Please go to Data Processing and try again.',
      image: '/undraw_Abstract_re_l9xy.svg',
      alt: 'A woman confusedly staring at an abstract drawing.',
    },
    running: {
      status: 'info',
      title: 'We\'re working on your project...',
      subTitle: 'You can check the progress we\'ve made in Data Processing.',
      image: '/undraw_Dev_focus_re_6iwt.svg',
      alt: 'A woman working in front of a computer.',
    },
    toBeRun: {
      status: 'info',
      title: 'Let\'s process your data first.',
      subTitle: 'You need to process your data before it can be explored. To begin, go to Data Processing.',
      image: '/undraw_To_the_stars_qhyy.svg',
      alt: 'A rocket ship ready for take-off.',
    },
    runningStep: {
      status: 'info',
      title: 'Your data is getting ready.',
      subTitle: 'We\'re preparing the data for this step, please wait. This will take a few minutes.',
      image: '/undraw_tasks_re_v2v4.svg',
      alt: 'A woman in a wheelchair looking at a list of partially completed items.',
    },
  };

  const {
    status, title, subTitle, image, alt,
  } = texts[pipelineStatus];

  return (
    <Result
      status={status}
      title={title}
      subTitle={subTitle}
      icon={(
        <img
          width={250}
          height={250}
          alt={alt}
          src={image}
          style={{
            display: 'block', marginLeft: 'auto', marginRight: 'auto', width: '50%',
          }}
        />
      )}
      extra={pipelineStatus !== 'runningStep' && (
        <Link as={path.replace('[experimentId]', experimentId)} href={path} passHref>
          <Button type='primary' key='console'>
            Go to Data Processing
          </Button>
        </Link>
      )}
    />
  );
}

render() {
		return (
			<Layout className="pageWithGradientBg">
				<Result
					icon={(
						<img
							src="./appicon_256.png"
							width={128}
							height={128}
							alt="App Icon"
							className="screenshot-tarcker-icon"
						/>
					)}
					title={(
						<Title level={3}>
							Screenshot Tracker
							<Tag style={{ marginLeft: 10 }}>v1.0</Tag>
						</Title>
					)}
					subTitle={(
						<div style={{ marginTop: 30 }}>
							<h3>Let&apos;s get started with a new run.</h3>
							A &ldquo;run&rdquo; is a session of screenshots taken from a list of
							web page urls you provide.
							<br />
							You can create multiple runs and repeat them as many times as you want.
						</div>
					)}
					extra={(
						<Link to="/new">
							<Button
								type="primary"
								size="large"
								icon="caret-right"
							>
								New Run
							</Button>
						</Link>
					)}
				/>
				<div className="support-bar">
					Feel free to send any questions or your feedback with
					{' '}
					{/* eslint-disable-next-line */}
					<a className="ext" href="https://github.com/nomadinteractive/screenshot-tracker/issues/new">
						opening an issue
					</a>
					{' '}
					in
					{' '}
					{/* eslint-disable-next-line */}
					<a className="ext" href="https://github.com/nomadinteractive/screenshot-tracker/issues">
						Github Issues Page
					</a>
				</div>
			</Layout>
		)
	}

StyledResult = styled(Result)`
  
`

render() {
        return (
            <div>
                <Result status="404" subTitle={this.state.msg} />
            </div>
        );
    }

storiesOf('antd/result', module).add('customIcon', () => 
  <Result
    icon={<SmileOutlined />}
    title="Great, we have done all the operations!"
    extra={<Button type="primary">Next</Button>}
  />,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Custom icon.</p></>) } });

Step3 = props => {
  const { data, dispatch } = props;

  if (!data) {
    return null;
  }

  const { payAccount, receiverAccount, receiverName, amount } = data;

  const onFinish = () => {
    if (dispatch) {
      dispatch({
        type: 'formAndstepForm/saveCurrentStep',
        payload: 'info',
      });
    }
  };

  const information = (
    <div className={styles.information}>
      <Descriptions column={1}>
        <Descriptions.Item label="付款账户"> {payAccount}</Descriptions.Item>
        <Descriptions.Item label="收款账户"> {receiverAccount}</Descriptions.Item>
        <Descriptions.Item label="收款人姓名"> {receiverName}</Descriptions.Item>
        <Descriptions.Item label="转账金额">
          <Statistic value={amount} suffix="元" />
        </Descriptions.Item>
      </Descriptions>
    </div>
  );
  const extra = (
    <>
      <Button type="primary" onClick={onFinish}>
        再转一笔
      </Button>
      <Button>查看账单</Button>
    </>
  );
  return (
    <Result
      status="success"
      title="操作成功"
      subTitle="预计两小时内到账"
      extra={extra}
      className={styles.result}
    >
      {information}
    </Result>
  );
}

export default function() {
  const [list, setList] = useState([
    'https://www.jd.com/',
    // 'https://zhuanlan.zhihu.com/p/67491524',
    'https://ai.taobao.com/'
  ]);
  const [fetchData, setFetchData] = useState([]);
  const [recentData, setRecentData] = useState(() => {
    try {
      let dataStr = localStorage.getItem('recent') || []
      return JSON.parse(dataStr)
    }catch(err) {
      return []
    }
  });
  const [isLoading, setLoading] = useState(false);
  const handleChange = (value) => {
    console.log(`selected ${value}`);
    data = value;
  }

  const crawel = () => {
    setLoading(true)
    data && fetch(`${SERVER_URL}/mz/fetch`, {
      method: 'POST',
      body: data
    }).then(res => res.json()).then(res => {
      if(res.state) {
        notification.success({
          message: '抓取完成',
          description: `已成功截取${data.length}张图和网页文本`
        })
        if(res.data) {
          // 求出数据增量
          let curAddItem = res.data.filter(item => !recentData.includes(item))
          setFetchData(curAddItem)
          // 更新最近爬取数据
          setRecentData(res.data)
          // 将爬取数据存入storage
          localStorage.setItem('recent', JSON.stringify(res.data))
        }
      }else {
        notification.error({
          message: '抓取失败',
          description: res.msg
        })
      }
      res && setLoading(false)
    })
  }

  useEffect(() => {
    
  }, [])
  return (
    <div className={styles.normal}>
      <Spin tip="正在疯狂爬取中..." spinning={isLoading}>
        <>
          <Select mode="tags" style={{ width: '50%', marginRight: '20px' }} placeholder="Tags Mode" onChange={handleChange}>
            {list.map(item => {
              return <Option key={item}>{ item }</Option>
            })}
          </Select>
          <Button type="primary" onClick={crawel}>爬取</Button>
          <h3>抓取结果</h3>
          <div className={styles.result}>
            {
              fetchData.length ? fetchData.map(item => {
                return <div className={styles.item} key={item}>
                  <div className={styles.bg} style={{backgroundImage: `url(${`http://192.168.31.123/${item}.jpg`})`}}></div>
                  <div className={styles.viewLink}>
                    <a href={`http://192.168.31.123/${item}.json`} download={`${item}.json`} target="_blank">下载数据</a>
                    <a href={`http://192.168.31.123/${item}.jpg`} target="_blank">查看图片</a>
                  </div>
                </div>
              }) :
              <Result
                status="404"
                title="赶快试试搜索你想要爬取的网站吧~"
                subTitle="在搜索框输入网址,即可自动抓取网页, 支持多选输入."
              />
            }
          </div>
        </>
      </Spin>
      <Drawer
          title="最近抓取"
          placement="right"
          closable={false}
          visible={true}
          mask={false}
          width={360}
        >
          {
              recentData.length ? recentData.map(item => {
                return <div className={classnames(styles.item, styles.recent)} key={item}>
                  <div className={styles.bg} style={{backgroundImage: `url(${`http://192.168.31.123/${item}.jpg`})`}}></div>
                  <div className={styles.viewLink}>
                    <a href={`http://192.168.31.123/${item}.json`} download={`${item}.json`} target="_blank">下载数据</a>
                    <a href={`http://192.168.31.123/${item}.jpg`} target="_blank">查看图片</a>
                  </div>
                </div>
              }) :
              <div style={{marginTop: '160px'}}><Empty description="还没有爬取数据哦~" /></div> 
            }
        </Drawer>
    </div>
  );
}

ExchangeForm = () => {
  const { exchanges_recepient, formInit, referrer } = useSelector(
    (state) => state.settings
  );
  const dispatch = useDispatch();
  const { t } = useTranslation();
  const params = useParams();
  const [width] = useWindowSize();
  const { data, loaded } = useSelector((state) => state.list);
  const [activeCurrency, setActiveCurrency] = useState("btc");
  const [amountCurrency, setAmountCurrency] = useState(0.1);
  const [index, setIndex] = useState(0);
  const [isCreated, setIsCreated] = useState(false);
  const [amountToken, setAmountToken] = useState(undefined);
  let tokens = getTokens(data);
  const [activeTokenAdr, setActiveTokenAdr] = useState(
    config.TESTNET ? "2SEBEEDTEC7LTDVZ765MGQXJW33GSRUD" : "VLKI3XMMX5YULOBA6ZXBXDPI6TXF6V3D"
  );
  const [oraclePrice, setOraclePrice] = useState(undefined);
  const [inited, setInited] = useState(false);
  const [recipient, setRecipient] = useState(
    exchanges_recepient
      ? { value: exchanges_recepient, valid: true }
      : {
        value: undefined,
        valid: undefined,
      }
  );
  const provider = activeCurrency && (config.oswapccCurrencies.includes(activeCurrency.toUpperCase()) ? "oswapcc" : "simpleswap");

  useEffect(() => {
    const id = setInterval(() => setIndex((i) => i + 1), 1000 * 60 * 5);
    return () => {
      clearInterval(id);
    };
  }, []);

  useEffect(() => {
    if (loaded) {
      if (params.address) {
        setAmountCurrency(formInit?.amountCurrency || "0.1");
        setActiveCurrency(formInit?.currentCurrency || "btc");
        setActiveTokenAdr(params.address);
      } else {
        // if (formInit?.currentCurrency === "gbyte") {
        //   setAmountToken(formInit?.amountToken);
        //   setActiveCurrency("gbyte");
        //   setActiveTokenAdr(formInit.currentToken);
        // } else if (formInit?.currentCurrency !== undefined) {
        //   setActiveCurrency(formInit.currentCurrency);
        if (formInit?.amountCurrency && formInit?.currentToken) {
          setAmountCurrency(formInit.amountCurrency);
          setActiveTokenAdr(formInit.currentToken);
        }

        //   setActiveTokenAdr(formInit.currentToken);
        // }
      }

      setInited(true);
    }
  }, [loaded]);

  const buyForGbyteRef = useRef(null);
  const buyRef = useRef(null);
  const currentTokenData = activeTokenAdr ? data[activeTokenAdr] : undefined;
  const reservePrice = useGetReservePrice(currentTokenData && currentTokenData.params.reserve_asset);

  useEffect(() => {
    (async () => {
      if (currentTokenData && inited) {
        const { bonded_state, params } = currentTokenData;
        const price = await getOraclePrice(bonded_state, params);
        setOraclePrice(price);
      }
    })();
  }, [currentTokenData, setOraclePrice, inited]);

  // const allCurrencies = useGetCurrency();
  const ranges = useGetRanges(activeCurrency);
  const exchangeRates = useGetRate(activeCurrency, index, provider === "oswapcc" ? amountCurrency : 1, inited);
  const compensation = useGetCompensation(
    amountCurrency,
    activeCurrency,
    exchangeRates
  );

  const handleAmountCurrency = (ev) => {
    const value = ev.target.value;
    const reg = /^[0-9.]+$/;
    if (
      (~(value + "").indexOf(".") ? (value + "").split(".")[1].length : 0) <= 9
    ) {
      if (reg.test(String(value)) || value === "") {
        setAmountCurrency(value);
      }
    }
  };

  const handleAmountTokens = (ev, decimals) => {
    const value = ev.target.value;
    const reg = /^[0-9.]+$/;
    if (
      !currentTokenData ||
      (~(value + "").indexOf(".") ? (value + "").split(".")[1].length : 0) <=
      decimals
    ) {
      if (reg.test(String(value)) || value === "") {
        setAmountToken(value);
      }
    }
  };

  useEffect(() => {
    (async () => {
      if (!currentTokenData) return undefined;
      const { bonded_state, params, fund } = currentTokenData;

      const result =
        currentTokenData &&
        oraclePrice &&
        oraclePrice !== undefined &&
        !isEmpty(bonded_state) &&
        $get_exchange_result({
          tokens1: 0,
          tokens2: amountToken * 10 ** params.decimals2,
          params: params,
          vars: bonded_state,
          oracle_price: oraclePrice,
          timestamp: Math.floor(Date.now() / 1000),
          reservePrice,
          isV2: !!fund
        });

      if (result && activeCurrency === "gbyte" && inited) {
        setAmountCurrency(((result.reserve_needed * 1.01) / 1e9).toFixed(9));
      }
    })();
  }, [
    amountToken,
    currentTokenData,
    activeCurrency,
    exchangeRates,
    oraclePrice,
  ]);

  useEffect(() => {
    const newData = {
      currentToken: activeTokenAdr,
      amountToken,
      currentCurrency: activeCurrency,
      amountCurrency: amountCurrency,
    };
    if (
      JSON.stringify(newData) !== JSON.stringify(formInit) &&
      inited
    ) {
      dispatch(updateExchangesForm(newData));
    }
  }, [activeTokenAdr, amountToken, activeCurrency, amountCurrency]);

  useEffect(() => {
    if (!currentTokenData) return undefined;
    const { bonded_state, params, fund } = currentTokenData;

    const result =
      bonded_state &&
      params &&
      oraclePrice &&
      activeCurrency !== "gbyte" &&
      $get_exchange_result({
        tokens1: 0,
        tokens2: 0,
        params: params,
        vars: bonded_state,
        oracle_price: oraclePrice,
        timestamp: Math.floor(Date.now() / 1000),
        reservePrice,
        isV2: !!fund
      });
    if (result && activeCurrency !== "gbyte" && inited) {
      const expectT2 =
        (1 / result.target_p2) *
        (Number(amountCurrency) * Number(exchangeRates) + (compensation || 0));
      setAmountToken(expectT2.toFixed(params.decimals2));
    }
  }, [
    amountCurrency,
    currentTokenData,
    activeCurrency,
    exchangeRates,
    compensation,
    oraclePrice
  ]);

  const handleClickExchange = () => {
    createExchange({
      address: recipient.value,
      currency_from: activeCurrency,
      asset: currentTokenData.asset_2,
      symbol: currentTokenData.symbol,
      amount_currency: amountCurrency,
      amount_token: amountToken,
      active_currency: activeCurrency,
      recipient,
      curve_address: activeTokenAdr,
      ref: referrer,
      after: ({ isError, clear = true }) => {
        if (!isError) {
          message.success(t("buy.exchange_success", "The exchange was successfully added to the list and is waiting for payment"));
          dispatch(addExchangeRecipient(recipient.value));
        } else {
          message.error(t("buy.exchange_error", "An error occurred, please try again later"));
        }
        ReactGA.event({
          category: "Stablecoin",
          action: "Buy interest tokens for currency",
        });

        if (!isError || (isError && clear)) {
          setAmountCurrency(amountCurrency);
          setAmountToken(undefined);
        }
        setIsCreated(false);
      },
    });
  };

  const handleChange = (value) => {
    if (obyte.utils.isValidAddress(value)) {
      setRecipient({ value, valid: true });
    } else {
      setRecipient({ value, valid: false });
    }
  };
  useEffect(() => {
    if (inited && activeCurrency !== "gbyte") {
      setAmountToken(undefined);
    }
  }, [activeCurrency]);

  const getResult = () =>
    $get_exchange_result({
      tokens1: 0,
      tokens2: amountToken * 10 ** currentTokenData.params.decimals2,
      params: currentTokenData.params,
      vars: currentTokenData.bonded_state,
      oracle_price: oraclePrice,
      timestamp: Math.floor(Date.now() / 1000),
      reservePrice,
      isV2: currentTokenData.fund
    });

  if (!inited) return <Spin />;

  return (
    <div>
      {exchangeRates === null && activeCurrency !== "gbyte" && <Alert
        message={t("buy.exchange_warning", "{{currency}}-to-GBYTE exchange service is currently unavailable, please pay with another currency or try again later.", { currency: String(activeCurrency).toUpperCase() })}
        type="warning"
        style={{ marginTop: 10 }}
      />}
      <Row style={{ marginBottom: 20, marginTop: 50 }}>
        <Col lg={{ span: 9, offset: 2 }} xs={{ span: 24, offset: 0 }} md={{ span: 16, offset: 4 }}>
          <div style={{ marginBottom: 5 }}>
            <Text type="secondary">
              <Trans i18nKey="buy.you_send">
                You <b>send</b>
              </Trans>
            </Text>
          </div>
          <Input.Group compact>
            <Input
              style={{ width: "50%" }}
              size="large"
              placeholder={`${t("buy.amount", "Amount")} ${ranges && ranges.min ? "Min. " + ranges.min : ""
                }  ${ranges && ranges.max ? " Max. " + ranges.max : ""}`}
              onChange={handleAmountCurrency}
              value={isNaN(amountCurrency) ? undefined : amountCurrency}
              disabled={activeCurrency === "gbyte" || isCreated}
              onKeyPress={(ev) => {
                if (ev.key === "Enter") {
                  if (activeCurrency === "gbyte") {
                    buyForGbyteRef.current.click();
                  } else {
                    buyRef.current.click();
                  }
                }
              }}
            />
            <Select
              style={{ width: "50%" }}
              size="large"
              showSearch
              placeholder={t("buy.currency_to_pay", "Currency to pay")}
              onChange={(c) => {
                setActiveCurrency(c);
              }}
              disabled={true} //isCreated
              value={activeCurrency}
            >
              {/* <Select.OptGroup label={t("buy.popular_cryptocurrencies", "Popular cryptocurrencies")}> */}
              {/* <Select.Option value="gbyte" key="c-gbyte">
                  GBYTE
                </Select.Option> */}
              {popularCurrencies.filter(
                (c) => 1 // allCurrencies.includes(c)
              ).sort().map((c) => (
                <Select.Option key={"c-" + c} value={c}>
                  <BtcLogo width="1em" height="1em" style={{ marginRight: 3, marginBottom: -1.5 }} /> {c.toUpperCase()}
                </Select.Option>
              ))}
              {/* </Select.OptGroup> */}
              {/* <Select.OptGroup label={t("buy.others", "Others")}>
                {allCurrencies.filter(
                  (c) => !popularCurrencies.includes(c)
                ).sort().map((c) => (
                  <Select.Option key={"c-" + c} value={c}>
                    {c.toUpperCase()}
                  </Select.Option>
                ))}{" "}
              </Select.OptGroup> */}
            </Select>
          </Input.Group>
          {/* {activeCurrency && activeCurrency !== "gbyte" && (
            <span style={{ fontSize: 10 }}>
              {t("buy.better_rate", "You get a better rate if you pay in GBYTE")}
            </span>
          )} */}
        </Col>
        <Col lg={{ span: 2, offset: 0 }} xs={{ span: 24, offset: 0 }} md={{ span: 24, offset: 0 }}>
          <div
            style={{
              marginTop: width < 990 ? 10 : 27,
              textAlign: "center",
              height: 38,
              boxSizing: "border-box",
              fontSize: "1.5em",
            }}
          >
            {width < 990 ? <ArrowDownOutlined /> : <ArrowRightOutlined />}
          </div>
        </Col>
        <Col lg={{ span: 9, offset: 0 }} xs={{ span: 24, offset: 0 }} md={{ span: 16, offset: 4 }}>
          {!amountCurrency ||
            (amountToken && compensation !== undefined) ||
            activeCurrency === "gbyte" ? (
            <>
              <div style={{ marginBottom: 5 }}>
                <Text type="secondary">
                  <Trans i18nKey="buy.you_get">
                    You <b>get</b>
                  </Trans>
                </Text>
              </div>
              <Input.Group compact>
                <Input
                  style={{ width: width > 500 ? "50%" : "100%" }}
                  size="large"
                  suffix={
                    (exchangeRates || activeCurrency === "gbyte") &&
                      reservePrice &&
                      amountCurrency &&
                      oraclePrice &&
                      amountToken ? (
                      <span style={{ color: "#ccc" }}>
                        ≈{" "}
                        {activeCurrency === "gbyte"
                          ? getResult().amountTokens2InCurrency.toFixed(2)
                          : (
                            Number(amountCurrency) *
                            exchangeRates *
                            reservePrice
                          ).toFixed(2)}{" "}
                            USD
                      </span>
                    ) : (
                      <span />
                    )
                  }
                  placeholder={t("buy.amount", "Amount")}
                  prefix={activeCurrency !== "gbyte" ? "≈" : ""}
                  value={isNaN(amountToken) ? undefined : amountToken}
                  onChange={(ev) =>
                    handleAmountTokens(
                      ev,
                      currentTokenData && currentTokenData.params.decimals2
                    )
                  }
                  disabled={activeCurrency !== "gbyte" || isCreated}
                  onKeyPress={(ev) => {
                    if (ev.key === "Enter") {
                      if (activeCurrency === "gbyte") {
                        if (!isNaN(amountToken) && !(Number(amountToken) === 0)) {
                          buyForGbyteRef.current.click();
                        }
                      } else {
                        buyRef.current.click();
                      }
                    }
                  }}
                />
                <Select
                  style={{ width: width > 500 ? "50%" : "100%" }}
                  size="large"
                  showSearch
                  disabled={isCreated}
                  optionFilterProp="children"
                  placeholder={t("buy.will_receive", "The token you will receive")}
                  onChange={(c) => setActiveTokenAdr(c)}
                  value={activeTokenAdr}
                >
                  {tokens.map((t) => (
                    <Select.Option key={"t-" + t.asset} value={t.address}>
                      <CoinIcon width="1em" style={{ marginRight: 5, marginBottom: -1.5 }} height="1em" type={2} pegged={t.pegged} /> {t.symbol || t.asset}{" "}
                      {" (" +
                        Decimal.mul(t.interest_rate, 100).toNumber() +
                        "% interest)"}
                    </Select.Option>
                  ))}
                </Select>
              </Input.Group>
              {activeCurrency !== "gbyte" && currentTokenData && (
                <>
                  <Text type="secondary">
                    <Trans i18nKey="buy.first_exchanged" activeCurrency={activeCurrency} symbol={currentTokenData.symbol || currentTokenData.asset_2.slice(0, 5) + "..."}>
                      Your <span style={{ textTransform: "uppercase" }}>{{ activeCurrency }}</span>{" "}
                      will be first exchanged for GBYTE, then GBYTE converted to {" "}
                      {{
                        symbol: currentTokenData.symbol ||
                          currentTokenData.asset_2.slice(0, 5) + "..."
                      }}.{" "}
                      <span style={{ textTransform: "uppercase" }}>
                        {{ activeCurrency }}
                      </span>{" "}
                    to GBYTE exchange is performed by{" "}
                      <a
                        href={provider === "oswapcc" ? "https://www.oswap.cc" : "https://simpleswap.io/"}
                        target="_blank"
                        rel="noopener"
                      >
                        {{ providerName: provider === "oswapcc" ? "oswap.cc" : "simpleswap.io" }}
                      </a>.
                    </Trans>
                  </Text>

                  {amountCurrency &&
                    (typeof compensation === "number" ? (
                      <div>
                        <Text type="secondary">
                          {t("buy.compensates", "Obyte compensates part of the exchange fees.")}
                        </Text>
                      </div>
                    ) : (
                      <div style={{ marginTop: 5 }}>
                        <Text type="secondary">
                          {t("buy.compensates_depleted", "Obyte compensates part of the exchange fees but today's quota is already depleted and the quoted price includes the full fees. To get a better rate, try again after the quota resets at midnight UTC or buy with GBYTE now.")}
                        </Text>
                      </div>
                    ))}
                </>
              )}
              <Row>
                {activeCurrency !== "gbyte" && (
                  <Form.Item
                    hasFeedback
                    style={{ width: "100%", marginTop: 20 }}
                    extra={
                      <span>
                        <Trans i18nKey="buy.install">
                          <a
                            href="https://obyte.org/#download"
                            target="_blank"
                            rel="noopener"
                            onClick={
                              () => {
                                ReactGA.event({
                                  category: "Stablecoin",
                                  action: "Install wallet (buy for other currency)",
                                  label: activeCurrency
                                })
                              }
                            }>Install Obyte wallet</a> if you don't have one yet, and copy/paste your address here.
                          </Trans>
                      </span>
                    }
                    validateStatus={
                      recipient.valid !== undefined
                        ? recipient.valid
                          ? "success"
                          : "error"
                        : undefined
                    }
                  >
                    <Input
                      size="large"
                      disabled={isCreated}
                      value={recipient.value}
                      placeholder="Your Obyte wallet address"
                      onChange={(ev) => handleChange(ev.target.value)}
                    />
                  </Form.Item>
                )}
              </Row>
            </>
          ) : (
            <Row justify="center" align="middle">
              {(amountCurrency < ranges.min) ? <Result status="error" subTitle="Please check the amount to be sent BTC" /> : <Spin size="large" style={{ padding: 25 }} />}
              {/* {!exchangeRates ? <Result status="warning" /> :  */}
              {/* <Spin size="large" style={{ padding: 25 }} /> */}
            </Row>
          )}
        </Col>
      </Row>

      {activeCurrency === "gbyte" ? (
        <>
          <Row justify="center" style={{ marginTop: 40 }}>
            <QRButton
              type="primary"
              size="large"
              disabled={
                isNaN(amountToken) ||
                !Number(amountToken) ||
                !amountCurrency ||
                amountCurrency === "" ||
                Number(amountCurrency) === 0
              }
              key="btn-buy-gbyte"
              onClick={() =>
                ReactGA.event({
                  category: "Stablecoin",
                  action: "Buy interest tokens for gbyte",
                })
              }
              ref={buyForGbyteRef}
              href={
                currentTokenData &&
                amountCurrency &&
                generateLink(
                  Number(Number(amountCurrency).toFixed(9) * 1e9).toFixed(0),
                  {
                    tokens2:
                      amountToken * 10 ** currentTokenData.params.decimals2,
                    ref: referrer
                  },
                  undefined,
                  activeTokenAdr
                )
              }
            >
              {t("buy.buy", "Buy")}
            </QRButton>
          </Row>
          {amountCurrency &&
            amountCurrency !== "" &&
            Number(amountCurrency) !== 0 ? (
            <div style={{ textAlign: "center" }}>
              <Text type="secondary" style={{ fontSize: 10 }}>
                {t("buy.volatility", "1% was added to protect against price volatility, you'll get this amount back if the prices don't change.")}
              </Text>
              <Text type="secondary" style={{ fontSize: 14, display: "block" }}>
                <Trans i18nKey="buy.open_wallet">
                  Clicking "Buy" will open your Obyte wallet. <a
                    href="https://obyte.org/#download"
                    target="_blank"
                    rel="noopener"
                    onClick={
                      () => {
                        ReactGA.event({
                          category: "Stablecoin",
                          action: "Install wallet (buy for GBYTE)",
                          label: "GBYTE"
                        })
                      }
                    }>Install</a> it if you don't have one yet.
                  </Trans>
              </Text>
            </div>
          ) : null}
        </>
      ) : (
        <>
          <Row justify="center">
            <Button
              type="primary"
              size="large"
              ref={buyRef}
              loading={isCreated || ranges.min === undefined}
              key="btn-buy-currency"
              disabled={
                !recipient.valid ||
                !amountCurrency ||
                !amountToken ||
                compensation === undefined ||
                ranges === undefined ||
                ranges.min === undefined ||
                Number(ranges.min) > amountCurrency
              }
              onClick={() => {
                setIsCreated(true);
                handleClickExchange();
              }}
            >
              {t("buy.buy", "Buy")}
            </Button>
          </Row>
          {activeCurrency &&
            ranges &&
            ranges.min &&
            Number(ranges.min) > amountCurrency ? (
            <div style={{ textAlign: "center" }}>
              <Text type="secondary" style={{ fontSize: 12, color: "red" }}>
                <Trans i18nKey="buy.min" activeCurrency={String(activeCurrency).toUpperCase()} min={ranges.min}>
                  Sorry, the minimum {{ activeCurrency: String(activeCurrency).toUpperCase() }} amount is {{ min: ranges.min }}. Please increase the {{ activeCurrency: String(activeCurrency).toUpperCase() }} amount.
                </Trans>
              </Text>
            </div>
          ) : null}
        </>
      )}
      <div style={{ fontSize: 16, textAlign: "center", padding: 10 }}>
        <Trans i18nKey="buy.buying_v2">
          For buying stable tokens (OUSD, OBIT, etc), fund tokens (SFUSD, SFGB, etc), and redemption, go to the{" "}
          <Link to="/trade">trading page</Link>.
        </Trans>
      </div>
    </div>
  );
}

render() {
        let contentClassName = isAdmin() ? 'page-content' : 'page-content-user';
        return (
            <>
                <Content className={["site-layout-background", contentClassName]}>
                    <Row>
                        <Col span={12}>
                            <Title level={3}>修改密码</Title>
                            <Form ref={this.passwordFormRef} name="password" onFinish={this.changePassword}>
                                <input type='password' hidden={true} autoComplete='new-password'/>
                                <Form.Item
                                    {...formItemLayout}
                                    name="oldPassword"
                                    label="原始密码"
                                    rules={[
                                        {
                                            required: true,
                                            message: '原始密码',
                                        },
                                    ]}
                                >
                                    <Input type='password' placeholder="请输入原始密码" style={{width: 240}}/>
                                </Form.Item>
                                <Form.Item
                                    {...formItemLayout}
                                    name="newPassword"
                                    label="新的密码"
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入新的密码',
                                        },
                                    ]}
                                >
                                    <Input type='password' placeholder="新的密码"
                                           onChange={(value) => this.onNewPasswordChange(value)} style={{width: 240}}/>
                                </Form.Item>
                                <Form.Item
                                    {...formItemLayout}
                                    name="newPassword2"
                                    label="确认密码"
                                    rules={[
                                        {
                                            required: true,
                                            message: '请和上面输入新的密码保持一致',
                                        },
                                    ]}
                                    validateStatus={this.state.validateStatus}
                                    help={this.state.errorMsg || ' '}
                                >
                                    <Input type='password' placeholder="请和上面输入新的密码保持一致"
                                           onChange={(value) => this.onNewPassword2Change(value)} style={{width: 240}}/>
                                </Form.Item>
                                <Form.Item {...formTailLayout}>
                                    <Button disabled={this.state.errorMsg || !this.state.validateStatus} type="primary" htmlType="submit">
                                        提交
                                    </Button>
                                </Form.Item>
                            </Form>

                            <Divider/>
                        </Col>
                        <Col span={12}>
                            <Title level={3}>授权信息</Title>
                            <Descriptions column={1}>
                                <Descriptions.Item label="授权令牌">
                                    <Text strong copyable>{this.state.accessToken.token}</Text>
                                </Descriptions.Item>
                                <Descriptions.Item label="生成时间">
                                    <Text strong>{this.state.accessToken.created}</Text>
                                </Descriptions.Item>
                            </Descriptions>

                            <Space>
                                <Button type="primary" onClick={this.genAccessToken}>
                                    重新生成
                                </Button>
                            </Space>
                        </Col>
                    </Row>


                    <Title level={3}>双因素认证</Title>
                    <Form hidden={this.state.qr}>
                        <Form.Item {...formItemLayout}>
                            {
                                this.state.user.enableTotp ?
                                    <Result
                                        status="success"
                                        title="您已成功开启双因素认证!"
                                        subTitle="多因素认证-MFA二次认证-登录身份鉴别,访问控制更安全。"
                                        extra={[
                                            <Button type="primary" key="console" danger onClick={() => {
                                                confirm({
                                                    title: '您确认要解除双因素认证吗？',
                                                    icon: <ExclamationCircleOutlined/>,
                                                    content: '解除之后可能存在系统账号被暴力破解的风险。',
                                                    okText: '确认',
                                                    okType: 'danger',
                                                    cancelText: '取消',
                                                    onOk: async () => {
                                                        let result = await request.post('/account/reset-totp');
                                                        if (result.code === 1) {
                                                            message.success('双因素认证解除成功');
                                                            await this.loadInfo();
                                                        } else {
                                                            message.error(result.message);
                                                        }
                                                    },
                                                    onCancel() {
                                                        console.log('Cancel');
                                                    },
                                                })
                                            }}>
                                                解除绑定
                                            </Button>,
                                            <Button key="re-bind" onClick={this.resetTOTP}>重新绑定</Button>,
                                        ]}
                                    /> :
                                    <Result
                                        status="warning"
                                        title="您还未开启双因素认证！"
                                        subTitle="系统账号存在被暴力破解的风险。"
                                        extra={
                                            <Button type="primary" key="bind" onClick={this.resetTOTP}>
                                                去开启
                                            </Button>
                                        }
                                    />
                            }

                        </Form.Item>
                    </Form>

                    <Form hidden={!this.state.qr} onFinish={this.confirmTOTP}>
                        <Form.Item {...formItemLayout} label="二维码">
                            <Space size={12}>

                                <Card
                                    hoverable
                                    style={{width: 280}}
                                    cover={<Image
                                        style={{padding: 20}}
                                        width={280}
                                        src={"data:image/png;base64, " + this.state.qr}
                                    />
                                    }
                                >
                                    <Meta title="双因素认证二维码"
                                          description="有效期30秒，在扫描后请尽快输入。推荐使用Google Authenticator, Authy 或者 Microsoft Authenticator。"/>
                                </Card>

                                <Button
                                    type="primary"
                                    icon={<ReloadOutlined/>}
                                    onClick={this.resetTOTP}
                                >
                                    重新加载
                                </Button>
                            </Space>
                        </Form.Item>
                        <Form.Item
                            {...formItemLayout}
                            name="totp"
                            label="TOTP"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入双因素认证APP中显示的授权码',
                                },
                            ]}
                        >
                            <Input placeholder="请输入双因素认证APP中显示的授权码"/>
                        </Form.Item>
                        <Form.Item {...formTailLayout}>
                            <Button type="primary" htmlType="submit">
                                确认
                            </Button>
                        </Form.Item>
                    </Form>

                </Content>
            </>
        );
    }

describe('GEM2SLoadingScreen', () => {
  it('Does not render without gem2s status', () => {
    expect(() => shallow(<GEM2SLoadingScreen />)).toThrow();
  });

  it('Renders toBeRun state correctly', () => {
    const component = mount(
      <Provider store={store}>
        <GEM2SLoadingScreen gem2sStatus='toBeRun' />
      </Provider>,
    );

    const display = component.find(Result);

    expect(display.props().status).toEqual('toBeRun');
    expect(display.find(Button).length).toEqual(1);
    expect(display.find(Progress).length).toEqual(0);
  });

  it('Renders error state correctly', () => {
    const component = mount(
      <Provider store={store}>
        <GEM2SLoadingScreen gem2sStatus='error' />
      </Provider>,
    );

    const display = component.find(Result);

    expect(display.props().status).toEqual('error');

    // Button 1 : Launch Another Experiment
    // Button 2 : Re-launch This Experiment
    expect(display.find(Button).length).toEqual(2);
    expect(display.find(Progress).length).toEqual(0);
  });

  it('Clicking re-launch analysis re-runs GEM2S', () => {
    const mockParamsHash = 'mockParamsHash';

    const component = mount(
      <Provider store={store}>
        <GEM2SLoadingScreen experimentId='experimentId' paramsHash={mockParamsHash} gem2sStatus='error' />
      </Provider>,
    );

    const relaunchButton = component.find(Button).at(1);
    relaunchButton.simulate('click');

    expect(fetchAPI).toHaveBeenCalled();

    const fetchAPIParams = fetchAPI.mock.calls[0];
    const requestBody = JSON.parse(fetchAPIParams[1].body);

    // Check that the body of the request is correct
    expect(requestBody.paramsHash).toMatch(mockParamsHash);
  });

  it('Renders running state correctly', () => {
    const completedSteps = [
      'step 1',
      'step 2',
    ];

    const steps = [
      'Downloading sample files',
      'Preprocessing samples',
      'Computing metrics',
    ];

    const component = mount(
      <Provider store={store}>
        <GEM2SLoadingScreen gem2sStatus='running' completedSteps={completedSteps} steps={steps} />
      </Provider>,
    );

    const display = component.find(Result);

    expect(display.props().status).toEqual('running');
    expect(display.find(Button).length).toEqual(0);
    expect(display.find(Progress).length).toEqual(1);

    // Display step information as shown in steps
    expect(display.find('span.ant-typography').first().text()).toEqual(steps[completedSteps.length]);
  });
});

render(){
        let profileMessage = null;

        const {
            profileExists,
            approval_status,
            onEditVisible,
            loading,
            profileData
        } = this.props;

        if (profileExists) {
            if (approval_status === -1) {
                profileMessage = (
                    <Content
                        style={{
                            margin: 10,
                            padding: 24,
                            background: "#fff"
                        }}
                    >
                        <Result
                            status="info"
                            title="Awaiting Approval"
                            subTitle="Your profile is yet to be approved by admin"
                        />
                    </Content>
                );
            } else if (approval_status === 0) {
                profileMessage = (
                    <Content
                        style={{
                            margin: 10,
                            padding: 24,
                            background: "#fff"
                        }}
                    >
                        <Result
                            status="error"
                            title="Disapproved"
                            subTitle="Your profile is disapproved by admin"
                            extra={
                                <Button type="primary">
                                    <NavLink to="/company/profile/edit">
                                        Edit Profile
                                    </NavLink>
                                </Button>
                            }
                        />
                    </Content>
                );
            } else if(approval_status === 1) {
                profileMessage = (
                    <Content
                        style={{
                            margin: 10,
                            padding: 24,
                            background: "#fff"
                        }}
                    >
                    <Row type='flex' justify='space-between' style={{margin: 20}}>
                        <Col>
                            <img src={Logo} alt={"IIT Goa Logo"} width={'200px'}/>
                        </Col>
                        <Col style={{textAlign: 'center'}}>
                            <Typography.Title level={2} style={{marginTop: 60}}>
                                IIT Goa <br/> Training and Placement Cell
                            </Typography.Title>
                        </Col>
                        <Col>
                            <img src={profileData.logo_link} alt="Logo" width='200px'/>
                        </Col>
                    </Row>
                    </Content>
                );
            }
        } else {
            profileMessage = (
                <Content
                    style={{
                        margin: 10,
                        padding: 24,
                        background: "#fff"
                    }}
                >
                    <Result
                        status="warning"
                        title="Create Profile"
                        subTitle="You need to create profile before you can perform any action."
                        extra={
                            <div>
                                <Button type="primary">
                                    <NavLink to="/company/profile/create">
                                        Create Profile
                                    </NavLink>
                                </Button>
                            </div>
                        }
                    />
                </Content>
            );
        }
        return (
            <Layout>
                <Spin spinning={loading} tip="Loading ...">
                    <Row type="flex" justify="center">
                        <Col span={24}>
                            {profileMessage}
                        </Col>
                    </Row>
                </Spin>
            </Layout>
        );
    }