Linting

web/src/App.tsx

@@ -1,39 +1,61 @@
-import { useAccount } from "wagmi";
-import { ConnectWallet } from "./connectwallet/ConnectWallet";
-import { Countdown } from "./countdown/Countdown";
-import { PlayerList } from "./playerlist/PlayerList";
-import { WalletInfo } from "./walletinfo/WalletInfo";
+import { useAccount } from 'wagmi';
+
+import { ConnectWallet } from './connectwallet/ConnectWallet.jsx';
+import { Countdown } from './countdown/Countdown.jsx';
+import { PlayerList } from './playerlist/PlayerList.jsx';
+import { WalletInfo } from './walletinfo/WalletInfo.jsx';
 
 export const App = () => {
-    const {isConnected} = useAccount();
+    const { isConnected } = useAccount();
 
     return (
         <div className="w-full">
             <div className="w-full max-w-xl p-4 mx-auto">
                 <div className="w-full border rounded-xl p-4 border-dark-border bg-dark-background-primary">
                     <div className="space-y-3">
-                        <p>
-                            Will is going to win, but will you?
-                        </p>
+                        <p>Will is going to win, but will you?</p>
                         <h2>The Concept</h2>
                         <p>
-                            The concept is simple, delegate your Jury CTG NFT to Will's Player NFT, and earn a portion of the winnings.
+                            The concept is simple, delegate your Jury CTG NFT to
+                            Will's Player NFT, and earn a portion of the
+                            winnings.
                         </p>
                         <h2>Participate</h2>
                         <p>
-                            Use the button below to delegate your jury vote to Will.
-                            By staking your CTG Jury NFT, you are "super voting" for Will. He won't be able to withdraw the NFT, just use it for the vote.
+                            Use the button below to delegate your jury vote to
+                            Will. By staking your CTG Jury NFT, you are "super
+                            voting" for Will. He won't be able to withdraw the
+                            NFT, just use it for the vote.
                         </p>
                         <p>
-                            Once Will wins, he is only going to take 50% of the pot. The other 50% will be given proportionally to people that delegated their vote.
-                            The winnings will automatically be sent alongside the delegated NFT once the prize is recieved!
+                            Once Will wins, he is only going to take 50% of the
+                            pot. The other 50% will be given proportionally to
+                            people that delegated their vote. The winnings will
+                            automatically be sent alongside the delegated NFT
+                            once the prize is recieved!
                         </p>
                         <h2>Is this a rug pull?</h2>
-                        <p>Nope! This is a collaboration between people from IYK, NPC Labs (Authors of 6551), ENS, and V3X to show off the power of decentralized digital assets.</p>
-                        <p>View the <a href="https://github.com/Ryan-Ouyang/6551-ctg-vault" target="_blank">source code of the contract</a>.</p>
+                        <p>
+                            Nope! This is a collaboration between people from
+                            IYK, NPC Labs (Authors of 6551), ENS, and V3X to
+                            show off the power of decentralized digital assets.
+                        </p>
+                        <p>
+                            View the{' '}
+                            <a
+                                href="https://github.com/Ryan-Ouyang/6551-ctg-vault"
+                                target="_blank"
+                            >
+                                source code of the contract
+                            </a>
+                            .
+                        </p>
                         <h2>Countdown</h2>
-                        <p>Once the vote starts, you no longer will be able to delgate your vote!</p>
-                        <Countdown to={new Date("2024-04-18T00:00:00.000Z")} />
+                        <p>
+                            Once the vote starts, you no longer will be able to
+                            delgate your vote!
+                        </p>
+                        <Countdown to={new Date('2024-04-18T00:00:00.000Z')} />
                         {!isConnected && <ConnectWallet />}
                         {isConnected && <WalletInfo />}
                         {isConnected && <PlayerList />}
@@ -42,4 +64,4 @@ export const App = () => {
             </div>
         </div>
     );
-}
+};

web/src/connectwallet/ConnectWallet.tsx

@@ -1,13 +1,18 @@
 import { useModal } from 'connectkit';
 
 export const ConnectWallet = () => {
-    const {setOpen} = useModal();
+    const { setOpen } = useModal();
 
     return (
         <div>
-            <button className="btn w-full" onClick={() => { setOpen(true) }}>
+            <button
+                className="btn w-full"
+                onClick={() => {
+                    setOpen(true);
+                }}
+            >
                 Connect Wallet
             </button>
         </div>
-    )
+    );
 };

web/src/countdown/Countdown.tsx

@@ -1,30 +1,32 @@
-import { FC, useEffect, useState } from "react";
+import { FC, useEffect, useState } from 'react';
 
 export const Countdown: FC<{ to: Date }> = ({ to }) => {
     const [now, setNow] = useState(Date.now());
 
     const hoursLeft = Math.floor((to.getTime() - now) / 1000 / 60 / 60);
-    const minutesLeft = Math.floor((to.getTime() - now) / 1000 / 60 % 60);
-    const secondsLeft = Math.floor((to.getTime() - now) / 1000 % 60);
+    const minutesLeft = Math.floor(((to.getTime() - now) / 1000 / 60) % 60);
+    const secondsLeft = Math.floor(((to.getTime() - now) / 1000) % 60);
 
     useEffect(() => {
         const interval = setInterval(() => {
             setNow(Date.now());
         }, 1000);
 
         return () => clearInterval(interval);
-    }
-    , []);
+    }, []);
 
     return (
         <div>
-            <div className="text-timer" title={`Time left till ${to.getTime()}`}>
+            <div
+                className="text-timer"
+                title={`Time left till ${to.getTime()}`}
+            >
                 <span>{hoursLeft.toString().padStart(2, '0')}</span>
                 <span>:</span>
                 <span>{minutesLeft.toString().padStart(2, '0')}</span>
                 <span>:</span>
                 <span>{secondsLeft.toString().padStart(2, '0')}</span>
             </div>
         </div>
-    )
+    );
 };

