Merge pull request #51 from evmos/sandoche/various-fixes

Various fixes & github actions
evmos · Sep 12, 2024 · cb6a1c3 · cb6a1c3
2 parents e1fb138 + b7e933b
commit cb6a1c3
Show file tree

Hide file tree

Showing 33 changed files with 233 additions and 118 deletions.
diff --git a/.env.example b/.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

diff --git a/.github/workflows/types-lint-license-tests.yml b/.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
diff --git a/README.md b/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
 

diff --git a/package.json b/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"
   }
 }
-
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/_components/AuctionDetails.tsx b/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>

diff --git a/src/app/_components/BiddingForm.tsx b/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>
   );
 };
diff --git a/src/app/_components/BiddingHistory.tsx b/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} />

diff --git a/src/app/_components/BiddingHistoryData.tsx b/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>

diff --git a/src/app/_components/Countdown.tsx b/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);
     };

diff --git a/src/app/_state-machines/biddingStateMachine.ts b/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
         },
       },
     },