react-spinners#PuffLoader JavaScript Examples

The following examples show how to use react-spinners#PuffLoader. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: Loader.js From vch-mri with MIT License

6 votes

render() {
        return (
            <Grid textAlign='center' style={{ height: '100vh' }} verticalAlign='middle'>
                <PuffLoader
                    sizeUnit={"px"}
                    size={60}
                    color={'#000000'}
                />
            </Grid>
        )
    }

Example #2

Source File: LoaderFlashMessage.js From plenty-interface with GNU General Public License v3.0

5 votes

LoaderFlashMessage = (props) => {
  const isMobile = useMediaQuery('(max-width: 991px)');
  const [render, setRender] = useState(props.show);

  const statusImages = useRef({
    success: <SuccessImg />,
    error: <ErrorImg />,
    info: <InfoImg />,
    question: <QuestionImg />,
    warning: <WarnImg />,
  });

  useEffect(() => {
    if (props.duration && typeof props.duration === 'number' && props.show) {
      setTimeout(() => {
        props.onClose();
      }, props.duration);
    }
  }, [props.show, props.duration]);

  useEffect(() => {
    if (props.show) {
      setRender(true);
    }
  }, [props.show]);

  const animationEndHandler = () => {
    if (!props.show) {
      setRender(false);
    }
  };

  if (props.loading) {
    return (
      <div className="flash-message-loading-wrapper">
        <PuffLoader color="var(--theme-primary-1)" size={36} />
      </div>
    );
  }

  return (
    render && (
      <div
        className={clsx(
          'flash-message-wrapper',
          props.type,
          isMobile
            ? props.show
              ? 'bottomToTopFadeInAnimation'
              : 'topToBottomFadeOutAnimation'
            : props.show
            ? 'rightToLeftFadeInAnimation'
            : 'leftToRightFadeOutAnimation',
        )}
        onAnimationEnd={animationEndHandler}
      >
        <div className="flex" style={{height: '100%'}}>
          <div>{statusImages.current[props.type]}</div>
          <div className="floater-text">
            <span className="status-text">{props.title}</span>
            <div className="content">{props.children}</div>
          </div>
          <div className="ml-auto">
            <span
              className=" material-icons-round "
              onClick={props.onClose}
              style={{ cursor: 'pointer' }}
            >
              close
            </span>
          </div>
        </div>
      </div>
    )
  );
}

Example #3

Source File: loader.js From plenty-interface with GNU General Public License v3.0

4 votes

Loader = (props) => {
  const isMobile = useMediaQuery('(max-width: 991px)');

  const closeFlashMessage = () => {
    props.setLoaderMessage({});
  };

  if (props.loading) {
    return (
      <div className="loading-data-wrapper">
        <PuffLoader color="var(--theme-primary-1)" size={36} />
      </div>
    );
  }

  if (props.loaderMessage.type) {
    return (
      <div
        className={clsx(
          'loader-message-wrapper',
          props.loaderMessage.type,
          isMobile
            ? 'bottomToTopFadeInAnimation-4-floater'
            : 'rightToLeftFadeInAnimation-4-floater',
        )}
      >
        {props.loaderMessage.type === 'success' ? (
          props.content ? (
            <div className="d-flex ">
              <div>
                <SuccessImg />
              </div>
              <div className="floater-text">
                <span className="status-text">{props.content}</span>
                <div
                  className="view-tezos"
                  onClick={props.onBtnClick}
                  style={{ cursor: 'pointer' }}
                >
                  View on Block Explorer{' '}
                  <span className=" material-icons-round launch-icon-flash">launch</span>
                </div>
              </div>
              <div className="ml-auto">
                <span
                  className=" material-icons-round "
                  onClick={closeFlashMessage}
                  style={{ cursor: 'pointer' }}
                >
                  close
                </span>
              </div>
            </div>
          ) : (
            <div className="flex flex-row">
              <div>
                <SuccessImg />
              </div>
              <div className="ml-3">
                <span className="status-text">Swap of 2 wUSDC for 2.293 USDC.e </span>
                <div className="view-tezos">
                  View on Block Explorer{' '}
                  <span className="ml-3 material-icons-round launch-icon-flash">launch</span>
                </div>
              </div>
              <div className="ml-auto">
                <span
                  className="material-icons-round ml-3"
                  onClick={closeFlashMessage}
                  style={{ cursor: 'pointer' }}
                >
                  close
                </span>
              </div>
            </div>
          )
        ) : (
          <>
            <div className="flex flex-row">
              <div>
                <ErrorImg />
              </div>
              <div className={clsx('floater-text', !props.onBtnClick && 'center-floater-message')}>
                <span className="status-text">Transaction Rejected</span>
                {/* {props.onBtnClick && (
                  <div
                    className="view-tezos"
                    onClick={props.onBtnClick}
                    style={{ cursor: 'pointer' }}
                  >
                    View on Block Explorer{' '}
                    <span className="material-icons-round launch-icon-flash">launch</span>
                  </div>
                )} */}
              </div>
              <div className="ml-auto">
                <span
                  className="material-icons-round "
                  onClick={closeFlashMessage}
                  style={{ cursor: 'pointer' }}
                >
                  close
                </span>
              </div>
            </div>
          </>
        )}
      </div>
    );
  } else {
    return null;
  }
}

