Feat: Add DefiLlama integration (#179)

* feat: add DefiLlama integration

* feat: add historical price and parcentage change support

* fix: add missing hooks and components to README

* chore: update hooks docs

app/(general)/integration/defi-llama/opengraph-image.tsx

@@ -0,0 +1,9 @@
+import { IntegrationOgImage } from "@/components/ui/social/og-image-integrations"
+
+export const runtime = "edge"
+export const size = {
+  width: 1200,
+  height: 630,
+}
+
+export default IntegrationOgImage("defiLlama")

app/(general)/integration/defi-llama/page.tsx

@@ -0,0 +1,62 @@
+import Link from "next/link"
+import { turboIntegrations } from "@/data/turbo-integrations"
+import { LuBook } from "react-icons/lu"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+import {
+  PageHeader,
+  PageHeaderCTA,
+  PageHeaderDescription,
+  PageHeaderHeading,
+} from "@/components/layout/page-header"
+import { PageSection } from "@/components/layout/page-section"
+import { LightDarkImage } from "@/components/shared/light-dark-image"
+import {
+  FormChart,
+  FormCurrentPrice,
+  FormHistoricalPrice,
+  FormPercentageChange,
+} from "@/integrations/defi-llama/components"
+
+const integrationData = turboIntegrations.defiLlama
+
+export default function IntegrationPage() {
+  return (
+    <div className="container relative mt-20">
+      <PageHeader className="pb-8">
+        <LightDarkImage
+          LightImage={integrationData.imgDark}
+          DarkImage={integrationData.imgLight}
+          alt="TurboETH Logo"
+          width={100}
+          height={100}
+          className="h-20 w-20 rounded-2xl"
+        />
+        <PageHeaderHeading>{integrationData.name}</PageHeaderHeading>
+        <PageHeaderDescription>
+          {integrationData.description}
+        </PageHeaderDescription>
+        <PageHeaderCTA>
+          <Link
+            href={integrationData.url}
+            target="_blank"
+            rel="noreferrer noopener"
+            className={cn(buttonVariants({ variant: "outline" }))}
+          >
+            <LuBook className="mr-2 h-4 w-4" />
+            Documentation
+          </Link>
+        </PageHeaderCTA>
+      </PageHeader>
+      <PageSection>
+        <div className="flex w-full max-w-screen-lg flex-col gap-y-10">
+          <FormCurrentPrice />
+          <FormChart />
+          <FormHistoricalPrice />
+          <FormPercentageChange />
+        </div>
+      </PageSection>
+    </div>
+  )
+}

app/(general)/integration/defi-llama/twitter-image.tsx

@@ -0,0 +1,9 @@
+import Image from "./opengraph-image"
+
+export const runtime = "edge"
+export const size = {
+  width: 1200,
+  height: 630,
+}
+
+export default Image

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,

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> = {
     imgDark: "/integrations/gitcoin-passport.svg",
     category: "services",
   },
+  defiLlama: {
+    name: "DefiLlama",
+    href: "/integration/defi-llama",
+    url: "https://defillama.com/docs/api",
+    description: "Open and transparent DeFi analytics. ",
+    imgLight: "/integrations/defi-llama.png",
+    category: "services",
+    imgDark: "/integrations/defi-llama.png",
+  },
   starter: {
     name: "Starter Template",
     href: "/integration/starter",
@@ -209,4 +218,4 @@ export const turboIntegrations: Record<string, TurboIntegration> = {
     category: "general",
     imgDark: "/logo-gradient.png",
   },
-}
+} as const

integrations/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
+```