react-feather#ArrowRight TypeScript Examples

export default function SideBarItem({ path }: Props): ReactElement {
  const { status, isLoading } = useContext(Context)
  const classes = useStyles()
  const location = useLocation()
  const isSelected = Boolean(path && matchPath(location.pathname, path))

  return (
    <ListItem
      button
      classes={{ root: `${classes.root} ${status.all ? '' : classes.rootError}`, button: classes.button }}
      selected={isSelected}
      disableRipple
    >
      <ListItemIcon style={{ marginLeft: '30px' }}>
        <StatusIcon checkState={status.all} isLoading={isLoading} />
      </ListItemIcon>
      <ListItemText primary={<Typography className={classes.smallerText}>{`Node ${status.all}`}</Typography>} />
      <ListItemIcon className={classes.icon}>
        {status.all ? null : <ArrowRight className={classes.iconSmall} />}
      </ListItemIcon>
    </ListItem>
  )
}

export function GiftCardTopUpIndex(): ReactElement {
  const [loading, setLoading] = useState(false)
  const [giftCode, setGiftCode] = useState('')

  const { enqueueSnackbar } = useSnackbar()
  const navigate = useNavigate()

  async function onProceed() {
    setLoading(true)
    try {
      const wallet = getWalletFromPrivateKeyString(giftCode)
      const dai = new DaiToken(await Rpc._eth_getBalance(wallet.getAddressString()))
      const bzz = new BzzToken(await Rpc._eth_getBalanceERC20(wallet.getAddressString()))

      if (dai.toDecimal.lt(0.001) || bzz.toDecimal.lt(0.001)) {
        throw Error('Gift wallet does not have enough funds')
      }
      enqueueSnackbar('Successfully verified gift wallet', { variant: 'success' })
      navigate(ROUTES.TOP_UP_GIFT_CODE_FUND.replace(':privateKeyString', giftCode))
    } catch (error) {
      enqueueSnackbar(`Gift wallet could not be verified: ${error}`, { variant: 'error' })
    } finally {
      setLoading(false)
    }
  }

  return (
    <>
      <HistoryHeader>Top-up with gift code</HistoryHeader>
      <Box mb={4}>
        <ProgressIndicator index={0} steps={['Paste gift code', 'Fund your node']} />
      </Box>
      <Box mb={2}>
        <Typography style={{ fontWeight: 'bold' }}>Please paste your gift code below</Typography>
      </Box>
      <Box mb={4}>
        A gift code is a unique key to a gift wallet that you can use to fund your node. Please don&apos;t share your
        gift code as it can only be used once.
      </Box>
      <SwarmDivider mb={4} />
      <Box mb={2}>
        <SwarmTextInput
          label="Gift code"
          name="gift-code"
          onChange={event => {
            setGiftCode(event.target.value)
          }}
        />
      </Box>
      <SwarmButton iconType={ArrowRight} loading={loading} disabled={loading} onClick={onProceed}>
        Proceed
      </SwarmButton>
    </>
  )
}

