react-icons/fi#FiXCircle TypeScript Examples

The following examples show how to use react-icons/fi#FiXCircle. 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: Transaction.tsx    From dxvote with GNU Affero General Public License v3.0 6 votes vote down vote up 
Transaction: React.FC<TransactionProps> = ({ transaction }) => {
  const { chainId } = useWeb3React();
  const networkName = getChains().find(chain => chain.id === chainId).name;
  return (
    <TransactionContainer>
      <Link
        href={getBlockchainLink(transaction.hash, networkName)}
        target="_blank"
      >
        {transaction.summary} <FiArrowUpRight />
      </Link>
      <Icon>
        {!transaction.receipt ? (
          <PendingCircle height="16px" width="16px" color="#000" />
        ) : transaction.receipt?.status === 1 ? (
          <FiCheckCircle />
        ) : (
          <FiXCircle />
        )}
      </Icon>
    </TransactionContainer>
  );
}
Example #2
Source File: index.tsx    From gobarber-web with MIT License 6 votes vote down vote up 
Toast: React.FC<ToastProps> = ({ message, style }) => {
  const { removeToast } = useToast();

  useEffect(() => {
    const timer = setTimeout(() => {
      removeToast(message.id);
    }, 3000);

    return () => {
      clearTimeout(timer);
    };
  }, [removeToast, message.id]);

  return (
    <Container
      type={message.type}
      hasdescription={message.description ? 1 : 0}
      style={style}
    >
      {icons[message.type || 'info']}

      <div>
        <strong>{message.title}</strong>
        {message.description && <p>{message.description}</p>}
      </div>

      <button onClick={() => removeToast(message.id)} type="button">
        <FiXCircle size={18} />
      </button>
    </Container>
  );
}
Example #3
Source File: index.tsx    From ecoleta with MIT License 6 votes vote down vote up 
Toast: React.FC<IToastProps> = ({ message, style }) => {
  const { removeToast } = useToast();

  useEffect(() => {
    const timer = setTimeout(() => {
      removeToast(message.id);
    }, 3000);

    return () => {
      clearTimeout(timer);
    };
  }, [removeToast, message.id]);

  return (
    <Container
      type={message.type}
      hasDescription={message.description ? 1 : 0}
      style={style}
    >
      {icons[message.type || 'info']}

      <div>
        <strong>{message.title}</strong>
        {message.description && <p>{message.description}</p>}
      </div>

      <button type="button" onClick={() => removeToast(message.id)}>
        <FiXCircle size={18} />
      </button>
    </Container>
  );
}
Example #4
Source File: index.tsx    From front-entenda-direito with GNU General Public License v3.0 6 votes vote down vote up 
Toast: React.FC<ToastProps> = ({ message, style }) => {
  const { removeToast } = useToast();

  useEffect(() => {
    const timer = setTimeout(() => {
      removeToast(message.id);
    }, 3000);

    return () => {
      clearTimeout(timer);
    };
  }, [message.id, removeToast]);

  return (
    <Container
      type={message.type}
      hasdescription={Number(!!message.description)}
      style={style}
    >
      {icons[message.type || 'info']}

      <div>
        <strong>{message.title}</strong>
        {message.description && <p>{message.description}</p>}
      </div>

      <button type="button" onClick={() => removeToast(message.id)}>
        <FiXCircle size={18} />
      </button>
    </Container>
  );
}
Example #5
Source File: index.tsx    From front-entenda-direito with GNU General Public License v3.0 6 votes vote down vote up 
ToastModal: React.FC<ToastModalProps> = ({ message, style }) => {
  const { removeModal } = useModal();

  return (
    <Container
      type={message.type}
      hasdescription={Number(!!message.description)}
      style={style}
    >
      {icons[message.type || 'info']}

      <div>
        <strong>{message.title}</strong>
        {message.description && <p>{message.description}</p>}
      </div>

      <button type="button" onClick={() => removeModal(message.id)}>
        <FiXCircle size={18} />
      </button>
    </Container>
  );
}
Example #6
Source File: index.tsx    From rocketredis with MIT License 6 votes vote down vote up 
Toast: React.FC<ToastProps> = ({ toast, style }) => {
  const { removeToast } = useToast()

  const closeToast = useCallback(() => removeToast(toast.id), [
    removeToast,
    toast.id
  ])

  useEffect(() => {
    const timer = setTimeout(() => {
      closeToast()
    }, 4000)

    return (): void => {
      clearTimeout(timer)
    }
  }, [closeToast])

  return (
    <Container type={toast.type} style={style}>
      {icons[toast.type]}

      <div>
        <strong>{toast.title}</strong>
        <p>{toast.description}</p>
      </div>

      <button type="button" onClick={closeToast}>
        <FiXCircle size={18} />
      </button>
    </Container>
  )
}
Example #7
Source File: index.tsx    From vagasExplorer with MIT License 6 votes vote down vote up 
Toast: React.FC<ToastProps> = ({ message, style }) => {
  const { removeToast } = useToast();

  useEffect(() => {
    const timer = setTimeout(() => {
      removeToast(message.id);
    }, 3000);
    return () => {
      clearTimeout(timer);
    };
  }, [removeToast, message.id]);

  return (
    <Container
      style={style}
      type={message.type}
      hasDescription={!!message.description}
    >
      {icons[message.type || 'info']}

      <div>
        <strong>{message.title}</strong>
        {message.description && <p>{message.description}</p>}
      </div>

      <button onClick={() => removeToast(message.id)} type="button">
        <FiXCircle size={18} />
      </button>
    </Container>
  );
}
Example #8
Source File: index.tsx    From gobarber-project with MIT License 6 votes vote down vote up 
Toast: React.FC<ToastProps> = ({ message, style }) => {
  const { removeToast } = useToast();

  useEffect(() => {
    const timer = setTimeout(() => {
      removeToast(message.id);
    }, 3000);

    return () => {
      clearTimeout(timer);
    };
  }, [removeToast, message.id]);

  return (
    <Container
      type={message.type}
      has_description={Number(!!message.description)}
      style={style}
    >
      {icons[message.type || 'info']}

      <div>
        <strong>{message.title}</strong>
        {message.description && <p>{message.description}</p>}
      </div>

      <button onClick={() => removeToast(message.id)} type="button">
        <FiXCircle size={18} />
      </button>
    </Container>
  );
}
Example #9
Source File: index.tsx    From GoBarber with MIT License 6 votes vote down vote up 
Toast: React.FC<ToastProps> = ({ message, style }) => {
  const { removeToast } = useToast();

  useEffect(() => {
    const timer = setTimeout(() => {
      removeToast(message.id);
    }, 3000);

    // Se você retornar uma função dentro do useEffect
    // Ela será executada caso o componente deixe de existir
    // Similar ao componentDidUnmount
    return () => {
      clearTimeout(timer);
    };
  }, [message.id, removeToast]);

  return (
    <Container
      type={message.type}
      hasDescription={Number(!!message.description)}
      style={style}
    >
      {icons[message.type || 'info']}
      <div>
        <strong>{message.title}</strong>
        {message.description && <p>{message.description}</p>}
      </div>
      <button onClick={() => removeToast(message.id)} type="button">
        <FiXCircle size={18} />
      </button>
    </Container>
  );
}
Example #10
Source File: transactions.tsx    From dxvote with GNU Affero General Public License v3.0 4 votes vote down vote up 
TransactionsProvider = ({ children }) => {
  const { chainId, account } = useWeb3React();

  const [transactions, setTransactions] = useLocalStorage<TransactionState>(
    `transactions/${account}`,
    {}
  );
  const [pendingTransaction, setPendingTransaction] =
    useState<PendingTransaction>(null);

  // Get the transactions from the current chain
  const allTransactions = useMemo(() => {
    return transactions[chainId] ? Object.values(transactions[chainId]) : [];
  }, [transactions, chainId]);

  const addTransaction = (
    txResponse: providers.TransactionResponse,
    summary?: string
  ) => {
    if (!txResponse.hash) return;

    const transaction: Transaction = {
      hash: txResponse.hash,
      from: txResponse.from,
      summary,
      addedTime: Date.now(),
    };

    setTransactions(prevState => ({
      ...prevState,
      [chainId]: {
        ...prevState[chainId],
        [transaction.hash]: transaction,
      },
    }));
  };

  const clearAllTransactions = () => {
    setTransactions(prevState => ({
      ...prevState,
      [chainId]: {},
    }));
  };

  const finalizeTransaction = useCallback(
    (hash: string, receipt: providers.TransactionReceipt) => {
      if (!transactions[chainId] || !transactions[chainId][hash]) {
        return;
      }

      setTransactions(prevState => ({
        ...prevState,
        [chainId]: {
          ...prevState[chainId],
          [hash]: {
            ...prevState[chainId][hash],
            receipt: {
              transactionHash: receipt.transactionHash,
              blockNumber: receipt.blockNumber,
              status: receipt.status,
            },
            confirmedTime: Date.now(),
          },
        },
      }));
    },
    [transactions, chainId, setTransactions]
  );

  // Mark the transactions as finalized when they are mined
  const provider = useJsonRpcProvider();
  useEffect(() => {
    let isSubscribed = true;

    allTransactions
      .filter(transaction => !transaction.receipt)
      .forEach(transaction => {
        provider.waitForTransaction(transaction.hash).then(receipt => {
          if (isSubscribed) finalizeTransaction(transaction.hash, receipt);
        });
      });

    return () => {
      isSubscribed = false;
    };
  }, [allTransactions, finalizeTransaction, provider]);

  // Update the pending transaction notifications when finalized
  useEffect(() => {
    allTransactions.forEach(transaction => {
      if (transaction.receipt && toast.isActive(transaction.hash)) {
        if (transaction.receipt.status === 1) {
          toast.update(transaction.hash, {
            isLoading: false,
            render: (
              <TransactionOutcome
                summary={transaction.summary}
                chainId={chainId}
                transactionHash={transaction.hash}
              />
            ),
            icon: <FiCheckCircle />,
            type: toast.TYPE.SUCCESS,
            autoClose: 15000,
          });
        } else {
          toast.update(transaction.hash, {
            isLoading: false,
            render: (
              <TransactionOutcome
                summary={transaction.summary}
                chainId={chainId}
                transactionHash={transaction.hash}
              />
            ),
            icon: <FiXCircle />,
            type: toast.TYPE.ERROR,
            autoClose: 15000,
          });
        }
      }
    });
  }, [allTransactions, chainId]);

  // Trigger a new transaction request to the user wallet and track its progress
  const createTransaction = async (
    summary: string,
    txFunction: () => Promise<providers.TransactionResponse>,
    showModal: boolean = true
  ) => {
    setPendingTransaction({
      summary,
      showModal,
      cancelled: false,
      transactionHash: null,
    });
    let transactionHash = null;
    try {
      const txResponse = await txFunction();
      transactionHash = txResponse.hash;
      addTransaction(txResponse, summary);
      setPendingTransaction(pendingTransaction => ({
        ...pendingTransaction,
        transactionHash,
      }));
      toast(<TransactionPending summary={summary} />, {
        toastId: transactionHash,
        autoClose: false,
        isLoading: true,
      });
    } catch (e) {
      console.error('Transaction execution failed', e);
      setPendingTransaction(pendingTransaction => ({
        ...pendingTransaction,
        cancelled: true,
      }));
    }
  };

  return (
    <TransactionsContext.Provider
      value={{
        transactions: allTransactions,
        pendingTransaction,
        createTransaction,
        clearAllTransactions,
      }}
    >
      {children}

      <TransactionModal
        message={pendingTransaction?.summary}
        transactionHash={pendingTransaction?.transactionHash}
        onCancel={() => setPendingTransaction(null)}
        txCancelled={pendingTransaction?.cancelled}
      />
    </TransactionsContext.Provider>
  );
}