Fix type issues with fee objects between actions

reservoirprotocol · May 21, 2024 · 72f8734 · 72f8734
2 parents f687ce9 + 8389cae
commit 72f8734
Show file tree

Hide file tree

Showing 33 changed files with 708 additions and 441 deletions.
diff --git a/demo/package.json b/demo/package.json
@@ -9,7 +9,8 @@
   },
   "prettier": {
     "semi": false,
-    "singleQuote": true
+    "singleQuote": true,
+    "trailingComma": "none"
   },
   "dependencies": {
     "@radix-ui/colors": "^0.1.8",

diff --git a/demo/pages/_app.tsx b/demo/pages/_app.tsx
@@ -6,7 +6,13 @@ import { WagmiProvider } from 'wagmi'
 import '../fonts.css'
 import '@rainbow-me/rainbowkit/styles.css'
 import '../fonts.css'
-import { createClient, LogLevel, configureDynamicChains, MAINNET_RELAY_API, TESTNET_RELAY_API } from '@reservoir0x/relay-sdk'
+import {
+  createClient,
+  LogLevel,
+  configureDynamicChains,
+  MAINNET_RELAY_API,
+  TESTNET_RELAY_API
+} from '@reservoir0x/relay-sdk'
 import { RainbowKitChain } from '@rainbow-me/rainbowkit/dist/components/RainbowKitProvider/RainbowKitChainContext'
 import { Chain, mainnet } from 'wagmi/chains'
 
@@ -20,27 +26,35 @@ type AppWrapperProps = {
 
 const relayClient = createClient({
   baseApiUrl: MAINNET_RELAY_API,
-  source: "relay-demo",
-  logLevel: LogLevel.Verbose,
+  source: 'relay-demo',
+  logLevel: LogLevel.Verbose
 })
 
 const queryClient = new QueryClient()
 
 const AppWrapper: FC<AppWrapperProps> = ({ children }) => {
-  const [wagmiConfig, setWagmiConfig] = useState<ReturnType<typeof createWagmiConfig>['wagmiConfig'] | undefined>();
-  const [chains, setChains] = useState<RainbowKitChain[]>([]);
+  const [wagmiConfig, setWagmiConfig] = useState<
+    ReturnType<typeof createWagmiConfig>['wagmiConfig'] | undefined
+  >()
+  const [chains, setChains] = useState<RainbowKitChain[]>([])
 
   useEffect(() => {
-    configureDynamicChains().then((newChains) => {
-      const {wagmiConfig, chains} = createWagmiConfig(newChains.map(({viemChain}) => viemChain as Chain))
-      setWagmiConfig(wagmiConfig)
-      setChains(chains)
-    }).catch((e) => {
-      console.error(e)
-      const {wagmiConfig, chains} = createWagmiConfig(relayClient.chains.map(({viemChain}) => viemChain as Chain))
-      setWagmiConfig(wagmiConfig)
-      setChains(chains)
-    })
+    configureDynamicChains()
+      .then((newChains) => {
+        const { wagmiConfig, chains } = createWagmiConfig(
+          newChains.map(({ viemChain }) => viemChain as Chain)
+        )
+        setWagmiConfig(wagmiConfig)
+        setChains(chains)
+      })
+      .catch((e) => {
+        console.error(e)
+        const { wagmiConfig, chains } = createWagmiConfig(
+          relayClient.chains.map(({ viemChain }) => viemChain as Chain)
+        )
+        setWagmiConfig(wagmiConfig)
+        setChains(chains)
+      })
   }, [])
 
   if (!wagmiConfig) {
@@ -66,12 +80,15 @@ function MyApp({ Component, pageProps }: AppProps) {
 }
 
 function createWagmiConfig(dynamicChains: Chain[]) {
-  const chains = (dynamicChains.length === 0 ? [mainnet] : dynamicChains) as [Chain, ...Chain[]]
+  const chains = (dynamicChains.length === 0 ? [mainnet] : dynamicChains) as [
+    Chain,
+    ...Chain[]
+  ]
 
   const wagmiConfig = getDefaultConfig({
     appName: 'Relay SDK Demo',
     projectId: WALLET_CONNECT_PROJECT_ID,
-    chains: chains,
+    chains: chains
   })
 
   return {

diff --git a/demo/pages/_document.tsx b/demo/pages/_document.tsx
@@ -3,7 +3,7 @@ import Document, {
   Head,
   Main,
   NextScript,
-  DocumentContext,
+  DocumentContext
 } from 'next/document'
 
 class MyDocument extends Document {

diff --git a/demo/pages/index.tsx b/demo/pages/index.tsx
@@ -11,35 +11,21 @@ const Index: NextPage = () => {
         gap: 12,
         padding: 24,
         flexDirection: 'column',
-        alignItems: 'flex-start',
+        alignItems: 'flex-start'
       }}
     >
       <h2>SDK Actions</h2>
       <nav style={{ display: 'flex', gap: 15 }}>
-        <Link href="/sdk/actions/call">
-          Call
-        </Link>
-        <Link href="/sdk/actions/bridge">
-          Bridge
-        </Link>
-        <Link href="/sdk/actions/swap">
-          Swap
-        </Link>
+        <Link href="/sdk/actions/call">Call</Link>
+        <Link href="/sdk/actions/bridge">Bridge</Link>
+        <Link href="/sdk/actions/swap">Swap</Link>
       </nav>
       <h2>SDK Methods</h2>
       <nav style={{ display: 'flex', gap: 15 }}>
-        <Link href="/sdk/methods/getSolverCapacity">
-          getSolverCapacity
-        </Link>
-        <Link href="/sdk/methods/getCallQuote">
-          getCallQuote
-        </Link>
-        <Link href="/sdk/methods/getBridgeQuote">
-          getBridgeQuote
-        </Link>
-        <Link href="/sdk/methods/getSwapQuote">
-          getSwapQuote
-        </Link>
+        <Link href="/sdk/methods/getSolverCapacity">getSolverCapacity</Link>
+        <Link href="/sdk/methods/getCallQuote">getCallQuote</Link>
+        <Link href="/sdk/methods/getBridgeQuote">getBridgeQuote</Link>
+        <Link href="/sdk/methods/getSwapQuote">getSwapQuote</Link>
       </nav>
     </div>
   )

diff --git a/demo/pages/sdk/actions/bridge.tsx b/demo/pages/sdk/actions/bridge.tsx
@@ -8,14 +8,15 @@ import { Address, isAddress } from 'viem'
 
 const BridgeActionPage: NextPage = () => {
   const [recipient, setRecipient] = useState<string | undefined>()
-  const [amount, setAmount] = useState<string>("")
-  const [currency, setCurrency] =useState<BridgeActionParameters['currency']>('eth')
+  const [amount, setAmount] = useState<string>('')
+  const [currency, setCurrency] =
+    useState<BridgeActionParameters['currency']>('eth')
   const [usePermit, setUsePermit] = useState(false)
   const [canonical, setCanonical] = useState(false)
   const [useExactInput, setUseExactInput] = useState(false)
   const [toChainId, setToChainId] = useState<number>(zora.id)
   const [fromChainId, setFromChainId] = useState<number>(base.id)
-  const [depositGasLimit, setDepositGasLimit] = useState("")
+  const [depositGasLimit, setDepositGasLimit] = useState('')
   const { data: wallet } = useWalletClient()
 
   return (
@@ -28,47 +29,62 @@ const BridgeActionPage: NextPage = () => {
         padding: 24,
         flexDirection: 'column',
         alignItems: 'center',
-        paddingTop: 150,
+        paddingTop: 150
       }}
     >
       <ConnectButton />
       <div>
         <label>To Chain Id: </label>
-        <input type="number" placeholder='Which chain to bridge to?' value={toChainId} onChange={(e) => setToChainId(Number(e.target.value))} />
+        <input
+          type="number"
+          placeholder="Which chain to bridge to?"
+          value={toChainId}
+          onChange={(e) => setToChainId(Number(e.target.value))}
+        />
       </div>
       <div>
         <label>From Chain Id: </label>
-        <input type="number" placeholder='Which chain to deposit on?' value={fromChainId} onChange={(e) => setFromChainId(Number(e.target.value))} />
+        <input
+          type="number"
+          placeholder="Which chain to deposit on?"
+          value={fromChainId}
+          onChange={(e) => setFromChainId(Number(e.target.value))}
+        />
       </div>
       <div>
         <label>Amount: </label>
-        <input type="number" placeholder='How much to bridge?' value={amount} onChange={(e) => setAmount(e.target.value)} />
+        <input
+          type="number"
+          placeholder="How much to bridge?"
+          value={amount}
+          onChange={(e) => setAmount(e.target.value)}
+        />
       </div>
       <div>
-      <div>
-        <label>Currency: </label>
         <div>
-          <input 
-            type="radio" 
-            value="eth" 
-            name="currency" 
-            checked={currency === "eth"} 
-            onChange={(e) => setCurrency(e.target.value as 'eth')} 
-          />
-          <label>ETH</label>
-        </div>
-        <div>
-          <input 
-            type="radio" 
-            value="usdc" 
-            name="currency" 
-            checked={currency === "usdc"} 
-            onChange={(e) => setCurrency(e.target.value as 'usdc')} 
-          />
-          <label>USDC</label>
+          <label>Currency: </label>
+          <div>
+            <input
+              type="radio"
+              value="eth"
+              name="currency"
+              checked={currency === 'eth'}
+              onChange={(e) => setCurrency(e.target.value as 'eth')}
+            />
+            <label>ETH</label>
+          </div>
+          <div>
+            <input
+              type="radio"
+              value="usdc"
+              name="currency"
+              checked={currency === 'usdc'}
+              onChange={(e) => setCurrency(e.target.value as 'usdc')}
+            />
+            <label>USDC</label>
+          </div>
         </div>
       </div>
-      </div>
 
       <div>
         <label>Use Permit: </label>
@@ -105,13 +121,21 @@ const BridgeActionPage: NextPage = () => {
 
       <div>
         <label>Recipient: </label>
-        <input placeholder='Who is the receiver?' value={recipient} onChange={(e) => setRecipient(e.target.value)} />
+        <input
+          placeholder="Who is the receiver?"
+          value={recipient}
+          onChange={(e) => setRecipient(e.target.value)}
+        />
       </div>
       <div>
         <label>Deposit Gas Limit: </label>
-        <input type="number" value={depositGasLimit} onChange={(e) => setDepositGasLimit(e.target.value)} />
+        <input
+          type="number"
+          value={depositGasLimit}
+          onChange={(e) => setDepositGasLimit(e.target.value)}
+        />
       </div>
-      <button 
+      <button
         style={{
           marginTop: 50,
           padding: 24,
@@ -121,26 +145,26 @@ const BridgeActionPage: NextPage = () => {
           border: '1px solid #ffffff',
           borderRadius: 8,
           fontWeight: 800,
-          cursor: 'pointer',
-        }} 
-        onClick={async () => {
+          cursor: 'pointer'
+        }}
+        onClick={() => {
           if (!wallet) {
-            throw "Please connect to execute transactions"
+            throw 'Please connect to execute transactions'
           }
           if (recipient && !isAddress(recipient)) {
-            throw "Recipient must be an address"
+            throw 'Recipient must be an address'
           }
           if (!amount) {
-            throw "Must include an amount for bridging"
+            throw 'Must include an amount for bridging'
           }
 
-          var x = await getClient()?.actions.bridge({
+          getClient()?.actions.bridge({
             chainId: fromChainId,
             wallet,
             toChainId,
             amount,
             currency,
-            recipient: recipient ? recipient as Address : undefined,
+            recipient: recipient ? (recipient as Address) : undefined,
             depositGasLimit,
             options: {
               usePermit: usePermit,
@@ -151,12 +175,11 @@ const BridgeActionPage: NextPage = () => {
               console.log(data)
             }
           })
-          x.fees?.app?.includes("")
         }}>
         Execute Bridge
       </button>
     </div>
   )
 }
 
-export default BridgeActionPage
+export default BridgeActionPage