export default function TermsAndConditionsPopup({ handleAgree }: Props): ReactElement | null {
  const classes = useStyles()
  const navigate = useNavigate()

  return (
    <Layout
      top={[
        <Header
          key="top1"
          rightAction={
            <IconButton onClick={() => navigate(ROUTES.LANDING_PAGE)}>
              <X strokeWidth={1} />
            </IconButton>
          }
        >
          {text.termsAndConditions.header}
        </Header>,
        <Typography key="top2" variant="subtitle1">
          {text.termsAndConditions.tagline1}{' '}
          <Link href={ROUTES.TERMS_AND_CONDITIONS} color="inherit" underline="always" target="blank">
            {text.termsAndConditions.termsAndConditions}
          </Link>{' '}
          {text.termsAndConditions.tagline2}
        </Typography>,
      ]}
      center={[
        <div key="center">
          <Paper square elevation={0} className={classes.paper}>
            <div className={classes.ul}>
              {text.termsAndConditions.featuresAndLimitations.map(t => [
                <Typography key={`${t}-bee`} variant="body1">
                  <ArrowRight strokeWidth={1} />
                </Typography>,
                <Typography key={`${t}-text`} variant="body1">
                  {t}
                </Typography>,
              ])}
            </div>
            <Typography variant="body2">
              {text.termsAndConditions.disclaimer1}{' '}
              <Link href={ROUTES.TERMS_AND_CONDITIONS} color="inherit" underline="always" target="blank">
                {text.termsAndConditions.disclaimer2}
              </Link>
            </Typography>
          </Paper>
          <Button
            variant="contained"
            className={classes.button}
            size="small"
            style={{ marginTop: 2, paddingLeft: 16, paddingRight: 16 }}
            onClick={() => navigate(ROUTES.LANDING_PAGE)}
          >
            <CornerUpLeft strokeWidth={1} />
            {text.accessPage.backAction}
            <CornerUpLeft style={{ opacity: 0 }} />
          </Button>
        </div>,
      ]}
      bottom={[
        <div key="bottom1" style={{ zIndex: 1000 }}>
          <Footer>
            <Button variant="contained" className={classes.button} size="large" onClick={handleAgree}>
              <Check strokeWidth={1} />
              {text.termsAndConditions.agreeAction}
              <Check style={{ opacity: 0 }} />
            </Button>
          </Footer>
        </div>,
      ]}
    />
  )
}

function ScrollButtons({
  showsButtons,
  scrollNodeRef,
  canScrollLeft,
  canScrollRight,
}: Props) {
  function onTest() {
    animateScrollLeft(scrollNodeRef, SCROLL_DELTA)
  }

  function onTest2() {
    animateScrollLeft(scrollNodeRef, -SCROLL_DELTA)
  }

  return (
    <Fade in={showsButtons} unmountOnExit={true}>
      <IconButton
        bg="white"
        borderTopLeftRadius="full"
        borderBottomLeftRadius="full"
        size="md"
        aria-label="Add variant"
        icon={<ArrowLeft size={20} pointerEvents="none" />}
        variant="outline"
        onClick={onTest2}
        ml={3}
        flexShrink={0}
        isDisabled={!canScrollLeft}
      />
      <IconButton
        bg="white"
        borderTopRightRadius="full"
        borderBottomRightRadius="full"
        size="md"
        aria-label="Add variant"
        icon={<ArrowRight size={20} pointerEvents="none" />}
        variant="outline"
        onClick={onTest}
        flexShrink={0}
        isDisabled={!canScrollRight}
      />
    </Fade>
  )
}

