Skip to content

Commit

Permalink
Update
Browse files Browse the repository at this point in the history
  • Loading branch information
@kien-ngo
kien-ngo committed Sep 30, 2024
1 parent 8b68172 commit 9c1d319
Show file tree
Hide file tree
Showing 10 changed files with 171 additions and 210 deletions.
14 changes: 6 additions & 8 deletions apps/dashboard/src/components/hackathon/EarnReasonSection.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Container, Flex, List, ListItem } from "@chakra-ui/react";
import { Container, Flex } from "@chakra-ui/react";
import { Heading, Text } from "tw-components";

const EarnReasonSection = () => {
Expand Down Expand Up @@ -33,13 +33,11 @@ const EarnReasonSection = () => {
</Text>

<Flex fontSize={{ base: "18px", md: "20px" }}>
<List color="white" styleType="none" spacing={3}>
<ListItem>Connect with fellow creators</ListItem>
<ListItem>Gain insights from industry leaders</ListItem>
<ListItem>
Influence the web3 gaming future at the Pre-GDC Hackathon
</ListItem>
</List>
<ul className="space-y-3">
<li>Connect with fellow creators</li>
<li>Gain insights from industry leaders</li>
<li>Influence the web3 gaming future at the Pre-GDC Hackathon</li>
</ul>
</Flex>
</Flex>
</Container>
Expand Down
23 changes: 21 additions & 2 deletions apps/dashboard/src/contract-ui/tabs/listings/components/list-form.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Alert, AlertTitle } from "@/components/ui/alert";
import { Card } from "@/components/ui/card";
import { useDashboardEVMChainId, useEVMContractInfo } from "@3rdweb-sdk/react";
import { useDashboardOwnedNFTs } from "@3rdweb-sdk/react/hooks/useDashboardOwnedNFTs";
import { useWalletNFTs } from "@3rdweb-sdk/react/hooks/useWalletNFTs";
Expand Down Expand Up @@ -58,7 +59,7 @@ import {
Text,
} from "tw-components";
import { NFTMediaWithEmptyState } from "tw-components/nft-media";
import { ListLabel } from "./list-label";
import { shortenIfAddress } from "utils/usedapp-external";

type ListForm =
| (Omit<CreateListingParams, "quantity" | "currencyContractAddress"> & {
Expand Down Expand Up @@ -428,7 +429,25 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
shouldWrapChildren
placement="left-end"
key={nft.contractAddress + nft.id}
label={<ListLabel nft={nft} />}
label={
<Card className="p-4">
<ul>
<li>
<strong>Name:</strong> {nft.metadata?.name || "N/A"}
</li>
<li>
<strong>Contract Address:</strong>{" "}
{shortenIfAddress(nft.contractAddress)}
</li>
<li>
<strong>Token ID: </strong> {nft.id.toString()}
</li>
<li>
<strong>Token Standard: </strong> {nft.type}
</li>
</ul>
</Card>
}
>
<Box
borderRadius="lg"
Expand Down
32 changes: 0 additions & 32 deletions apps/dashboard/src/contract-ui/tabs/listings/components/list-label.tsx
View file

This file was deleted.

27 changes: 12 additions & 15 deletions apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-upload.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
Icon,
IconButton,
Link,
ListItem,
Portal,
Select,
Table,
Expand All @@ -18,13 +17,12 @@ import {
Thead,
Tooltip,
Tr,
UnorderedList,
} from "@chakra-ui/react";
import { Logo } from "components/logo";
import { UploadIcon } from "lucide-react";
import Papa from "papaparse";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { type DropzoneOptions, useDropzone } from "react-dropzone";
import { BsFillCloudUploadFill } from "react-icons/bs";
import { IoAlertCircleOutline } from "react-icons/io5";
import {
MdFirstPage,
Expand Down Expand Up @@ -213,12 +211,11 @@ export const AirdropUpload: React.FC<AirdropUploadProps> = ({
>
<input {...getInputProps()} />
<div className="flex flex-col p-6">
<Icon
as={BsFillCloudUploadFill}
boxSize={8}
mb={2}
color={noCsv ? "red.500" : "gray.600"}
my="auto"
<UploadIcon
size={16}
className={cn("mx-auto mb-2 text-gray-500", {
"text-red-500": noCsv,
})}
/>
{isDragActive ? (
<Heading as={Text} size="label.md">
Expand All @@ -240,20 +237,20 @@ export const AirdropUpload: React.FC<AirdropUploadProps> = ({
</div>
<div className="flex flex-row gap-2">
<Heading size="subtitle.sm">Requirements</Heading>
<UnorderedList>
<ListItem>
<ul className="list-disc pl-3">
<li>
Files <em>must</em> contain one .csv file with an address
and quantity column, if the quantity column is not
provided, it will default to 1 NFT per wallet. -{" "}
<Link download color="primary.500" href="/airdrop.csv">
Download an example CSV
</Link>
</ListItem>
<ListItem>
</li>
<li>
Repeated addresses will be removed and only the first
found will be kept.
</ListItem>
</UnorderedList>
</li>
</ul>
</div>
</Flex>
</Container>
Expand Down
18 changes: 8 additions & 10 deletions apps/dashboard/src/contract-ui/tabs/tokens/components/airdrop-upload-erc20.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { useThirdwebClient } from "@/constants/thirdweb.client";
import {
IconButton,
Link,
ListItem,
Portal,
Select,
Table,
Expand All @@ -12,7 +11,6 @@ import {
Th,
Thead,
Tr,
UnorderedList,
} from "@chakra-ui/react";
import { useQueries } from "@tanstack/react-query";
import {
Expand Down Expand Up @@ -224,7 +222,7 @@ export const AirdropUploadERC20: React.FC<AirdropUploadProps> = ({
<div className="relative aspect-[21/9] w-full">
<div
className={cn(
"flex cursor-pointer items-center justify-center rounded-md border border-border hover:border-primary",
"flex h-full cursor-pointer items-center justify-center rounded-md border border-border hover:border-primary",
noCsv ? "bg-red-200" : "bg-card",
)}
{...getRootProps()}
Expand All @@ -233,7 +231,7 @@ export const AirdropUploadERC20: React.FC<AirdropUploadProps> = ({
<div className="flex flex-col p-6">
<Upload
size={16}
className={cn("my-auto text-gray-500", {
className={cn("mx-auto mb-2 text-gray-500", {
"text-red-500": noCsv,
})}
/>
Expand All @@ -257,20 +255,20 @@ export const AirdropUploadERC20: React.FC<AirdropUploadProps> = ({
</div>
<div className="flex flex-col gap-2">
<Heading size="subtitle.sm">Requirements</Heading>
<UnorderedList>
<ListItem>
<ul className="list-disc pl-3">
<li>
Files <em>must</em> contain one .csv file with an address and
quantity column, if the quantity column is not provided, that
record will be flagged as invalid.
<Link download color="primary.500" href="/airdrop.csv">
Download an example CSV
</Link>
</ListItem>
<ListItem>
</li>
<li>
Repeated addresses will be removed and only the first found will
be kept.
</ListItem>
</UnorderedList>
</li>
</ul>
</div>
</div>
)}
Expand Down
60 changes: 29 additions & 31 deletions apps/dashboard/src/core-ui/batch-upload/upload-step.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,5 @@
import { cn } from "@/lib/utils";
import {
Code,
Container,
Flex,
Icon,
Link,
ListItem,
UnorderedList,
} from "@chakra-ui/react";
import { Code, Container, Flex, Icon, Link } from "@chakra-ui/react";
import { BsFillCloudUploadFill } from "react-icons/bs";
import { Heading, Text } from "tw-components";

Expand All @@ -33,22 +25,27 @@ export const UploadStep: React.FC<UploadStepProps> = ({
<div className="relative aspect-square w-full md:w-1/2">
<div
className={cn(
"h-full cursor-pointer rounded-md border border-border hover:border-blue-500",
"flex h-full cursor-pointer rounded-md border border-border hover:border-blue-500",
hasFailed ? "bg-red-200" : "bg-card",
)}
{...getRootProps()}
>
<input {...getInputProps()} />
<div className="flex flex-col p-6">
<div className="m-auto flex flex-col p-6">
<Icon
as={BsFillCloudUploadFill}
boxSize={8}
mb={2}
color={hasFailed ? "red.500" : "gray.600"}
my="auto"
mx="auto"
/>
{isDragActive ? (
<Heading as={Text} size="label.md" color="gray.600">
<Heading
as={Text}
size="label.md"
color="gray.600"
textAlign="center"
>
Drop the files here
</Heading>
) : (
Expand All @@ -57,6 +54,7 @@ export const UploadStep: React.FC<UploadStepProps> = ({
size="label.md"
lineHeight={1.2}
color={hasFailed ? "red.500" : "gray.600"}
textAlign="center"
>
{hasFailed
? `No valid CSV or JSON file found. Please make sure your NFT metadata includes at least a "name" field and try again.`
Expand All @@ -68,8 +66,8 @@ export const UploadStep: React.FC<UploadStepProps> = ({
</div>
<Flex gap={2} flexDir="column" w={{ base: "100%", md: "50%" }}>
<Heading size="subtitle.sm">Requirements</Heading>
<UnorderedList>
<ListItem>
<ul className="list-disc pl-[10px]">
<li>
Files <em>must</em> contain one .csv or .json file with
metadata. -{" "}
<Link download color="blue.500" href="/example.csv">
Expand All @@ -80,52 +78,52 @@ export const UploadStep: React.FC<UploadStepProps> = ({
Download example.json
</Link>
.
</ListItem>
<ListItem>
</li>
<li>
The csv <em>must</em> have a <Code>name</Code> column, which
defines the name of the NFT.
</ListItem>
<ListItem>
</li>
<li>
Asset names <em>must</em> be sequential 0,1,2,3...n.[extension].
It doesn&apos;t matter at what number you begin. (Example:{" "}
<Code>131.png</Code>, <Code>132.png</Code>).
</ListItem>
<ListItem>
</li>
<li>
Make sure to drag and drop the CSV/JSON and the images{" "}
<strong>at the same time</strong>.
</ListItem>
</UnorderedList>
</li>
</ul>
<Heading size="subtitle.sm" mt={4}>
Options
</Heading>
<UnorderedList>
<ListItem>
<ul className="list-disc pl-[10px]">
<li>
Images and other file types can be used in combination.
<br />
<small>
They both have to follow the asset naming convention above.
(Example: <Code>0.png</Code> and <Code>0.mp4</Code>,{" "}
<Code>1.png</Code> and <Code>1.glb</Code>, etc.)
</small>
</ListItem>
<ListItem>
</li>
<li>
When uploading files, we will upload them and pin them to IPFS
automatically for you. If you already have the files uploaded,
you can add an <Code>image</Code> and/or{" "}
<Code>animation_url</Code> column and add the IPFS hashes there.{" "}
<Link download color="blue.500" href="/example-with-ipfs.csv">
Download example.csv
</Link>
</ListItem>
<ListItem>
</li>
<li>
If you want to make your media files map to your NFTs, you can
add add the name of your files to the <Code>image</Code> and{" "}
<Code>animation_url</Code> column.{" "}
<Link download color="blue.500" href="/example-with-maps.csv">
Download example.csv
</Link>
</ListItem>
</UnorderedList>
</li>
</ul>
</Flex>
</Flex>
</Container>
Expand Down
Loading

0 comments on commit 9c1d319

Please sign in to comment.