[major] Add themeing

.changeset/curly-crabs-switch.md

@@ -0,0 +1,5 @@
+---
+'@skip-go/widget': major
+---
+
+Add theme prop to enable custom styling

examples/nextjs/pages/index.tsx

@@ -1,46 +1,124 @@
 import { NextPage } from 'next';
-import React from 'react';
+import React, { useState } from 'react';
 import { SwapWidget } from '@skip-go/widget';
+import crypto from 'crypto';
+import { PartialTheme } from '@skip-go/widget/build/ui/theme';
+
+function hashString(inputString: string) {
+  const hash = crypto.createHash('sha256');
+  hash.update(inputString);
+  return hash.digest('hex');
+}
+
+function isJsonString(str: string) {
+  try {
+    JSON.parse(str);
+  } catch (e) {
+    return false;
+  }
+  return true;
+}
+
+const defaultProps = {
+  defaultRoute: {
+    srcChainID: 'osmosis-1',
+    srcAssetDenom:
+      'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4',
+  },
+};
+
+const darkTheme = {
+  backgroundColor: '#191A1C',
+  textColor: '#E6EAE9',
+  borderColor: '#363B3F',
+  brandColor: '#FF4FFF',
+  highlightColor: '#1F2022',
+};
+
+const defaultHash = hashString(JSON.stringify(defaultProps));
 
 const Home: NextPage = () => {
+  const [props, setProps] = useState(defaultProps);
+  const [propsHash, setPropsHash] = useState(defaultHash);
+
+  const handleOnChange = (event: any) => {
+    if (isJsonString(event.target.innerText)) {
+      const newHash = hashString(event.target.innerText);
+      if (propsHash !== newHash) {
+        console.log('update props');
+        setProps({ ...JSON.parse(event.target.innerText) });
+        setPropsHash(newHash);
+      }
+    }
+  };
+
+  const handleUpdateTheme = (theme: PartialTheme) => {
+    const newProps = { ...props, theme: theme } as any;
+    const newHash = hashString(JSON.stringify(newProps));
+    setProps(newProps);
+    setPropsHash(newHash);
+  };
+
   return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'row',
-      }}
-    >
+    <div style={{ display: 'flex', gap: 50 }}>
       <div
         style={{
           width: '450px',
           height: '820px',
+          flexShrink: 0,
         }}
       >
-        <SwapWidget
-          colors={{
-            primary: '#FF4FFF',
-          }}
-          defaultRoute={{
-            srcChainID: 'osmosis-1',
-            srcAssetDenom:
-              'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4',
+        <SwapWidget {...props} key={propsHash} />
+      </div>
+      <div>
+        <div style={{ display: 'flex' }}>
+          <button
+            onClick={() => {
+              if (
+                window.confirm('Are you sure you want to purge all settings?')
+              ) {
+                window.localStorage.clear();
+                window.sessionStorage.clear();
+                window.location.reload();
+              }
+            }}
+            style={{
+              height: '40px',
+            }}
+          >
+            Purge Settings
+          </button>
+          <button
+            style={{
+              height: '40px',
+            }}
+            onClick={() => handleUpdateTheme(undefined)}
+          >
+            Default Theme
+          </button>
+          <button
+            style={{
+              height: '40px',
+            }}
+            onClick={() => handleUpdateTheme(darkTheme)}
+          >
+            Dark Theme
+          </button>
+        </div>
+
+        <pre
+          contentEditable="true"
+          onBlur={handleOnChange}
+          style={{
+            border: '1px solid black',
+            padding: 20,
+            fontSize: '20px',
+            color: 'black',
           }}
-        />
+        >
+          {JSON.stringify(props, null, 2)}
+        </pre>
       </div>
-      <button
-        onClick={() => {
-          if (window.confirm('Are you sure you want to purge all settings?')) {
-            window.localStorage.clear();
-            window.sessionStorage.clear();
-            window.location.reload();
-          }
-        }}
-        style={{
-          height: '40px',
-        }}
-      >
-        Purge Settings
-      </button>
     </div>
   );
 };

examples/nextjs/pages/provider.tsx