AsyncDualSelectWidget = (props: DualSelectWidgetProps): JSX.Element => {
  const {
    name,
    style,
    helpText,
    notifier,
    provider,
    dataResourceUrl,
    selectedTitle = 'Selected Items',
    availableTitle = 'Available Items',
    selectButtonTitle = 'SELECT',
    unselectButtonTitle = 'UNSELECT',
    getOptionLabel,
    getOptionValue,
    containerStore,
    targetPayload,
    submitChange,
    copyValue,
    useClipboard,
  } = props

  const context = containerStore.getState()

  const { targetUrl, content, isRequired, widgetDescription } = useWidgetInitialization({
    ...props,
    context,
  })

  const handleChange = useCallback(
    (values: object[]): void => {
      const inputPayload = getPayload(values, name, targetPayload)
      submitChange({ url: targetUrl, payload: inputPayload })
    },
    [name, submitChange, targetPayload, targetUrl]
  )

  const [nextUrl, setNextUrl] = useState<string | null | undefined>('')
  const [options, setOptions] = useState<object[]>([])

  const getOptionsHandler = useCallback(
    async (url: string, searchQueryValue = ''): Promise<LoadOptionsType> => {
      const res = await provider
        .getPage(url, [
          {
            filterName: 'search',
            value: searchQueryValue,
          },
        ])
        .then(([data, , meta]: [object, object, Pagination]) => {
          const hasMore = !!meta.nextUrl
          setNextUrl(hasMore ? meta.nextUrl : '')
          return {
            options: data,
            hasMore,
          }
        })
      return res
    },
    [provider]
  )

  const loadOptions = useCallback(
    async ({ first = false, searchQueryValue = '' }): Promise<AsyncResult<LoadOptionsType>> => {
      let url = dataResourceUrl
      if (!first && !!nextUrl) {
        url = nextUrl
      }

      if (first || nextUrl) {
        const res = await getOptionsHandler(url, searchQueryValue)
        return res as AsyncResult<LoadOptionsType>
      }

      return Promise.resolve({
        options: [],
        hasMore: false,
      })
    },
    [dataResourceUrl, getOptionsHandler, nextUrl]
  )

  const [availableSelected, setAvailableSelected] = useState<string[]>([])
  const [selectedSelected, setSelectedSelected] = useState<string[]>([])

  const [selectedItems, setSelectedItems] = useState<string[] | null>(null)
  const selectedOptions =
    (selectedItems !== null && options.filter((o) => selectedItems.includes(getOptionValue(o)))) || []
  const availableOptions =
    (selectedItems !== null && options.filter((o) => !selectedItems.includes(getOptionValue(o)))) || []

  const isDisableSelect = availableSelected.length === 0
  const isDisableUnselect = selectedSelected.length === 0

  useEffect(() => {
    setSelectedItems([])
    loadOptions({ first: true }).then((res) => {
      setOptions(res.options)
    })
  }, [loadOptions])

  const allDeselect = useCallback(() => {
    setSelectedSelected([])
    setAvailableSelected([])
  }, [])

  const onChange = useCallback(() => {
    handleChange((selectedItems !== null && options.filter((o) => selectedItems.includes(getOptionValue(o)))) || [])
    allDeselect()
  }, [allDeselect, getOptionValue, handleChange, options, selectedItems])

  const selectButtonHandler = useCallback(() => {
    setSelectedItems(availableSelected.concat((selectedItems !== null && selectedItems) || []))
  }, [availableSelected, selectedItems])

  const unselectButtonHandler = useCallback(() => {
    setSelectedItems((selectedItems !== null && selectedItems.filter((si) => !selectedSelected.includes(si))) || [])
  }, [selectedItems, selectedSelected])

  const previousSelectedItems = usePrevious(selectedItems)
  useEffect(() => {
    if (
      selectedItems !== null &&
      previousSelectedItems !== null &&
      selectedItems.length !== previousSelectedItems.length
    ) {
      onChange()
    }
  }, [onChange, previousSelectedItems, selectedItems])

  const handleCopyValue = getCopyHandler(content, copyValue)

  const [searchActive, setSearchActive] = useState(false)
  const [searchValue, setSearchValue] = useState<string>('')
  const handleSearchToggle = useCallback(() => {
    if (searchActive) {
      setSearchValue('')
      loadOptions({ first: true }).then((res) => {
        setOptions(res.options)
      })
    }
    setSearchActive(!searchActive)
  }, [loadOptions, searchActive])

  return (
    <WidgetWrapper
      name={name}
      style={style}
      helpText={helpText || 'Items'}
      description={widgetDescription}
      required={isRequired}
      notifier={notifier}
      useClipboard={useClipboard}
      copyValue={handleCopyValue}
    >
      <Flex>
        <SideContainer data-testid="ds-left-list">
          <SideContainerTitle fontSize="md">
            {searchActive ? (
              <DebounceInput
                value={searchValue}
                onChange={(newValue) => {
                  loadOptions({ first: true, searchQueryValue: newValue }).then((res) => {
                    setOptions(res.options)
                  })
                  setSearchValue(newValue)
                }}
                style={{ paddingLeft: 5 }}
                borderWidth="1px"
                borderColor="gray.300"
                height="20px"
                debounceTimeout={700}
              />
            ) : (
              availableTitle
            )}
            {searchActive ? (
              <StyledCloseIcon onClick={handleSearchToggle} />
            ) : (
              <StyledSearchIcon
                style={{ ...(searchActive ? { color: 'dodgerblue' } : undefined) }}
                onClick={handleSearchToggle}
              />
            )}
          </SideContainerTitle>
          <SelectList
            values={availableOptions}
            selectedValues={availableSelected}
            disabledValues={[]}
            handleChange={(items) => {
              setAvailableSelected(items)
            }}
            handleScrollBottom={() => {
              loadOptions({}).then((res) => {
                setOptions(options.concat(res.options))
              })
            }}
            getOptionValue={getOptionValue}
            getOptionLabel={getOptionLabel}
          />
        </SideContainer>
        <CenterContainer>
          <SelectButton
            isDisabled={isDisableSelect}
            rightIcon={<ArrowRight />}
            variant="outline"
            onClick={selectButtonHandler}
          >
            {selectButtonTitle}
          </SelectButton>
          <SelectButton
            isDisabled={isDisableUnselect}
            leftIcon={<ArrowLeft />}
            variant="outline"
            onClick={unselectButtonHandler}
          >
            {unselectButtonTitle}
          </SelectButton>
        </CenterContainer>
        <SideContainer data-testid="ds-right-list">
          <SideContainerTitle fontSize="md">{selectedTitle}</SideContainerTitle>
          <SelectList
            values={selectedOptions}
            selectedValues={selectedSelected}
            handleChange={(items) => {
              setSelectedSelected(items)
            }}
            getOptionValue={getOptionValue}
            getOptionLabel={getOptionLabel}
          />
        </SideContainer>
      </Flex>
    </WidgetWrapper>
  )
}

