Add theming to more parts of the widget

skip-mev · Jul 3, 2024 · 4bde2b2 · 4bde2b2
1 parent cae6074
commit 4bde2b2
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 27 deletions.
diff --git a/examples/nextjs/pages/index.tsx b/examples/nextjs/pages/index.tsx
@@ -4,7 +4,7 @@ import '@skip-go/widget/style.css';
 
 const Home: NextPage = () => {
   return (
-    <div>
+    <div style={{ display: 'flex', gap: 50 }}>
       <div
         style={{
           width: '450px',
@@ -22,6 +22,31 @@ const Home: NextPage = () => {
           }}
         />
       </div>
+
+      <div
+        style={{
+          width: '450px',
+          height: '820px',
+        }}
+      >
+        <SwapWidget
+          theme={{
+            primary: {
+              backgroundColor: 'black',
+              textColor: 'white',
+            },
+            secondary: {
+              backgroundColor: 'grey',
+              textColor: 'white',
+            },
+          }}
+          defaultRoute={{
+            srcChainID: 'osmosis-1',
+            srcAssetDenom:
+              'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4',
+          }}
+        />
+      </div>
     </div>
   );
 };

diff --git a/packages/widget/src/ui/AssetInput.tsx b/packages/widget/src/ui/AssetInput.tsx
@@ -21,6 +21,7 @@ import {
 import { formatPercent, formatUSD } from '../utils/intl';
 import { useSwapWidgetUIStore } from '../store/swap-widget';
 import { css } from '@emotion/css';
+import { styled } from 'styled-components';
 
 interface Props {
   amount: string;
@@ -120,7 +121,7 @@ function AssetInput({
             />
           </button>
         )}
-        <input
+        <AmountInput
           data-testid="amount"
           className={cn(
             'h-10 w-full text-3xl font-medium tabular-nums',
@@ -258,3 +259,8 @@ function AssetInput({
 }
 
 export default AssetInput;
+
+const AmountInput = styled.input`
+  background-color: ${(props) => props.theme.primary.backgroundColor};
+  color: ${(props) => props.theme.primary.textColor};
+`;
diff --git a/packages/widget/src/ui/AssetSelect/index.tsx b/packages/widget/src/ui/AssetSelect/index.tsx
@@ -7,6 +7,7 @@ import { cn } from '../../utils/ui';
 import { Dialog } from '../Dialog/Dialog';
 import { DialogTrigger } from '../Dialog/DialogTrigger';
 import { DialogContent } from '../Dialog/DialogContent';
+import { styled } from 'styled-components';
 
 interface Props {
   asset?: Asset;
@@ -29,7 +30,7 @@ function AssetSelect({
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger>
-        <button
+        <AssetSelectButton
           className={cn(
             'whitespace-nowrap text-left font-semibold',
             'flex w-full items-center gap-2 rounded-md bg-neutral-100 px-4 py-2 transition-colors sm:py-4',
@@ -59,7 +60,7 @@ function AssetSelect({
           <div>
             <ChevronDownIcon className="h-4 w-4" />
           </div>
-        </button>
+        </AssetSelectButton>
       </DialogTrigger>
       <DialogContent>
         <AssetSelectContent
@@ -76,3 +77,8 @@ function AssetSelect({
 }
 
 export default AssetSelect;
+
+const AssetSelectButton = styled.button`
+  background-color: ${(props) => props.theme.secondary.backgroundColor};
+  color: ${(props) => props.theme.secondary.textColor};
+`;
diff --git a/packages/widget/src/ui/ChainSelect/ChainSelectTrigger.tsx b/packages/widget/src/ui/ChainSelect/ChainSelectTrigger.tsx
@@ -2,6 +2,7 @@ import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import { forwardRef } from 'react';
 import { Chain } from '../../hooks/use-chains';
 import { cn } from '../../utils/ui';
+import { styled } from 'styled-components';
 
 interface Props {
   chain?: Chain;
@@ -10,7 +11,7 @@ interface Props {
 const ChainSelectTrigger = forwardRef<HTMLButtonElement, Props>(
   function ChainSelectTrigger({ chain, ...props }, ref) {
     return (
-      <button
+      <ChainSelectButton
         className={cn(
           'flex w-full items-center px-4 py-2 sm:py-4',
           'whitespace-nowrap rounded-md bg-neutral-100 text-left font-semibold transition-colors',
@@ -24,10 +25,15 @@ const ChainSelectTrigger = forwardRef<HTMLButtonElement, Props>(
           {chain ? chain.prettyName : 'Select Chain'}
         </span>
         <ChevronDownIcon className="mt-0.5 h-4 w-4" />
-      </button>
+      </ChainSelectButton>
     );
   }
   //
 );
 
 export default ChainSelectTrigger;
+
+const ChainSelectButton = styled.button`
+  background-color: ${(props) => props.theme.secondary.backgroundColor};
+  color: ${(props) => props.theme.secondary.textColor};
+`;
diff --git a/packages/widget/src/ui/Widget.tsx b/packages/widget/src/ui/Widget.tsx
@@ -26,12 +26,17 @@ import { useSwapWidgetUIStore } from '../store/swap-widget';
 import { css } from '@emotion/css';
 import { CraftedBySkip } from './CraftedBySkip';
 import { ThemeProvider, styled } from 'styled-components';
-import { defaultTheme } from './theme';
+import { Theme, defaultTheme } from './theme';
+
+type SwapWidgetProps = React.HTMLAttributes<HTMLDivElement> & {
+  theme?: Theme;
+};
 
 export const SwapWidgetUI = ({
   className,
+  theme,
   ...divProps
-}: React.HTMLAttributes<HTMLDivElement>) => {
+}: SwapWidgetProps) => {
   useEffect(() => void disclosure.rehydrate(), []);
 
   const { openWalletModal } = useWalletModal();
@@ -91,7 +96,7 @@ export const SwapWidgetUI = ({
   const accountStateKey = `${srcAccount?.isWalletConnected ? 'src' : 'no-src'}`;
 
   return (
-    <ThemeProvider theme={defaultTheme}>
+    <ThemeProvider theme={theme ?? defaultTheme}>
       <UsdDiff.Provider>
         <Tooltip.Provider delayDuration={0} disableHoverableContent>
           <WidgetContainer

diff --git a/packages/widget/src/ui/index.tsx b/packages/widget/src/ui/index.tsx
@@ -5,10 +5,15 @@ import {
   ConfigureSwapWidgetArgs,
 } from '../store/swap-widget';
 import { SwapWidgetUI } from './Widget';
+import { Theme } from './theme';
 
-export interface SwapWidgetProps
-  extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className' | 'style'>,
-    ConfigureSwapWidgetArgs {}
+export type SwapWidgetProps = Pick<
+  React.HTMLAttributes<HTMLDivElement>,
+  'className' | 'style'
+> &
+  ConfigureSwapWidgetArgs & {
+    theme?: Theme;
+  };
 
 export const SwapWidget: React.FC<SwapWidgetProps> = ({
   colors,
@@ -18,6 +23,7 @@ export const SwapWidget: React.FC<SwapWidgetProps> = ({
   onlyTestnet,
   defaultRoute,
   routeConfig,
+  theme,
 }) => {
   useEffect(() => {
     configureSwapWidget({
@@ -30,5 +36,5 @@ export const SwapWidget: React.FC<SwapWidgetProps> = ({
   }, [colors, onlyTestnet, settings, defaultRoute, routeConfig]);
 
   const divProps = { className, style };
-  return <SwapWidgetUI {...divProps} />;
+  return <SwapWidgetUI {...divProps} theme={theme} />;
 };
diff --git a/packages/widget/src/ui/theme.ts b/packages/widget/src/ui/theme.ts
@@ -2,24 +2,26 @@ import 'styled-components';
 
 export const defaultTheme = {
   primary: {
-    backgroundColor: 'yellow',
-    textColor: 'blue',
+    backgroundColor: 'white',
+    textColor: 'black',
   },
   secondary: {
-    backgroundColor: '',
-    textColor: '',
+    backgroundColor: 'rgb(245, 245, 245)',
+    textColor: 'black',
   },
 };
 
+export type Theme = {
+  primary: {
+    backgroundColor: string;
+    textColor: string;
+  };
+  secondary: {
+    backgroundColor: string;
+    textColor: string;
+  };
+};
+
 declare module 'styled-components' {
-  export interface DefaultTheme {
-    primary: {
-      backgroundColor: string;
-      textColor: string;
-    };
-    secondary: {
-      backgroundColor: string;
-      textColor: string;
-    };
-  }
+  export interface DefaultTheme extends Theme {}
 }