Merge pull request #10 from turbo-eth/feat/add-gelato-integration

Feat: Add gelato integration

package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-turbo-eth",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Create web3 apps in turbo mode.",
   "author": "Vitor @marthendalnunes",
   "license": "MIT",

src/config/integrations.ts

@@ -229,6 +229,21 @@ export const integrationOptions: Integrations = {
       },
     },
   },
+  gelato: {
+    name: 'Gelato',
+    pageDependencies: [
+      {
+        dependencyPath: dataConfigPath,
+        type: 'snippet',
+        regexList: [/\n\s*gelato: \{\s*name: 'Gelato',[\s\S]*?imgDark: '\/integrations\/gelato-light.svg',\s*\},/g],
+      },
+      {
+        dependencyPath: indexPagePath,
+        type: 'snippet',
+        regexList: [/\n\s*{\s*title: turboIntegrations\.gelato\.name,[\s\S]*?<\/IsDarkTheme>\s*<\/div>\s*\),\s*},/g],
+      },
+    ],
+  },
   starter: {
     name: 'Starter',
     pageDependencies: [

src/types.ts

@@ -71,6 +71,7 @@ export type AvailableIntegrations =
   | 'session-keys'
   | 'connext'
   | 'livepeer'
+  | 'gelato'
   | 'starter'
 
 export type Integrations = Record<AvailableIntegrations, Integration>

template/base/.eslintignore

@@ -1,3 +1,5 @@
 **/generated/**-wagmi.ts
 **/generated/blockchain.ts
-**/components/shared/table/**
+**/components/shared/table/**
+**/generated
+.next/**

template/base/.prettierignore

@@ -1,5 +1,6 @@
 **/generated/**-wagmi.ts
 **/generated/blockchain.ts
+**/generated/
 
 .next/**
 .husky/**

template/base/app/(general)/page.tsx

@@ -326,10 +326,25 @@ const features = [
     demo: (
       <div className="flex items-center justify-center space-x-20">
         <IsLightTheme>
-          <Image alt="PoolTogether logo" height={100} src={turboIntegrations.connext.imgDark} width={100} />
+          <Image alt={`${turboIntegrations.connext.name} logo`} height={100} src={turboIntegrations.connext.imgDark} width={100} />
         </IsLightTheme>
         <IsDarkTheme>
-          <Image alt="PoolTogether logo" height={100} src={turboIntegrations.connext.imgLight} width={100} />
+          <Image alt={`${turboIntegrations.connext.name} logo`} height={100} src={turboIntegrations.connext.imgLight} width={100} />
+        </IsDarkTheme>
+      </div>
+    ),
+  },
+  {
+    title: turboIntegrations.gelato.name,
+    description: turboIntegrations.gelato.description,
+    href: turboIntegrations.gelato.href,
+    demo: (
+      <div className="flex items-center justify-center space-x-20">
+        <IsLightTheme>
+          <Image alt={`${turboIntegrations.gelato.name} logo`} height={100} src={turboIntegrations.gelato.imgDark} width={100} />
+        </IsLightTheme>
+        <IsDarkTheme>
+          <Image alt={`${turboIntegrations.gelato.name} logo`} height={100} src={turboIntegrations.gelato.imgLight} width={100} />
         </IsDarkTheme>
       </div>
     ),

template/base/components/layout/navigation-menu-general.tsx

@@ -67,8 +67,8 @@ export function NavigationMenuGeneral() {
         </NavigationMenuItem>
         <NavigationMenuItem>
           <NavigationMenuTrigger>Integrations</NavigationMenuTrigger>
-          <NavigationMenuContent className="overflow-y-scroll xl:max-h-[690px] 2xl:overflow-y-hidden">
-            <ul className="grid w-[600px] gap-3 p-4 md:grid-cols-2">
+          <NavigationMenuContent className="overflow-y-scroll xl:max-h-[690px]">
+            <ul className="grid w-[750px] gap-3 p-4 md:grid-cols-3">
               {Object.values(turboIntegrations).map((component) => (
                 <ListItem key={component.name} title={component.name} {...component}>
                   {component.description}

template/base/data/turbo-integrations.ts

@@ -88,6 +88,14 @@ export const turboIntegrations = {
     imgLight: '/integrations/connext.png',
     imgDark: '/integrations/connext.png',
   },
+  gelato: {
+    name: 'Gelato',
+    href: '/integration/gelato',
+    url: 'https://docs.gelato.network/',
+    description: 'Enabling developers to create augmented smart contracts that are automated, gasless & off-chain aware',
+    imgLight: '/integrations/gelato-light.svg',
+    imgDark: '/integrations/gelato-light.svg',
+  },
   starter: {
     name: 'Starter Template',
     href: '/integration/starter',

template/base/lib/hooks/web3/use-ethers-provider.ts

@@ -0,0 +1,26 @@
+import { useMemo } from 'react'
+
+import { providers } from 'ethers'
+import { type HttpTransport } from 'viem'
+import { type PublicClient, usePublicClient } from 'wagmi'
+
+export function publicClientToProvider(publicClient: PublicClient) {
+  const { chain, transport } = publicClient
+  const network = {
+    chainId: chain.id,
+    name: chain.name,
+    ensAddress: chain.contracts?.ensRegistry?.address,
+  }
+  if (transport.type === 'fallback')
+    return new providers.FallbackProvider(
+      (transport.transports as ReturnType<HttpTransport>[]).map(({ value }) => new providers.JsonRpcProvider(value?.url, network))
+    )
+
+  return new providers.JsonRpcProvider(transport.url as string, network)
+}
+
+/** Hook to convert a viem Public Client to an ethers.js Provider. */
+export function useEthersProvider({ chainId }: { chainId?: number } = {}) {
+  const publicClient = usePublicClient({ chainId })
+  return useMemo(() => publicClientToProvider(publicClient), [publicClient])
+}

template/base/lib/hooks/web3/use-ethers-signer.ts

@@ -0,0 +1,22 @@
+import { useMemo } from 'react'
+
+import { providers } from 'ethers'
+import { type WalletClient, useWalletClient } from 'wagmi'
+
+export function walletClientToSigner(walletClient: WalletClient) {
+  const { account, chain, transport } = walletClient
+  const network = {
+    chainId: chain.id,
+    name: chain.name,
+    ensAddress: chain.contracts?.ensRegistry?.address,
+  }
+  const provider = new providers.Web3Provider(transport, network)
+  const signer = provider.getSigner(account.address)
+  return signer
+}
+
+/** Hook to convert a viem Wallet Client to an ethers.js Signer. */
+export function useEthersSigner({ chainId }: { chainId?: number } = {}) {
+  const { data: walletClient } = useWalletClient({ chainId })
+  return useMemo(() => (walletClient ? walletClientToSigner(walletClient) : undefined), [walletClient])
+}

template/base/package.json

@@ -40,6 +40,8 @@
     "@hookform/resolvers": "^3.1.1",
     "@connext/nxtp-utils": "^2.0.3",
     "@connext/sdk": "2.0.4-alpha.2",
+    "@gelatonetwork/automate-sdk": "^2.14.0",
+    "@graphql-typed-document-node/core": "^3.2.0",
     "@lit-protocol/lit-node-client": "2.1.161",
     "@livepeer/react": "^2.6.0",
     "@prisma/client": "^4.8.1",
@@ -75,6 +77,7 @@
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.9",
     "@tanstack/react-query": "^4.3.9",
+    "abitype": "^0.9.6",
     "axios": "^1.2.2",
     "class-variance-authority": "^0.4.0",
     "clsx": "^1.2.1",
@@ -83,6 +86,7 @@
     "ethers": "^5.6.9",
     "eventsource-parser": "^1.0.0",
     "framer-motion": "^8.4.3",
+    "graphql-request": "^6.1.0",
     "iron-session": "^6.3.1",
     "jotai": "^1.13.0",
     "luxon": "^3.2.1",
@@ -111,6 +115,9 @@
     "@babel/core": "7.18.5",
     "@commitlint/cli": "^17.3.0",
     "@commitlint/config-conventional": "^17.3.0",
+    "@graphprotocol/client-cli": "^3.0.0",
+    "@graphql-codegen/cli": "^5.0.0",
+    "@graphql-codegen/client-preset": "^4.1.0",
     "@svgr/webpack": "^6.5.1",
     "@tsconfig/next": "^1.0.4",
     "@types/luxon": "^3.2.0",
@@ -145,6 +152,6 @@
     "prettier": "^2.8.1",
     "prettier-plugin-tailwindcss": "^0.2.0",
     "prisma": "^4.8.1",
-    "typescript": "4.9.4"
+    "typescript": "5.0.4"
   }
 }