From 506bd9c6bdd99292c9b23a7274c502dd30a97412 Mon Sep 17 00:00:00 2001 From: lawsonkight Date: Mon, 11 Dec 2023 16:26:39 -0800 Subject: [PATCH] Landing page (#41) * Adds setTokens (#33) * wip * article css * landing page styling wip * footer * remove hyperlink from receipt expand block * landing page light mode * mobile responsiveness --------- Co-authored-by: abtestingalpha <104046418+abtestingalpha@users.noreply.github.com> --- ...napse-logo.svg => synapse-logo-onDark.svg} | 0 .../public/synapse-logo-onLight.svg | 30 ++ examples/with-react/src/App.tsx | 199 ++++++------ examples/with-react/src/Footer.tsx | 67 ++++ examples/with-react/src/Header.tsx | 50 +++ examples/with-react/src/index.css | 286 ++++++++++++++---- src/components/Receipt.tsx | 53 +--- 7 files changed, 504 insertions(+), 181 deletions(-) rename examples/with-react/public/{synapse-logo.svg => synapse-logo-onDark.svg} (100%) create mode 100644 examples/with-react/public/synapse-logo-onLight.svg create mode 100644 examples/with-react/src/Footer.tsx create mode 100644 examples/with-react/src/Header.tsx diff --git a/examples/with-react/public/synapse-logo.svg b/examples/with-react/public/synapse-logo-onDark.svg similarity index 100% rename from examples/with-react/public/synapse-logo.svg rename to examples/with-react/public/synapse-logo-onDark.svg diff --git a/examples/with-react/public/synapse-logo-onLight.svg b/examples/with-react/public/synapse-logo-onLight.svg new file mode 100644 index 0000000000..d3f3bdc12a --- /dev/null +++ b/examples/with-react/public/synapse-logo-onLight.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/examples/with-react/src/App.tsx b/examples/with-react/src/App.tsx index e61d7460dc..307f06175d 100644 --- a/examples/with-react/src/App.tsx +++ b/examples/with-react/src/App.tsx @@ -2,6 +2,8 @@ import { Bridge, USDC, USDT, DAI } from '@synapsecns/widget' import { StaticJsonRpcProvider } from '@ethersproject/providers' import { useEthereumWallet } from './hooks/useEthereumWallet' import { BaseSyntheticEvent, useState } from 'react' +import Header from './Header' +import Footer from './Footer' const tokens = [USDC, USDT, DAI] @@ -78,43 +80,29 @@ function App() { return ( <> -
- Synapse logo - - EVM Bridge - -
- -
+
+ +
-

Synapse Widget

- npm synapse-widget +

Install the Synapse Bridge

+ 
npm synapse-widget

Easily onboard new users by adding a custom instance of the Synapse Bridge to your React project

-
- -
+
+
+ +
- {/*   - -   -   - -   - */}
+
{/* */} -

Customize

-

Token list

- TODO: Describe how to customize the source or destination token lists -

Appearance

-

Dark mode

- To override the default light theme, set the bgColor property to dark. - 
customTheme = { bgColor: 'dark' }
-

Auto-palette

- Generate a palette based on your brand colors by setting bgColor to any - hex, rgb, or hsl color string. Hex values must contain 6 characters. - 
-          customTheme = {
-          
 bgColor: '#000A14'
-          
 bgColor: 'rgb(0 10 20)'
-          
 bgColor: 'hsl(210deg 100% 4%)'
-          

-          }
-
- {/*

Accent Color

- Add an accent color to text links and button hover states by setting accentColor to any hex, rgb, or hsl color string. - 
-        customTheme = {
-          
  accentColor: '#d557ff'
-          
  accentColor: 'rgb(213 87 255)'
-          
  accentColor: 'hsl(285deg 100% 67%)'
-          
}
-
*/} -

Overrides

- The following CSS variables can be added to your CustomTheme to override - the generated values. Any valid CSS color string can be used, including - var() aliases. - 
+        {/* 
 */}
+        

+
+          
⬇️  Install

+          

+            Install the Synapse Widget in your Next.js or React project
+          

+          
npm synapse-widget

+
+          
⚙️  Setup

+          
Supported tokens

+          

+            While the Synapse Widget supports hundreds of tokens and chains, for a streamlined user experience, you can render a separate instance of the bridge for each user need.
+          

+          

+            For example: separate BridgeIn and BridgeOut functions allow you to define the tokens you support sending and receiving.
+          

+          

+            Note: Whitelisting one side of a transaction limits the other side to compatible tokens automatically.
+          

+          
+{`// Bridge in
+tokenList = {
+  source: [], destination: [ token, token, token ]
+}
+
+// Bridge out
+tokenList = {
+  source: [ token, token, token ], destination: [],
+}`}
+          

+
+          

+            🎨  Customize
+          

+          

+            Dark mode
+          

+          

+            To override the default light theme, set  bgColor  to  'dark' .
+          

+          
customTheme = { bgColor: 'dark' }

+          

+            Auto-palette
+          

+          

+            Generate a palette based on your brand colors by setting bgColor to any hex, rgb, or hsl color string. Hex values must contain 6 characters.
+          

+          
+{`customTheme = {
+  bgColor: '#000A14'
+  bgColor: 'rgb(0 10 20)'
+  bgColor: 'hsl(210deg 100% 4%)'
+}`}
+          

+          {/* 
Accent Color

+          Add an accent color to text links and button hover states by setting accentColor to any hex, rgb, or hsl color string.
+          
           customTheme = {
-          
 --synapse-text-primary: 'white'
-          
 --synapse-text-secondary: '#cccccc'
-          

-          
 --synapse-bg-select: 'hsl(210deg 100% 50%)'
-          
 --synapse-bg-surface: 'hsl(210deg 100% 12.5%)'
-          
 --synapse-bg-root: 'inherit'
-          

-          
 --synapse-border: 'hsl(210deg 100% 25%)'
-          
 --synapse-border-hover: 'hsl(285deg 100% 33%)'
-          

-          
 --synapse-accent: 'var(--my-brand-color)'
-          

-          }
-        

-        {/* 
Typography — WIP, not reflected in code

-        

-          
--synapse-font-size
100%

-          
--synapse-font-family-display
system-ui

-          
--synapse-font-family-text
system-ui

-          
--synapse-font-weight-display
600 (semibold)

-          
--synapse-font-weight-text
500 (medium)

-        
 */}
+            
  accentColor: '#d557ff'
+            
  accentColor: 'rgb(213 87 255)'
+            
  accentColor: 'hsl(285deg 100% 67%)'
+            
}
+
*/} +

Overrides

+

+ The following CSS variables can be added to your CustomTheme to override the generated values. Any valid CSS color string can be used, including var() aliases. +

+ 
+{`customTheme = {
+  --synapse-text-primary: 'white'
+  --synapse-text-secondary: '#cccccc'
+
+  --synapse-bg-select: 'hsl(210deg 100% 50%)'
+  --synapse-bg-surface: 'hsl(210deg 100% 12.5%)'
+  --synapse-bg-root: 'inherit'
+
+  --synapse-border: 'hsl(210deg 100% 25%)'
+  --synapse-border-hover: 'hsl(285deg 100% 33%)'
+}`}
+
+ {/*

Typography — WIP, not reflected in code

+
+
--synapse-font-size
100%
+
--synapse-font-family-display
system-ui
+
--synapse-font-family-text
system-ui
+
--synapse-font-weight-display
600 (semibold)
+
--synapse-font-weight-text
500 (medium)
+
*/} +

+ 🙋  Support +

+

+ For help and feedback, reach out to our Support team in the Synapse Discord channel. +

+
- +