Skip to content

Commit

Permalink
move-deploy-form-on-page
Browse files Browse the repository at this point in the history
  • Loading branch information
@MananTank
MananTank committed Aug 4, 2024
1 parent ad619a7 commit a32b43f
Show file tree
Hide file tree
Showing 5 changed files with 192 additions and 222 deletions.
98 changes: 0 additions & 98 deletions apps/dashboard/src/components/contract-components/contract-deploy-form/drawer.tsx
View file

This file was deleted.

262 changes: 159 additions & 103 deletions apps/dashboard/src/components/pages/publish.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,26 +9,33 @@ import {
SimpleGrid,
Skeleton,
} from "@chakra-ui/react";
import { DeployFormDrawer } from "components/contract-components/contract-deploy-form/drawer";
import { useAllVersions, useEns } from "components/contract-components/hooks";
import { PublishedContract } from "components/contract-components/published-contract";
import { useTrack } from "hooks/analytics/useTrack";
import { replaceIpfsUrl } from "lib/sdk";
import { ChevronsRightIcon, ExternalLinkIcon } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/router";
import { useMemo } from "react";
import { FiChevronLeft, FiImage } from "react-icons/fi";
import { Heading, Link, Text, TrackedIconButton } from "tw-components";
import { Heading, Text, TrackedIconButton } from "tw-components";
import { Spinner } from "../../@/components/ui/Spinner/Spinner";
import { Button } from "../../@/components/ui/button";
import { ContractDeployForm } from "../contract-components/contract-deploy-form";
import { ShareButton } from "../share-buttom";

export interface PublishWithVersionPageProps {
author: string;
contractName: string;
version: string;
isDeploy: boolean;
}

