✨ feat: finish gasless examples

Author: insulineru

package.json

@@ -1,8 +1,8 @@
 {
   "name": "api-example",
-  "private": true,
-  "version": "0.0.0",
   "type": "module",
+  "version": "0.0.0",
+  "private": true,
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

src/App.tsx

@@ -3,10 +3,14 @@ import { BrowserProvider } from 'ethers'
 import type { ChangeEvent } from 'react'
 import { useState } from 'react'
 
+import './patch'
+
 import './App.css'
 
-import { checkNeedAllowance, getAllowances, getRoute, permit, setAllowance } from './flow'
-import { isValidEthereumAddress } from './helpers'
+import { checkNeedAllowance, gaslessTransfer, getAllowances, getRoute, permit, setAllowance } from './flow'
+import { gaslessExecute } from './flow/gaslessExecute'
+import { checkTransferRoute, isValidEthereumAddress } from './helpers'
+import { STEPS } from './constants'
 
 function App() {
   const [provider, setProvider] = useState<BrowserProvider | null>(null)
@@ -47,15 +51,17 @@ function App() {
       setStep(3)
       const isNeedAllowance = await checkNeedAllowance(route, allowances)
 
+      setStep(4)
       await signer.provider.send('wallet_switchEthereumChain', [
         {
           chainId: `0x${route.fromToken.chainId.toString(16)}`
         }
       ])
 
-      let allowanceResult: Signature | null = null
+      let allowanceResult: Signature | undefined
 
       if (isNeedAllowance) {
+        setStep(5)
         try {
           allowanceResult = await permit(route, allowances, signer)
         } catch (e) {
@@ -65,8 +71,18 @@ function App() {
         }
       }
 
-      // eslint-disable-next-line no-debugger, no-restricted-syntax
-      debugger
+      setStep(6)
+      const isTransferRoute = checkTransferRoute(route)
+
+      let resultHash: string
+      if (isTransferRoute) {
+        resultHash = await gaslessTransfer(route, signer, allowances, allowanceResult)
+      } else {
+        resultHash = await gaslessExecute(route, signer, allowances, allowanceResult)
+      }
+
+      // eslint-disable-next-line no-console
+      console.log('Transaction hash:', resultHash)
 
       // Finish!
       setStep(0)
@@ -112,13 +128,10 @@ function App() {
             Send
           </button>
 
-          {/* Progress */}
           {step > 0 && (
             <div className="progress">
               <p>
-                {step === 1 && 'Get allowances from backend...'}
-                {step === 2 && 'Fetch route...'}
-                {step === 3 && 'Allowance check...'}
+                {STEPS[step]}
               </p>
             </div>
           )}

src/constants.ts

@@ -1,6 +1,16 @@
 import type { TPermitToken, TPermitTokens } from './types/permit'
 
-const API_URL = 'https://api.staging.leto.xyz/gia/'
+const API_URL = 'https://gia.leto.xyz/'
+
+const STEPS = [
+  'Initial',
+  'Get allowances from backend...',
+  'Fetch route...',
+  'Allowance check...',
+  'Prepare transaction...',
+  'Set allowance...',
+  'Sign transaction...'
+]
 
 const ERC2612_TOKENS: TPermitToken[] = [
   {
@@ -71,4 +81,26 @@ const PermitMessage = [
   { name: 'deadline', type: 'uint256' }
 ]
 
-export { API_URL, SUPPORTED_TOKENS, MAX_UINT256, EIP712PermitDomains, DaiPermitMessage, PermitMessage }
+const TypesTransfer = {
+  TransferCall: [
+    { name: 'token', type: 'address' },
+    { name: 'to', type: 'address' },
+    { name: 'amount', type: 'uint256' },
+    { name: 'fee', type: 'uint256' },
+    { name: 'nonce', type: 'uint256' }
+  ]
+}
+
+const TypesExecute = {
+  ExecutionCall: [
+    { name: 'token', type: 'address' },
+    { name: 'amount', type: 'uint256' },
+    { name: 'quoter', type: 'address' },
+    { name: 'quoteData', type: 'bytes' },
+    { name: 'fee', type: 'uint256' },
+    { name: 'executionData', type: 'bytes' },
+    { name: 'value', type: 'uint256' }
+  ]
+}
+
+export { API_URL, STEPS, SUPPORTED_TOKENS, MAX_UINT256, EIP712PermitDomains, DaiPermitMessage, PermitMessage, TypesTransfer, TypesExecute }

src/flow/checkNeedAllowance.ts

@@ -1,14 +1,14 @@
+import { checkTransferRoute } from '../helpers'
 import type { TAllowance, TGiaContractName } from '../types/allowance'
 import type { TGiaRoute } from '../types/route'
 
 function getAllowance(route: TGiaRoute, allowances: TAllowance[]) {
-  const fromAddress = route.fromToken.address
-  const toAddress = route.toToken.address
+  const { address, chainId } = route.fromToken
 
-  const contractName: TGiaContractName = fromAddress === toAddress ? 'ViaGaslessRelay' : 'ViaRouter'
+  const contractName: TGiaContractName = checkTransferRoute(route) ? 'ViaGaslessRelay' : 'ViaRouter'
 
   return allowances.find(
-    allowance => allowance.contractName === contractName && allowance.tokenAddress === fromAddress && allowance.chainId === route.fromToken.chainId
+    a => a.contractName === contractName && a.tokenAddress === address && a.chainId === chainId
   )
 }
 

src/flow/gasless.ts

@@ -0,0 +1,23 @@
+import type { TypedDataDomain } from 'ethers'
+import { zeroPadValue } from 'ethers'
+import type { TAllowance } from '../types/allowance'
+import type { TGiaRoute } from '../types/route'
+
+function getGaslessContractAddress(chainId: number, allowances: TAllowance[]) {
+  return allowances.find(allowance => allowance.chainId === chainId && allowance.contractName === 'ViaGaslessRelay')
+    ?.contractAddress as `0x${string}`
+}
+
+function getGaslessRelay(route: TGiaRoute, allowances: TAllowance[]): TypedDataDomain {
+  const { chainId } = route.fromToken
+
+  const verifyingContract = getGaslessContractAddress(chainId, allowances)
+  return {
+    name: 'Transfer Money',
+    version: '1.0.0',
+    chainId: zeroPadValue(`0x${chainId.toString(16).padStart(32, '0')}`, 32),
+    verifyingContract
+  }
+}
+
+export { getGaslessRelay }

src/flow/gaslessExecute.ts

@@ -0,0 +1,50 @@
+import type { JsonRpcSigner, Signature } from 'ethers'
+import { API_URL, TypesExecute } from '../constants'
+import type { TAllowance } from '../types/allowance'
+import type { TGiaRoute } from '../types/route'
+import { getGaslessRelay } from './gasless'
+
+async function gaslessExecute(route: TGiaRoute, signer: JsonRpcSigner, allowances: TAllowance[], permit?: Signature) {
+  const { recipientAddress, senderAddress, fromToken, gasless } = route
+  const { amount, address } = fromToken
+
+  const { quoteCallData, executeCallData, executeValue, quoterAddress } = gasless.executeExtra
+
+  const gaslessRelay = getGaslessRelay(route, allowances)
+
+  const fee = route.gasless.fee.withBonus || '0' // this is a string
+
+  const signConfig = {
+    token: address,
+    amount,
+    quoter: quoterAddress,
+    quoteData: quoteCallData === '0x' ? quoteCallData : `0x${quoteCallData}`,
+    fee,
+    executionData: `0x${executeCallData}`,
+    value: executeValue || '0'
+  }
+
+  const signedMessage = await signer.signTypedData(gaslessRelay, TypesExecute, signConfig)
+  const urlParams = new URLSearchParams({
+    routeUUID: route.uuid,
+    signedMessage,
+    recipientAddress,
+    senderAddress
+  })
+
+  if (permit) {
+    urlParams.append('permitR', permit.r.slice(2))
+    urlParams.append('permitS', permit.s.slice(2))
+    urlParams.append('permitV', permit.v.toString())
+  }
+
+  const url = `${API_URL}v1/leto/gasless-execute?${urlParams.toString()}`
+
+  const res = await fetch(url, {
+    method: 'GET'
+  })
+
+  return res.json()
+}
+
+export { gaslessExecute }

src/flow/gaslessTransfer.ts

@@ -0,0 +1,54 @@
+import type { JsonRpcSigner, Signature } from 'ethers'
+import { randomBytes } from 'ethers'
+import { API_URL, TypesTransfer } from '../constants'
+import type { TAllowance } from '../types/allowance'
+import type { TGiaRoute } from '../types/route'
+import { getGaslessRelay } from './gasless'
+
+async function gaslessTransfer(route: TGiaRoute, signer: JsonRpcSigner, allowances: TAllowance[], permit?: Signature) {
+  const { recipientAddress, senderAddress } = route
+
+  const gaslessRelay = getGaslessRelay(route, allowances)
+
+  const nonce = new DataView(randomBytes(32).buffer).getBigUint64(0, true)
+  const gaslessFeeAmount = route.gasless.fee.withBonus || '0' // this is a string
+
+  const config = {
+    token: route.fromToken.address,
+    to: route.recipientAddress,
+    amount: route.fromToken.amount.toString(),
+    fee: gaslessFeeAmount,
+    nonce: nonce.toString()
+  }
+
+  const signedMessage = await signer.signTypedData(
+    gaslessRelay,
+    TypesTransfer,
+    config
+  )
+
+  const params: any = {
+    nonce: nonce.toString(),
+    routeUUID: route.uuid,
+    signedMessage,
+    recipientAddress,
+    senderAddress
+  }
+
+  if (permit) {
+    params.permitR = permit.r.slice(2)
+    params.permitS = permit.s.slice(2)
+    params.permitV = permit.v.toString()
+  }
+
+  const url = `${API_URL}v1/leto/gasless-transfer`
+
+  const res = await fetch(url, {
+    method: 'POST',
+    body: JSON.stringify(params)
+  })
+
+  return res.json()
+}
+
+export { gaslessTransfer }

src/flow/index.ts

@@ -1,4 +1,5 @@
 export * from './checkNeedAllowance'
+export * from './gaslessTransfer'
 export * from './getAllowances'
 export * from './getRoute'
 export * from './permit'

src/flow/setAllowance.ts

@@ -2,7 +2,7 @@ import type { JsonRpcSigner } from 'ethers'
 import type { TGiaRoute } from '../types/route'
 
 async function setAllowance(route: TGiaRoute, signer: JsonRpcSigner) {
-
+  const transaction = await signer.sendTransaction(route.approveTx)
 }
 
 export { setAllowance }

src/helpers.ts

@@ -1,5 +1,13 @@
+import type { TGiaRoute } from './types/route'
+
 function isValidEthereumAddress(address: string) {
   return /^0x[a-fA-F0-9]{40}$/.test(address)
 }
 
-export { isValidEthereumAddress }
+function checkTransferRoute(route: TGiaRoute) {
+  const { fromToken, toToken } = route
+
+  return fromToken.address === toToken.address && fromToken.chainId === toToken.chainId
+}
+
+export { isValidEthereumAddress, checkTransferRoute }

src/patch.ts

@@ -0,0 +1,6 @@
+/* eslint-disable no-extend-native */
+
+// @ts-expect-error 🚧 ETHERS 6.1.0 IS BROKEN. THIS IS A WORKAROUND
+BigInt.prototype.toJSON = function () {
+  return this.toString()
+}

src/types/route.ts

@@ -27,7 +27,7 @@ type TToken = {
 }
 
 type TGiaRoute = {
-  approveTx: TSimpleTxData | null
+  approveTx: TSimpleTxData
   estimateTimeSeconds: number
   fromToken: TToken
   gasless: {