export default function OrderCard({ order }: { order: Order }) {
  const theme = useTheme();

  const { chainId, handler } = useWeb3();

  const [
    showExecutionPriceInverted,
    setShowExecutionPriceInverted,
  ] = useState<boolean>(false);
  const [
    showEthereumExecutionPriceInverted,
    setShowEthereumExecutionPriceInverted,
  ] = useState<boolean>(true);
  const [
    showCurrentPriceInverted,
    setShowCurrentPriceInverted,
  ] = useState<boolean>(true);

  const { handleLimitOrderCancellation } = useGelatoLimitOrdersHandlers();

  const gelatoLibrary = useGelatoLimitOrdersLib();

  const inputToken = useCurrency(order.inputToken);
  const outputToken = useCurrency(order.outputToken);

  const inputAmount = useMemo(
    () =>
      inputToken && order.inputAmount
        ? CurrencyAmount.fromRawAmount(inputToken, order.inputAmount)
        : undefined,
    [inputToken, order.inputAmount]
  );

  const isEthereum = isEthereumChain(chainId ?? 1);

  const rawMinReturn = useMemo(
    () =>
      order.adjustedMinReturn
        ? order.adjustedMinReturn
        : gelatoLibrary && chainId && order.minReturn
        ? isEthereum
          ? order.minReturn
          : gelatoLibrary.getAdjustedMinReturn(order.minReturn)
        : undefined,
    [
      chainId,
      gelatoLibrary,
      order.adjustedMinReturn,
      order.minReturn,
      isEthereum,
    ]
  );

  const outputAmount = useMemo(
    () =>
      outputToken && rawMinReturn
        ? CurrencyAmount.fromRawAmount(outputToken, rawMinReturn)
        : undefined,
    [outputToken, rawMinReturn]
  );

  const {
    gasPrice,
    realExecutionPrice: ethereumExecutionPrice,
  } = useGasOverhead(inputAmount, outputAmount, Rate.MUL);

  const executionPrice = useMemo(
    () =>
      outputAmount && outputAmount.greaterThan(0) && inputAmount
        ? new Price({
            baseAmount: outputAmount,
            quoteAmount: inputAmount,
          })
        : undefined,
    [inputAmount, outputAmount]
  );

  const trade = useTradeExactIn(inputAmount, outputToken ?? undefined, handler);

  const isSubmissionPending = useIsTransactionPending(order.createdTxHash);
  const isCancellationPending = useIsTransactionPending(
    order.cancelledTxHash ?? undefined
  );

  // modal and loading
  const [
    { showConfirm, cancellationErrorMessage, attemptingTxn, txHash },
    setCancellationState,
  ] = useState<{
    showConfirm: boolean;
    attemptingTxn: boolean;
    cancellationErrorMessage: string | undefined;
    txHash: string | undefined;
  }>({
    showConfirm: false,
    attemptingTxn: false,
    cancellationErrorMessage: undefined,
    txHash: undefined,
  });

  const handleConfirmDismiss = useCallback(() => {
    setCancellationState({
      showConfirm: false,
      attemptingTxn,
      cancellationErrorMessage,
      txHash,
    });
  }, [attemptingTxn, cancellationErrorMessage, txHash]);

  const handleCancellation = useCallback(() => {
    if (!handleLimitOrderCancellation) {
      return;
    }

    setCancellationState({
      attemptingTxn: true,
      showConfirm,
      cancellationErrorMessage: undefined,
      txHash: undefined,
    });

    const orderDetails =
      inputToken?.symbol && outputToken?.symbol && inputAmount && outputAmount
        ? {
            inputTokenSymbol: inputToken.symbol,
            outputTokenSymbol: outputToken.symbol,
            inputAmount: inputAmount.toSignificant(4),
            outputAmount: outputAmount.toSignificant(4),
          }
        : undefined;

    handleLimitOrderCancellation(order, orderDetails)
      .then(({ hash }) => {
        setCancellationState({
          attemptingTxn: false,
          showConfirm,
          cancellationErrorMessage: undefined,
          txHash: hash,
        });
      })
      .catch((error) => {
        setCancellationState({
          attemptingTxn: false,
          showConfirm,
          cancellationErrorMessage: error.message,
          txHash: undefined,
        });
      });
  }, [
    handleLimitOrderCancellation,
    showConfirm,
    inputToken,
    outputToken,
    inputAmount,
    outputAmount,
    order,
  ]);

  const OrderCard = ({
    showStatusButton = true,
  }: {
    showStatusButton?: boolean;
  }) => (
    <OrderPanel>
      <Container hideInput={true}>
        <RowBetween padding="10px">
          {inputToken ? (
            <CurrencySelect selected={true}>
              <Aligner>
                <CurrencyLogo
                  currency={inputToken ?? undefined}
                  size={"18px"}
                />
                <StyledTokenName>
                  {inputToken?.name ?? <Dots />}
                </StyledTokenName>
              </Aligner>
            </CurrencySelect>
          ) : (
            <Dots />
          )}
          <ArrowWrapper>
            <ArrowRight size="16" color={theme.text1} />
          </ArrowWrapper>
          {outputToken ? (
            <CurrencySelect selected={true}>
              <Aligner>
                <CurrencyLogo
                  currency={outputToken ?? undefined}
                  size={"18px"}
                />
                <StyledTokenName>
                  {outputToken.name ?? <Dots />}
                </StyledTokenName>
              </Aligner>
            </CurrencySelect>
          ) : (
            <Dots />
          )}
          <Spacer />
          {showStatusButton ? (
            <OrderStatus
              clickable={true}
              onClick={() => {
                if (!chainId) return;

                if (order.status === "open" && !isSubmissionPending)
                  setCancellationState({
                    attemptingTxn: false,
                    cancellationErrorMessage: undefined,
                    showConfirm: true,
                    txHash: undefined,
                  });
                else if (order.status === "open" && isSubmissionPending)
                  window.open(
                    getExplorerLink(
                      chainId,
                      order.createdTxHash,
                      ExplorerDataType.TRANSACTION
                    ),
                    "_blank"
                  );
                else if (order.status === "cancelled" && order.cancelledTxHash)
                  window.open(
                    getExplorerLink(
                      chainId,
                      order.cancelledTxHash,
                      ExplorerDataType.TRANSACTION
                    ),
                    "_blank"
                  );
                else if (order.status === "executed" && order.executedTxHash)
                  window.open(
                    getExplorerLink(
                      chainId,
                      order.executedTxHash,
                      ExplorerDataType.TRANSACTION
                    ),
                    "_blank"
                  );
              }}
              status={
                isCancellationPending || isSubmissionPending
                  ? "pending"
                  : order.status
              }
            >
              {isSubmissionPending
                ? "pending"
                : isCancellationPending
                ? "cancelling"
                : order.status === "open"
                ? "cancel"
                : order.status}
              {isSubmissionPending || isCancellationPending ? <Dots /> : null}
            </OrderStatus>
          ) : null}
        </RowBetween>

        <Aligner style={{ marginTop: "10px" }}>
          <OrderRow>
            <RowBetween>
              <Text fontWeight={500} fontSize={14} color={theme.text1}>
                {`Sell ${inputAmount ? inputAmount.toSignificant(4) : "-"} ${
                  inputAmount?.currency.symbol ?? ""
                } for ${outputAmount ? outputAmount.toSignificant(4) : "-"} ${
                  outputAmount?.currency.symbol ?? ""
                }`}
              </Text>
            </RowBetween>
          </OrderRow>
        </Aligner>
        <Aligner
          style={{
            marginTop: "-2px",
            marginBottom: order.status === "open" ? "1px" : "20px",
          }}
        >
          <OrderRow>
            <RowBetween>
              <Text
                fontWeight={400}
                fontSize={12}
                color={theme.text1}
                style={{ marginRight: "4px", marginTop: "2px" }}
              >
                Current price:
              </Text>
              {trade ? (
                <TradePrice
                  price={trade.executionPrice}
                  showInverted={showCurrentPriceInverted}
                  setShowInverted={setShowCurrentPriceInverted}
                  fontWeight={500}
                  fontSize={12}
                />
              ) : (
                <Dots />
              )}
            </RowBetween>
          </OrderRow>
        </Aligner>

        {order.status === "open" ? (
          <Aligner style={{ marginTop: "-10px" }}>
            <OrderRow>
              <RowBetween>
                <Text
                  fontWeight={400}
                  fontSize={12}
                  color={theme.text1}
                  style={{ marginRight: "4px", marginTop: "2px" }}
                >
                  Execution price:
                </Text>
                {executionPrice ? (
                  isEthereum ? (
                    <>
                      <MouseoverTooltip
                        text={`The execution price takes into account the gas necessary to execute your order and guarantees that your desired rate is fulfilled, so that the minimum you receive is ${
                          outputAmount ? outputAmount.toSignificant(4) : "-"
                        } ${
                          outputAmount?.currency.symbol ?? ""
                        }. It fluctuates according to gas prices. Current gas price: ${parseFloat(
                          gasPrice ? formatUnits(gasPrice, "gwei") : "-"
                        ).toFixed(0)} GWEI.`}
                      >
                        {ethereumExecutionPrice ? (
                          <TradePrice
                            price={ethereumExecutionPrice}
                            showInverted={showEthereumExecutionPriceInverted}
                            setShowInverted={
                              setShowEthereumExecutionPriceInverted
                            }
                            fontWeight={500}
                            fontSize={12}
                          />
                        ) : ethereumExecutionPrice === undefined ? (
                          <TYPE.body fontSize={14} color={theme.text2}>
                            <HoverInlineText text={"never executes"} />
                          </TYPE.body>
                        ) : (
                          <Dots />
                        )}
                      </MouseoverTooltip>
                    </>
                  ) : (
                    <TradePrice
                      price={executionPrice}
                      showInverted={showExecutionPriceInverted}
                      setShowInverted={setShowExecutionPriceInverted}
                      fontWeight={500}
                      fontSize={12}
                    />
                  )
                ) : (
                  <Dots />
                )}
              </RowBetween>
            </OrderRow>
          </Aligner>
        ) : null}
      </Container>
    </OrderPanel>
  );

  return (
    <>
      <ConfirmCancellationModal
        isOpen={showConfirm}
        attemptingTxn={attemptingTxn}
        txHash={txHash}
        onConfirm={handleCancellation}
        swapErrorMessage={cancellationErrorMessage}
        onDismiss={handleConfirmDismiss}
        topContent={() => (
          <>
            <br />
            <OrderCard showStatusButton={false} />
          </>
        )}
      />
      <OrderCard />
    </>
  );
}