Tailwind refinements (#26)

* tailwind refinements * variable naming wip * adds --brand color to CustomTheme * Removes unused fields * Removes unused type * Feat/wallet provider (#24) * Testing Provider Behavior * Update `Bridge` to accept `web3Provider` prop from Consumer * `useEthereumWallet` hook to handle mocking Consumer Wallet * Pass in Consumer web3Provider to Bridge component * `getAccounts` util function to grab current connect address to window.ethereum object * Consumer Provider state * useEthereumWallet utility hook to grab current browser ethereum data * Mock Consumer Provider * Log when Consumer chain/account updates * Add `Web3Provider` * ... * Update for merge * Start migration of Widget component to allow for index to be app setup * Declare `WidgetProps` type * Migrate Bridge contents to Widgets component * Wrap `Widget` with `Web3Provider` to provide Context access * Fetch Web3 Provider data when provider detected from Consumer * Update Context values * Construct `handleBridge` callback to test Consumer Provider * Add Button to invoke handleBridge * Add prettier config * Format code with Prettier * ... * Add settings (#25) * Update merge conflict missing code * Fix prop error --------- Co-authored-by: Lawson Kight <lawsonkight@users.noreply.github.com> Co-authored-by: abtestingalpha <abtestingalpha@gmail.com>
synapsecns · Dec 5, 2023 · de653f5 · de653f5
1 parent fe5bac0
commit de653f5
Show file tree

Hide file tree

Showing 8 changed files with 277 additions and 111 deletions.
diff --git a/examples/with-react/src/App.tsx b/examples/with-react/src/App.tsx
@@ -57,7 +57,7 @@ function App() {
 
  const [customTheme, setCustomTheme] = useState({})
 
- function colorInputHandler(e: BaseSyntheticEvent) {
+ function createCustomTheme(e: BaseSyntheticEvent) {
  function hexToRgb(hex: string) {
  // https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
@@ -84,32 +84,71 @@ function App() {
  a,
  }
  }
- const hsla = rgb2hsl(hexToRgb(e.target.value))
- console.log(hsla)
+
+ const colorPicker = document.getElementById(
+ 'color-picker'
+ ) as HTMLInputElement | null
+ const hsla = rgb2hsl(hexToRgb(colorPicker?.value ?? '#000000'))
+
+ const accentColorPicker = document.getElementById(
+ 'accent-color-picker'
+ ) as HTMLInputElement | null
 
  setCustomTheme(
  hsla.l < 50
  ? {
- '--h': hsla.h,
- '--s': `${hsla.s}%`,
- '--primary': 'hsl(var(--h), var(--s), 96%)',
- '--secondary': 'hsl(var(--h), var(--s), 86%)',
- '--small': 'hsl(var(--h), var(--s), 66%)',
- '--accent': 'hsl(var(--h), var(--s), 29%)',
- '--separator': 'hsl(var(--h), var(--s), 13%)',
- '--surface': 'hsl(var(--h), var(--s), 13%)',
- '--background': 'hsl(var(--h), var(--s), 7%)',
+ '--strong': `hsl(${hsla.h}deg ${hsla.s}% ${
+ hsla.l * 1.0 + 100
+ }% / 100%)`,
+ '--primary': `hsl(${hsla.h}deg ${hsla.s}% ${
+ hsla.l * 0.96 + 96
+ }% / 100%)`,
+ '--secondary': `hsl(${hsla.h}deg ${hsla.s}% ${
+ hsla.l * 0.86 + 86
+ }% / 100%)`,
+ '--small': `hsl(${hsla.h}deg ${hsla.s}% ${
+ hsla.l * 0.66 + 66
+ }% / 100%)`,
+ '--accent': `hsl(${hsla.h}deg ${hsla.s}% ${
+ hsla.l * 0.25 + 25
+ }% / 100%)`,
+ '--separator': `hsl(${hsla.h}deg ${hsla.s}% ${
+ hsla.l * 0.12 + 12
+ }% / 100%)`,
+ '--surface': `hsl(${hsla.h}deg ${hsla.s}% ${
+ hsla.l * 0.12 + 12
+ }% / 100%)`,
+ '--background': `hsl(${hsla.h}deg ${hsla.s}% ${
+ hsla.l * 0.07 + 7
+ }% / 100%)`,
+ '--brand': accentColorPicker?.value ?? '#000000',
  }
  : {
- '--h': hsla.h,
- '--s': `${hsla.s}%`,
- '--primary': 'hsl(var(--h), var(--s), 7%)',
- '--secondary': 'hsl(var(--h), var(--s), 41%)',
- '--small': 'hsl(var(--h), var(--s), 66%)',
- '--accent': 'hsl(var(--h), var(--s), 96%)',
- '--separator': 'hsl(var(--h), var(--s), 86%)',
- '--surface': 'hsl(var(--h), var(--s), 100%)',
- '--background': 'hsl(var(--h), var(--s), 96%)',
+ '--strong': `hsl(${hsla.h}deg ${hsla.s}% ${
+ Math.min(100, hsla.l * 0.0) * 0.0
+ }% / 100%)`,
+ '--primary': `hsl(${hsla.h}deg ${hsla.s}% ${
+ Math.min(100, hsla.l * 1.07) * 0.07
+ }% / 100%)`,
+ '--secondary': `hsl(${hsla.h}deg ${hsla.s}% ${
+ Math.min(100, hsla.l * 1.41) * 0.41
+ }% / 100%)`,
+ '--small': `hsl(${hsla.h}deg ${hsla.s}% ${
+ Math.min(100, hsla.l * 1.66) * 0.66
+ }% / 100%)`,
+ '--accent': `hsl(${hsla.h}deg ${hsla.s}% ${
+ Math.min(100, hsla.l * 1.96) * 0.96
+ }% / 100%)`,
+ '--separator': `hsl(${hsla.h}deg ${hsla.s}% ${
+ Math.min(100, hsla.l * 1.86) * 0.86
+ }% / 100%)`,
+ '--surface': `hsl(${hsla.h}deg ${hsla.s}% ${
+ Math.min(100, hsla.l * 2.0) * 1.0
+ }% / 100%)`,
+ '--background': `hsl(${hsla.h}deg ${hsla.s}% ${
+ Math.min(100, hsla.l * 1.96) * 0.96
+ }% / 100%)`,
+ '--brand': accentColorPicker?.value ?? '#000000',
  }
  )
  }
@@ -150,7 +189,7 @@ function App() {
  </a>
  </header>
 
- <main>
+ <main style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
  <header>
  <h1>Synapse Widget</h1>
  <code>npm synapse-widget</code>
@@ -165,11 +204,78 @@ function App() {
  web3Provider={web3Provider}
  networkProviders={providers}
  tokens={tokens}
- customTheme={Object.keys(customTheme).length && customTheme}
+ customTheme={Object.keys(customTheme)?.length && customTheme}
+ />
+ <div>
+ {/* <label htmlFor='color-picker'>Background</label> */}
+ <input id="color-picker" type="color" onInput={createCustomTheme} />
+ &nbsp;
+ {/* <label htmlFor='accent-color-picker'>Accent</label> */}
+ <input
+ id="accent-color-picker"
+ type="color"
+ onInput={createCustomTheme}
+ />
+ </div>
+ <Bridge
+ chainIds={chainIds}
+ web3Provider={web3Provider}
+ networkProviders={providers}
+ tokens={tokens}
+ theme="night"
  />
 
  <h2>Customize</h2>
- <input id="color-picker" type="color" onInput={colorInputHandler} />
+ <h3>Color Mode — WIP, not reflected in code</h3>
+ <dl>
+ <dt>theme</dt>
+ <dd>
+ <ul style={{ display: 'flex', gap: '1rem' }}>
+ <li>auto</li>|<li>dark</li>|<li>light</li>
+ </ul>
+ </dd>
+ </dl>
+ <h3>Color Values — WIP, not reflected in code</h3>
+ {/* <h4>Text</h4> */}
+ <dl>
+ <dt>--synapse-text-strong</dt>
+ <dd>hsl(0deg 0% 0% / 100%)</dd>
+ <dt>--synapse-text-primary</dt>
+ <dd>hsl(0deg 0% 0% / 100%)</dd>
+ <dt>--synapse-text-secondary</dt>
+ <dd>hsl(0deg 0% 0% / 100%)</dd>
+ </dl>
+ {/* <h4>Objects</h4> */}
+ <dl>
+ <dt>--synapse-bg-button</dt>
+ <dd>hsl(0deg 0% 0% / 100%)</dd>
+ <dt>--synapse-bg-select</dt>
+ <dd>hsl(0deg 0% 0% / 100%)</dd>
+ <dt>--synapse-bg-card</dt>
+ <dd>hsl(0deg 0% 0% / 100%)</dd>
+ <dt>--synapse-bg-root</dt>
+ <dd>hsl(0deg 0% 0% / 100%)</dd>
+ </dl>
+ {/* <h4>Color</h4> */}
+ <dl>
+ <dt>--synapse-border</dt>
+ <dd>hsl(0deg 0% 0% / 100%)</dd>
+ <dt>--synapse-accent</dt>
+ <dd>hsl(0deg 0% 0% / 100%)</dd>
+ </dl>
+ <h3>Typography — WIP, not reflected in code</h3>
+ <dl>
+ <dt>--synapse-font-size</dt>
+ <dd>100%</dd>
+ <dt>--synapse-font-family-display</dt>
+ <dd>system-ui</dd>
+ <dt>--synapse-font-family-text</dt>
+ <dd>system-ui</dd>
+ <dt>--synapse-font-weight-display</dt>
+ <dd>600 (semibold)</dd>
+ <dt>--synapse-font-weight-text</dt>
+ <dd>500 (medium)</dd>
+ </dl>
  {/* <Bridge chainIds={chainIds} providers={providers} tokens={tokens} /> */}
  {/* <Bridge chainIds={chainIds} providers={providers} tokens={tokens} theme="night" />
  <Bridge chainIds={chainIds} providers={providers} tokens={tokens} customTheme={customThemeDFK}/> */}

diff --git a/examples/with-react/src/index.css b/examples/with-react/src/index.css
@@ -32,20 +32,36 @@ body {
  -moz-osx-font-smoothing: grayscale;
 }
 
-h1, h2, h3, h4, h5, h6 {
- color: var(--strong)
+:root h1, h2, h3, h4, h5, h6 {
+ color: var(--strong);
+ font-weight: 600 !important;
+ margin-top: .25rem !important;
+ margin-bottom: .25rem !important;
+ padding-top: .25rem;
 }
 
-:root h1 {
- font-size: 2rem;
- font-weight: 600;
+:root h1 { font-size: 2rem; }
+:root h2 { font-size: 1.5rem; }
+:root h3 { font-size: 1.25rem; }
+:root h4 { 
+ font-size: 1rem;
+ margin-top: 0 !important;
+ margin-bottom: 0 !important;
+ padding-top: .25rem !important
 }
 
 code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
  monospace;
 }
 
+dl {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ monospace;
+}
+
 .App {
  text-align: center;
 }

diff --git a/src/components/Receipt.tsx b/src/components/Receipt.tsx
@@ -5,47 +5,58 @@ import { DoubleDownArrow } from '@/components/DoubleDownArrow'
 export const Receipt = ({ quote, send, receive }) => {
  const [isExpanded, setIsExpanded] = useState<boolean>(false)
  const estTime = useMemo(() => {
- return quote.estimatedTime / 60
+ return quote?.estimatedTime / 60
  }, [quote])
 
  const handleToggle = () => {
  setIsExpanded(!isExpanded)
  }
 
  return (
- <div>
- <div className="flex items-center justify-end">
- <div className="text-sm">
- {estTime} min via <span className="text-[--primary]">Synapse</span>
- </div>
- <div onClick={handleToggle}>
- {isExpanded ? <DoubleUpArrow /> : <DoubleDownArrow />}
- </div>
+ <>
+ <div className="flex justify-end text-sm">
+ { quote ? (
+ <div onClick={handleToggle} className={`cursor-s-resize hover:bg-[--separator] flex self-end pl-2 pr-1 py-1 gap-1 rounded active:opacity-40 ${isExpanded ? 'cursor-n-resize' : 'cursor-s-resize'}`}>
+ {estTime} min via
+ <a href="https://synapseprotocol.com" target="_blank" className="text-[--brand] cursor-alias text-[--strong]">
+ Synapse
+ </a>
+ {isExpanded ? <DoubleUpArrow /> : <DoubleDownArrow />}
+ </div>
+ ) : (
+ <div className={`flex self-end pl-2 pr-1 py-1 gap-1 text-[--secondary] cursor-default`}>
+ Powered by
+ <a href="https://synapseprotocol.com" target="_blank" className="text-[--brand] cursor-alias active:opacity-40 ">
+ Synapse
+ </a>
+ </div>
+ )
+ }
  </div>
  {isExpanded && (
- <div className="p-2 mt-2 text-sm border border-[--separator]">
- <div className="flex items-center justify-between">
+ <div className="p-2 text-sm border border-[--separator]">
+ <div className="flex justify-between">
  <div>Router</div>
  <div className="text-[--primary]">{quote.bridgeModuleName}</div>
  </div>
- <div className="flex items-center justify-between">
+ <div className="flex justify-between">
  <div>Origin</div>
  <div>Ethereum</div>
  </div>
- <div className="flex items-center justify-between">
+ <div className="flex justify-between">
  <div>Destination</div>
  <div>Arbitrum</div>
  </div>
- <div className="flex items-center justify-between">
+ <div className="flex justify-between">
  <div>Send</div>
  <div>{send}</div>
  </div>
- <div className="flex items-center justify-between">
+ <div className="flex justify-between">
  <div>Receive</div>
  <div>{receive}</div>
  </div>
  </div>
  )}
- </div>
+ </>
  )
 }