Skip to content

Commit

Permalink
feat: launch modal
Browse files Browse the repository at this point in the history 
#62
  • Loading branch information
@pociej
pociej committed May 27, 2024
1 parent d97addc commit 8f9b1c1
Show file tree
Hide file tree
Showing 11 changed files with 256 additions and 96 deletions.
113 changes: 67 additions & 46 deletions frontend/src/components/approveForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,78 @@
import { config } from "config";
import { AnimatePresence, motion } from "framer-motion";
import { useApprove } from "hooks/GLM/useGLMApprove";
import { useUser } from "hooks/useUser";
import { Button, Card, Loading } from "react-daisyui";
import { formatEther } from "viem";
import { Button, Loading } from "react-daisyui";
import { formatEther, parseEther } from "viem";
import { LoadingSpinner } from "./loadingSpinner";
import { useBalance } from "hooks/useBalance";
import { useState } from "react";
import { formatBalance } from "utils/formatBalance";
import { number } from "ts-pattern/dist/patterns";
import { GolemCoinIcon } from "./atoms/golem.coin.icon";

const MotionButton = motion(Button);

export const ApproveForm = ({ isVisible }: { isVisible: boolean }) => {
export const ApproveForm = () => {
const { user } = useUser();
const { approve, isProcessing } = useApprove();

const { GLM } = useBalance();
const [amount, setAmount] = useState(Number(formatBalance(GLM)));
return (
<AnimatePresence>
{isVisible && (
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
<Card
style={{
borderColor: "#ffffff14",
fontFamily: "Kanit-Light",
backgroundColor: "#0000005b",
scale: "1.2",
<div>
In order to properly use the service you need to allow service <br /> to
spend your GLM tokens.
<div className="stats -pl-4 mt-2 w-full">
<div className="stat pl-0">
<div className="stat-title">Current</div>
<div className="stat-value flex">
<div className="leading-6">
{formatEther(user.allowanceAmount || 0n)}{" "}
</div>
<GolemCoinIcon className="ml-1 " />
</div>
</div>

<div className="stat">
<div className="stat-title">Minimal</div>
<div className="stat-value flex ">
<div className="leading-6">
{formatEther(config.minimalAllowance)}{" "}
</div>
<GolemCoinIcon className="ml-1" />
</div>
</div>
<div className="stat"></div>
<div className="stat">
{/* <div className="stat-actions m-0">
</div> */}
</div>
</div>
<div className="flex">
<label className="input input-bordered flex items-center gap-4 w-48">
<input
className="w-28"
type="number"
min={11}
autoFocus={true}
value={amount || ""}
onChange={(e) => {
setAmount(Number(e.target.value));
}}
>
<Card.Body>
<Card.Title tag="h2">Approve needed</Card.Title>
<Card.Body>
In order to properly use the service you need to allow service
to spend your GLM tokens. <hr />
Your current GLM allowance is{" "}
{formatEther(user.allowanceAmount || 0n)} GLM.
<hr />
Minimal allowance amount is{" "}
{formatEther(config.minimalAllowance)} GLM
</Card.Body>
/>{" "}
<GolemCoinIcon />
</label>

<Card.Actions className="justify-end">
<Button
onClick={() => {
approve();
}}
className="bg-primary !text-white border-none text-lg font-light "
style={{
backgroundColor: "#181ea9a6",
}}
>
{isProcessing ? <Loading variant="infinity" /> : "Approve"}
</Button>{" "}
</Card.Actions>
</Card.Body>
</Card>
</motion.div>
)}
</AnimatePresence>
<Button
onClick={() => {
approve(parseEther(amount.toString()));
}}
// disabled={isProcessing}
className="btn ml-4"
>
{isProcessing ? <Loading variant="infinity" /> : "Approve"}
</Button>
</div>
{/* {formatEther(user.allowanceAmount || 0n)} GLM. Minimal allowance amount is{" "}
{formatEther(config.minimalAllowance)} GLM */}
</div>
);
};
66 changes: 66 additions & 0 deletions frontend/src/components/atoms/golem.coin.icon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import { ComponentProps } from 'react'

export const GolemCoinIcon = (props: ComponentProps<'svg'>) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
{...props}
>
<g filter="url(#filter0_bi_1472_11883)">
<circle cx="12" cy="12" r="12" fill="#F6F8FC" />
<circle cx="12" cy="12" r="11.25" stroke="#181EA9" strokeWidth="1.5" />
</g>
<path
d="M14.5279 5.41992L13.1929 6.78895C12.7402 6.45808 12.1871 6.26194 11.5896 6.26194C10.0626 6.26194 8.81934 7.53686 8.81934 9.105C8.81934 10.5107 9.81935 11.6816 11.1273 11.9075V12.9357C9.81935 13.1616 8.81934 14.3325 8.81934 15.7382C8.81934 17.3053 10.0616 18.5812 11.5896 18.5812C13.1176 18.5812 14.3599 17.3063 14.3599 15.7382C14.3599 14.3325 13.3599 13.1616 12.052 12.9357V11.9075C13.3599 11.6816 14.3599 10.5107 14.3599 9.105C14.3599 8.49181 14.1688 7.92419 13.8464 7.4596L15.1804 6.08958L14.5279 5.41992ZM13.4362 15.7382C13.4362 16.7832 12.608 17.6332 11.5896 17.6332C10.5713 17.6332 9.74309 16.7832 9.74309 15.7382C9.74309 14.6931 10.5713 13.8431 11.5896 13.8431C12.608 13.8431 13.4362 14.6931 13.4362 15.7382ZM11.5896 11C10.5713 11 9.74309 10.1501 9.74309 9.105C9.74309 8.05991 10.5713 7.20996 11.5896 7.20996C12.608 7.20996 13.4362 8.05991 13.4362 9.105C13.4362 10.1501 12.608 11 11.5896 11Z"
fill="#181EA9"
/>
<defs>
<filter
id="filter0_bi_1472_11883"
x="-400"
y="-400"
width="824"
height="824"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="200" />
<feComposite
in2="SourceAlpha"
operator="in"
result="effect1_backgroundBlur_1472_11883"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_backgroundBlur_1472_11883"
result="shape"
/>
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset dx="-8" dy="-3" />
<feGaussianBlur stdDeviation="16.5" />
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.0941176 0 0 0 0 0.117647 0 0 0 0 0.662745 0 0 0 0.04 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect2_innerShadow_1472_11883"
/>
</filter>
</defs>
</svg>
)
}
1 change: 0 additions & 1 deletion frontend/src/components/connectWallet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { useEffect } from "react";
import { adjustShadowRootStyles, queryShadowRootDeep } from "utils/shadowRoot";
import { flareTestnet } from "viem/chains";
import { useAccount } from "wagmi";
import { useWeb3Modal } from "@web3modal/wagmi/react";
import { useBalance } from "hooks/useBalance";
import { formatBalance } from "utils/formatBalance";
const variants = {
Expand Down
31 changes: 17 additions & 14 deletions frontend/src/components/home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { TopBar } from "./homePage/topBar";
import { Events } from "./homePage/events";
import { Status } from "./homePage/status";
import { Action } from "./homePage/action";
import { LayoutProvider } from "./providers/layoutProvider";

// export function Home() {
// const [extendVisible, setExtendVisible] = useState(false);
Expand Down Expand Up @@ -39,19 +40,21 @@ import { Action } from "./homePage/action";
export function Home() {
console.log("rendering home");
return (
<Layout
header={<TopBar />}
left={
<div>
<Events />
</div>
}
center={
<div className="w-full">
<Status />
<Action />
</div>
}
/>
<LayoutProvider>
<Layout
header={<TopBar />}
left={
<div>
<Events />
</div>
}
center={
<div className="w-full">
<Status />
<Action />
</div>
}
/>
</LayoutProvider>
);
}
36 changes: 32 additions & 4 deletions frontend/src/components/homePage/status.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,21 @@
import { ApproveForm } from "components/approveForm";
import { GolemCoinIcon } from "components/atoms/golem.coin.icon";
import { useLayout } from "components/providers/layoutProvider";
import { useUser } from "hooks/useUser";
import { useCallback } from "react";
import { Card, Stats } from "react-daisyui";
import { formatEther } from "viem";

export const Status = () => {
console.log("render status");
const { user } = useUser();
const { setModalContent, openModal, isModalOpen } = useLayout();
const openExtendApproveModal = useCallback(() => {
console.log("isModalOpen", isModalOpen);
setModalContent(<ApproveForm />);
console.log("openExtendApproveModal");
openModal();
}, []);
return (
<Card>
<Card.Body>
Expand All @@ -9,23 +24,36 @@ export const Status = () => {
<div className="stats shadow">
<div className="stat ">
<div className="stat-title">Registered</div>
<div className="stat-value">OK </div>
<div className="stat-value">
{user.isRegistered() ? "OK" : "Not registered"}{" "}
</div>
</div>
</div>
<div className="stats shadow mt-2">
<div className="stat">
<div className="stat-title">Approve</div>
<div className="stat-value">OK</div>
<div className="stat-value">
{user.hasEnoughAllowance() ? "OK" : "-"}
</div>
</div>
<div className="stat">
<div className="stat-title">Given</div>
<div className="stat-value">4200</div>
<div className="stat-value flex">
<div className="leading-6">
{user.allowanceAmount
? `${formatEther(user.allowanceAmount)} `
: "-"}
</div>
<GolemCoinIcon className="ml-1" />
</div>
</div>
<div className="stat "></div>
<div className="stat "></div>
<div className="stat ">
<div className="stat-actions m-0">
<button className="btn">Change</button>
<button className="btn" onClick={openExtendApproveModal}>
Change
</button>
</div>
</div>
</div>
Expand Down
21 changes: 19 additions & 2 deletions frontend/src/components/layout/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ export const Layout = ({
left: ReactNode;
center: ReactNode;
}) => {
console.log("rendering layout");
const layout = useLayout();

const ref = useRef<HTMLDialogElement>(null);
Expand All @@ -20,15 +19,33 @@ export const Layout = ({
ref.current?.showModal();
}, [ref]);

const handleClose = useCallback(() => {
ref.current?.close();
}, [ref]);

useEffect(() => {
if (layout.isModalOpen) {
handleShow();
} else {
handleClose();
}
}, [layout.isModalOpen, handleShow]);

return (
<Grid>
<Modal ref={ref}>{layout.modalContent}</Modal>
<Modal ref={ref}>
<button
onClick={layout.hideModal}
style={{
color: "black",
}}
className="hover:!bg-lightblue-50 bg-secondary btn btn-sm btn-circle !bg-white absolute right-3 top-3 ml-4"
>
✕
</button>
<br></br>
{layout.modalContent}
</Modal>
<div className="col-span-12 flex justify-between">{header}</div>
<div className="col-span-12 grid grid-cols-12 gap-4">
<div className="col-span-3 flex flex-col">{left}</div>
Expand Down
Loading

0 comments on commit 8f9b1c1

Please sign in to comment.