Example #4

Source File: index.js From plenty-interface with GNU General Public License v3.0

4 votes

LiquidityPage = () => {
  const {
    data = {
      summary: [],
      liquidity: [],
    },
    isLoading,
    error,
  } = useGetLiquidityQuery({ pollingInterval: 3_000 });

  const { imgPaths } = useLazyImages({ data: data.liquidity, page: 'liquidity' });

  const { isOnlyFavTokens, setIsOnlyFavTokens, favoriteTokens, editFavoriteTokenList } =
    useFavoriteToken('liquidity');

  const { valueFormat, stringSort, numberSort } = useTableNumberUtils();

  // ? Move to React Table filter later
  const finalData = useMemo(() => {
    if (isOnlyFavTokens) {
      return data.liquidity?.filter((datum) => favoriteTokens.includes(datum.pool_contract)) ?? [];
    }

    return data.liquidity;
  }, [favoriteTokens, isOnlyFavTokens, data]);

  const columns = useMemo(
    () => [
      {
        Header: (
          <TokensSymbolHeader
            className={styles.favoriteIcon}
            isOnlyFavTokens={isOnlyFavTokens}
            setIsOnlyFavTokens={setIsOnlyFavTokens}
          />
        ),
        id: 'favorite',
        accessor: 'pool_contract',
        disableSortBy: true,
        Cell: (row) => {
          return (
            <TokensSymbol
              tokenSymbol={row.value}
              className={styles.favoriteIcon}
              favoriteTokens={favoriteTokens}
              editFavoriteTokenList={editFavoriteTokenList}
            />
          );
        },
        width: 200,
      },
      {
        Header: <span className="ml-2">Name</span>,
        id: 'token',
        accessor: 'token1',
        sortType: stringSort,
        Cell: (row) => {
          const { token1, token2 } = row.row.original;
          return (
            <div className="d-flex pl-2 align-items-center">
              <TokenAvatar imgPath1={imgPaths[token1]} imgPath2={imgPaths[token2]} />
              <span className="ml-2 mr-4">
                {token1 === 'tez' ? 'TEZ' : token1 === 'ctez' ? 'CTEZ' : token1} /{' '}
                {token2 === 'tez' ? 'TEZ' : token2 === 'ctez' ? 'CTEZ' : token2}
              </span>
            </div>
          );
        },
        width: 120,
      },
      {
        Header: (
          <span className="flex align-center">
            Liquidity&nbsp;
            <Tooltip id={'liquidity-header'} message={'The value of tokens staked in the pool.'} />
          </span>
        ),
        id: 'liquidity',
        accessor: 'total_liquidity',
        sortType: numberSort,
        Cell: (row) => <span title={row.value}>{valueFormat(row.value)}</span>,
      },
      {
        Header: 'Daily Volume',
        accessor: '24h_volume',
        sortType: numberSort,
        Cell: (row) => <span>{valueFormat(row.value)}</span>,
      },
      {
        Header: 'Weekly Fees',
        accessor: '24h_fee',
        sortType: numberSort,
        Cell: (row) => <span>{valueFormat(row.value)}</span>,
      },
      {
        Header: (
          <span className="flex align-center">
            LP APR&nbsp;
            <Tooltip id={'lp-apr-header'} message={'Based on the annualized trading fees.'} />
          </span>
        ),
        accessor: 'lp_apr',
        sortType: numberSort,
        Cell: (row) => <span>{valueFormat(row.value ?? 0, { percentChange: true })}%</span>,
      },
      {
        Header: (
          <span className="flex align-center">
            Farm&nbsp;
            <Tooltip
              id={'farm-header'}
              message={'Active indicates a farm for the LP tokens of the liquidity pool.'}
            />
          </span>
        ),
        accessor: 'pool_contract',
        sortType: numberSort,
        Cell: (row) => (isActiveFarm(row.value) ? <span>Active</span> : null),
      },
      {
        disableSortBy: true,
        Header: '',
        id: 'trade',
        accessor: (x) => (
          <div className="d-flex">
            <Link
              style={{ textDecoration: 'none' }}
              to={{
                pathname: '/liquidity',
                search: `?${createSearchParams({
                  tokenA: x.token1,
                  tokenB: x.token2,
                })}`,
              }}
            >
              <Button color="primary" isIconBtn startIcon="add" iconBtnType="square" size="large" />
            </Link>

            <Link
              className="ml-2"
              style={{ textDecoration: 'none' }}
              to={{
                pathname: '/swap',
                search: `?${createSearchParams({
                  from: x.token1,
                  to: x.token2,
                })}`,
              }}
            >
              <Button
                color="default"
                isIconBtn
                startIcon="swap_vert"
                iconBtnType="square"
                size="large"
              />
            </Link>
          </div>
        ),
        width: 120,
      },
    ],
    [
      isOnlyFavTokens,
      setIsOnlyFavTokens,
      stringSort,
      numberSort,
      favoriteTokens,
      editFavoriteTokenList,
      imgPaths,
    ],
  );

  const [searchQuery, setSearchQuery] = useState('');

  return (
    <>
      <LiquiditySummary data={data.summary} />

      <Container fluid className={clsx(styles.tokens, styles.liquidityTable)}>
        <div className="w-100 d-flex justify-content-between px-5 align-items-center">
          <h5 className="font-weight-bolder">Liquidity Pools</h5>
          <InputGroup className={styles.searchBar}>
            <InputGroup.Prepend>
              <InputGroup.Text className={`${styles.searchIcon} border-right-0`}>
                <BsSearch />
              </InputGroup.Text>
            </InputGroup.Prepend>
            <FormControl
              placeholder="Search"
              className={`shadow-none border-left-0 ${styles.searchBox}`}
              value={searchQuery}
              onChange={(ev) => setSearchQuery(ev.target.value)}
            />
          </InputGroup>
        </div>

        {data.liquidity.length > 0 && (
          <div>
            <Table searchQuery={searchQuery} data={finalData} columns={columns} />
          </div>
        )}

        {data.liquidity.length === 0 && (isLoading || error) && (
          <div className="d-flex justify-content-between w-100" style={{ height: 800 }}>
            <div className="m-auto">
              {error ? <div>Something went wrong</div> : <PuffLoader color={'#813CE1'} size={56} />}
            </div>
          </div>
        )}
      </Container>

      <FavoriteIconGradient />
    </>
  );
}