web/src/index.tsx

@@ -1,31 +1,34 @@
 import './globals.css';
 
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ConnectKitProvider } from 'connectkit';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { SWRConfig } from 'swr';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { WagmiProvider } from 'wagmi';
-import { http, createConfig } from 'wagmi';
-import { base, mainnet, optimism } from 'wagmi/chains';
-import { injected, metaMask, safe, walletConnect } from 'wagmi/connectors';
-import { ConnectKitProvider } from 'connectkit';
+import { createConfig, http } from 'wagmi';
+import { base } from 'wagmi/chains';
+import { injected, safe, walletConnect } from 'wagmi/connectors';
 
-import { App } from './App';
+import { App } from './App.jsx';
 
-const queryClient = new QueryClient()
+const queryClient = new QueryClient();
 
 const config = createConfig({
     chains: [base],
     connectors: [
         injected(),
-        walletConnect({ projectId: '9a9eccbc15cb6504b32a44f9d0154c42', showQrModal: false }),
+        walletConnect({
+            projectId: '9a9eccbc15cb6504b32a44f9d0154c42',
+            showQrModal: false,
+        }),
         // metaMask(),
         safe(),
     ],
     transports: {
         [base.id]: http(),
     },
-})
+});
 
 // @ts-ignore
 BigInt.prototype.toJSON = function () {

web/src/playerlist/PlayerEntry.tsx

@@ -1,6 +1,7 @@
-import { FC } from "react";
-import { usePlayerMetadata } from "./getPlayerMetadata";
-import { mitmipfs } from "../utils/mitmipfs";
+import { FC } from 'react';
+
+import { mitmipfs } from '../utils/mitmipfs.js';
+import { usePlayerMetadata } from './getPlayerMetadata.js';
 
 export const PlayerEntry: FC<{ tokenId: string }> = ({ tokenId }) => {
     const { data } = usePlayerMetadata(tokenId);
@@ -10,20 +11,23 @@ export const PlayerEntry: FC<{ tokenId: string }> = ({ tokenId }) => {
             {data ? (
                 <div className="flex border p-2 rounded-lg border-dark-border gap-2 items-center">
                     <div className="h-12 w-12 aspect-square rounded-lg border border-dark-border overflow-hidden">
-                        <img src={mitmipfs(data.image)} alt={data.name} className="block aspect-square w-full h-full" />
+                        <img
+                            src={mitmipfs(data.image)}
+                            alt={data.name}
+                            className="block aspect-square w-full h-full"
+                        />
                     </div>
+                    {/* <video src={mitmipfs(data.animation_url)} className="block aspect-square w-full h-full" autoPlay={true} loop={true} /> */}
                     <div className="grow">
                         <h3>#{tokenId}</h3>
                     </div>
-                    <div className="btn btn-small">
-                        Delegate
-                    </div>
+                    <div className="btn btn-small">Delegate</div>
                 </div>
             ) : (
                 <div>
                     <p>loading...</p>
                 </div>
             )}
         </div>
-    )
+    );
 };

web/src/playerlist/PlayerList.tsx

@@ -1,7 +1,7 @@
-import useSWR from "swr";
-import { PlayerEntry } from "./PlayerEntry";
-import { usePlayers } from "./getPlayers.js";
-import { useAccount } from "wagmi";
+import { useAccount } from 'wagmi';
+
+import { usePlayers } from './getPlayers.js';
+import { PlayerEntry } from './PlayerEntry.js';
 
 export const PlayerList = () => {
     // TODO: Load a users nfts here
@@ -13,13 +13,12 @@ export const PlayerList = () => {
         <>
             <h2>Your Players</h2>
             <div>
-                {
-                    data && data.ownedNfts.map((player) => <PlayerEntry tokenId={player.tokenId} />)
-                }
-                {
-                    data && data.ownedNfts.length === 0 && <p>No players found</p>
-                }
+                {data &&
+                    data.ownedNfts.map((player) => (
+                        <PlayerEntry tokenId={player.tokenId} />
+                    ))}
+                {data && data.ownedNfts.length === 0 && <p>No players found</p>}
             </div>
         </>
-    )
+    );
 };

web/src/playerlist/getPlayerMetadata.ts

@@ -1,4 +1,4 @@
-import useSWR from "swr";
+import useSWR from 'swr';
 
 type PlayerMetadata = {
     base_index: number;
@@ -7,18 +7,21 @@ type PlayerMetadata = {
     properties: {
         Season: number;
         Tribe: string;
-    }
+    };
     external_url: string;
     image: string;
     animation_url: string;
 };
 
 export const getPlayerMetadata = async (tokenId: string) => {
-    const res = await fetch(`https://ipfs.io/ipfs/bafybeierbgjg36i4j43mikzyubmlzjyucmhonhenifymubls4orlqla5vu/${tokenId}`);
+    const res = await fetch(
+        `https://ipfs.io/ipfs/bafybeierbgjg36i4j43mikzyubmlzjyucmhonhenifymubls4orlqla5vu/${tokenId}`
+    );
     const data = await res.json();
+
     return data as PlayerMetadata;
 };
 
 export const usePlayerMetadata = (tokenId: string) => {
     return useSWR(tokenId, getPlayerMetadata);
-}
+};