feat: add DefiLlama integration (#19)

package.json

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

src/config/integrations.ts

@@ -1,6 +1,6 @@
-import type { Integrations } from '../types'
 import path from 'node:path'
 import { z } from 'zod'
+import type { Integrations } from '../types'
 
 const exampleDemosPath = path.join('components', 'shared', 'example-demos.tsx')
 const dataConfigPath = path.join('data', 'turbo-integrations.ts')
@@ -372,4 +372,19 @@ export const integrationOptions: Integrations = {
       },
     ],
   },
+  'defi-llama': {
+    name: 'DefiLlama',
+    pageDependencies: [
+      {
+        dependencyPath: dataConfigPath,
+        type: 'snippet',
+        regexList: [/\n\s*defiLlama: \{\s*name: "DefiLlama",[\s\S]*?imgDark: "\/integrations\/defi-llama\.png",\s*\},/g],
+      },
+      {
+        dependencyPath: exampleDemosPath,
+        type: 'snippet',
+        regexList: [/\n\s*{\s*title: turboIntegrations\.defiLlama\.name,[\s\S]*?\/>\s*<\/div>\s*\),\s*},/g],
+      },
+    ],
+  },
 }

src/types.ts

@@ -78,6 +78,7 @@ export type AvailableIntegrations =
   | 'arweave'
   | 'gitcoin-passport'
   | 'lens-protocol'
+  | 'defi-llama'
   | 'starter'
 
 export type Integrations = Record<AvailableIntegrations, Integration>

template/base/components/shared/example-demos.tsx

@@ -504,6 +504,22 @@ const demos = [
       </div>
     ),
   },
+  {
+    title: turboIntegrations.defiLlama.name,
+    description: turboIntegrations.defiLlama.description,
+    href: turboIntegrations.defiLlama.href,
+    demo: (
+      <div className="flex items-center justify-center space-x-20">
+        <LightDarkImage
+          LightImage={turboIntegrations.defiLlama.imgDark}
+          DarkImage={turboIntegrations.defiLlama.imgLight}
+          alt="Defi Llama logo"
+          height={100}
+          width={100}
+        />
+      </div>
+    ),
+  },
   {
     title: turboIntegrations.starter.name,
     description: turboIntegrations.starter.description,

template/base/data/turbo-integrations.ts

@@ -14,7 +14,7 @@ interface TurboIntegration {
   category: (typeof integrationCategories)[number]
 }
 
-export const turboIntegrations: Record<string, TurboIntegration> = {
+export const turboIntegrations = {
   siwe: {
     name: "SIWE",
     href: "/integration/sign-in-with-ethereum",
@@ -199,6 +199,15 @@ export const turboIntegrations: Record<string, TurboIntegration> = {
     imgLight: "/integrations/gitcoin-passport.svg",
     imgDark: "/integrations/gitcoin-passport.svg",
   },
+  defiLlama: {
+    name: "DefiLlama",
+    href: "/integration/defi-llama",
+    url: "https://defillama.com/docs/api",
+    description: "Open and transparent DeFi analytics. ",
+    category: "services",
+    imgLight: "/integrations/defi-llama.png",
+    imgDark: "/integrations/defi-llama.png",
+  },
   starter: {
     name: "Starter Template",
     href: "/integration/starter",
@@ -209,4 +218,4 @@ export const turboIntegrations: Record<string, TurboIntegration> = {
     imgLight: "/logo-gradient.png",
     imgDark: "/logo-gradient.png",
   },
-}
+} as const

template/integrations/defi-llama/core/defi-llama/README.md

@@ -0,0 +1,71 @@
+# DefiLlama TurboETH Integration
+
+This integration allows you to fetch data from [DefiLlama](https://defillama.com/) and convert it to a readable format.
+
+## Features
+
+- Fetch DefiLlama data
+- Convert DefiLlama input/output data to easily readable format
+
+## Components
+
+`FormChart`: Renders a form to input a token info and historical data chart
+
+`FormCurrentPrice`: Renders a form to input a token info and current price
+
+`FormHistoricalPrice`: Renders a form to input a token info and historical price given a timestamp
+
+`FormPercentageChange`: Renders a form to input a token info and percentage change given a timestamp and period of time
+
+`OutputData`: Renders a textArea with the output data
+
+## Hooks
+
+These hooks are react-query wrappers for the [DefiLlama API](https://defillama.com/docs/api).
+
+### Query hooks
+
+`useChart`: Fetches the token prices at regular time intervals.
+
+`useCurrentTokenPrice`: Fetches the current price of a token from DeFi Llama.
+
+`useCurrentNativeTokenPrice`: Wrapper around `useCurrentTokenPrice` that fetches the current price of the native token of the given chain. Defaults to the current chain.
+
+`useCurrentERC20TokenPrice`: Wrapper around `useCurrentTokenPrice` that fetches the current price of an ERC20 token for the given chain. Defaults to the current chain.
+
+`useCurrentTokenPrice`: Fetches the historical price of a token from DeFi Llama given a timestamp.
+
+`useHistoricalNativeTokenPrice`: Wrapper around `useHistoricalTokenPrice` that fetches the historical price of the native token for the given chain. Defaults to the current chain.
+
+`useHistoricalERC20TokenPrice`: Wrapper around `useHistoricalTokenPrice` that fetches the historical price of an ERC20 token for the given chain. Defaults to the current chain.
+
+`useTokenPercentageChange`: Fetches the percentage change in price of a token from DeFi Llama given a timestamp and period of time.
+
+`useNativeTokenPercentageChange`: Wrapper around `useTokenPercentageChange` that fetches the percentage change in price of the native token for the given chain. Defaults to the current chain.
+
+`useERC20TokenPercentageChange`: Wrapper around `useTokenPercentageChange` that fetches the percentage change in price of an ERC20 token for the given chain. Defaults to the current chain.
+
+## File Structure
+
+```
+integrations/defi-llama/
+├─ components/
+│  ├─ form-chart.tsx
+│  ├─ form-current-price.tsx
+│  ├─ form-historical-price.tsx
+│  ├─ form-percentage-change.tsx
+│  ├─ index.ts
+│  ├─ output-data.tsx
+├─ hooks/
+│  ├─ coins/
+│  │  ├─ index.ts
+│  │  ├─ use-chart.ts
+│  │  ├─ use-current-token-price.ts
+│  │  ├─ use-historical-token-price.ts
+│  │  ├─ use-token-percentage-change.ts
+├─ utils/
+│  ├─ index.ts
+│  ├─ types.ts
+├─ index.ts
+├─ README.md
+```