From 6f6d443fc4bfeda12247292f439aa2a88ee6a662 Mon Sep 17 00:00:00 2001 From: Luc Date: Tue, 16 Apr 2024 10:45:21 +0000 Subject: [PATCH] Linting --- web/src/App.tsx | 60 ++++++--- web/src/connectwallet/ConnectWallet.tsx | 11 +- web/src/countdown/Countdown.tsx | 16 ++- web/src/index.tsx | 21 +-- web/src/playerlist/PlayerEntry.tsx | 20 +-- web/src/playerlist/PlayerList.tsx | 21 ++- web/src/playerlist/getPlayerMetadata.ts | 11 +- web/src/playerlist/getPlayers.ts | 167 ++++++++++++------------ web/src/utils/mitmipfs.ts | 4 +- web/src/walletinfo/WalletInfo.tsx | 49 ++++--- 10 files changed, 219 insertions(+), 161 deletions(-) diff --git a/web/src/App.tsx b/web/src/App.tsx index 3e3c91b..ceab22c 100644 --- a/web/src/App.tsx +++ b/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 (
-

- Will is going to win, but will you? -

+

Will is going to win, but will you?

The Concept

- 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.

Participate

- 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.

- 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!

Is this a rug pull?

-

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.

-

View the source code of the contract.

+

+ 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. +

+

+ View the{' '} + + source code of the contract + + . +

Countdown

-

Once the vote starts, you no longer will be able to delgate your vote!

- +

+ Once the vote starts, you no longer will be able to + delgate your vote! +

+ {!isConnected && } {isConnected && } {isConnected && } @@ -42,4 +64,4 @@ export const App = () => {
); -} +}; diff --git a/web/src/connectwallet/ConnectWallet.tsx b/web/src/connectwallet/ConnectWallet.tsx index 6e003d1..14ffe99 100644 --- a/web/src/connectwallet/ConnectWallet.tsx +++ b/web/src/connectwallet/ConnectWallet.tsx @@ -1,13 +1,18 @@ import { useModal } from 'connectkit'; export const ConnectWallet = () => { - const {setOpen} = useModal(); + const { setOpen } = useModal(); return (
-
- ) + ); }; diff --git a/web/src/countdown/Countdown.tsx b/web/src/countdown/Countdown.tsx index 930d98a..be2ae10 100644 --- a/web/src/countdown/Countdown.tsx +++ b/web/src/countdown/Countdown.tsx @@ -1,11 +1,11 @@ -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(() => { @@ -13,12 +13,14 @@ export const Countdown: FC<{ to: Date }> = ({ to }) => { }, 1000); return () => clearInterval(interval); - } - , []); + }, []); return (
-
+
{hoursLeft.toString().padStart(2, '0')} : {minutesLeft.toString().padStart(2, '0')} @@ -26,5 +28,5 @@ export const Countdown: FC<{ to: Date }> = ({ to }) => { {secondsLeft.toString().padStart(2, '0')}
- ) + ); }; diff --git a/web/src/index.tsx b/web/src/index.tsx index 7865102..006abb5 100644 --- a/web/src/index.tsx +++ b/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 () { diff --git a/web/src/playerlist/PlayerEntry.tsx b/web/src/playerlist/PlayerEntry.tsx index a4bd1da..46b51a1 100644 --- a/web/src/playerlist/PlayerEntry.tsx +++ b/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,14 +11,17 @@ export const PlayerEntry: FC<{ tokenId: string }> = ({ tokenId }) => { {data ? (
- {data.name} + {data.name}
+ {/*
) : (
@@ -25,5 +29,5 @@ export const PlayerEntry: FC<{ tokenId: string }> = ({ tokenId }) => {
)}
- ) + ); }; diff --git a/web/src/playerlist/PlayerList.tsx b/web/src/playerlist/PlayerList.tsx index cb6c5d4..0fc0d89 100644 --- a/web/src/playerlist/PlayerList.tsx +++ b/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 = () => { <>

Your Players

- { - data && data.ownedNfts.map((player) => ) - } - { - data && data.ownedNfts.length === 0 &&

No players found

- } + {data && + data.ownedNfts.map((player) => ( + + ))} + {data && data.ownedNfts.length === 0 &&

No players found

}
- ) + ); }; diff --git a/web/src/playerlist/getPlayerMetadata.ts b/web/src/playerlist/getPlayerMetadata.ts index 3572ebf..54a107c 100644 --- a/web/src/playerlist/getPlayerMetadata.ts +++ b/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); -} +}; diff --git a/web/src/playerlist/getPlayers.ts b/web/src/playerlist/getPlayers.ts index dc1e927..dcaf6e7 100644 --- a/web/src/playerlist/getPlayers.ts +++ b/web/src/playerlist/getPlayers.ts @@ -1,100 +1,101 @@ -import useSWR from "swr"; +import useSWR from 'swr'; -const CTG_CONTRACT = 0x4dfc7ea5ac59b63223930c134796fecc4258d093; +const CTG_CONTRACT = 0x4D_FC_7E_A5_AC_59_B6_32_23_93_0C_13_47_96_FE_CC_42_58_D0_93; type AlchemyPlayerResult = { - "contract": { - "address": "0x4DfC7EA5aC59B63223930C134796fecC4258d093", - "name": "Crypto: The Game S2", - "symbol": "CTGS2", - "totalSupply": "800", - "tokenType": "ERC721", - "contractDeployer": null, - "deployedBlockNumber": null, - "openSeaMetadata": { - "floorPrice": null, - "collectionName": null, - "collectionSlug": null, - "safelistRequestStatus": null, - "imageUrl": null, - "description": null, - "externalUrl": null, - "twitterUsername": null, - "discordUrl": null, - "bannerImageUrl": null, - "lastIngestedAt": null - }, - "isSpam": null, - "spamClassifications": [] - }, - "tokenId": "65", - "tokenType": "ERC721", - "name": "Crypto: The Game S2 – Green Tribe", - "description": "This NFT assigns its holder to the Green Tribe for the second season of Crypto: The Game.", - "tokenUri": "https://ipfs.io/ipfs/bafybeierbgjg36i4j43mikzyubmlzjyucmhonhenifymubls4orlqla5vu/65", - "image": { - "cachedUrl": "https://nft-cdn.alchemy.com/base-mainnet/8e352035ad49b005657da6a3d21ede98", - "thumbnailUrl": "https://res.cloudinary.com/alchemyapi/image/upload/thumbnailv2/base-mainnet/8e352035ad49b005657da6a3d21ede98", - "pngUrl": "https://res.cloudinary.com/alchemyapi/image/upload/convert-png/base-mainnet/8e352035ad49b005657da6a3d21ede98", - "contentType": "image/png", - "size": 602571, - "originalUrl": "https://ipfs.io/ipfs/QmXsnwdrubNNwpEZzN722Fxxmf5NpvV12CsVjhxAE5cSGu/Final%20NFT%20Green.png" - }, - "raw": { - "tokenUri": "ipfs://bafybeierbgjg36i4j43mikzyubmlzjyucmhonhenifymubls4orlqla5vu/65", - "metadata": { - "image": "ipfs://QmXsnwdrubNNwpEZzN722Fxxmf5NpvV12CsVjhxAE5cSGu/Final%20NFT%20Green.png", - "external_url": "https://cryptothegame.com", - "animation_url": "ipfs://QmXsnwdrubNNwpEZzN722Fxxmf5NpvV12CsVjhxAE5cSGu/Final%20NFT%20Green.mp4", - "name": "Crypto: The Game S2 – Green Tribe", - "description": "This NFT assigns its holder to the Green Tribe for the second season of Crypto: The Game.", - "base_index": 35, - "properties": { - "Season": "2", - "Tribe": "Green" - } - }, - "error": null - }, - "collection": null, - "mint": { - "mintAddress": null, - "blockNumber": null, - "timestamp": null, - "transactionHash": null - }, - "owners": null, - "timeLastUpdated": "2024-04-16T03:12:17.883Z", - "balance": "1", - "acquiredAt": { - "blockTimestamp": null, - "blockNumber": null - } + contract: { + address: '0x4DfC7EA5aC59B63223930C134796fecC4258d093'; + name: 'Crypto: The Game S2'; + symbol: 'CTGS2'; + totalSupply: '800'; + tokenType: 'ERC721'; + contractDeployer: null; + deployedBlockNumber: null; + openSeaMetadata: { + floorPrice: null; + collectionName: null; + collectionSlug: null; + safelistRequestStatus: null; + imageUrl: null; + description: null; + externalUrl: null; + twitterUsername: null; + discordUrl: null; + bannerImageUrl: null; + lastIngestedAt: null; + }; + isSpam: null; + spamClassifications: []; + }; + tokenId: '65'; + tokenType: 'ERC721'; + name: 'Crypto: The Game S2 – Green Tribe'; + description: 'This NFT assigns its holder to the Green Tribe for the second season of Crypto: The Game.'; + tokenUri: 'https://ipfs.io/ipfs/bafybeierbgjg36i4j43mikzyubmlzjyucmhonhenifymubls4orlqla5vu/65'; + image: { + cachedUrl: 'https://nft-cdn.alchemy.com/base-mainnet/8e352035ad49b005657da6a3d21ede98'; + thumbnailUrl: 'https://res.cloudinary.com/alchemyapi/image/upload/thumbnailv2/base-mainnet/8e352035ad49b005657da6a3d21ede98'; + pngUrl: 'https://res.cloudinary.com/alchemyapi/image/upload/convert-png/base-mainnet/8e352035ad49b005657da6a3d21ede98'; + contentType: 'image/png'; + size: 602_571; + originalUrl: 'https://ipfs.io/ipfs/QmXsnwdrubNNwpEZzN722Fxxmf5NpvV12CsVjhxAE5cSGu/Final%20NFT%20Green.png'; + }; + raw: { + tokenUri: 'ipfs://bafybeierbgjg36i4j43mikzyubmlzjyucmhonhenifymubls4orlqla5vu/65'; + metadata: { + image: 'ipfs://QmXsnwdrubNNwpEZzN722Fxxmf5NpvV12CsVjhxAE5cSGu/Final%20NFT%20Green.png'; + external_url: 'https://cryptothegame.com'; + animation_url: 'ipfs://QmXsnwdrubNNwpEZzN722Fxxmf5NpvV12CsVjhxAE5cSGu/Final%20NFT%20Green.mp4'; + name: 'Crypto: The Game S2 – Green Tribe'; + description: 'This NFT assigns its holder to the Green Tribe for the second season of Crypto: The Game.'; + base_index: 35; + properties: { + Season: '2'; + Tribe: 'Green'; + }; + }; + error: null; + }; + collection: null; + mint: { + mintAddress: null; + blockNumber: null; + timestamp: null; + transactionHash: null; + }; + owners: null; + timeLastUpdated: '2024-04-16T03:12:17.883Z'; + balance: '1'; + acquiredAt: { + blockTimestamp: null; + blockNumber: null; + }; }; type AlchemyResultType = { - "ownedNfts": AlchemyPlayerResult[], - "totalCount": 1, - "validAt": { - "blockNumber": 13232863, - "blockHash": "0xdbe5c06d45f6c9f05800fc60dd40383fd68754ff7f18b128e6e5e98ee92bd8df", - "blockTimestamp": "2024-04-16T08:11:13Z" - }, - "pageKey": null + ownedNfts: AlchemyPlayerResult[]; + totalCount: 1; + validAt: { + blockNumber: 13_232_863; + blockHash: '0xdbe5c06d45f6c9f05800fc60dd40383fd68754ff7f18b128e6e5e98ee92bd8df'; + blockTimestamp: '2024-04-16T08:11:13Z'; + }; + pageKey: null; }; -const ctg_contract = "0x4dfc7ea5ac59b63223930c134796fecc4258d093"; +const ctg_contract = '0x4dfc7ea5ac59b63223930c134796fecc4258d093'; -const ALCHEMY_API = "fY_TK6shxxy4KXzHL3IDzh_p8QKDpGyL"; +const ALCHEMY_API = 'fY_TK6shxxy4KXzHL3IDzh_p8QKDpGyL'; export const getPlayers = async (owner: string) => { - const result = await fetch(`https://base-mainnet.g.alchemy.com/nft/v3/${ALCHEMY_API}/getNFTsForOwner?owner=${owner}&contractAddresses[]=${ctg_contract}&withMetadata=true&pageSize=100`, { - }); + const result = await fetch( + `https://base-mainnet.g.alchemy.com/nft/v3/${ALCHEMY_API}/getNFTsForOwner?owner=${owner}&contractAddresses[]=${ctg_contract}&withMetadata=true&pageSize=100`, + {} + ); return result.json() as any as AlchemyResultType; }; export const usePlayers = (owner: string) => { return useSWR(owner, () => getPlayers(owner)); -} - +}; diff --git a/web/src/utils/mitmipfs.ts b/web/src/utils/mitmipfs.ts index 6b359d3..de47158 100644 --- a/web/src/utils/mitmipfs.ts +++ b/web/src/utils/mitmipfs.ts @@ -1,4 +1,6 @@ export const mitmipfs = (url: string) => { - if (url.startsWith('ipfs://')) return url.replace('ipfs://', 'https://ipfs.io/ipfs/'); + if (url.startsWith('ipfs://')) + return url.replace('ipfs://', 'https://ipfs.io/ipfs/'); + return url; }; diff --git a/web/src/walletinfo/WalletInfo.tsx b/web/src/walletinfo/WalletInfo.tsx index 9e95a70..2749a1e 100644 --- a/web/src/walletinfo/WalletInfo.tsx +++ b/web/src/walletinfo/WalletInfo.tsx @@ -5,28 +5,45 @@ import { useAccount, useDisconnect } from 'wagmi'; export const WalletInfo = () => { const { address } = useAccount(); const { disconnect } = useDisconnect(); - const { data } = useProfile(address as string, { endpoint: 'https://enstate.rs', enabled: address !== undefined }); + const { data } = useProfile(address as string, { + endpoint: 'https://enstate.rs', + enabled: address !== undefined, + }); return (
- You are connected as {data ? ( - - { - data.avatar && - - - - } - {data.name} - - ) : formatAddress(address as string)} + You are connected as{' '} + + {data ? ( + + {data.avatar && ( + + {data.name} + + )} + {data.name} + + ) : ( + formatAddress(address as string) + )} + -
- ) + ); };