Docs Theming and Web Component Update (#80)

skip-mev · Jul 22, 2024 · 165c52f · 165c52f
1 parent a90c994
commit 165c52f
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 51 deletions.
diff --git a/docs/mint.json b/docs/mint.json
@@ -60,6 +60,7 @@
       "pages": [
         "widget/getting-started",
         "widget/configuration-options",
+        "widget/web-component",
         "widget/experimental-features",
         "widget/common-questions",
         "widget/recommendations"

diff --git a/docs/widget/configuration-options.mdx b/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
diff --git a/docs/widget/experimental-features.mdx b/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.
diff --git a/docs/widget/web-component.mdx b/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>
+```