@@ -19,9 +19,6 @@ const Home: NextPage = () => {
       >
         <SwapWidgetProvider>
           <SwapWidgetWithoutProviders
-            colors={{
-              primary: '#FF4FFF',
-            }}
             defaultRoute={{
               srcChainID: 'osmosis-1',
               srcAssetDenom:

examples/nextjs/pages/vue.tsx

@@ -9,23 +9,19 @@ const VuePage: NextPage = () => {
     const { createApp } = require('vue/dist/vue.esm-bundler.js');
     const app = createApp({
       setup() {
-        const colors = JSON.stringify({
-          primary: '#FF4FFF',
-        });
         const defaultRoute = JSON.stringify({
           srcChainID: 'osmosis-1',
           srcAssetDenom:
             'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4',
         });
 
         return {
-          colors,
           defaultRoute,
         };
       },
       template: `
         <div style="width:450px;height:820px;">
-          <skip-widget :colors="colors" :default-route="defaultRoute"></skip-widget>
+          <skip-widget :default-route="defaultRoute"></skip-widget>
         </div>
       `,
     });

examples/nextjs/pages/web-component.tsx

@@ -13,9 +13,6 @@ const WebComponent: NextPage = () => {
       }}
     >
       <skip-widget
-        colors={JSON.stringify({
-          primary: '#FF4FFF',
-        })}
         default-route={JSON.stringify({
           srcChainID: 'osmosis-1',
           srcAssetDenom:

packages/widget/README.md

@@ -56,9 +56,6 @@ The `SwapWidget` component accepts the following props:
 
 ````tsx
 interface SwapWidgetProps {
-  colors?: {
-    primary?: string; // Custom primary color for the widget. Defaults to `#FF486E`.
-  };
   defaultRoute?: {
     // Default route for the widget.
     amountIn?: number;
@@ -129,6 +126,13 @@ interface SwapWidgetProps {
     getRestEndpointForChain?: (chainID: string) => Promise<string>;
   };
   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.
+  theme?: {
+    backgroundColor: string; // background color
+    textColor: string; // text color
+    borderColor: string; // border color
+    brandColor: string; // color used for confirmation buttons
+    highlightColor: string; // color used when hovering over buttons, and in select chain/asset dropdown
+  };
 }
 ````
 

packages/widget/package.json

@@ -37,19 +37,22 @@
   },
   "peerDependencies": {
     "react": "17.x || 18.x",
-    "react-dom": "17.x || 18.x"
+    "react-dom": "17.x || 18.x",
+    "styled-components": "^6.0.0",
+    "stylis": "^4.0.0"
   },
   "devDependencies": {
     "@rollup/plugin-url": "^8.0.2",
     "@types/node": "18.7.18",
     "@types/qrcode": "^1.4.2",
     "@types/react": "^18.0.6",
     "@types/react-dom": "^18.0.2",
-    "@types/styled-components": "^5.1.25",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "postcss-prefixwrap": "^1.49.0",
     "rollup-plugin-copy": "^3.5.0",
+    "styled-components": "^6.0.0",
+    "stylis": "^4.0.0",
     "tailwindcss": "^3.4.3",
     "tailwindcss-animate": "^1.0.7",
     "typed-query-selector": "^2.11.2",
@@ -101,7 +104,6 @@
     "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",

packages/widget/src/hooks/use-swap-widget.ts

@@ -28,7 +28,7 @@ import { Chain, useChains } from './use-chains';
 import { useBalancesByChain } from './use-balances-by-chain';
 import { useRoute } from './use-route';
 import { getChainFeeAssets, getChainGasPrice } from '../utils/chain';
-import { useSkipClient, useSkipConfig } from './use-skip-client';
+import { useSkipClient } from './use-skip-client';
 import { getAmountWei, parseAmountWei } from '../utils/number';
 import { gracefullyConnect } from '../utils/wallet';
 import { useSwapWidgetUIStore } from '../store/swap-widget';

packages/widget/src/provider/index.tsx

@@ -13,6 +13,7 @@ import {
   endpointOptions as defaultEndpointOptions,
   apiURL as defaultApiURL,
 } from '../constants/defaults';
+import { useTheme } from 'styled-components';
 
 interface WalletProviderProps {
   children: React.ReactNode;
@@ -24,7 +25,6 @@ export interface WidgetConfig {
 }
 export interface SwapWidgetProviderProps extends SkipAPIProviderProps {
   children: React.ReactNode;
-  toasterProps?: ToasterProps;
 }
 export interface SkipAPIProviderProps {
   children: React.ReactNode;
@@ -58,18 +58,11 @@ export const SkipAPIProvider: React.FC<SkipAPIProviderProps> = ({
 
 export const SwapWidgetProvider: React.FC<SwapWidgetProviderProps> = ({
   children,
-  toasterProps,
   ...skipApiProviderProps
 }) => {
   return (
     <WalletProvider>
       <SkipAPIProvider {...skipApiProviderProps}>{children}</SkipAPIProvider>
-      <Toaster
-        position={'top-right'}
-        containerClassName="font-diatype"
-        toastOptions={{ duration: 1000 * 10 }}
-        {...toasterProps}
-      />
     </WalletProvider>
   );
 };

packages/widget/src/store/swap-widget.ts

@@ -10,9 +10,6 @@ import {
 } from 'zustand/middleware';
 
 interface SwapWidgetStore {
-  colors: {
-    primary?: string;
-  };
   onlyTestnet?: boolean;
   defaultRoute?: DefaultRouteConfig;
   routeConfig?: RouteConfig;
@@ -45,9 +42,6 @@ interface SwapWidgetStore {
   };
 }
 export const swapWidgetDefaultValues: SwapWidgetStore = {
-  colors: {
-    primary: '#FF486E',
-  },
   onlyTestnet: false,
   defaultRoute: undefined,
   routeConfig: {
@@ -78,12 +72,6 @@ export const useSwapWidgetUIStore = create(
 );
 
 export interface ConfigureSwapWidgetArgs {
-  colors?: {
-    /**
-     * @default '#FF486E'
-     */
-    primary?: string;
-  };
   settings?: {
     /**
      * gas amount for validation
@@ -128,9 +116,6 @@ export interface ConfigureSwapWidgetArgs {
 
 export const configureSwapWidget = (args: ConfigureSwapWidgetArgs) => {
   useSwapWidgetUIStore.setState((prev) => ({
-    colors: {
-      primary: args.colors?.primary || prev.colors.primary,
-    },
     onlyTestnet: args.onlyTestnet || prev.onlyTestnet,
     defaultRoute: args.defaultRoute || prev.defaultRoute,
     routeConfig: {

packages/widget/src/styles/cssReset.css

@@ -19,9 +19,3 @@
   background-color: unset;
   word-spacing: unset;
 }
-
-div,
-p,
-span {
-  color: black;
-}