diff --git a/.changeset/nine-hounds-battle.md b/.changeset/nine-hounds-battle.md new file mode 100644 index 00000000..33927dda --- /dev/null +++ b/.changeset/nine-hounds-battle.md @@ -0,0 +1,5 @@ +--- +'@skip-go/widget': minor +--- + +Move widget to within shadow DOM diff --git a/README.md b/README.md index d0372850..434e19a1 100644 --- a/README.md +++ b/README.md @@ -40,6 +40,12 @@ yarn dev yarn build ``` +### Updating changelog + +``` +npx changeset +``` + ## Docs - [Core](./packages/core/README.md) diff --git a/examples/nextjs/pages/index.tsx b/examples/nextjs/pages/index.tsx index 8e6ad2ad..e677f69b 100644 --- a/examples/nextjs/pages/index.tsx +++ b/examples/nextjs/pages/index.tsx @@ -1,30 +1,25 @@ import { NextPage } from 'next'; -import '@skip-go/widget/style.css'; import React from 'react'; -import { SwapWidget, SwapWidgetProvider } from '@skip-go/widget'; +import { SwapWidget } from '@skip-go/widget'; const Home: NextPage = () => { return ( -
-
+ - - - -
+ defaultRoute={{ + srcChainID: 'osmosis-1', + srcAssetDenom: + 'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4', + }} + />
); }; diff --git a/examples/nextjs/pages/web-component.tsx b/examples/nextjs/pages/web-component.tsx index b42a3472..a80fa928 100644 --- a/examples/nextjs/pages/web-component.tsx +++ b/examples/nextjs/pages/web-component.tsx @@ -1,39 +1,27 @@ import { NextPage } from 'next'; -import '@skip-go/widget/style.css'; import React from 'react'; -import dynamic from 'next/dynamic'; import { initializeSwapWidget } from '@skip-go/widget'; -const NoSsrBase = (props: any) => <>{props.children}; - -const NoSSR = dynamic(() => Promise.resolve(NoSsrBase), { - ssr: false, -}); - const WebComponent: NextPage = () => { initializeSwapWidget(); return ( -
-
- - - -
+
+
); }; diff --git a/examples/nextjs/styles/globals.css b/examples/nextjs/styles/globals.css index 30e688d8..ff11a6af 100644 --- a/examples/nextjs/styles/globals.css +++ b/examples/nextjs/styles/globals.css @@ -7,3 +7,7 @@ body { -moz-osx-font-smoothing: grayscale; background-color: gray; } + +input { + background-color: black; +} diff --git a/packages/widget/README.md b/packages/widget/README.md index 33ecdb9b..63e777bc 100644 --- a/packages/widget/README.md +++ b/packages/widget/README.md @@ -10,31 +10,12 @@ To install the package, run the following command: npm install @skip-go/widget ``` -## Quick Start Guide +## React Component usage -### 1. Wrap Your App with `SwapWidgetProvider` - -First, wrap your application or the relevant page with the `SwapWidgetProvider` component: - -```tsx -import { SwapWidgetProvider } from '@skip-go/widget'; - -function App() { - return ( - - - - ); -} -``` - -### 2. Use the `SwapWidget` Component - -Next, import the css and use the `SwapWidget` component to render the swap interface: +import the `SwapWidget` from `'@skip-go/widget'` to render the swap interface: ```tsx import { SwapWidget } from '@skip-go/widget'; -import '@skip-go/widget/style.css'; const SwapPage = () => { return ( @@ -54,9 +35,7 @@ const SwapPage = () => { }; ``` -## Component Props - -### SwapWidget +### SwapWidget props The `SwapWidget` component accepts the following props: @@ -91,34 +70,31 @@ interface SwapWidgetProps { slippage?: number; //percentage of slippage 0-100. defaults to 3 }; onlyTestnet?: boolean; // Only show testnet chains + toasterProps?: { + // Refer to [ToasterProps](https://react-hot-toast.com/docs/toast-options) for more details. Defaults to `{ position: 'top-right' }` + position?: ToastPosition; + toastOptions?: DefaultToastOptions; + reverseOrder?: boolean; + gutter?: number; + containerStyle?: React.CSSProperties; + containerClassName?: string; + children?: (toast: Toast) => JSX.Element; + }; + endpointOptions?: { + // Endpoint options to override endpoints. Defaults to Skip proxied endpoints. Please reach out to us first if you want to be whitelisted. + endpoints?: Record; + getRpcEndpointForChain?: (chainID: string) => Promise; + getRestEndpointForChain?: (chainID: string) => Promise; + }; + apiURL?: string; // Custom API URL to override Skip API endpoint. Defaults to Skip proxied endpoints. Please reach out to us first if you want to be whitelisted. } ``` -### SwapWidgetProvider - -The `SwapWidgetProvider` component accepts the following prop: - -- `toasterProps` (Optional): Props for the toaster component. Refer to [ToasterProps](https://react-hot-toast.com/docs/toast-options) for more details. Defaults to `{ position: 'top-right' }`. -- `endpointOptions` (Optional): Endpoint options to override endpoints. Defaults to Skip proxied endpoints. Please reach out to us first if you want to be whitelisted. - - ```ts - endpointOptions?: { - // Endpoint options to override endpoints. Defaults to Skip proxied endpoints. Please reach out to us first if you want to be whitelisted. - endpoints?: Record; - getRpcEndpointForChain?: (chainID: string) => Promise; - getRestEndpointForChain?: (chainID: string) => Promise; - }; - ``` - -- `apiURL` (Optional): Custom API URL to override Skip Go API endpoint. Defaults to Skip proxied endpoints. Please reach out to us first if you want to be whitelisted. - -By following these steps, you can easily integrate the Skip Go Widget into your React application and customize it to meet your specific needs. - -### Web Component +## Web Component usage The web component is created with the `@r2wc/react-to-web-component` library. -In order to register the web-component, you must call the `initializeSwapWidget` function: +In order to register the web-component, you must first call the `initializeSwapWidget` function: ```tsx import { initializeSwapWidget } from '@skip-go/widget'; @@ -126,9 +102,9 @@ import { initializeSwapWidget } from '@skip-go/widget'; initializeSwapWidget(); ``` -voila! you can now use the `swap-widget` web-component +et voilà! you can now use the `swap-widget` web-component as `` -The props for the web component are the same as `SwapWidgetProps` and `SwapWidgetProviderProps` except that +The props for the web component are the same as `SwapWidgetProps` except that they are sent to the web-component as attributes in kebab-case as strings or stringified objects ie. ```tsx @@ -149,11 +125,8 @@ becomes srcAssetDenom: 'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4', })} + toaster-props="" + endpoint-options="" + api-url="" > ``` - -the web-component exposes the `SwapWidgetProviderProps` as attributes on swap-widget as well - -```tsx - -``` diff --git a/packages/widget/package.json b/packages/widget/package.json index f6af09c3..ec8fd0d2 100644 --- a/packages/widget/package.json +++ b/packages/widget/package.json @@ -40,6 +40,7 @@ "react-dom": "17.x || 18.x" }, "devDependencies": { + "@rollup/plugin-url": "^8.0.2", "@types/node": "18.7.18", "@types/qrcode": "^1.4.2", "@types/react": "^18.0.6", @@ -100,6 +101,7 @@ "match-sorter": "^6.3.4", "react-hot-toast": "^2.4.1", "react-icons": "^5.2.1", + "react-shadow-scope": "^1.0.5", "tailwind-merge": "^2.3.0", "viem": "2.x", "wagmi": "2.x", diff --git a/packages/widget/postcss.config.cjs b/packages/widget/postcss.config.cjs index a6c51947..12a703d9 100644 --- a/packages/widget/postcss.config.cjs +++ b/packages/widget/postcss.config.cjs @@ -1,9 +1,6 @@ -/** @type {import('tailwindcss').Config} */ module.exports = { - important: true, - plugins: [ - require('tailwindcss'), - require('autoprefixer'), - require('postcss-prefixwrap')('.skip-go-widget'), - ], + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, }; diff --git a/packages/widget/rollup.config.js b/packages/widget/rollup.config.js index d299937a..ef7b5ce2 100644 --- a/packages/widget/rollup.config.js +++ b/packages/widget/rollup.config.js @@ -1,7 +1,7 @@ import peerDepsExternal from 'rollup-plugin-peer-deps-external'; import typescript from 'rollup-plugin-typescript2'; import postcss from 'rollup-plugin-postcss'; -import copy from 'rollup-plugin-copy'; +import url from '@rollup/plugin-url'; import packageJson from './package.json'; @@ -19,21 +19,19 @@ export default [ config: { path: './postcss.config.js', }, + inject: false, extensions: ['.css'], minimize: true, - extract: 'style.css', + }), + url({ + include: ['**/*.woff', '**/*.woff2', '**/*.ttf'], + limit: Infinity, }), peerDepsExternal(), typescript({ useTsconfigDeclarationDir: true, exclude: 'node_modules/**', }), - copy({ - targets: [ - // Need to copy the files over for usage - { src: 'src/assets/fonts', dest: 'build/assets' }, - ], - }), ], }, ]; diff --git a/packages/widget/src/hooks/use-fix-radix-ui-wheel-event.ts b/packages/widget/src/hooks/use-fix-radix-ui-wheel-event.ts new file mode 100644 index 00000000..7c886c44 --- /dev/null +++ b/packages/widget/src/hooks/use-fix-radix-ui-wheel-event.ts @@ -0,0 +1,24 @@ +import { useEffect } from 'react'; + +export const useFixRadixUiWheelEvent = () => { + useEffect(() => { + const element = document.querySelector('react-shadow-scope')?.shadowRoot; + if (!element) return; + + const handleWheel = (e: Event) => { + e.stopPropagation(); + }; + + const handleTouchMove = (e: Event) => { + e.stopPropagation(); + }; + + element.addEventListener('wheel', handleWheel, true); + element.addEventListener('touchmove', handleTouchMove, true); + + return () => { + element.removeEventListener('wheel', handleWheel, true); + element.removeEventListener('touchmove', handleTouchMove, true); + }; + }, []); +}; diff --git a/packages/widget/src/hooks/use-inject-fonts-to-document-head.ts b/packages/widget/src/hooks/use-inject-fonts-to-document-head.ts new file mode 100644 index 00000000..d3a091a6 --- /dev/null +++ b/packages/widget/src/hooks/use-inject-fonts-to-document-head.ts @@ -0,0 +1,17 @@ +import { useEffect } from 'react'; +import { fonts } from '../styles/fonts'; + +export const useInjectFontsToDocumentHead = () => { + useEffect(() => { + const styleElement = document.createElement('style'); + styleElement.textContent = fonts; + + if (!document.head.contains(styleElement)) { + document.head.appendChild(styleElement); + } + + return () => { + document.head.removeChild(styleElement); + }; + }, []); +}; diff --git a/packages/widget/src/index.ts b/packages/widget/src/index.ts index 472e19f6..e4a82e27 100644 --- a/packages/widget/src/index.ts +++ b/packages/widget/src/index.ts @@ -1,4 +1,3 @@ -import './styles/global.css'; export { SwapWidgetProvider } from './provider'; export { SwapWidget, SwapWidgetProps } from './ui'; export { initializeSwapWidget } from './ui/WebComponent'; diff --git a/packages/widget/src/provider/index.tsx b/packages/widget/src/provider/index.tsx index b96d76c9..3e78c7c8 100644 --- a/packages/widget/src/provider/index.tsx +++ b/packages/widget/src/provider/index.tsx @@ -62,16 +62,14 @@ export const SwapWidgetProvider: React.FC = ({ ...skipApiProviderProps }) => { return ( -
- - {children} - - -
+ + {children} + + ); }; diff --git a/packages/widget/src/styles/css.d.ts b/packages/widget/src/styles/css.d.ts new file mode 100644 index 00000000..3d33dc0c --- /dev/null +++ b/packages/widget/src/styles/css.d.ts @@ -0,0 +1,7 @@ +declare module '*.css' { + const content: string; + export default content; +} + +declare module '*.woff'; +declare module '*.woff2'; diff --git a/packages/widget/src/styles/fonts.ts b/packages/widget/src/styles/fonts.ts new file mode 100644 index 00000000..6edb3c13 --- /dev/null +++ b/packages/widget/src/styles/fonts.ts @@ -0,0 +1,53 @@ +import thin from '../assets/fonts/ABCDiatype-Thin.woff2'; +import light from '../assets/fonts/ABCDiatype-Light.woff2'; +import regular from '../assets/fonts/ABCDiatype-Regular.woff2'; +import medium from '../assets/fonts/ABCDiatype-Medium.woff2'; +import bold from '../assets/fonts/ABCDiatype-Bold.woff2'; +import black from '../assets/fonts/ABCDiatype-Black.woff2'; + +import monoRegular from '../assets/fonts/ABCDiatypeMono-Regular.woff2'; +import monoMedium from '../assets/fonts/ABCDiatypeMono-Medium.woff2'; + +export const fonts = ` +@font-face { + font-family: ABCDiatype; + font-weight: 100; + src: url(${thin}) format(woff2); +} +@font-face { + font-family: ABCDiatype; + font-weight: 300; + src: url(${light}) format(woff2); +} +@font-face { + font-family: ABCDiatype; + font-weight: 400; + src: url(${regular}) format(woff2); +} +@font-face { + font-family: ABCDiatype; + font-weight: 500; + src: url(${medium}) format(woff2); +} +@font-face { + font-family: ABCDiatype; + font-weight: 700; + src: url(${bold}) format(woff2); +} +@font-face { + font-family: ABCDiatype; + font-weight: 900; + src: url(${black}) format(woff2); +} + +@font-face { + font-family: ABCDiatypeMono; + font-weight: 400; + src: url(${monoRegular}) format(woff2); +} +@font-face { + font-family: ABCDiatypeMono; + font-weight: 500; + src: url(${monoMedium}) format(woff2); +} +`; diff --git a/packages/widget/src/styles/global.css b/packages/widget/src/styles/global.css deleted file mode 100644 index 717130e6..00000000 --- a/packages/widget/src/styles/global.css +++ /dev/null @@ -1,84 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -@layer base { - @font-face { - font-family: ABCDiatype; - font-weight: 100; - src: url(assets/fonts/ABCDiatype-Thin.woff2) format('woff2'); - } - @font-face { - font-family: ABCDiatype; - font-weight: 300; - src: url(assets/fonts/ABCDiatype-Light.woff2) format('woff2'); - } - @font-face { - font-family: ABCDiatype; - font-weight: 400; - src: url(assets/fonts/ABCDiatype-Regular.woff2) format('woff2'); - } - @font-face { - font-family: ABCDiatype; - font-weight: 500; - src: url(assets/fonts/ABCDiatype-Medium.woff2) format('woff2'); - } - @font-face { - font-family: ABCDiatype; - font-weight: 700; - src: url(assets/fonts/ABCDiatype-Bold.woff2) format('woff2'); - } - @font-face { - font-family: ABCDiatype; - font-weight: 900; - src: url(assets/fonts/ABCDiatype-Black.woff2) format('woff2'); - } - /* italic */ - @font-face { - font-family: ABCDiatype; - font-style: italic; - font-weight: 100; - src: url(assets/fonts/ABCDiatype-ThinItalic.woff2) format('woff2'); - } - @font-face { - font-family: ABCDiatype; - font-style: italic; - font-weight: 300; - src: url(assets/fonts/ABCDiatype-LightItalic.woff2) format('woff2'); - } - @font-face { - font-family: ABCDiatype; - font-style: italic; - font-weight: 400; - src: url(assets/fonts/ABCDiatype-RegularItalic.woff2) format('woff2'); - } - @font-face { - font-family: ABCDiatype; - font-style: italic; - font-weight: 500; - src: url(assets/fonts/ABCDiatype-MediumItalic.woff2) format('woff2'); - } - @font-face { - font-family: ABCDiatype; - font-style: italic; - font-weight: 700; - src: url(assets/fonts/ABCDiatype-BoldItalic.woff2) format('woff2'); - } - @font-face { - font-family: ABCDiatype; - font-style: italic; - font-weight: 900; - src: url(assets/fonts/ABCDiatype-BlackItalic.woff2) format('woff2'); - } - - @font-face { - font-family: ABCDiatypeMono; - font-weight: 400; - src: url(assets/fonts/ABCDiatypeMono-Regular.woff2) format('woff2'); - } - @font-face { - font-family: ABCDiatypeMono; - font-weight: 500; - src: url(assets/fonts/ABCDiatypeMono-Medium.woff2) format('woff2'); - } -} diff --git a/packages/widget/src/styles/shadowDomStyles.css b/packages/widget/src/styles/shadowDomStyles.css new file mode 100644 index 00000000..b5c61c95 --- /dev/null +++ b/packages/widget/src/styles/shadowDomStyles.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/packages/widget/src/styles/toastStyles.css b/packages/widget/src/styles/toastStyles.css new file mode 100644 index 00000000..174c951e --- /dev/null +++ b/packages/widget/src/styles/toastStyles.css @@ -0,0 +1,168 @@ +@keyframes go2264125279 { + from { + transform: scale(0) rotate(45deg); + opacity: 0; + } + to { + transform: scale(1) rotate(45deg); + opacity: 1; + } +} +@keyframes go3020080000 { + from { + transform: scale(0); + opacity: 0; + } + to { + transform: scale(1); + opacity: 1; + } +} +@keyframes go463499852 { + from { + transform: scale(0) rotate(90deg); + opacity: 0; + } + to { + transform: scale(1) rotate(90deg); + opacity: 1; + } +} +@keyframes go1268368563 { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +@keyframes go1310225428 { + from { + transform: scale(0) rotate(45deg); + opacity: 0; + } + to { + transform: scale(1) rotate(45deg); + opacity: 1; + } +} +@keyframes go651618207 { + 0% { + height: 0; + width: 0; + opacity: 0; + } + 40% { + height: 0; + width: 6px; + opacity: 1; + } + 100% { + opacity: 1; + height: 10px; + } +} +@keyframes go901347462 { + from { + transform: scale(0.6); + opacity: 0.4; + } + to { + transform: scale(1); + opacity: 1; + } +} +.go4109123758 { + z-index: 9999; +} +.go4109123758 > * { + pointer-events: auto; +} +.go2072408551 { + display: flex; + align-items: center; + background: #fff; + color: #363636; + line-height: 1.3; + will-change: transform; + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05); + max-width: 350px; + pointer-events: auto; + padding: 8px 10px; + border-radius: 8px; +} +.go685806154 { + position: relative; + display: flex; + justify-content: center; + align-items: center; + min-width: 20px; + min-height: 20px; +} +.go1858758034 { + width: 12px; + height: 12px; + box-sizing: border-box; + border: 2px solid; + border-radius: 100%; + border-color: #e0e0e0; + border-right-color: #616161; + animation: go1268368563 1s linear infinite; +} +.go1579819456 { + position: absolute; +} +.go2344853693 { + width: 20px; + opacity: 0; + height: 20px; + border-radius: 10px; + background: #61d345; + position: relative; + transform: rotate(45deg); + animation: go1310225428 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; + animation-delay: 100ms; +} +.go2344853693:after { + content: ''; + box-sizing: border-box; + animation: go651618207 0.2s ease-out forwards; + opacity: 0; + animation-delay: 200ms; + position: absolute; + border-right: 2px solid; + border-bottom: 2px solid; + border-color: #fff; + bottom: 6px; + left: 6px; + height: 10px; + width: 6px; +} +.go3958317564 { + display: flex; + justify-content: center; + margin: 4px 10px; + color: inherit; + flex: 1 1 auto; + white-space: pre-line; +} +@keyframes go3223188581 { + 0% { + transform: translate3d(0, -200%, 0) scale(0.6); + opacity: 0.5; + } + 100% { + transform: translate3d(0, 0, 0) scale(1); + opacity: 1; + } +} +@keyframes go502128938 { + 0% { + transform: translate3d(0, 0, -1px) scale(1); + opacity: 1; + } + 100% { + transform: translate3d(0, -150%, -1px) scale(0.6); + opacity: 0; + } +} diff --git a/packages/widget/src/ui/AssetInput.tsx b/packages/widget/src/ui/AssetInput.tsx index f78ff164..19d19fdc 100644 --- a/packages/widget/src/ui/AssetInput.tsx +++ b/packages/widget/src/ui/AssetInput.tsx @@ -20,7 +20,6 @@ import { } from '../utils/number'; import { formatPercent, formatUSD } from '../utils/intl'; import { useSwapWidgetUIStore } from '../store/swap-widget'; -import { css } from '@emotion/css'; interface Props { amount: string; @@ -233,12 +232,12 @@ function AssetInput({ className={cn( 'rounded-md px-2 py-1 text-xs font-semibold uppercase text-white', 'transition-[transform,background] enabled:hover:rotate-2 enabled:hover:scale-110 disabled:cursor-not-allowed', - 'disabled:opacity-75', - css` - background-color: ${useSwapWidgetUIStore.getState().colors - .primary} !important; - ` + 'disabled:opacity-75' )} + style={{ + backgroundColor: + useSwapWidgetUIStore.getState().colors.primary, + }} disabled={maxButtonDisabled} onClick={onAmountMax} > diff --git a/packages/widget/src/ui/Dialog/DialogContent.tsx b/packages/widget/src/ui/Dialog/DialogContent.tsx index 70bba3bd..51ed1013 100644 --- a/packages/widget/src/ui/Dialog/DialogContent.tsx +++ b/packages/widget/src/ui/Dialog/DialogContent.tsx @@ -10,25 +10,24 @@ interface Props extends PropsWithChildren { } export function DialogContent({ children, onInteractOutside }: Props) { - const { open, container } = useContext(DialogContext); + const { open } = useContext(DialogContext); if (!open) return null; return ( - -
- - - {children} - -
- + <> + + + {children} + + ); } diff --git a/packages/widget/src/ui/HistoryDialog/index.tsx b/packages/widget/src/ui/HistoryDialog/index.tsx index bc1e61ba..a96e7aa0 100644 --- a/packages/widget/src/ui/HistoryDialog/index.tsx +++ b/packages/widget/src/ui/HistoryDialog/index.tsx @@ -25,63 +25,61 @@ export const HistoryDialog = () => { return ( -
- - -
-
- -

Transaction History

-
- -
- + +
+
+ +

Transaction History

+
+
- -
+ + + + {entries && entries.length < 1 && ( + + No recent transactions. + + )} + {entries?.map(([id, data]) => ( + + ))} + {!isReady && ( +
+ Loading transaction history... +
+ )} + + + + + + + +
+ ); }; diff --git a/packages/widget/src/ui/PreviewRoute/ChainStep.tsx b/packages/widget/src/ui/PreviewRoute/ChainStep.tsx index 182d0443..96479d96 100644 --- a/packages/widget/src/ui/PreviewRoute/ChainStep.tsx +++ b/packages/widget/src/ui/PreviewRoute/ChainStep.tsx @@ -397,12 +397,11 @@ export const ChainStep = ({ {stepState?.explorerLink && ( @@ -481,13 +480,13 @@ export const ChainStep = ({ )} diff --git a/packages/widget/src/ui/PreviewRoute/SetAddressDialog.tsx b/packages/widget/src/ui/PreviewRoute/SetAddressDialog.tsx index de2f2a21..4c94baa3 100644 --- a/packages/widget/src/ui/PreviewRoute/SetAddressDialog.tsx +++ b/packages/widget/src/ui/PreviewRoute/SetAddressDialog.tsx @@ -249,14 +249,13 @@ export const SetAddressDialog = ({
{isExpanded && ( -

Swap Settings

-
- -
- -

- Gas is used to meter transactions and allocate resources fairly - among users. Users must pay a gas fee, usually in the native - token, to have their transactions processed by the network. -
- - Learn more - -

- -

- Slippage is how much price movement you can tolerate between the - time you send out a transaction and the time it's executed. -
- - Learn more - -

- {/* + + + {' '} +
+
+ +

Swap Settings

+
+ +
+ +

+ Gas is used to meter transactions and allocate resources fairly + among users. Users must pay a gas fee, usually in the native token, + to have their transactions processed by the network. +
+ + Learn more + +

+ +

+ Slippage is how much price movement you can tolerate between the + time you send out a transaction and the time it's executed. +
+ + Learn more + +

+ {/*

Removes all of your data from the app, which includes connected wallets state, transaction history, and settings.

*/} -
- -
+
+ ); }; diff --git a/packages/widget/src/ui/SimpleTooltip.tsx b/packages/widget/src/ui/SimpleTooltip.tsx index ea5b27e5..fe44014e 100644 --- a/packages/widget/src/ui/SimpleTooltip.tsx +++ b/packages/widget/src/ui/SimpleTooltip.tsx @@ -2,7 +2,6 @@ import * as Tooltip from '@radix-ui/react-tooltip'; import { ComponentPropsWithoutRef, ReactNode } from 'react'; import { cn } from '../utils/ui'; import { useSwapWidgetUIStore } from '../store/swap-widget'; -import { css } from '@emotion/css'; type Props = Tooltip.TooltipProps & { type?: 'default' | 'warning' | 'brand'; @@ -27,47 +26,41 @@ export const SimpleTooltip = (props: Props) => { return ( {children} - -
- - {label} - - -
- + + {label} + + ); }; diff --git a/packages/widget/src/ui/TransactionDialog.tsx b/packages/widget/src/ui/TransactionDialog.tsx index 267e10c2..9f3a5977 100644 --- a/packages/widget/src/ui/TransactionDialog.tsx +++ b/packages/widget/src/ui/TransactionDialog.tsx @@ -7,7 +7,6 @@ import { useDisclosureKey } from '../store/disclosures'; import { PriceImpactWarning } from './PriceImpactWarning'; import { cn } from '../utils/ui'; import { useSwapWidgetUIStore } from '../store/swap-widget'; -import { css } from '@emotion/css'; export type ActionType = 'NONE' | 'TRANSFER' | 'SWAP'; @@ -72,12 +71,11 @@ function TransactionDialog({ className={cn( 'w-full rounded-md py-4 font-semibold text-white outline-none transition-[opacity,transform]', 'disabled:cursor-not-allowed disabled:opacity-75', - 'enabled:hover:rotate-1 enabled:hover:scale-102', - css` - background-color: ${useSwapWidgetUIStore.getState().colors - .primary} !important; - ` + 'enabled:hover:rotate-1 enabled:hover:scale-102' )} + style={{ + backgroundColor: useSwapWidgetUIStore.getState().colors.primary, + }} disabled={!route || (typeof isLoading === 'boolean' && isLoading)} onClick={() => confirmControl.open()} > diff --git a/packages/widget/src/ui/Widget.tsx b/packages/widget/src/ui/Widget.tsx index ec3e57b7..da417e7e 100644 --- a/packages/widget/src/ui/Widget.tsx +++ b/packages/widget/src/ui/Widget.tsx @@ -25,11 +25,14 @@ import { SpinnerIcon } from './Icon/SpinnerIcon'; import { useSwapWidgetUIStore } from '../store/swap-widget'; import { css } from '@emotion/css'; import { CraftedBySkip } from './CraftedBySkip'; +import { useFixRadixUiWheelEvent } from '../hooks/use-fix-radix-ui-wheel-event'; export const SwapWidgetUI = ({ className, - ...divProps -}: React.HTMLAttributes) => { + style, +}: Pick, 'className' | 'style'>) => { + useFixRadixUiWheelEvent(); + useEffect(() => void disclosure.rehydrate(), []); const { openWalletModal } = useWalletModal(); @@ -96,7 +99,7 @@ export const SwapWidgetUI = ({ 'space-y-4 font-diatype relative p-4 bg-white', className )} - {...divProps} + style={style} >

From

@@ -208,13 +211,11 @@ export const SwapWidgetUI = ({ {route && !routeLoading && numberOfTransactions > 1 && (
{ if (sourceChain && !srcAccount?.isWalletConnected) { diff --git a/packages/widget/src/ui/index.tsx b/packages/widget/src/ui/index.tsx index db3509c6..e520b544 100644 --- a/packages/widget/src/ui/index.tsx +++ b/packages/widget/src/ui/index.tsx @@ -1,24 +1,33 @@ import { useEffect } from 'react'; -import { SkipAPIProvider, SkipAPIProviderProps } from '../provider'; +import { SwapWidgetProvider, SwapWidgetProviderProps } from '../provider'; import { configureSwapWidget, ConfigureSwapWidgetArgs, } from '../store/swap-widget'; import { SwapWidgetUI } from './Widget'; +import shadowDomStyles from '../styles/shadowDomStyles.css'; +import toastStyles from '../styles/toastStyles.css'; +import { Scope } from 'react-shadow-scope'; +import { useInjectFontsToDocumentHead } from '../hooks/use-inject-fonts-to-document-head'; -export interface SwapWidgetProps - extends Pick, 'className' | 'style'>, - ConfigureSwapWidgetArgs {} +export type SwapWidgetProps = Pick< + React.HTMLAttributes, + 'className' | 'style' +> & + ConfigureSwapWidgetArgs & + Partial; export const SwapWidget: React.FC = ({ colors, - className, - style, settings, onlyTestnet, defaultRoute, routeConfig, + className, + style, + ...swapWidgetProviderProps }) => { + useInjectFontsToDocumentHead(); useEffect(() => { configureSwapWidget({ colors, @@ -29,6 +38,14 @@ export const SwapWidget: React.FC = ({ }); }, [colors, onlyTestnet, settings, defaultRoute, routeConfig]); - const divProps = { className, style }; - return ; + return ( + + + + + + ); }; diff --git a/yarn.lock b/yarn.lock index 55002441..3fa9a59d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7571,6 +7571,22 @@ __metadata: languageName: node linkType: hard +"@rollup/plugin-url@npm:^8.0.2": + version: 8.0.2 + resolution: "@rollup/plugin-url@npm:8.0.2" + dependencies: + "@rollup/pluginutils": ^5.0.1 + make-dir: ^3.1.0 + mime: ^3.0.0 + peerDependencies: + rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0 + peerDependenciesMeta: + rollup: + optional: true + checksum: 181cddda6a08ac9199ef3ac345ae01c4a27e456d501e180891d5f05d6eb86ce5dabd9b50c2280604258d2d8dc6581a98f9134d1631a1c8ca5d521494bdf80fbb + languageName: node + linkType: hard + "@rollup/pluginutils@npm:^3.1.0": version: 3.1.0 resolution: "@rollup/pluginutils@npm:3.1.0" @@ -7594,6 +7610,22 @@ __metadata: languageName: node linkType: hard +"@rollup/pluginutils@npm:^5.0.1": + version: 5.1.0 + resolution: "@rollup/pluginutils@npm:5.1.0" + dependencies: + "@types/estree": ^1.0.0 + estree-walker: ^2.0.2 + picomatch: ^2.3.1 + peerDependencies: + rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0 + peerDependenciesMeta: + rollup: + optional: true + checksum: 3cc5a6d91452a6eabbfd1ae79b4dd1f1e809d2eecda6e175deb784e75b0911f47e9ecce73f8dd315d6a8b3f362582c91d3c0f66908b6ced69345b3cbe28f8ce8 + languageName: node + linkType: hard + "@rollup/rollup-android-arm-eabi@npm:4.18.0": version: 4.18.0 resolution: "@rollup/rollup-android-arm-eabi@npm:4.18.0" @@ -7894,6 +7926,7 @@ __metadata: "@radix-ui/react-scroll-area": ^1.0.5 "@radix-ui/react-switch": ^1.0.3 "@radix-ui/react-tooltip": ^1.0.7 + "@rollup/plugin-url": ^8.0.2 "@skip-go/core": "workspace:packages/core" "@solana/spl-token": ^0.4.6 "@solana/wallet-adapter-react": ^0.15.35 @@ -7913,6 +7946,7 @@ __metadata: postcss-prefixwrap: ^1.49.0 react-hot-toast: ^2.4.1 react-icons: ^5.2.1 + react-shadow-scope: ^1.0.5 rollup-plugin-copy: ^3.5.0 tailwind-merge: ^2.3.0 tailwindcss: ^3.4.3 @@ -14570,7 +14604,7 @@ __metadata: languageName: node linkType: hard -"estree-walker@npm:^2.0.1": +"estree-walker@npm:^2.0.1, estree-walker@npm:^2.0.2": version: 2.0.2 resolution: "estree-walker@npm:2.0.2" checksum: 6151e6f9828abe2259e57f5fd3761335bb0d2ebd76dc1a01048ccee22fabcfef3c0859300f6d83ff0d1927849368775ec5a6d265dde2f6de5a1be1721cd94efc @@ -18285,7 +18319,7 @@ __metadata: languageName: node linkType: hard -"make-dir@npm:^3.0.2": +"make-dir@npm:^3.0.2, make-dir@npm:^3.1.0": version: 3.1.0 resolution: "make-dir@npm:3.1.0" dependencies: @@ -20995,6 +21029,16 @@ __metadata: languageName: node linkType: hard +"react-shadow-scope@npm:^1.0.5": + version: 1.0.5 + resolution: "react-shadow-scope@npm:1.0.5" + peerDependencies: + react: ^16.8.3 || ^18 + react-dom: ^16.14.0 || ^18 + checksum: 6ae39c58ac8ea4f18473da47ccb445a116f96fea162c44637dc5f69bd55858d423fee88436ba31319170b439f35b541f156729ff973de809e84e1eaa84c04cc9 + languageName: node + linkType: hard + "react-stately@npm:^3.31.1": version: 3.31.1 resolution: "react-stately@npm:3.31.1"