Skip to content

Commit

Permalink
feegrant page - 2
Browse files Browse the repository at this point in the history
  • Loading branch information
@Teja2045
Teja2045 committed Oct 18, 2023
1 parent 0ce3389 commit 5ac0b6e
Show file tree
Hide file tree
Showing 7 changed files with 233 additions and 6 deletions.
2 changes: 2 additions & 0 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.11",
"@mui/material": "^5.14.10",
"@mui/x-date-pickers": "^6.16.2",
"@types/node": "20.6.5",
"@types/react": "18.2.22",
"@types/react-dom": "18.2.7",
Expand All @@ -25,6 +26,7 @@
"postcss": "8.4.30",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hook-form": "^7.47.0",
"tailwindcss": "3.3.3",
"typescript": "5.2.2"
}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/(routes)/feegrant/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import React from "react";
import Feegrants from "../../../components/tabs/Feegrants";
import GrantsToMeTable from "staking/components/GrantsToMeTable";
import GrantsByMeTable from "staking/components/GrantsByMeTable";

const page = () => {
return (
<div className="page space-y-10">
<Feegrants />
<GrantsToMeTable />
</div>
);
};
Expand Down
8 changes: 8 additions & 0 deletions frontend/src/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -302,6 +302,14 @@ body {
.h-line {
@apply w-full h-px self-stretch bg-[#b0b0b033];
}

.input-w-full {
@apply w-full rounded h-10 px-4 py-2 bg-transparent border border-[#b0b0b033];
}

.input-bold-label {
@apply text-white text-sm not-italic font-bold leading-6;
}
}
@layer components {
.custom-box {
Expand Down
72 changes: 72 additions & 0 deletions frontend/src/components/GrantsByMeTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
"use client";
import { Divider, Pagination, PaginationItem } from "@mui/material";
import Image from "next/image";
import React, { useEffect, useState } from "react";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
import { CopyToClipboard } from "./CopyToClipboard";

const GrantsByMeTable = () => {
const [grants, setGrants] = useState<number[]>([
1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
]);

return (
<div>
<table className="customTable overflow-y-scroll">
<thead className="customTableHead">
<tr className="text-left">
<th className="w-1/5">Network</th>
<th className="w-1/4">Granter</th>
<th className="w-1/4">Expiration</th>
<th className="w-1/4">Details</th>
<th className="w-1/5">Actions</th>
</tr>
</thead>
<tbody>
{grants.map((grant, index) => (
<tr key={index} className="">
<td className="flex gap-2">
<div className="bg-[#3C3047] rounded-full h-[40px] w-[40px] flex justify-center items-center">
<Image
src="./osmosis-logo.svg"
height={31}
width={31}
alt="osmosis-logo"
/>
</div>
<div className="my-auto">Polkachu</div>
</td>
<td>
<CopyToClipboard message="cosmos1enruju0dnejv8v.." />
</td>
<td>2023-09-13 16:54:54</td>
<td>
<div className="flex items-center space-x-2">
<div className="my-auto">cosmos1enruju0dnejv8v..</div>
<div>
<Image
src="/details.svg"
width={24}
height={24}
onClick={() => {
console.log("opened details...");
}}
className="cursor-pointer"
alt="copy..."
/>
</div>
</div>
</td>
<td>
<button className="customBtn">Revoke</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
);
};

export default GrantsByMeTable;
72 changes: 72 additions & 0 deletions frontend/src/components/NewGrant.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
"use client";

import React from "react";
import { useForm, type FieldValues } from "react-hook-form";
import InputLabel from "@mui/material/InputLabel";
import { Label } from "@mui/icons-material";

export default function NewGrant() {
const {
register,
handleSubmit,
formState: { errors, isSubmitting },
reset,
getValues,
} = useForm();

const onSubmit = async (data: FieldValues) => {
// TODO: submit to server
// ...
await new Promise((resolve) => setTimeout(resolve, 1000));

reset();
};

return (
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-y-2">
<div className="w-full space-y-2 mb-6">
<div className="input-bold-label">Grant type</div>
<input
className="input-w-full"
{...register("grant-type", {
required: "Grant type is required",
})}
type="text"
placeholder="Grant Type (multiselect to be done)"
/>
</div>
<div className="flex gap-6">
<div className="w-full space-y-2">
<div className="input-bold-label">Grantee</div>
<input
className="input-w-full"
{...register("grantee", {
required: "Grantee is required",
})}
type="text"
placeholder="grantee"
/>
</div>
<div className="w-full space-y-2">
<div className="input-bold-label">Expiration Date</div>
<input
className="input-w-full"
{...register("Expiration-date", {
required: "Expiration date is required",
})}
type="date"
placeholder="Expiration date"
/>
</div>
</div>

<button
disabled={isSubmitting}
type="submit"
className="flex customBtn mt-10 h-10 items-center justify-center"
>
<div className="input-bold-label">Grant</div>
</button>
</form>
);
}
18 changes: 13 additions & 5 deletions frontend/src/components/tabs/Feegrants.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,16 @@
import * as React from "react";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import GrantsByMeTable from "../GrantsByMeTable";
import GrantsToMeTable from "../GrantsToMeTable";
import NewGrant from "../NewGrant";

export default function Feegrants() {
const [value, setValue] = React.useState("granted-to-me");
const [tabItem, setTabItem] = React.useState("granted-to-me");

const handleChange = (event: React.SyntheticEvent, newValue: string) => {
console.log(newValue);
setValue(newValue);
const handleChange = (event: React.SyntheticEvent, value: string) => {
console.log(value);
setTabItem(value);
};

const tabStyle = {
Expand All @@ -31,7 +34,7 @@ export default function Feegrants() {
<>
<div className="w-full flex justify-center">
<Tabs
value={value}
value={tabItem}
onChange={handleChange}
indicatorColor="primary"
textColor="primary"
Expand All @@ -42,6 +45,11 @@ export default function Feegrants() {
<Tab sx={tabStyle} value={"granted-to-me"} label="Granted To Me" />
</Tabs>
</div>
{tabItem == "granted-to-me" ? (
<GrantsToMeTable />
) : tabItem === "granted-by-me" ? (
<GrantsByMeTable />
) : <NewGrant/>}
</>
);
}
65 changes: 65 additions & 0 deletions frontend/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,13 @@
dependencies:
regenerator-runtime "^0.14.0"

"@babel/runtime@^7.23.1":
version "7.23.2"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
dependencies:
regenerator-runtime "^0.14.0"

"@babel/types@^7.22.15":
version "7.23.0"
resolved "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz"
Expand Down Expand Up @@ -302,6 +309,19 @@
clsx "^2.0.0"
prop-types "^15.8.1"

"@mui/base@^5.0.0-beta.17":
version "5.0.0-beta.20"
resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.20.tgz#14fcdfe0350f2aad06ab6c37c4c91dacaab8f600"
integrity sha512-CS2pUuqxST7ch9VNDCklRYDbJ3rru20Tx7na92QvVVKfu3RL4z/QLuVIc8jYGsdCnauMaeUSlFNLAJNb0yXe6w==
dependencies:
"@babel/runtime" "^7.23.1"
"@floating-ui/react-dom" "^2.0.2"
"@mui/types" "^7.2.6"
"@mui/utils" "^5.14.13"
"@popperjs/core" "^2.11.8"
clsx "^2.0.0"
prop-types "^15.8.1"

"@mui/core-downloads-tracker@^5.14.10":
version "5.14.10"
resolved "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.10.tgz"
Expand Down Expand Up @@ -370,6 +390,11 @@
resolved "https://registry.npmjs.org/@mui/types/-/types-7.2.4.tgz"
integrity sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==

"@mui/types@^7.2.6":
version "7.2.6"
resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.6.tgz#d72b9e9eb0032e107e76033932d65c3f731d2608"
integrity sha512-7sjLQrUmBwufm/M7jw/quNiPK/oor2+pGUQP2CULRcFCArYTq78oJ3D5esTaL0UMkXKJvDqXn6Ike69yAOBQng==

"@mui/utils@^5.14.10":
version "5.14.10"
resolved "https://registry.npmjs.org/@mui/utils/-/utils-5.14.10.tgz"
Expand All @@ -380,6 +405,29 @@
prop-types "^15.8.1"
react-is "^18.2.0"

"@mui/utils@^5.14.11", "@mui/utils@^5.14.13":
version "5.14.14"
resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.14.tgz#7b2a0bcfb44c3376fc81f85500f9bd01706682ac"
integrity sha512-3AKp8uksje5sRfVrtgG9Q/2TBsHWVBUtA0NaXliZqGcXo8J+A+Agp0qUW2rJ+ivgPWTCCubz9FZVT2IQZ3bGsw==
dependencies:
"@babel/runtime" "^7.23.1"
"@types/prop-types" "^15.7.7"
prop-types "^15.8.1"
react-is "^18.2.0"

"@mui/x-date-pickers@^6.16.2":
version "6.16.2"
resolved "https://registry.yarnpkg.com/@mui/x-date-pickers/-/x-date-pickers-6.16.2.tgz#a21e9891d797287bd8aebb822eb26e70a81923f8"
integrity sha512-JFrDUeBkiKtfJ0WqwyPBICEP1U+Ujfsily3ZQ/Hv4zAOleG/5769EgS7TOO4cVgnuhtvQ/pqx2gmuCn8/gcC5w==
dependencies:
"@babel/runtime" "^7.23.1"
"@mui/base" "^5.0.0-beta.17"
"@mui/utils" "^5.14.11"
"@types/react-transition-group" "^4.4.7"
clsx "^2.0.0"
prop-types "^15.8.1"
react-transition-group "^4.4.5"

"@next/[email protected]":
version "13.5.2"
resolved "https://registry.npmjs.org/@next/env/-/env-13.5.2.tgz"
Expand Down Expand Up @@ -495,6 +543,11 @@
resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.7.tgz"
integrity sha512-FbtmBWCcSa2J4zL781Zf1p5YUBXQomPEcep9QZCfRfQgTxz3pJWiDFLebohZ9fFntX5ibzOkSsrJ0TEew8cAog==

"@types/prop-types@^15.7.7":
version "15.7.8"
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.8.tgz#805eae6e8f41bd19e88917d2ea200dc992f405d3"
integrity sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ==

"@types/[email protected]":
version "18.2.7"
resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz"
Expand All @@ -509,6 +562,13 @@
dependencies:
"@types/react" "*"

"@types/react-transition-group@^4.4.7":
version "4.4.7"
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.7.tgz#bf69f269d74aa78b99097673ca6dd6824a68ef1c"
integrity sha512-ICCyBl5mvyqYp8Qeq9B5G/fyBSRC0zx3XM3sCC6KkcMsNeAHqXBKkmat4GqdJET5jtYUpZXrxI5flve5qhi2Eg==
dependencies:
"@types/react" "*"

"@types/react@*", "@types/[email protected]":
version "18.2.22"
resolved "https://registry.npmjs.org/@types/react/-/react-18.2.22.tgz"
Expand Down Expand Up @@ -2405,6 +2465,11 @@ [email protected]:
loose-envify "^1.1.0"
scheduler "^0.23.0"

react-hook-form@^7.47.0:
version "7.47.0"
resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.47.0.tgz#a42f07266bd297ddf1f914f08f4b5f9783262f31"
integrity sha512-F/TroLjTICipmHeFlMrLtNLceO2xr1jU3CyiNla5zdwsGUGu2UOxxR4UyJgLlhMwLW/Wzp4cpJ7CPfgJIeKdSg==

react-is@^16.13.1, react-is@^16.7.0:
version "16.13.1"
resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
Expand Down

0 comments on commit 5ac0b6e

Please sign in to comment.