feat: move few ui components to SDK

packages/flair-sdk/package.json

@@ -52,7 +52,6 @@
     "@0xflair/react-contracts": "0.*",
     "@0xflair/react-icons": "0.*",
     "@0xflair/react-ipfs": "0.*",
-    "@0xflair/react-coingecko": "0.*",
     "@0xflair/react-nft-collections": "0.*",
     "@0xflair/react-openzeppelin": "0.*",
     "@0xflair/react-ui": "0.*",

packages/react-ui/src/components/elements/CopyButton.tsx

@@ -0,0 +1,32 @@
+import { classNames } from '@0xflair/react-common';
+import { CheckCircleIcon } from '@heroicons/react/outline';
+import { useState } from 'react';
+import { useCopyToClipboard } from 'usehooks-ts';
+
+import { Button, SECONDARY_BUTTON } from './Button';
+
+type Props = {
+  label?: string;
+  content?: any;
+  className?: string;
+};
+
+export const CopyButton = ({ label, content, className }: Props) => {
+  const [, copyToClipboard] = useCopyToClipboard();
+  const [recentlyCopied, setRecentlyCopied] = useState(false);
+
+  return (
+    <Button
+      text={label || 'Copy to clipboard'}
+      icon={
+        recentlyCopied ? (
+          <CheckCircleIcon className="text-green-500" aria-hidden="true" />
+        ) : null
+      }
+      className={className || classNames(SECONDARY_BUTTON, 'text-sm')}
+      onClick={() =>
+        copyToClipboard(content).then(() => setRecentlyCopied(true))
+      }
+    />
+  );
+};

packages/react-ui/src/components/elements/TransactionLink.tsx

@@ -0,0 +1,43 @@
+import { ethers } from 'ethers';
+import { Chain, useNetwork } from 'wagmi';
+
+type Props = {
+  className?: string;
+  chain?: Chain;
+  txResponse?: ethers.providers.TransactionResponse;
+  txReceipt?: ethers.providers.TransactionReceipt;
+};
+
+export const TransactionLink = ({
+  className = 'text-sm text-indigo-700',
+  chain,
+  txResponse,
+  txReceipt,
+}: Props) => {
+  const [{ data: network }] = useNetwork();
+
+  const txHash = txResponse?.hash || txReceipt?.transactionHash;
+  const scannerChain = chain || network.chain;
+  const explorer = ((scannerChain?.blockExplorers as any) || [])[0];
+
+  return (
+    <div className={className}>
+      {txHash ? (
+        <>
+          {explorer ? (
+            <a
+              href={`${explorer.url}/tx/${txHash}`}
+              target={'_blank'}
+              className={'text-sm text-indigo-700'}
+              rel="noreferrer"
+            >
+              View on {explorer.name}
+            </a>
+          ) : (
+            <span className="truncate w-40">{txHash}</span>
+          )}
+        </>
+      ) : null}
+    </div>
+  );
+};

packages/react-ui/src/components/elements/index.tsx

@@ -1,9 +1,11 @@
-export * from './Badge';
 export * from './CodeBlock/CodeBlock';
+export * from './AddressScannerLink';
+export * from './Badge';
 export * from './Button';
+export * from './ChainBadge';
+export * from './CopyButton';
 export * from './Errors';
 export * from './Spinner';
-export * from './Tooltip';
-export * from './AddressScannerLink';
-export * from './ChainBadge';
 export * from './Time';
+export * from './Tooltip';
+export * from './TransactionLink';