Example #5

Source File: Tokens.js From plenty-interface with GNU General Public License v3.0

4 votes

Tokens = () => {
  const {
    data = [],
    isLoading,
    error,
  } = useGetTokensQuery(undefined, {
    pollingInterval: 30_000,
  });

  const { data: priceChangeData = {}, isLoading: priceChangeLoading } = useGet7DaysChangeQuery(
    undefined,
    {
      pollingInterval: 30_000,
    },
  );

  const { imgPaths } = useLazyImages({ data });

  const { isOnlyFavTokens, setIsOnlyFavTokens, favoriteTokens, editFavoriteTokenList } =
    useFavoriteToken('token');

  const { positiveOrNegative, valueFormat, stringSort, numberSort } = useTableNumberUtils();

  // ? Move to React Table filter later
  const finalData = useMemo(() => {
    if (isOnlyFavTokens) {
      return data?.filter((datum) => favoriteTokens.includes(datum.symbol_token)) ?? [];
    }

    return data;
  }, [favoriteTokens, isOnlyFavTokens, data]);

  const columns = useMemo(
    () => [
      {
        Header: (
          <TokensSymbolHeader
            className={styles.favoriteIcon}
            isOnlyFavTokens={isOnlyFavTokens}
            setIsOnlyFavTokens={setIsOnlyFavTokens}
          />
        ),
        id: 'favorite',
        accessor: 'symbol_token',
        disableSortBy: true,
        Cell: (row) => (
          <TokensSymbol
            tokenSymbol={row.value}
            className={styles.favoriteIcon}
            favoriteTokens={favoriteTokens}
            editFavoriteTokenList={editFavoriteTokenList}
          />
        ),
      },
      {
        Header: <span className="ml-2">Name</span>,
        id: 'token',
        accessor: 'symbol_token',
        sortType: stringSort,
        Cell: (row) => (
          <div className="d-flex pl-2 align-items-center">
            <Image src={imgPaths[row.value]?.url} height={32} width={32} alt={''} />
            <span className="ml-2 mr-4">
              {row.value === 'tez' ? 'TEZ' : row.value === 'ctez' ? 'CTEZ' : row.value}
            </span>
          </div>
        ),
        width: 120,
      },
      {
        Header: 'Price',
        accessor: 'token_price',
        sortType: numberSort,
        Cell: (row) => <span title={row.value}>{valueFormat(row.value)}</span>,
      },
      {
        Header: '24h Change',
        accessor: 'price_change_percentage',
        sortType: numberSort,
        Cell: (row) => (
          <span>{positiveOrNegative(valueFormat(row.value, { percentChange: true }))}</span>
        ),
      },
      {
        Header: '24h Volume',
        accessor: 'volume_token',
        sortType: numberSort,
        Cell: (row) => <span>{valueFormat(row.value)}</span>,
      },
      {
        Header: 'Liquidity',
        accessor: 'liquidity',
        sortType: numberSort,
        Cell: (row) => <span>{valueFormat(row.value)}</span>,
      },
      {
        id: 'price7d',
        Header: 'Last 7 Days',
        accessor: 'symbol_token',
        Cell: (row) => {
          let value = [...(priceChangeData[row.value] ?? [])].reverse();

          if (priceChangeLoading) return <div />;

          if (value.length === 0) return <div>N/A</div>;

          const changePositive = value[value.length - 1].value >= value[0].value;

          if (value.length <= 38) {
            const timeData = priceChangeData.PLENTY.map((x) => ({
              ...x,
              value: undefined,
            })).reverse();
            value = [...timeData.filter((x) => x.time < value[0].time), ...value];
          }

          return (
            <SimpleLineChart
              data={value}
              color={changePositive ? '#4FBF67' : '#FF7A68'}
              className="mx-2"
            />
          );
        },
        minWidth: 170,
        disableSortBy: true,
      },
      {
        disableSortBy: true,
        Header: '',
        id: 'trade',
        accessor: (x) => (
          <Link style={{ textDecoration: 'none' }} to={`/swap?from=${x.symbol_token}`}>
            <Button color="primary" className={styles.tradeBtn}>
              Trade
            </Button>
          </Link>
        ),
        width: 120,
      },
    ],
    [
      isOnlyFavTokens,
      setIsOnlyFavTokens,
      stringSort,
      numberSort,
      favoriteTokens,
      editFavoriteTokenList,
      imgPaths,
      priceChangeData,
      priceChangeLoading,
    ],
  );

  const [searchQuery, setSearchQuery] = useState('');

  return (
    <>
      <Container fluid className={clsx(styles.tokens, styles.tokensTable)}>
        <div className="w-100 d-flex justify-content-between px-5 align-items-center">
          <h5 className="font-weight-bolder">Tokens</h5>
          <InputGroup className={styles.searchBar}>
            <InputGroup.Prepend>
              <InputGroup.Text className={`${styles.searchIcon} border-right-0`}>
                <BsSearch />
              </InputGroup.Text>
            </InputGroup.Prepend>
            <FormControl
              placeholder="Search"
              className={`shadow-none border-left-0 ${styles.searchBox}`}
              value={searchQuery}
              onChange={(ev) => setSearchQuery(ev.target.value)}
            />
          </InputGroup>
        </div>

        {data.length > 0 && (
          <div>
            <Table searchQuery={searchQuery} data={finalData} columns={columns} />
          </div>
        )}

        {data.length === 0 && (isLoading || error) && (
          <div className="d-flex justify-content-between w-100" style={{ height: 800 }}>
            <div className="m-auto">
              {error ? <div>Something went wrong</div> : <PuffLoader color={'#813CE1'} size={56} />}
            </div>
          </div>
        )}
      </Container>

      <FavoriteIconGradient />
    </>
  );
}