feat: tx-indexer and frontend integration (#10)

* chore: add docker-compose with tx-indexer

* chore: correct frontend ports

* feat: build from docker compose

* feat: get new vaults handled by autoswap

.gitignore

@@ -0,0 +1 @@
+indexer-db

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "frontend/tx-indexer"]
+	path = tx-indexer
+	url = https://github.com/gnolang/tx-indexer

docker-compose.yml

@@ -0,0 +1,19 @@
+services:
+  frontend:
+     build: frontend
+     restart: always
+     ports:
+       - "80:3000"
+     environment:
+       - REACT_APP_TX_INDEXER_URL=tx-indexer:8546
+  tx-indexer:
+    build: tx-indexer
+    restart: always
+    ports:
+      - "8546:8546"
+    entrypoint: ["/usr/local/bin/indexer", "start", "--remote", "https://rpc.test4.gno.land", "--db-path", "indexer-db"]
+    volumes:
+      - ./indexer-db:/indexer-db
+
+volumes:
+  indexer-db:

frontend/.dockerignore

@@ -0,0 +1,2 @@
+.next
+node_modules

frontend/Dockerfile

@@ -0,0 +1,66 @@
+FROM node:20-alpine AS base
+
+
+
+### Dependencies ###
+FROM base AS deps
+RUN apk add --no-cache libc6-compat git
+
+
+
+# Setup pnpm environment
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+RUN corepack prepare pnpm@latest --activate
+
+WORKDIR /app
+
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install --frozen-lockfile --prefer-frozen-lockfile
+
+# Builder
+FROM base AS builder
+
+RUN corepack enable
+RUN corepack prepare pnpm@latest --activate
+
+WORKDIR /app
+
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN pnpm build
+
+
+### Production image runner ###
+FROM base AS runner
+
+# Set NODE_ENV to production
+ENV NODE_ENV production
+
+# Disable Next.js telemetry
+# Learn more here: https://nextjs.org/telemetry
+ENV NEXT_TELEMETRY_DISABLED 1
+
+# Set correct permissions for nextjs user and don't run as root
+RUN addgroup nodejs
+RUN adduser -SDH nextjs
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/public ./public
+
+USER nextjs
+
+# Exposed port (for orchestrators and dynamic reverse proxies)
+EXPOSE 3000
+ENV PORT 3000
+ENV HOSTNAME "0.0.0.0"
+HEALTHCHECK --interval=30s --timeout=30s --start-period=5s --retries=3 CMD [ "wget", "-q0", "http://localhost:3000/health" ]
+
+# Run the nextjs app
+CMD ["node", "server.js"]

frontend/package.json

@@ -15,6 +15,7 @@
     "@chakra-ui/theme-tools": "^2.2.6",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "axios": "^1.7.7",
     "framer-motion": "^11.11.8",
     "next": "14.2.15",
     "react": "^18",

frontend/src/components/AdenaWallet.tsx

