Skip to content

Commit

Permalink
feat: list and mint a token
Browse files Browse the repository at this point in the history
  • Loading branch information
lumaivzqz-rs committed Aug 29, 2024
1 parent e928345 commit 6366772
Show file tree
Hide file tree
Showing 14 changed files with 1,524 additions and 6 deletions.
69 changes: 69 additions & 0 deletions app/my-tokens/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
'use client'

import ConnectedWallet from "@/components/connectedWallet";
import Footer from "@/components/footer";
import Navbar from "@/components/navbar";
import ConnectWalletButton from "@/components/ui/connectWalletButton";
import { useAuth } from "@/context/AuthContext";
import DeployToken from "@/components/deployToken";
import { Button } from "@/components/ui/button";
import { useRouter } from "next/navigation";
import { ROUTER } from "@/constants";
import ListTokens from "@/components/listTokens";

export default function TokenLaunch() {
const { isLoggedIn } = useAuth();

const router = useRouter()

return (
<main className="h-full w-full flex flex-col">
<Navbar />
<section className="w-full px-6 xl:px-0 md:w-[1000px] xl:w-[1300px] m-auto mt-4">
<div className="flex justify-between flex-row">
<h1 className="md:text-6xl xl:text-[78px] relative z-10 font-bold text-black flex flex-col gap-2.5">
<span className="max-w-max px-1.5 bg-white">Meme Token Launch</span>
<span className="flex gap-2">
<span className="bg-custom-green px-1.5 w-max xl:text-5xl">
Memes
</span>
<span className="bg-title px-1.5 w-max xl:text-5xl">
on Rootstock
</span>
</span>
</h1>
{isLoggedIn ?
(
<div className="flex items-center gap-4">
<ConnectedWallet />
</div>
) :
(
<div className="flex items-center gap-4">
<ConnectWalletButton />
</div>
)
}
</div>

<div className="mt-10 w-full flex flex-col justify-center gap-4">
<div className="flex items-end justify-between flex-row gap-6">
<h1 className="text-2xl font-bold">Your tokens</h1>
<Button
className="bg-white text-2xl text-black before:w-full active:bg-slate-400"
type="submit"
variant={'outline'}
onClick={() => router.push(ROUTER.DEPLOY_TOKEN)}>
Deploy a new token
</Button>
</div>
<div className="mt-8">
<ListTokens />
</div>
</div>

</section>
<Footer />
</main>
);
}
3 changes: 2 additions & 1 deletion app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import Footer from "@/components/footer";
import Navbar from "@/components/navbar";
import ConnectWalletButton from "@/components/ui/connectWalletButton";
import { ROUTER } from "@/constants";

