-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #271 from skip-mev/detach-widget
Detach widget
- Loading branch information
Showing
29 changed files
with
523 additions
and
145 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { CodeBracketIcon } from "@heroicons/react/20/solid"; | ||
|
|
||
| import { disclosure } from "@/context/disclosures"; | ||
| import { cn } from "@/utils/ui"; | ||
|
|
||
| import { SimpleTooltip } from "./SimpleTooltip"; | ||
|
|
||
| export const EmbedButton = () => { | ||
| return ( | ||
| <SimpleTooltip label="Embed swap widget"> | ||
| <button | ||
| onClick={() => disclosure.open("embedDialog")} | ||
| className={cn( | ||
| "rounded-full p-2 text-black/80 hover:bg-neutral-100 hover:text-black/100", | ||
| "transition-colors focus:outline-none", | ||
| )} | ||
| > | ||
| <CodeBracketIcon className="h-4 w-4" /> | ||
| </button> | ||
| </SimpleTooltip> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import { ArrowLeftIcon } from "@heroicons/react/20/solid"; | ||
| import * as Dialog from "@radix-ui/react-dialog"; | ||
| import * as ScrollArea from "@radix-ui/react-scroll-area"; | ||
| import toast from "react-hot-toast"; | ||
|
|
||
| import { useDisclosureKey } from "@/context/disclosures"; | ||
| import { cn } from "@/utils/ui"; | ||
|
|
||
| export const EmbedDialog = ({ embedLink }: { embedLink: string }) => { | ||
| const [isOpen, { close }] = useDisclosureKey("embedDialog"); | ||
|
|
||
| const embedCode = `<iframe allow="clipboard-read; clipboard-write" src="${embedLink}" height="820" width="450" />`; | ||
|
|
||
| return ( | ||
| <Dialog.Root | ||
| modal | ||
| open={isOpen} | ||
| > | ||
| <Dialog.Content className="absolute inset-0 animate-fade-zoom-in rounded-3xl bg-white"> | ||
| <div className="flex h-full flex-col space-y-2 px-4 py-6"> | ||
| <div className="flex items-center gap-4 pb-2"> | ||
| <button | ||
| className="flex h-8 w-8 items-center justify-center rounded-full transition-colors hover:bg-neutral-100" | ||
| onClick={close} | ||
| > | ||
| <ArrowLeftIcon className="h-6 w-6" /> | ||
| </button> | ||
| <h3 className="text-xl font-bold">Embed Swap Widget</h3> | ||
| <div className="flex-grow" /> | ||
| </div> | ||
| <ScrollArea.Root | ||
| className={cn( | ||
| "relative isolate -mx-4 overflow-hidden", | ||
| "before:absolute before:inset-x-0 before:bottom-0 before:z-10 before:h-2", | ||
| )} | ||
| > | ||
| <ScrollArea.Viewport className="h-full w-full px-6"> | ||
| <div className="flex flex-col space-y-2"> | ||
| <p>The swap widget can be embedded in your app by using the following code snippet:</p> | ||
| <pre className="text-wrap break-all rounded-lg border bg-neutral-50 p-2 font-mono text-xs"> | ||
| {embedCode} | ||
| </pre> | ||
| <button | ||
| onClick={() => { | ||
| try { | ||
| navigator.clipboard.writeText(embedCode); | ||
| toast.success("Copied to clipboard"); | ||
| } catch (error) { | ||
| toast.error("Failed to copy link to clipboard"); | ||
| } | ||
| }} | ||
| className={cn( | ||
| "self-end rounded-md bg-[#FF486E] px-2 py-1 text-xs font-semibold uppercase text-white disabled:bg-red-200", | ||
| )} | ||
| > | ||
| Copy to clipboard | ||
| </button> | ||
|
|
||
| <p className="pt-4 text-sm"> | ||
| <strong>Note: </strong>You can customize the default swap route by modifying the query parameters for | ||
| more information visit the{" "} | ||
| <a | ||
| href="https://api-docs.skip.money/docs" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| className="text-[#FF486E]" | ||
| > | ||
| docs | ||
| </a> | ||
| </p> | ||
| </div> | ||
| </ScrollArea.Viewport> | ||
| <ScrollArea.Scrollbar | ||
| className="z-20 flex touch-none select-none transition-colors ease-out data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2 data-[orientation=horizontal]:flex-col" | ||
| orientation="vertical" | ||
| > | ||
| <ScrollArea.Thumb className="relative flex-1 rounded-[10px] bg-neutral-500/50 transition-colors before:absolute before:left-1/2 before:top-1/2 before:h-2 before:w-2 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] hover:bg-neutral-500" /> | ||
| </ScrollArea.Scrollbar> | ||
| <ScrollArea.Corner /> | ||
| </ScrollArea.Root> | ||
| </div> | ||
| </Dialog.Content> | ||
| </Dialog.Root> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { ShareIcon } from "@heroicons/react/20/solid"; | ||
| import toast from "react-hot-toast"; | ||
|
|
||
| import { cn } from "@/utils/ui"; | ||
|
|
||
| import { SimpleTooltip } from "./SimpleTooltip"; | ||
|
|
||
| export const ShareButton = ({ shareableLink }: { shareableLink: string }) => { | ||
| return ( | ||
| <SimpleTooltip label="Share"> | ||
| <button | ||
| onClick={() => { | ||
| try { | ||
| navigator.clipboard.writeText(shareableLink); | ||
| toast.success("Link copied to clipboard"); | ||
| } catch (error) { | ||
| toast.error("Failed to copy link to clipboard"); | ||
| } | ||
| }} | ||
| className={cn( | ||
| "rounded-full p-2 text-black/80 hover:bg-neutral-100 hover:text-black/100", | ||
| "transition-colors focus:outline-none", | ||
| )} | ||
| > | ||
| <ShareIcon className="h-4 w-4" /> | ||
| </button> | ||
| </SimpleTooltip> | ||
| ); | ||
| }; |
Oops, something went wrong.