Move tooltip inside shadowDOM, Inject toastStyles

skip-mev · Jul 6, 2024 · 637ac93 · 637ac93
1 parent 5af7605
commit 637ac93
Show file tree

Hide file tree

Showing 5 changed files with 226 additions and 50 deletions.
diff --git a/packages/widget/src/styles/global.css b/packages/widget/src/styles/global.css
@@ -2,3 +2,14 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+div,
+p,
+button {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
diff --git a/packages/widget/src/styles/toastStyles.css 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/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,48 +26,44 @@ export const SimpleTooltip = (props: Props) => {
   return (
     <Tooltip.Root {...tooltipProps}>
       <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
-      <Tooltip.Portal>
-        <div className="skip-go-widget">
-          <Tooltip.Content
-            sideOffset={4}
-            {..._content}
-            className={cn(
-              'rounded-md bg-white px-4 py-2 leading-none',
-              'select-none shadow shadow-neutral-500/50',
-              'text-sm font-jost',
-              'animate-slide-up-and-fade',
-              type === 'warning' && `bg-[#fbeef1]`,
-              type === 'warning' && 'font-medium',
-              type === 'brand' && `text-white`,
-              _content?.className
-            )}
-            style={{
-              backgroundColor:
-                type === 'brand'
-                  ? useSwapWidgetUIStore.getState().colors.primary
-                  : undefined,
-              color:
-                type === 'warning'
-                  ? useSwapWidgetUIStore.getState().colors.primary
-                  : undefined,
-            }}
-          >
-            {label}
-            <Tooltip.Arrow
-              className={cn(
-                'fill-white drop-shadow',
-                type === 'warning' && 'fill-[#fbeef1]'
-              )}
-              style={{
-                fill:
-                  type === 'brand'
-                    ? useSwapWidgetUIStore.getState().colors.primary
-                    : undefined,
-              }}
-            />
-          </Tooltip.Content>
-        </div>
-      </Tooltip.Portal>
+      <Tooltip.Content
+        sideOffset={4}
+        {..._content}
+        className={cn(
+          'rounded-md bg-white px-4 py-2 leading-none',
+          'select-none shadow shadow-neutral-500/50',
+          'text-sm font-jost',
+          'animate-slide-up-and-fade',
+          type === 'warning' && `bg-[#fbeef1]`,
+          type === 'warning' && 'font-medium',
+          type === 'brand' && `text-white`,
+          _content?.className
+        )}
+        style={{
+          backgroundColor:
+            type === 'brand'
+              ? useSwapWidgetUIStore.getState().colors.primary
+              : undefined,
+          color:
+            type === 'warning'
+              ? useSwapWidgetUIStore.getState().colors.primary
+              : undefined,
+        }}
+      >
+        {label}
+        <Tooltip.Arrow
+          className={cn(
+            'fill-white drop-shadow',
+            type === 'warning' && 'fill-[#fbeef1]'
+          )}
+          style={{
+            fill:
+              type === 'brand'
+                ? useSwapWidgetUIStore.getState().colors.primary
+                : undefined,
+          }}
+        />
+      </Tooltip.Content>
     </Tooltip.Root>
   );
 };
diff --git a/packages/widget/src/ui/Widget.tsx b/packages/widget/src/ui/Widget.tsx
@@ -28,8 +28,8 @@ import { CraftedBySkip } from './CraftedBySkip';
 
 export const SwapWidgetUI = ({
   className,
-  ...divProps
-}: React.HTMLAttributes<HTMLDivElement>) => {
+  style,
+}: Pick<React.HTMLAttributes<HTMLDivElement>, 'className' | 'style'>) => {
   useEffect(() => void disclosure.rehydrate(), []);
 
   const { openWalletModal } = useWalletModal();
@@ -93,7 +93,7 @@ export const SwapWidgetUI = ({
       <Tooltip.Provider delayDuration={0} disableHoverableContent>
         <div
           className={cn('space-y-4 font-jost relative p-4 bg-white', className)}
-          {...divProps}
+          style={style}
         >
           <div className="flex h-8 items-center">
             <p className="text-2xl font-semibold">From</p>

diff --git a/packages/widget/src/ui/index.tsx b/packages/widget/src/ui/index.tsx
@@ -8,22 +8,23 @@ import { SwapWidgetUI } from './Widget';
 import { useForceClientRender } from '../hooks/use-force-client-render';
 import root from 'react-shadow';
 import styles from '../styles/global.css';
+import toastStyles from '../styles/toastStyles.css';
 
 export type SwapWidgetProps = Pick<
   React.HTMLAttributes<HTMLDivElement>,
   'className' | 'style'
 > &
   ConfigureSwapWidgetArgs &
-  SwapWidgetProviderProps & {
-    children?: React.ReactNode;
-  };
+  Partial<SwapWidgetProviderProps>;
 
 export const SwapWidget: React.FC<SwapWidgetProps> = ({
   colors,
   settings,
   onlyTestnet,
   defaultRoute,
   routeConfig,
+  className,
+  style,
   ...swapWidgetProps
 }) => {
   useEffect(() => {
@@ -38,9 +39,10 @@ export const SwapWidget: React.FC<SwapWidgetProps> = ({
 
   const renderWidgetWithProvider = useForceClientRender(
     <root.div mode="open">
+      <style type="text/css">{toastStyles}</style>
       <style type="text/css">{styles}</style>
       <SwapWidgetProvider {...swapWidgetProps}>
-        <SwapWidgetUI {...swapWidgetProps} />
+        <SwapWidgetUI className={className} style={style} />
       </SwapWidgetProvider>
     </root.div>
   );