Various fixes & github actions

.env.example

@@ -3,7 +3,7 @@ NEXT_PUBLIC_RPC_HOST=http://127.0.0.1:8545
 COSMOS_RPC_HOST=http://127.0.0.1:1317
 
 # Proxy
-GITHUB_API_PROXY=
+GH_API_PROXY=
 
 # Chain info
 NEXT_PUBLIC_CHAIN_ID=9000

.github/workflows/types-lint-license-tests.yml

@@ -0,0 +1,112 @@
+name: Check types, lint, license and run tests
+
+on:
+ pull_request:
+ branches:
+ - main
+
+jobs:
+ setup:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout code
+ uses: actions/checkout@v4
+
+ - name: Setup Node.js
+ uses: actions/setup-node@v4
+ with:
+ node-version: '20.16.0'
+
+ - name: Install pnpm
+ uses: pnpm/action-setup@v2
+ with:
+ version: 8
+
+ - name: Install dependencies
+ run: pnpm install
+
+ - name: Cache dependencies
+ uses: actions/cache@v3
+ id: cache
+ with:
+ path: ~/.pnpm-store
+ key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+ restore-keys: |
+ ${{ runner.os }}-pnpm-
+
+ test:
+ needs: setup
+ runs-on: ubuntu-latest
+ env:
+ NEXT_PUBLIC_RPC_HOST: 'http://127.0.0.1:8545'
+ NEXT_PUBLIC_ENABLED_LOGS: true
+ GH_API_PROXY: ${{ secrets.GH_API_PROXY }}
+ MOCK_COINGECKO_API: true
+ steps:
+ - uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
+ with:
+ node-version: '20.16.0'
+ - uses: pnpm/action-setup@v2
+ with:
+ version: 8
+ - uses: actions/cache@v3
+ with:
+ path: ~/.pnpm-store
+ key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+ - run: pnpm install
+ - run: pnpm test
+
+ typecheck:
+ needs: setup
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
+ with:
+ node-version: '20.16.0'
+ - uses: pnpm/action-setup@v2
+ with:
+ version: 8
+ - uses: actions/cache@v3
+ with:
+ path: ~/.pnpm-store
+ key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+ - run: pnpm install
+ - run: pnpm typecheck
+
+ lint:
+ needs: setup
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
+ with:
+ node-version: '20.16.0'
+ - uses: pnpm/action-setup@v2
+ with:
+ version: 8
+ - uses: actions/cache@v3
+ with:
+ path: ~/.pnpm-store
+ key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+ - run: pnpm install
+ - run: pnpm lint
+
+ license:
+ needs: setup
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
+ with:
+ node-version: '20.16.0'
+ - uses: pnpm/action-setup@v2
+ with:
+ version: 8
+ - uses: actions/cache@v3
+ with:
+ path: ~/.pnpm-store
+ key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+ - run: pnpm install
+ - run: pnpm license

README.md

@@ -1,5 +1,3 @@
-🚧 Work in progress, not ready for production 🚧
-
 <div align="center">
  <h1> Evmos Burn Auction Instant dApp </h1>
 </div>
@@ -32,6 +30,8 @@ Pre-requisites:
 ```bash
 pnpm install
 
+pnpm prisma:db:push
+
 cp .env.example .env
 # edit the .env file with your own values
 ```
@@ -55,7 +55,7 @@ pnpm build
 
 ### Test with a local node
 
-Follow the instructions described in this issue in order to run a local node with the Burn Auction module enabled: https://github.com/evmos/burn-auction-dapp/issues/5
+Follow the instructions described in this issue in order to run a local node with the Burn Auction module enabled check this [file](./docs/DEVELOP_WITH_LOCAL_NODE.md).
 
 ### Indexing Endpoints
 

package.json

@@ -15,7 +15,7 @@
  "prepare": "husky",
  "test": "vitest",
  "gen:types": "cross-env NODE_OPTIONS='--experimental-import-meta-resolve' tsx ./src/utilities/registry/scripts/gen-schema-types.mts",
- "postinstall": "npm run gen:types",
+ "postinstall": "npm run gen:types && npm run prisma:generate",
  "license": "node ./check-license.mjs",
  "license:fix": "node ./check-license.mjs --fix",
  "typecheck": "tsc --noEmit",
