Merge pull request #316 from reservoirprotocol/ted/relay-5951-unverif…

…ied-token-modal Unverified token support
reservoirprotocol · Oct 29, 2024 · c2c2ca0 · c2c2ca0
2 parents b0e9a62 + fc0feeb
commit c2c2ca0
Show file tree

Hide file tree

Showing 20 changed files with 762 additions and 249 deletions.
diff --git a/.changeset/four-actors-obey.md b/.changeset/four-actors-obey.md
@@ -0,0 +1,6 @@
+---
+'@reservoir0x/relay-sdk': patch
+'@reservoir0x/relay-kit-ui': patch
+---
+
+Add support for unverified tokens
diff --git a/packages/sdk/src/types/api.ts b/packages/sdk/src/types/api.ts
@@ -4084,6 +4084,8 @@ export interface paths {
             limit?: number;
             /** @description Include all chains for a currency when filtering by chainId and address */
             includeAllChains?: boolean;
+            /** @description Uses 3rd party API's to search for a token, in case relay does not have it indexed */
+            useExternalSearch?: boolean;
           };
         };
       };

diff --git a/packages/ui/panda.config.ts b/packages/ui/panda.config.ts
@@ -57,6 +57,7 @@ export const Colors = {
   // Amber
   amber2: { value: '{colors.amber.2}' },
   amber3: { value: '{colors.amber.3}' },
+  amber4: { value: '{colors.amber.4}' },
   amber9: { value: '{colors.amber.9}' },
   amber10: { value: '{colors.amber.10}' },
   amber11: { value: '{colors.amber.11}' },

diff --git a/packages/ui/src/components/common/CopyToClipBoard.tsx b/packages/ui/src/components/common/CopyToClipBoard.tsx
@@ -0,0 +1,69 @@
+import { type FC, useState } from 'react'
+import { Button, Text } from '../primitives/index.js'
+import Tooltip from '../primitives/Tooltip.js'
+import { useCopyToClipboard } from 'usehooks-ts'
+import { AnimatePresence, motion } from 'framer-motion'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCheck, faCopy } from '@fortawesome/free-solid-svg-icons'
+
+type CopyToClipBoardProps = {
+  text: string
+}
+
+export const CopyToClipBoard: FC<CopyToClipBoardProps> = ({ text }) => {
+  const [value, copy] = useCopyToClipboard()
+  const [isCopied, setIsCopied] = useState(false)
+  const [open, setOpen] = useState(false)
+
+  const handleCopy = () => {
+    copy(text)
+    setIsCopied(true)
+    setTimeout(() => setIsCopied(false), 1000)
+  }
+
+  return (
+    <Tooltip
+      align="center"
+      side="top"
+      open={open}
+      content={<Text style="body2">{isCopied ? 'Copied!' : 'Copy'}</Text>}
+    >
+      <Button
+        color="ghost"
+        size="none"
+        onClick={(e) => {
+          e.preventDefault()
+          handleCopy()
+        }}
+        onMouseEnter={() => setOpen(true)}
+        onMouseLeave={() => setOpen(false)}
+        onTouchStart={() => {
+          handleCopy()
+          setOpen(true)
+          setTimeout(() => setOpen(false), 1000)
+        }}
+        css={{ color: 'gray9', _hover: { color: 'gray11' } }}
+      >
+        <AnimatePresence initial={false} mode="wait">
+          <motion.span
+            transition={{
+              type: 'spring',
+              duration: 0.15,
+              bounce: 0
+            }}
+            initial={{ opacity: 0, scale: 0 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0 }}
+            key={isCopied ? 'Copied' : 'Copy'}
+          >
+            {isCopied ? (
+              <FontAwesomeIcon icon={faCheck} width={16} height={16} />
+            ) : (
+              <FontAwesomeIcon icon={faCopy} width={16} height={16} />
+            )}
+          </motion.span>
+        </AnimatePresence>
+      </Button>
+    </Tooltip>
+  )
+}
diff --git a/packages/ui/src/components/common/Modal.tsx b/packages/ui/src/components/common/Modal.tsx
@@ -15,6 +15,7 @@ import { AnimatePresence } from 'framer-motion'
 type ModalProps = {
   trigger?: ReactNode
   css?: SystemStyleObject
+  overlayZIndex?: number
   showCloseButton?: boolean
   children: ReactNode
 }
@@ -26,7 +27,14 @@ export const Modal: FC<
       ComponentPropsWithoutRef<typeof AnimatedContent>,
       'onPointerDownOutside'
     >
-> = ({ trigger, css, showCloseButton = true, children, ...props }) => {
+> = ({
+  trigger,
+  css,
+  overlayZIndex = 9999,
+  showCloseButton = true,
+  children,
+  ...props
+}) => {
   return (
     <DialogRoot modal={true} {...props}>
       <DialogTrigger asChild>{trigger}</DialogTrigger>
@@ -41,9 +49,9 @@ export const Modal: FC<
                 left: 0,
                 right: 0,
                 bottom: 0,
-                zIndex: 9999,
                 backgroundColor: 'blackA10'
               }}
+              style={{ zIndex: overlayZIndex }}
             >
               <AnimatedContent
                 forceMount