@@ -11,15 +11,15 @@ const AdenaWallet = () => {
 
     const integrateWallet = async () => {
       // Look for the adena object
-      if (!window.adena) {
+      if (!(window as any).adena) { // eslint-disable-line
         // Open adena.app in a new tab if the adena object is not found
         window.open("https://adena.app/", "_blank");
       } else {
         // Add connection
-        const connection = await adena.AddEstablish("GnoALM");
+        const connection = await (window as any).adena.AddEstablish("GnoALM"); // eslint-disable-line
         console.log("connection, ", JSON.stringify(connection))
 
-        const account = await adena.GetAccount()
+        const account = await (window as any).adena.GetAccount() // eslint-disable-line
         console.log("account, ", JSON.stringify(account))
         setAccount(account.data.address)
       }

frontend/src/components/DepositModal.tsx

@@ -12,7 +12,7 @@ import {
   Input,
 } from '@chakra-ui/react';
 
-const DepositModal: React.FC<{ isOpen: boolean; onOpen: () => void; onClose: () => void }> = ({ isOpen, onOpen, onClose }) => {
+const DepositModal: React.FC<{ isOpen: boolean; onClose: () => void }> = ({ isOpen, onClose }) => {
   const [mode, setMode] = useState<'single' | 'double'>('single');
   const [singleInput, setSingleInput] = useState('');
   const [doubleInput1, setDoubleInput1] = useState('');

frontend/src/components/PoolGrid.tsx

@@ -4,12 +4,11 @@ import { SimpleGrid, Box, useDisclosure } from '@chakra-ui/react';
 import PoolCard from './PoolCard';
 import { useState } from 'react';
 import { Pool } from '../types/pool';
-import { on } from 'events';
 import DepositModal from './DepositModal';
 import WithdrawModal from './WithdrawModal';
 
 const PoolGrid: React.FC= () => {
-    const [pools, setPools] = useState<Pool[]>([
+    const [pools] = useState<Pool[]>([
         {
             token0: 'ETH',
             token1: 'USDC',
@@ -49,8 +48,8 @@ const PoolGrid: React.FC= () => {
 
   return (
     <>
-    <DepositModal isOpen={isOpenDeposit} onOpen={onOpenDeposit} onClose={onCloseDeposit} />
-    <WithdrawModal isOpen={isOpenWithdraw} onOpen={onOpenWithdraw} onClose={onCloseWithdraw} />
+    <DepositModal isOpen={isOpenDeposit} onClose={onCloseDeposit} />
+    <WithdrawModal isOpen={isOpenWithdraw} onClose={onCloseWithdraw} />
     <SimpleGrid columns={{ sm: 1, md: 2, lg: 3 }} spacing={8} w="full">
       {pools.map((pool) => (
           <Box key={`${pool.token0}-${pool.token1}`} display="flex" justifyContent="center">

frontend/src/components/WithdrawModal.tsx

@@ -11,7 +11,7 @@ import {
   Input,
 } from '@chakra-ui/react';
 
-const WithdrawModal: React.FC<{ isOpen: boolean; onOpen: () => void; onClose: () => void }> = ({ isOpen, onOpen, onClose }) => {
+const WithdrawModal: React.FC<{ isOpen: boolean; onClose: () => void }> = ({ isOpen, onClose }) => {
   const [input1, setInput1] = useState('');
   const [input2, setInput2] = useState('');
 

frontend/src/config/constants.ts

@@ -0,0 +1 @@
+export const txIndexerUrl = process.env.REACT_APP_TX_INDEXER_URL || 'http://localhost:3100';

frontend/src/types/pool.ts

@@ -8,5 +8,6 @@ type Pool = {
     TVL: number;
     APY: number;
     balance: number;
+    tokenId: string;
 }
 export type { Pool };

frontend/src/utils/pools.ts

@@ -0,0 +1,29 @@
+import { txIndexerUrl } from "@/config/constants";
+import { Pool } from "@/types/pool";
+import axios from "axios";
+
+export async function getPools(): Promise<Pool[]> {
+    const data = await axios.post(txIndexerUrl + '/graphql/query', {
+        data: {
+            "query": "# Get all the transactions that contain the specified Events on them.\nquery getEvents {\n  getTransactions(\n    where: {\n      \n      # Filtering by block height will speed up your queries, because it is the main internal index.\n      block_height :{\n        gt:100000\n      }\n      \n      # Only show transactions that succeeded.\n      success: {eq: true}, \n      response: {\n        events: {\n        \n          # This filter is checking that all transactions will contains a GnoEvent that \n          # is GNOSWAP type calling SetPoolCreationFee function.\n          GnoEvent: {\n            type: { eq:\"NewVault\" }\n          }\n        }\n      }\n    }\n  ) {\n    response {\n      events {\n        ... on GnoEvent {\n          type\n          func\n          attrs {\n            key\n            value\n          }\n        }\n      }\n    }\n  }\n}",
+            "operationName": "getEvents"
+        }
+    })
+
+    const pools = data.data.response.events.map((event: any) => {
+        const pool: Pool = {
+            tokenId: event.attrs[0].value,
+            token0: event.attrs[1].value,
+            token1: event.attrs[2].value,
+            fee: parseFloat(event.attrs[3].value),
+            lowerTick: parseInt(event.attrs[4].value),
+            upperTick: parseInt(event.attrs[5].value),
+            currentTick: 0, // TODO get current tick
+            TVL: 0, // TODO get TVL
+            APY: 0, // TODO get APY
+            balance: 0 // TODO get balance
+        }
+        return pool;
+    });
+    return pools;
+}