@@ -73,4 +73,3 @@
  "vitest": "^2.0.5"
  }
 }
-

src/app/_components/AuctionDetails.tsx

@@ -9,7 +9,7 @@ import type { AuctionDetailed } from '@/types/AuctionDetailed';
 import { formatUnits } from '@/utilities/formatUnits';
 import { EVMOS_DECIMALS } from '@/constants';
 import { ButtonLink } from '@/components/ui/ButtonLink';
-import { fetchCurrentCryptoPrice } from '@/queries/fetchCurrentCryptoPrice';
+import { Tooltip } from '@/components/ui/Tooltip';
 
 import { AssetsTable } from './AssetsTable';
 import { BiddingHistory } from './BiddingHistory';
@@ -18,12 +18,6 @@ import { Countdown } from './Countdown';
 import { BiddingProgress } from './BiddingProgress';
 import { DiscountChip } from './DiscountChip';
 
-import { EVMOS_DECIMALS } from '@/constants';
-import { ButtonLink } from '@/components/ui/ButtonLink';
-import Image from 'next/image';
-import { Tooltip } from '@/components/ui/Tooltip';
-import { fetchCurrentCryptoPrice } from '@/queries/fetchCurrentCryptoPrice';
-
 export const AuctionDetails = async ({ auctionDetails }: { auctionDetails: AuctionDetailed }) => {
  const { round, auction, highestBid }: AuctionDetailed = auctionDetails;
 
@@ -49,8 +43,6 @@ export const AuctionDetails = async ({ auctionDetails }: { auctionDetails: Aucti
  timeZoneName: 'short',
  });
 
- const evmosToUsdRate = await fetchCurrentCryptoPrice(['evmos']).then((res) => res.evmos.usd);
-
  return (
  <main>
  <section className="mb-12">
@@ -63,7 +55,7 @@ export const AuctionDetails = async ({ auctionDetails }: { auctionDetails: Aucti
  </ButtonLink>
  </div>
  )}
- <h1 className="text-3xl flex font-bold">Auction #{Number(round.round)}</h1>
+ <h1 className="text-3xl flex">Auction #{Number(round.round)}</h1>
  </div>
  {round.isLast && (
  <Chip>
@@ -119,12 +111,12 @@ export const AuctionDetails = async ({ auctionDetails }: { auctionDetails: Aucti
  </div>
  <p className="mb-6">
  {highestBid.bidderAddress !== '0x0000000000000000000000000000000000000000' && (
- <a href={`https://www.mintscan.io/evmos/address/${highestBid.bidderAddress}`} className="text-evmos-primary hover:text-evmos-primary-light" target="_blank">
- {highestBid.bidderAddress}
+ <a href={`https://www.mintscan.io/evmos/address/${highestBid.bidderAddress}`} className="text-evmos-primary hover:text-evmos-primary-light flex" target="_blank">
+ <span className="mr-2">{highestBid.bidderAddress}</span> <Image src="/icons/external.svg" alt="Evmos Icon" width={16} height={16} />
  </a>
  )}
  </p>
- <div className="mb-6">{round.isLast && <BiddingForm evmosToUsdRate={evmosToUsdRate} />}</div>
+ <div className="mb-6">{round.isLast && <BiddingForm evmosToUsdRate={auction.evmosToUsdRate} priceError={auction.hasPriceError} />}</div>
  <BiddingHistory round={round.round} />
  </section>
  </main>

src/app/_components/BiddingForm.tsx

@@ -13,8 +13,9 @@ import { viemPublicClient } from '@/utilities/viem';
 import { formatUnits } from '@/utilities/formatUnits';
 import { EVMOS_DECIMALS } from '@/constants';
 import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
+import { Tooltip } from '@/components/ui/Tooltip';
 
-export const BiddingForm = ({ evmosToUsdRate }: { evmosToUsdRate: number }) => {
+export const BiddingForm = ({ evmosToUsdRate, priceError }: { evmosToUsdRate: number; priceError: boolean }) => {
  const [state, send] = useMachine(biddingStateMachine);
 
  dappstore.onAccountsChange((accounts) => send({ type: 'SET_WALLET', wallet: accounts[0] }));
@@ -39,7 +40,7 @@ export const BiddingForm = ({ evmosToUsdRate }: { evmosToUsdRate: number }) => {
  send({ type: 'SUBMIT' });
  };
 
- const isSubmitDisabled = (state.context.bidAmount !== '' && !state.can({ type: 'SUBMIT' })) || state.matches('submitting');
+ const isSubmitDisabled = (state.context.bidAmount !== '' && !state.can({ type: 'SUBMIT' })) || state.matches('submitting') || state.matches('success');
  const errorMessage =
  Number(state.context.bidAmount) < 0
  ? 'Bid amount must be greater than 0'
@@ -66,24 +67,29 @@ export const BiddingForm = ({ evmosToUsdRate }: { evmosToUsdRate: number }) => {
  placeholder="Amount"
  value={state.context.bidAmount}
  onChange={(e) => send({ type: 'SET_BID_AMOUNT', value: e.target.value })}
- disabled={state.matches('submitting')}
+ disabled={isSubmitDisabled}
  />
  <Image src="/icons/evmos.svg" alt="EVMOS" width={24} height={24} className="absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none" />
  </div>
  <button
  className="disabled:text-evmos-gray-light disabled:bg-evmos-gray disabled:border-evmos-gray items-center justify-center rounded-full transition-[background-color,outline-color,filter] transition-200 flex gap-x-1 outline outline-offset-2 outline-1 outline-transparent bg-evmos-orange-500 hover:bg-evmos-orange-400 py-[9px] px-5 active:outline-evmos-secondary-dark"
  disabled={isSubmitDisabled}
  >
- {state.matches('submitting') ? <LoadingSpinner /> : 'Bid'}
+ {state.matches('submitting') || state.matches('success') ? <LoadingSpinner /> : 'Bid'}
  </button>
  </div>
- <div className="flex justify-between mt-2">
- {Number(state.context.bidAmount) > 0 && <span className="text-evmos-lightish text-sm">≈ ${(Number(state.context.bidAmount) * evmosToUsdRate).toFixed(2)}</span>}
+ <div className="flex mt-2">
+ {Number(state.context.bidAmount) > 0 && <span className="text-evmos-lightish text-sm mr-2">≈ ${(Number(state.context.bidAmount) * evmosToUsdRate).toFixed(2)}</span>}
+ {Number(state.context.bidAmount) > 0 && priceError && (
+ <Tooltip content="Evmos price could not be fetched from Coingecko" extraClasses="-mt-12 -translate-x-2">
+ <Image src="/icons/info.svg" alt="Info" width={20} height={20} />
+ </Tooltip>
+ )}
  </div>
  </form>
  {errorMessage && <div className="text-evmos-error text-sm mt-2">{errorMessage}</div>}
  {state.matches('error') && <div className="text-evmos-error text-sm mt-2">{state.context.error}</div>}
- {state.matches('success') && <div className="text-evmos-success text-sm mt-2">Bid placed successfully!</div>}
+ {state.matches('success') && <div className="text-evmos-success text-sm mt-2">Bid placed successfully! It will appear in a few seconds.</div>}
  </Card>
  );
 };

src/app/_components/BiddingHistory.tsx

@@ -40,20 +40,22 @@ export const BiddingHistory = async ({ round }: { round: bigint }) => {
  </thead>
  <Suspense
  fallback={
- <tr>
- <th scope="col" className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-white sm:pl-0">
- <SkeletonBlob className="w-full h-2" />
- </th>
- <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-white">
- <SkeletonBlob className="w-full h-2" />
- </th>
- <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-white">
- <SkeletonBlob className="w-full h-2" />
- </th>
- <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-white">
- <SkeletonBlob className="w-full h-2" />
- </th>
- </tr>
+ <tbody>
+ <tr>
+ <th scope="col" className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-white sm:pl-0">
+ <SkeletonBlob className="w-full h-2" />
+ </th>
+ <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-white">
+ <SkeletonBlob className="w-full h-2" />
+ </th>
+ <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-white">
+ <SkeletonBlob className="w-full h-2" />
+ </th>
+ <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-white">
+ <SkeletonBlob className="w-full h-2" />
+ </th>
+ </tr>
+ </tbody>
  }
  >
  <BiddingHistoryData round={round} />

src/app/_components/BiddingHistoryData.tsx

@@ -30,8 +30,8 @@ export const BiddingHistoryData = async ({ round }: { round: bigint }) => {
  {bids.map((bid) => (
  <tr key={bid.transactionHash}>
  <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-white sm:pl-0">
- <a href={`https://www.mintscan.io/evmos/address/${bid.bidder}`} className="text-evmos-primary hover:text-evmos-primary-light" target="_blank">
- {shortenAddress(bid.bidder)}
+ <a href={`https://www.mintscan.io/evmos/address/${bid.bidder}`} className="text-evmos-primary hover:text-evmos-primary-light flex" target="_blank">
+ <span className="mr-2">{shortenAddress(bid.bidder)}</span> <Image src="/icons/external.svg" alt="Evmos Icon" width={16} height={16} />
  </a>
  </td>
  <td className="whitespace-nowrap px-3 py-4 text-sm flex text-evmos-lightish">
@@ -40,8 +40,8 @@ export const BiddingHistoryData = async ({ round }: { round: bigint }) => {
  </td>
  <td className="whitespace-nowrap px-3 py-4 text-sm text-evmos-lightish">{bid.time ? dayjs(bid.time).fromNow() : ''}</td>
  <td className="whitespace-nowrap px-3 py-4 text-sm">
- <a href={`https://www.mintscan.io/evmos/tx/${bid.transactionHash}`} className="text-evmos-primary hover:text-evmos-primary-light" target="_blank">
- {shortenAddress(bid.transactionHash)}
+ <a href={`https://www.mintscan.io/evmos/tx/${bid.transactionHash}`} className="text-evmos-primary hover:text-evmos-primary-light flex" target="_blank">
+ <span className="mr-2">{shortenAddress(bid.transactionHash)}</span> <Image src="/icons/external.svg" alt="Evmos Icon" width={16} height={16} />
  </a>
  </td>
  </tr>

src/app/_components/Countdown.tsx

@@ -3,9 +3,11 @@
 
 'use client';
 import { useState, useEffect } from 'react';
-import reloadData from '../_actions/reloadData';
+
 import { Log } from '@/utilities/logger';
 
+import reloadData from '../_actions/reloadData';
+
 type TimeLeft = {
  days: number;
  hours: number;
@@ -14,6 +16,7 @@ type TimeLeft = {
 };
 
 const REFRESH_INTERVAL = 1000;
+const DELAY_BEFORE_RELOAD_AFTER_COUNTDOWN_GOES_TO_ZERO = 5000;
 
 const calculateTimeLeft = (date: Date): TimeLeft => {
  const difference = +date - +new Date();
@@ -57,10 +60,10 @@ export const Countdown = ({ date }: { date: Date }) => {
  setTimeout(() => {
  Log().info('Reloading data after countdown to 0');
  reloadData();
- }, 5000);
+ }, DELAY_BEFORE_RELOAD_AFTER_COUNTDOWN_GOES_TO_ZERO);
  }
- }, 1000);
- 
+ }, REFRESH_INTERVAL);
+
  return () => {
  clearInterval(interval);
  };

src/app/_state-machines/biddingStateMachine.ts

@@ -42,6 +42,10 @@ export const biddingStateMachine = setup({
  bidAmount: ({ context }) => Math.max(Number(formatUnits(context.balance, EVMOS_DECIMALS, 2)) - DECIMAL_DISPLAY_FIX, 0),
  error: () => null,
  }),
+ resetBidAmount: assign({
+ bidAmount: () => '',
+ error: () => null,
+ }),
  refreshPage: () => {
  reloadData();
  },
@@ -115,8 +119,8 @@ export const biddingStateMachine = setup({
  after: {
  // average block time is 3 seconds, added a bit of buffer here
  5000: {
- target: 'success',
- actions: 'refreshPage',
+ target: 'idle',
+ actions: ['refreshPage', 'resetBidAmount'], // Reset bid amount here
  },
  },
  },