Merge branch 'main' into docs

docs/widget/configuration-options.mdx

@@ -64,6 +64,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
+  };
 }
 ```
 
@@ -170,6 +177,20 @@ Endpoint options to override endpoints. Defaults to Skip proxied endpoints. Plea
 
 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.
 
+### `theme`:
+
+`theme` allows you to customize the look of the widget to fit your brand and application's aesthetics.
+
+```ts
+  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
+  };
+```
+
 ### `className` string
 
 ### `style` React.CSSProperties

docs/widget/experimental-features.mdx

@@ -4,54 +4,4 @@ title: "Experimental Features"
 
 # Summary
 
-This page lists and describes all of the Widget's experimental features (features still in development) that we are publishing for early feedback and usage!
-
-# Web Component
-
-If your app is not using React, have no fear, the web component version of the Skip:Go Widget is here!
-
-The web component is created with the `@r2wc/react-to-web-component` library.
-In order to register the web-component, you must first call the `initializeSwapWidget` function:
-```tsx
-import { initializeSwapWidget } from '@skip-go/widget';
-initializeSwapWidget();
-```
-et voilà! you can now use the `swap-widget` web-component as `<swap-widget></swap-widget>`.
-The props for the web component are the same as `SwapWidgetProps` except that all props
-are passed to the web-component via attributes in kebab-case as strings or stringified objects. Example below:
-```tsx
-<div
-  style={{
-    width: '450px',
-    height: '820px',
-  }}
->
-  <SwapWidget
-    className="test-class"
-    onlyTestnet={true}
-    colors={{
-      primary: '#FF4FFF',
-    }}
-    defaultRoute={{
-      srcChainID: 'osmosis-1',
-      srcAssetDenom:
-        'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4',
-    }}
-  />
-</div>
-```
-becomes
-```tsx
-<div style="width:450px;height:820px;">
-  <swap-widget
-    class-name="test-class"
-    onlyTestnet="true"
-    colors='{"primary":"#FF4FFF"}'
-    default-route={JSON.stringify({
-      srcChainID: 'osmosis-1',
-      srcAssetDenom:
-        'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4',
-    })}
-  ></swap-widget>
-</div>
-```
+This page lists and describes all of the Widget's experimental features (features still in development) that we are publishing for early feedback and usage! If there are none listed, that means there are currently no published in development features.

docs/widget/web-component.mdx

@@ -0,0 +1,52 @@
+---
+title: "Web Component"
+---
+
+# Web Component
+
+If your app is not using React, have no fear, the web component version of the Skip:Go Widget is here!
+
+In order to register the web-component, you must first call the `initializeSwapWidget` function:
+```tsx
+import { initializeSwapWidget } from '@skip-go/widget';
+initializeSwapWidget();
+```
+et voilà! you can now use the `swap-widget` web-component as `<swap-widget></swap-widget>`.
+The props for the web component are the same as `SwapWidgetProps` except that all props
+are passed to the web-component via attributes in kebab-case as strings or stringified objects. Example below:
+```tsx
+<div
+  style={{
+    width: '450px',
+    height: '820px',
+  }}
+>
+  <SwapWidget
+    className="test-class"
+    onlyTestnet={true}
+    colors={{
+      primary: '#FF4FFF',
+    }}
+    defaultRoute={{
+      srcChainID: 'osmosis-1',
+      srcAssetDenom:
+        'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4',
+    }}
+  />
+</div>
+```
+becomes
+```tsx
+<div style="width:450px;height:820px;">
+  <swap-widget
+    class-name="test-class"
+    onlyTestnet="true"
+    colors='{"primary":"#FF4FFF"}'
+    default-route={JSON.stringify({
+      srcChainID: 'osmosis-1',
+      srcAssetDenom:
+        'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4',
+    })}
+  ></swap-widget>
+</div>
+```

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

@@ -0,0 +1,48 @@
+import { NextPage } from 'next';
+import React from 'react';
+import { SwapWidgetWithoutProviders } from '@skip-go/widget';
+import { SwapWidgetProvider } from '@skip-go/widget';
+
+const Home: NextPage = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+      }}
+    >
+      <div
+        style={{
+          width: '450px',
+          height: '820px',
+        }}
+      >
+        <SwapWidgetProvider>
+          <SwapWidgetWithoutProviders
+            defaultRoute={{
+              srcChainID: 'osmosis-1',
+              srcAssetDenom:
+                'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4',
+            }}
+          />
+        </SwapWidgetProvider>
+      </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>
+  );
+};
+
+export default Home;

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:

examples/nextjs/styles/globals.css

@@ -16,6 +16,4 @@ div,
 p,
 span {
   color: gray;
-  border: 2px solid gray;
-  background: gray;
 }