export const PublishWithVersionPage: React.FC<PublishWithVersionPageProps> = ({
author,
contractName,
version,
isDeploy,
}) => {
const trackEvent = useTrack();
const ensQuery = useEns(author);
Expand All @@ -53,113 +60,162 @@ export const PublishWithVersionPage: React.FC<PublishWithVersionPageProps> = ({
);

const availableVersions = allVersions.data?.map(({ version: v }) => v) || [];
const contractNameDisplay =
publishedContract?.displayName || publishedContract?.name;

return (
<Flex direction="column" gap={{ base: 6, md: 10 }}>
<SimpleGrid
mt={-8}
py={{ base: 4, md: 8 }}
position="sticky"
top={0}
columns={12}
gap={{ base: 6, md: 10 }}
w="full"
backdropFilter="blur(4px)"
zIndex={1}
_after={{
content: '""',
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: -1,
opacity: 0.8,
bg: "linear-gradient(180deg, var(--chakra-colors-backgroundBody) 50%, transparent 100%)",
}}
>
<GridItem colSpan={{ base: 12, md: 8 }}>
<Flex gap={4} alignItems="center">
<TrackedIconButton
variant="ghost"
as={Link}
// always send back to explore page
href="/explore"
icon={<Icon boxSize="66%" as={FiChevronLeft} />}
category="release"
label="back_button"
aria-label="Back"
const header = (
<SimpleGrid
mt={-8}
py={{ base: 4, md: 8 }}
position="sticky"
top={0}
columns={12}
gap={{ base: 6, md: 10 }}
w="full"
zIndex={1}
_after={{
content: '""',
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: -1,
opacity: 0.8,
bg: "linear-gradient(180deg, var(--chakra-colors-backgroundBody) 50%, transparent 100%)",
}}
>
<GridItem colSpan={{ base: 12, md: 8 }}>
<Flex gap={4} alignItems="center">
<TrackedIconButton
variant="ghost"
as={Link}
// always send back to explore page
href="/explore"
icon={<Icon boxSize="66%" as={FiChevronLeft} />}
category="release"
label="back_button"
aria-label="Back"
/>

{publishedContract?.logo ? (
<Image
flexShrink={0}
alt={publishedContract.name}
borderRadius="full"
src={replaceIpfsUrl(publishedContract.logo)}
boxSize={14}
/>
) : (
<Center
flexShrink={0}
boxSize={14}
borderRadius="full"
borderWidth="1px"
borderColor="borderColor"
>
<Icon boxSize="50%" as={FiImage} color="accent.300" />
</Center>
)}

{publishedContract?.logo ? (
<Image
flexShrink={0}
alt={publishedContract.name}
borderRadius="full"
src={replaceIpfsUrl(publishedContract.logo)}
boxSize={14}
/>
) : (
<Center
flexShrink={0}
boxSize={14}
borderRadius="full"
borderWidth="1px"
borderColor="borderColor"
>
<Icon boxSize="50%" as={FiImage} color="accent.300" />
</Center>
)}

<Skeleton isLoaded={allVersions.isSuccess}>
<Flex direction="column" gap={2}>
<Heading as="h1" size="title.md">
{publishedContract?.displayName || publishedContract?.name}
</Heading>
<Text as="h2" noOfLines={2}>
{publishedContract?.description}
</Text>
</Flex>
</Skeleton>
</Flex>
</GridItem>
<GridItem colSpan={{ base: 12, md: 4 }}>
<Flex gap={3}>
<Select
onChange={(e) => {
const val = e.target.value;
if (availableVersions.includes(val)) {
trackEvent({
category: "release-selector",
action: "click",
version_selected: val,
});
const pathName =
val === allVersions.data?.[0].version
? `/${author}/${contractName}`
: `/${author}/${contractName}/${val}`;
<Skeleton isLoaded={allVersions.isSuccess}>
<Flex direction="column" gap={2}>
<Heading as="h1" size="title.md">
{contractNameDisplay}
</Heading>
<Text as="h2" noOfLines={2}>
{publishedContract?.description}
</Text>
</Flex>
</Skeleton>
</Flex>
</GridItem>
<GridItem colSpan={{ base: 12, md: 4 }}>
<Flex gap={3}>
<Select
onChange={(e) => {
const val = e.target.value;
if (availableVersions.includes(val)) {
trackEvent({
category: "release-selector",
action: "click",
version_selected: val,
});

const pathName =
val === allVersions.data?.[0].version
? `/${author}/${contractName}`
: `/${author}/${contractName}/${val}`;

if (isDeploy) {
router.push(`${pathName}/deploy`);
} else {
router.push(pathName);
}
}}
value={version}
>
{availableVersions.map((v, idx) => (
<option key={v} value={v}>
{v}
{idx === 0 ? " (latest)" : ""}
</option>
))}
</Select>
{deployContractId && (
<DeployFormDrawer
contractId={deployContractId}
version={publishedContract?.version || "latest"}
/>
)}
</Flex>
</GridItem>
</SimpleGrid>
}
}}
value={version}
>
{availableVersions.map((v, idx) => (
<option key={v} value={v}>
{v}
{idx === 0 ? " (latest)" : ""}
</option>
))}
</Select>
{isDeploy ? (
<>
<Button asChild variant="outline" className="gap-2">
<Link href={`${router.asPath.replace("/deploy", "")}`}>
Contract Details
<ExternalLinkIcon className="size-4" />
</Link>
</Button>

<ShareButton title={`Deploy ${contractNameDisplay}`} />
</>
) : (
<>
{deployContractId && (
<Button asChild variant="primary" className="gap-2">
<Link href={`${router.asPath}/deploy`}>
Deploy Now
<ChevronsRightIcon className="size-4" />
</Link>
</Button>
)}
</>
)}
</Flex>
</GridItem>
</SimpleGrid>
);

if (isDeploy) {
if (!deployContractId || !publishedContract) {
return (
<div className="h-[400px] flex items-center justify-center">
<Spinner className="size-4" />
</div>
);
}

return (
<div>
<div className="border-b border-border">{header}</div>
<div className="flex gap-6 pt-4">
<ContractDeployForm
contractId={deployContractId}
version={publishedContract.version || "latest"}
/>
</div>
</div>
);
}

return (
<Flex direction="column" gap={{ base: 6, md: 10 }}>
{header}
<SimpleGrid columns={12} gap={{ base: 6, md: 10 }} w="full">
<GridItem colSpan={12} display={{ base: "inherit", md: "none" }}>
<Divider />
Expand Down
Loading

0 comments on commit a32b43f

Please sign in to comment.