Removes unused attrs (#104)

synapsecns · Dec 28, 2023 · bdfce52 · bdfce52
1 parent 201c0cb
commit bdfce52
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 85 deletions.
diff --git a/examples/with-next/app/App.tsx b/examples/with-next/app/App.tsx
@@ -1,36 +1,9 @@
 import { Bridge, USDC, USDT, DAI, ETH, USDCe } from '@abtestingalpha/widget'
-import { StaticJsonRpcProvider } from '@ethersproject/providers'
 import { useEthereumWallet } from './hooks/useEthereumWallet'
 
 const tokens = [USDC, USDT, DAI, ETH, USDCe]
 
 function App() {
-  const ethersProvider = new StaticJsonRpcProvider(
-    'https://eth.llamarpc.com',
-    1
-  )
-  const aribtrumProvider = new StaticJsonRpcProvider(
-    'https://arbitrum.llamarpc.com',
-    42161
-  )
-  const polygonProvider = new StaticJsonRpcProvider(
-    'https://polygon.llamarpc.com',
-    137
-  )
-
-  const optimismProvider = new StaticJsonRpcProvider(
-    'https://mainnet.optimism.io',
-    10
-  )
-
-  const providers = [
-    aribtrumProvider,
-    ethersProvider,
-    polygonProvider,
-    optimismProvider,
-  ]
-  const chainIds = [42161, 1, 137, 10]
-
   const { web3Provider } = useEthereumWallet()
 
   if (!web3Provider) {
@@ -41,9 +14,7 @@ function App() {
     <main className="flex items-center justify-center h-screen">
       <div className="w-[33%]">
         <Bridge
-          chainIds={chainIds}
           web3Provider={web3Provider}
-          networkProviders={providers}
           tokens={tokens}
           theme="light"
           container={true}

diff --git a/examples/with-react/src/App.tsx b/examples/with-react/src/App.tsx
@@ -1,5 +1,4 @@
 import { Bridge, USDC, USDT, DAI, ETH } from '@abtestingalpha/widget'
-import { StaticJsonRpcProvider } from '@ethersproject/providers'
 import { useEthereumWallet } from './hooks/useEthereumWallet'
 import { BaseSyntheticEvent, SyntheticEvent, useState } from 'react'
 import Header from './Header'
@@ -9,35 +8,6 @@ import { Install, Developer, Support } from './icons'
 const tokens = [USDC, USDT, DAI, ETH]
 
 function App() {
-  const ethersProvider = new StaticJsonRpcProvider(
-    'https://eth.llamarpc.com',
-    1
-  )
-  const aribtrumProvider = new StaticJsonRpcProvider(
-    'https://arbitrum.llamarpc.com',
-    42161
-  )
-  const polygonProvider = new StaticJsonRpcProvider(
-    'https://polygon.llamarpc.com',
-    137
-  )
-
-  const optimismProvider = new StaticJsonRpcProvider(
-    'https://mainnet.optimism.io',
-    10
-  )
-
-  // const providers = [ethersProvider, aribtrumProvider]
-  // const chainIds = [1, 42161]
-
-  const providers = [
-    aribtrumProvider,
-    ethersProvider,
-    polygonProvider,
-    optimismProvider,
-  ]
-  const chainIds = [42161, 1, 137, 10]
-
   const [customTheme, setCustomTheme] = useState({})
   const [container, setContainer] = useState(true)
 
@@ -110,35 +80,48 @@ function App() {
           <div id="example-container">
             <div
               id="bridge-container"
-              style={{ display: bridgeContainerDisplayProperty, }}
+              style={{ display: bridgeContainerDisplayProperty }}
             >
               <Bridge
-                chainIds={chainIds}
                 web3Provider={web3Provider}
-                networkProviders={providers}
                 tokens={tokens}
                 customTheme={customTheme}
                 container={container}
                 toChainId={137}
               />
             </div>
-            <div style={{ display: 'flex', justifyContent: 'space-between'}}>
-              <div style={{ display: 'flex', gap: '1rem'}}>
-                <input id="color-picker" type="color" onInput={createCustomTheme} />
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <div style={{ display: 'flex', gap: '1rem' }}>
+                <input
+                  id="color-picker"
+                  type="color"
+                  onInput={createCustomTheme}
+                />
                 <div className="flex items-center gap-1">
-                  <label>Container</label> <input type="checkbox" checked={container} onChange={toggleContainer}/>
+                  <label>Container</label>{' '}
+                  <input
+                    type="checkbox"
+                    checked={container}
+                    onChange={toggleContainer}
+                  />
                 </div>
               </div>
               <span className="desktop-only">Drag to resize</span>
             </div>
           </div>
         </header>
         <article>
-          <h2><Install />Install</h2>
+          <h2>
+            <Install />
+            Install
+          </h2>
           <p>Install the Synapse Widget in your Next.js or React project</p>
           <pre style={{ fontSize: '100%' }}>npm synapse-widget</pre>
 
-          <h2><Developer />Setup</h2>
+          <h2>
+            <Developer />
+            Setup
+          </h2>
           <h3>Supported tokens</h3>
           <p>
             While the Synapse Widget supports{' '}
@@ -176,7 +159,8 @@ tokenList = {
           <h3>Appearance</h3>
           <h4>Dark mode</h4>
           <p>
-            To override the default light theme, set <code>bgColor</code> to <code>'dark'</code>.
+            To override the default light theme, set <code>bgColor</code> to{' '}
+            <code>'dark'</code>.
           </p>
           <pre>customTheme = &#123; bgColor: 'dark' &#125;</pre>
           <h4>Auto-palette</h4>
@@ -220,7 +204,8 @@ tokenList = {
           </pre>
           <h4>Object Overrides</h4>
           <p>
-            Select and button elements can be specifically overriddden to introduce brand colors or custom styles.
+            Select and button elements can be specifically overriddden to
+            introduce brand colors or custom styles.
           </p>
           <pre>
             {`customTheme = {
@@ -241,7 +226,10 @@ tokenList = {
             <dt>--synapse-font-weight-display</dt><dd>600 (semibold)</dd>
             <dt>--synapse-font-weight-text</dt><dd>500 (medium)</dd>
           </dl> */}
-          <h2><Support />Support</h2>
+          <h2>
+            <Support />
+            Support
+          </h2>
           <p>
             For help and feedback, reach out to our Support team in the{' '}
             <a href="#" target="_blank" rel="noreferrer">

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@abtestingalpha/widget",
   "description": "Test Widget",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "license": "ISC",
   "type": "module",
   "main": "dist/cjs/index.js",

diff --git a/src/components/Widget.tsx b/src/components/Widget.tsx
@@ -65,8 +65,6 @@ import { CHAINS_BY_ID } from '@/constants/chains'
 import { useSynapseContext } from '@/providers/SynapseProvider'
 
 export const Widget = ({
-  chainIds,
-  networkProviders,
   theme,
   customTheme,
   container,

diff --git a/src/index.tsx b/src/index.tsx
@@ -16,9 +16,7 @@ import { CHAINS, CHAINS_ARRAY } from './constants/chains'
 // TODO: Can we clarify browserProvider vs. web3Provider vs. web3Context
 
 export const Bridge = ({
-  chainIds,
   web3Provider,
-  networkProviders,
   theme,
   customTheme,
   container,
@@ -31,8 +29,6 @@ export const Bridge = ({
         <Provider store={store}>
           <TransactionsUpdater />
           <Widget
-            chainIds={chainIds}
-            networkProviders={networkProviders}
             theme={theme}
             customTheme={customTheme}
             container={container}

diff --git a/src/types/index.d.ts b/src/types/index.d.ts
@@ -25,16 +25,9 @@ export interface CustomThemeVariables {
 }
 
 export interface WidgetProps {
-  /** Supported ChainIds to Bridge defined by Consumer */
-  chainIds: number[]
-
   /** Consumer Web3 Provider */
   web3Provider?: JsonRpcApiProvider | BrowserProvider
 
-  /** Respective Network Providers */
-  // TO DO: Pass proper ethers type
-  networkProviders?: any[]
-
   /** Selected Day/Night Theme */
   theme?: 'light' | 'dark'