export default function Home() {
return (
Expand Down Expand Up @@ -30,7 +31,7 @@ export default function Home() {
Go to the app
</h1>
<div className="flex items-center">
<ConnectWalletButton className="mt-3" />
<ConnectWalletButton className="mt-3" route={ROUTER.MY_TOKENS}/>
</div>
</div>

Expand Down
14 changes: 12 additions & 2 deletions components/deployToken/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@ import { useEffect, useState } from "react";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
import DeployERC20TokenButton from "@/components/ui/deployERC20TokenButton";
import { DEPLOY_STRATEGY, DEPLOY_STRATEGY_ENUM } from "@/constants";
import { DEPLOY_STRATEGY, DEPLOY_STRATEGY_ENUM, ROUTER } from "@/constants";
import { useAuth } from "@/context/AuthContext";
import ConnectWalletButton from "@/components/ui/connectWalletButton";
import { HelpCircleIcon } from "@/components/icons";
import ArrowLeftIcon from "../icons/ArrowLeftIcon";
import { useRouter } from "next/navigation";

const DeployToken: React.FC = () => {
const { isLoggedIn } = useAuth();
Expand All @@ -20,6 +22,8 @@ const DeployToken: React.FC = () => {
strategy: DEPLOY_STRATEGY_ENUM.DEFLATIONARY,
});

const router = useRouter();

const [isFormCompleted, setIsFormCompleted] = useState(false)

const hasEmptyField = () => {
Expand Down Expand Up @@ -47,7 +51,13 @@ const DeployToken: React.FC = () => {
return (
<Card>
<CardHeader>
<CardTitle>Deploy</CardTitle>
<CardTitle className="flex flex-row justify-between items-center">
<div>Deploy</div>
<div className="cursor-pointer flex flex-row text-custom-green text-lg items-center gap-1" onClick={() => { router.push(ROUTER.MY_TOKENS) }}>
<ArrowLeftIcon className="w-4 h-4" />
Go back to my tokens
</div>
</CardTitle>
<CardDescription>Deploy your meme token on Rootstock!</CardDescription>
</CardHeader>
<CardContent>
Expand Down
14 changes: 14 additions & 0 deletions components/icons/ArrowLeftIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from 'react'

function ArrowLeftIcon({ className }: { className?: string }) {
return (
<svg version="1.1" fill="currentColor" viewBox="0 0 14 14" className={className}>
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M4.71829 11.8178L0.218728 7.93434C0.0624934 7.80659 -4.90485e-07 7.6533 -4.71954e-07 7.5C-4.53423e-07 7.3467 0.0624935 7.19341 0.218728 7.06566L4.71829 3.18217C4.99951 2.95222 5.46822 2.92667 5.74944 3.18217C6.06191 3.41211 6.09316 3.79535 5.78069 4.05084L1.78108 7.5L5.78069 10.9492C6.09316 11.2047 6.06191 11.5879 5.74944 11.8178C5.46822 12.0733 4.99951 12.0478 4.71829 11.8178Z"></path>
<path d="M8.71829 11.8178L4.21873 7.93434C4.06249 7.80659 4 7.6533 4 7.5C4 7.3467 4.06249 7.19341 4.21873 7.06566L8.71829 3.18217C8.99951 2.95222 9.46822 2.92667 9.74944 3.18217C10.0619 3.41211 10.0932 3.79535 9.78069 4.05084L5.78108 7.5L9.78069 10.9492C10.0932 11.2047 10.0619 11.5879 9.74944 11.8178C9.46822 12.0733 8.99951 12.0478 8.71829 11.8178Z"></path>
</svg>
</svg>
)
}

export default ArrowLeftIcon
104 changes: 104 additions & 0 deletions components/listTokens/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
'use client'

import { useState } from "react";
import { Tooltip, TooltipTrigger } from "@/components/ui/tooltip"
import { useAuth } from "@/context/AuthContext";
import { CheckCircleIcon, CopyIcon, } from "@/components/icons";
import { copyToClipboard, formatAddress } from "@/lib/utils";
import MintTokenButton from "../ui/mintTokenButton";
import { DEPLOY_STRATEGY_ENUM } from "@/constants";

interface Token {
name: string
symbol: string
address: string
strategy: DEPLOY_STRATEGY_ENUM
}

const ListTokens: React.FC = () => {
const { isLoggedIn, env } = useAuth();

const [copiedAddresses, setCopiedAddresses] = useState<Record<string, boolean>>({});

const handleCopyToClipboard = (address: string) => {
copyToClipboard(address).then(() => {
setCopiedAddresses((prevState) => ({
...prevState,
[address]: true,
}));

setTimeout(() => {
setCopiedAddresses((prevState) => ({
...prevState,
[address]: false,
}));
}, 1000);
});
};

const tokens: Token[] = [
{ name: "Token One", symbol: "TK1", address: "0xfa4DD4F1c077C1979640474B874408D4FEee508a", strategy: DEPLOY_STRATEGY_ENUM.DEFLATIONARY },
{ name: "Token Two", symbol: "TK2", address: "0x303Fe7E52012DBF5970cDa98551A3a328146C3e0", strategy: DEPLOY_STRATEGY_ENUM.INFLATIONARY },
];

return (
<table className="min-w-full bg-background border-b border-border rounded-lg shadow-md">
<thead className="bg-border">
<tr>
<th className="py-3 px-4 text-left font-semibold">Name</th>
<th className="py-3 px-4 text-center font-semibold">Symbol</th>
<th className="py-3 px-4 text-center font-semibold">Address</th>
<th className="py-3 px-4 text-center font-semibold">Strategy</th>
<th className="py-3 px-4 text-center font-semibold">Action</th>
</tr>
</thead>
<tbody>
{tokens.map((token, index) => (
<tr key={index} className="border-b hover:bg-card hover:text-custom-pink transition-colors">
<td className="py-3 px-4">{token.name}</td>
<td className="py-3 px-4 text-center">{token.symbol}</td>
<td className="py-3 px-4 my-3 flex justify-center items-center gap-3">
<a
href={env.EXPLORER_ADDRESS_BASE_URL + token.address}
target="_blank"
rel="noopener noreferrer"
className="font-semibold"
>
{formatAddress(token.address!)}
</a>
<Tooltip >
<TooltipTrigger>
{copiedAddresses[token.address] ? (
<CheckCircleIcon
onClick={() => {
handleCopyToClipboard(token.address!);
}}
className="w-5 h-5 text-green-500"
></CheckCircleIcon>
) : (
<CopyIcon
onClick={() => {
handleCopyToClipboard(token.address)
}}
className="w-5 h-5 hover:text-white cursor-pointer"
/>
)}
</TooltipTrigger>
</Tooltip>
</td>
<td className=" text-center">
<div className={(token.strategy == DEPLOY_STRATEGY_ENUM.DEFLATIONARY ? "bg-custom-cyan" : "bg-custom-orange") + " font-bold text-background py-1 rounded-full"}>
{token.strategy}
</div>
</td>
<td className="py-3 px-4 items-center text-center">
<MintTokenButton disabled={!isLoggedIn} address={token.address} strategy={token.strategy} />
</td>
</tr>
))}
</tbody>
</table>
);
}

export default ListTokens;
4 changes: 3 additions & 1 deletion components/ui/connectWalletButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,15 @@ import { cn } from '@/lib/utils'
type Props = {
title?: string
className?: string
route?: string
}

const variants = cva(
"bg-white text-2xl text-black before:w-full active:bg-slate-400",
);


const ConnectWalletButton = ({ title = 'Connect wallet', className }: Props) => {
const ConnectWalletButton = ({ title = 'Connect wallet', className, route }: Props) => {
const [dialog, setDialog] = useState<boolean>(false)

return (
Expand All @@ -27,6 +28,7 @@ const ConnectWalletButton = ({ title = 'Connect wallet', className }: Props) =>
<ConnectWalletDialog
closeDialog={() => setDialog(false)}
open={dialog}
route={route}
/>
)}
<Button
Expand Down
7 changes: 5 additions & 2 deletions components/ui/dialog/connectWalletDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,10 @@ import { ROUTER } from '@/constants'
type props = {
closeDialog: Function
open: boolean
route?: string
}

function ConnectWalletDialog({ closeDialog, open }: props) {
function ConnectWalletDialog({ closeDialog, open, route }: props) {
const { login, provider, isError, setIsError } = useConnectWallet()
const { isLoggedIn, login: authLogin } = useAuth()

Expand All @@ -22,7 +23,9 @@ function ConnectWalletDialog({ closeDialog, open }: props) {
init()
if (isLoggedIn) {
authLogin(provider!)
router.push(ROUTER.DEPLOY_TOKEN)
if(route) {
router.push(route)
}
closeDialog()
setIsError(false)
}
Expand Down
Loading

0 comments on commit 6366772

Please sign in to comment.