Widget improvements (#16)

* [widget-improvements] Update widget

* [widget-improvements] Add custom styles property

* [widget-improvements] Add custom styles

* [widget-improvements] Add custom styles

* [widget-improvements] Add custom styles

* [widget-improvements] Add custom styles

* [widget-improvements] Add referrer config

* [widget-improvements] Add jest timeout comment

Author: mike-diamond

LICENSE

@@ -1,4 +1,4 @@
-Copyright (C) 2021 StakeWise Labs
+Copyright (C) 2022 StakeWise Labs
 [email protected]
 
 

packages/stakewise-dev/LICENSE

@@ -3,6 +3,11 @@
   line-height: 14rem;
 }
 
+.text-16 {
+  font-size: 16rem;
+  line-height: 20rem;
+}
+
 .text-18 {
   font-size: 18rem;
   line-height: 20rem;

packages/stakewise-dev/scss/text.scss

@@ -1,7 +1,3 @@
-.container {
-  height: 100vh;
-}
-
 .dark {
   color: $color-rush;
   background-color: $color-titanic;
@@ -29,6 +25,10 @@
 .monaco-editor {
   padding-top: 4px;
 
+  .monaco-hover {
+    display: none !important;
+  }
+
   .margin,
   .lines-content {
     background-color: transparent !important;
@@ -45,11 +45,19 @@
   .container {
     min-height: 940px;
   }
+
+  .textContainer {
+    min-height: calc(100vh - 106px);
+  }
 }
 
 @media (max-width: 639px) {
 
   .container {
     min-height: 420px;
   }
+
+  .textContainer {
+    min-height: calc(100vh - 170px);
+  }
 }

packages/stakewise-dev/src/App/App.scss

@@ -24,9 +24,9 @@ const App = () => {
 
   return (
     <div
-      className={cx(s.container, 'flex flex-col items-center justify-center')}
+      className={s.container}
     >
-      <div className="flex-1 w-full flex flex-col items-center justify-center">
+      <div className={cx(s.textContainer, 'w-full flex flex-col items-center justify-center py-24')}>
         <Content
           className="mw-618 w-full px-16"
           form={form}

packages/stakewise-dev/src/App/App.tsx

@@ -1,4 +1,4 @@
-.button {
+.mw200 {
   min-width: 200rem;
 }
 

packages/stakewise-dev/src/App/components/Button/Button.scss

@@ -17,7 +17,7 @@ const Button: React.FC<ButtonProps> = (props) => {
 
   return (
     <button
-      className={cx(className, s.button, s[color], 'cursor-pointer radius-8 px-20 py-24', {
+      className={cx(className, s.mw200, s[color], 'cursor-pointer radius-8 px-20 py-24', {
         'opacity-48': disabled,
         'cursor-disabled': disabled,
       })}

packages/stakewise-dev/src/App/components/Button/Button.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
-import cx from 'classnames'
 import { Form, useFieldState } from 'formular'
 
 import { options, useDevice } from '../../util'
 
 import Switch from '../Switch/Switch'
 import DropdownMenu from '../Select/Select'
+import Input from '../Input/Input'
+import { useMemo } from 'preact/compat'
 
 
 type ConfigProps = {
@@ -22,42 +23,86 @@ const Config: React.FC<ConfigProps> = (props) => {
   const { value: overlay } = useFieldState(form.fields.overlay)
   const { value: network } = useFieldState(form.fields.network)
   const { value: currency } = useFieldState(form.fields.currency)
+  const { value: withReferrer } = useFieldState(form.fields.withReferrer)
+  const { value: customStyles } = useFieldState(form.fields.customStyles)
+
+  const isReferrerEnabled = useMemo(() => {
+    if (typeof window !== 'undefined') {
+      return window.location?.search?.includes('withReferrer')
+    }
+
+    return false
+  }, [])
 
   return (
-    <div className={cx(className, isMobile ? '' : 'flex items-start')}>
-      <div className="flex-1">
-        <Switch
-          label="Dark theme"
-          labelClassName="ml-20"
-          checked={theme === 'dark'}
-          onChange={() => form.fields.theme.set(theme === 'dark' ? 'light' : 'dark')}
-        />
-        <Switch
-          className="mt-20"
-          label="Blur overlay"
-          labelClassName="ml-20"
-          checked={overlay === 'blur'}
-          onChange={() => form.fields.overlay.set(overlay === 'dark' ? 'blur' : 'dark')}
-        />
-      </div>
-      <div className={isMobile ? 'mt-20' : 'ml-20 flex-1'}>
-        <div className="flex items-center">
-          <DropdownMenu
-            items={options.currency}
-            onChange={(value) => form.fields.currency.set(value)}
-          >
-            <div>{currency}</div>
-          </DropdownMenu>
-          <label className="ml-20" htmlFor="headlessui-menu-button-5">Currency</label>
+    <div className={className}>
+      <div className={isMobile ? '' : 'flex items-start'}>
+        <div className="flex-1">
+          <Switch
+            label="Dark theme"
+            labelClassName="ml-20"
+            checked={theme === 'dark'}
+            onChange={() => form.fields.theme.set(theme === 'dark' ? 'light' : 'dark')}
+          />
+          <Switch
+            className="mt-20"
+            label="Blur overlay"
+            labelClassName="ml-20"
+            checked={overlay === 'blur'}
+            onChange={() => form.fields.overlay.set(overlay === 'dark' ? 'blur' : 'dark')}
+          />
+          {
+            !isMobile && (
+              <Switch
+                className="mt-20"
+                label="Custom styles"
+                labelClassName="ml-20"
+                checked={customStyles}
+                onChange={() => form.fields.customStyles.set(!customStyles)}
+              />
+            )
+          }
+        </div>
+        <div className={isMobile ? 'mt-20' : 'ml-20 flex-1'}>
+          <div className="flex items-center">
+            <DropdownMenu
+              items={options.currency}
+              onChange={(value) => form.fields.currency.set(value)}
+            >
+              <div>{currency}</div>
+            </DropdownMenu>
+            <label className="ml-20" htmlFor="headlessui-menu-button-5">Currency</label>
+          </div>
+          <Switch
+            className="mt-20"
+            label="Testnet (for testing only)"
+            labelClassName="ml-20"
+            checked={network === 'goerli'}
+            onChange={() => form.fields.network.set(network === 'goerli' ? 'mainnet' : 'goerli')}
+          />
+          {
+            isReferrerEnabled && (
+              <Switch
+                className="mt-20"
+                label="With referrer"
+                labelClassName="ml-20"
+                checked={withReferrer}
+                onChange={() => form.fields.withReferrer.set(!withReferrer)}
+              />
+            )
+          }
         </div>
-        <Switch
-          className="mt-20"
-          label="Testnet (for testing only)"
-          labelClassName="ml-20"
-          checked={network === 'goerli'}
-          onChange={() => form.fields.network.set(network === 'goerli' ? 'mainnet' : 'goerli')}
-        />
       </div>
+      {
+        withReferrer && (
+          <Input
+            className="mt-20"
+            label="Referrer address"
+            field={form.fields.referrer}
+            style={theme}
+          />
+        )
+      }
     </div>
   )
 }