Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Scroll gov site improvements #508

Merged
merged 3 commits into from
Sep 19, 2024
Merged

Scroll gov site improvements #508

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f53507a
Scroll favicons
mcgingras Sep 19, 2024
470d880
Removes unneeded scroll favicon
mcgingras Sep 19, 2024
7cc1b3d
Merge branch 'main' into michael/scroll-gov
mcgingras Sep 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/app/Web3Provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ const metadata = {
};
const projectId = process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!;
const alchemyId = process.env.NEXT_PUBLIC_ALCHEMY_ID!;

const { contracts } = Tenant.current();
const { contracts, ui } = Tenant.current();
const shouldHideAgoraBranding = ui.hideAgoraBranding;
Copy link
Contributor

@jefag jefag Sep 19, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe consider flipping the language and the flag.

ie shouldHaveAgoraBranding.

And then the setting should be false for when it's not wanted, and true by default.

Edit: spelling

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for me this makes sense because we don't even need to add a default -- if the tenant does not have this flag set, it will be undefined, which will be false, so it's default false. Then, if you want to hide, you have to go through the work of setting a flag.

happy to change though if the other way around makes sense to majority of other folks


const config = createConfig(
getDefaultConfig({
Expand Down Expand Up @@ -54,7 +54,7 @@ const Web3Provider: FC<PropsWithChildren<{}>> = ({ children }) => (
<AgoraProvider>{children}</AgoraProvider>
</PageContainer>
</ConnectButtonProvider>
<Footer />
{!shouldHideAgoraBranding && <Footer />}
<SpeedInsights />
</body>
</ConnectKitProvider>
Expand Down
8 changes: 4 additions & 4 deletions src/app/delegates/[addressOrENSName]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,8 +154,8 @@ export default async function Page({
/>
</div>
) : (
<div className="text-secondary">
<p>No past votes available.</p>
<div className="p-8 text-center text-secondary align-middle bg-wash rounded-xl">
No past votes available.
</div>
)}
</>
Expand All @@ -174,8 +174,8 @@ export default async function Page({
}}
/>
) : (
<div className="text-secondary">
<p>No past votes available.</p>
<div className="p-8 text-center text-secondary align-middle bg-wash rounded-xl">
No past votes available.
</div>
)}
</>
Expand Down
14 changes: 8 additions & 6 deletions src/app/delegates/components/EndorsedFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,20 +47,22 @@ export default function EndorsedFilter() {
>
{() => (
<>
<Listbox.Button className="w-full sm:w-fit bg-wash text-base font-medium border-none rounded-full py-2 px-4 flex items-center">
{endorsedFilterOptions[filterParam]?.value ||
endorsedFilterOptions.true.value}
<ChevronDown className="h-4 w-4 ml-[2px] opacity-30 hover:opacity-100" />
<Listbox.Button className="w-full sm:w-[200px] bg-wash text-base font-medium border border-line rounded-full py-2 px-4 flex items-center justify-between">
<span>
{endorsedFilterOptions[filterParam]?.value ||
endorsedFilterOptions.true.value}
</span>
<ChevronDown className="h-4 w-4 ml-[6px] text-secondary/30" />
</Listbox.Button>
<Listbox.Options className="mt-3 absolute bg-wash border border-[#ebebeb] p-2 rounded-2xl flex flex-col gap-1 z-20 w-max">
{Object.keys(endorsedFilterOptions).map((key) => (
<Listbox.Option key={key} value={key} as={Fragment}>
{({ selected }) => {
return (
<li
className={`cursor-pointer text-base py-2 px-3 border rounded-xl font-medium ${
className={`cursor-pointer text-base py-2 px-3 rounded-xl font-medium hover:text-primary hover:bg-tertiary/20 ${
selected
? "text-primary bg-white border-line"
? "text-primary bg-tertiary/20"
: "text-secondary border-transparent"
}`}
>
Expand Down
14 changes: 8 additions & 6 deletions src/app/delegates/components/IssuesFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,20 +59,22 @@ export default function IssuesFilter() {
>
{() => (
<>
<Listbox.Button className="w-full sm:w-fit bg-wash text-base font-medium border-none rounded-full py-2 px-4 flex items-center">
{issuesFilterOptions[filterParam]?.value ||
issuesFilterOptions.all.value}
<ChevronDown className="h-4 w-4 ml-[2px] opacity-30 hover:opacity-100" />
<Listbox.Button className="w-full sm:w-[200px] bg-wash text-base font-medium border border-line rounded-full py-2 px-4 flex items-center justify-between">
<span>
{issuesFilterOptions[filterParam]?.value ||
issuesFilterOptions.all.value}
</span>
<ChevronDown className="h-4 w-4 ml-[6px] text-secondary/30" />
</Listbox.Button>
<Listbox.Options className="mt-3 absolute bg-wash border border-line p-2 rounded-2xl flex flex-col gap-1 z-20 w-max">
{Object.keys(issuesFilterOptions).map((key) => (
<Listbox.Option key={key} value={key} as={Fragment}>
{({ selected }) => {
return (
<li
className={`cursor-pointer text-base py-2 px-3 border rounded-xl font-medium ${
className={`cursor-pointer text-base py-2 px-3 rounded-xl font-medium hover:text-primary hover:bg-tertiary/20 ${
selected
? "text-primary bg-white border-line"
? "text-primary bg-tertiary/20"
: "text-secondary border-transparent"
}`}
>
Expand Down
14 changes: 8 additions & 6 deletions src/app/delegates/components/StakeholdersFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,20 +60,22 @@ export default function StakeholdersFilter() {
>
{() => (
<>
<Listbox.Button className="w-full sm:w-fit bg-wash text-base font-medium border-none rounded-full py-2 px-4 flex items-center">
{stakeholderFilterOptions[filterParam]?.value ||
stakeholderFilterOptions.all.value}
<ChevronDown className="h-4 w-4 ml-[2px] opacity-30 hover:opacity-100" />
<Listbox.Button className="w-full sm:w-[200px] bg-wash text-base font-medium border border-line rounded-full py-2 px-4 flex items-center justify-between">
<span>
{stakeholderFilterOptions[filterParam]?.value ||
stakeholderFilterOptions.all.value}
</span>
<ChevronDown className="h-4 w-4 ml-[6px] text-secondary/30" />
</Listbox.Button>
<Listbox.Options className="mt-3 absolute bg-wash border border-line p-2 rounded-2xl flex flex-col gap-1 z-20 w-max">
{Object.keys(stakeholderFilterOptions).map((key) => (
<Listbox.Option key={key} value={key} as={Fragment}>
{({ selected }) => {
return (
<li
className={`cursor-pointer text-base py-2 px-3 border rounded-xl font-medium ${
className={`cursor-pointer text-base py-2 px-3 rounded-xl font-medium hover:bg-tertiary/30 hover:text-primary ${
selected
? "text-primary bg-white border-line"
? "text-primary bg-tertiary/30"
: "text-secondary border-transparent"
}`}
>
Expand Down
14 changes: 10 additions & 4 deletions src/app/info/components/ContractList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const ContractList = () => {
<TableRow>
<TableHead
colSpan={4}
className="text-base font-semibold text-gray-4f bg-gray-fa"
className="text-base font-semibold text-secondary bg-wash rounded-t-xl"
>
Contracts
</TableHead>
Expand All @@ -41,13 +41,19 @@ const ContractList = () => {
<TableBody>
{list.map((contract, index) => (
<TableRow key={index}>
<TableCell className="pr-1 text-base font-semibold text-gray-4f">
<TableCell
className={`pr-1 text-base font-semibold text-secondary ${
index === list.length - 1 && "rounded-bl-xl"
}`}
>
{contract.title}
</TableCell>
<TableCell className="px-1 text-base font-semibold text-black">
<TableCell className="px-1 text-base font-semibold text-primary">
{contract.address}
</TableCell>
<TableCell className="px-1">
<TableCell
className={`px-1 ${index === list.length - 1 && "rounded-br-xl"}`}
>
<Link
href={getBlockScanAddress(contract.address)}
target="_blank"
Expand Down
8 changes: 4 additions & 4 deletions src/app/info/components/GovernorSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,16 @@ const GovernorSettings = () => {
<AccordionTrigger className="text-base font-bold text-black hover:no-underline p-0">
Governor settings
</AccordionTrigger>
<AccordionContent className="mt-6 border-t pt-6">
<AccordionContent className="pt-6 px-0">
<div className="flex gap-2 flex-wrap sm:flex-nowrap">
<div className="w-full sm:w-[65%] border border-gray-300 rounded-lg">
<div className="w-full sm:w-[65%] border border-line rounded-lg">
<ContractList />
</div>
<div className="w-full sm:w-[35%] border border-gray-300 h-fit rounded-lg">
<div className="w-full sm:w-[35%] border border-line h-fit rounded-lg">
<GovernorSettingsParams />
</div>
</div>
<div className="w-full border border-gray-300 rounded-lg mt-6">
<div className="w-full border border-line rounded-lg mt-6">
<GovernorSettingsProposalTypes />
</div>
</AccordionContent>
Expand Down
12 changes: 6 additions & 6 deletions src/app/info/components/GovernorSettingsParams.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,30 +38,30 @@ const GovernorSettingsParams = () => {
<Table>
<TableHeader>
<TableRow>
<TableHead className="text-base font-semibold text-left text-gray-4f bg-gray-fa">
<TableHead className="text-base font-semibold text-left text-secondary bg-wash rounded-tl-xl">
Parameter
</TableHead>
<TableHead className="text-base font-semibold text-gray-4f text-right bg-gray-fa">
<TableHead className="text-base font-semibold text-secondary text-right bg-wash rounded-tr-xl">
Value
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell className="text-base font-semibold text-left text-gray-4f">
<TableCell className="text-base font-semibold text-left text-secondary">
Voting Delay
</TableCell>
<TableCell className="text-base font-semibold text-right text-black">
<TableCell className="text-base font-semibold text-right text-primary">
{isDelayFetched && votingDelay
? secondsToHuman(blocksToSeconds(Number(votingDelay)))
: "Loading..."}
</TableCell>
</TableRow>
<TableRow>
<TableCell className="text-base font-semibold text-left text-gray-4f">
<TableCell className="text-base font-semibold text-left text-secondary rounded-bl-xl">
Voting Period
</TableCell>
<TableCell className="text-base font-semibold text-right text-black">
<TableCell className="text-base font-semibold text-right text-primary rounded-br-xl">
{isPeriodFetched && votingPeriod
? secondsToHuman(blocksToSeconds(Number(votingPeriod)))
: "Loading..."}
Expand Down
30 changes: 22 additions & 8 deletions src/app/info/components/GovernorSettingsProposalTypes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,18 +37,32 @@ const GovernorSettingsProposalTypes = () => {
return (
<Table>
<TableHeader>
<TableRow className="text-base font-semibold text-left text-gray-4f bg-gray-fa">
<TableHead colSpan={3}>Proposal type</TableHead>
<TableHead colSpan={4}>Proposal threshold</TableHead>
<TableRow className="text-base font-semibold text-left text-secondary bg-wash">
<TableHead colSpan={3} className="rounded-tl-xl text-secondary">
Proposal type
</TableHead>
<TableHead
colSpan={4}
className={`text-secondary ${isQuorumSupportedByGovernor ? "rounded-none" : "rounded-tr-xl"}`}
>
Proposal threshold
</TableHead>
{isQuorumSupportedByGovernor && (
<TableHead colSpan={4}>Quorum</TableHead>
<TableHead colSpan={4} className="text-secondary rounded-tr-xl">
Quorum
</TableHead>
)}
</TableRow>
</TableHeader>
<TableBody>
<TableRow className="text-base font-semibold text-gray-4f">
<TableCell colSpan={3}>Default</TableCell>
<TableCell colSpan={4}>
<TableRow className="text-base font-semibold text-secondary">
<TableCell colSpan={3} className="rounded-bl-xl">
Default
</TableCell>
<TableCell
colSpan={4}
className={`${isQuorumSupportedByGovernor ? "rounded-none" : "rounded-br-xl"}`}
>
{isThresholdFetched && threshold !== undefined && (
<TokenAmountDisplay
amount={BigInt(threshold.toString())}
Expand All @@ -58,7 +72,7 @@ const GovernorSettingsProposalTypes = () => {
)}
</TableCell>
{isQuorumSupportedByGovernor && (
<TableCell colSpan={4}>
<TableCell colSpan={4} className="rounded-br-xl">
{isQuorumFetched && quorum && (
<TokenAmountDisplay
amount={BigInt(quorum.toString())}
Expand Down
50 changes: 28 additions & 22 deletions src/app/info/components/InfoAbout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@ import { icons } from "@/assets/icons/icons";
import Tenant from "@/lib/tenant/tenant";
import { TENANT_NAMESPACES } from "@/lib/constants";

const { ui, namespace } = Tenant.current();
const page = ui!.page("info");
const { ui } = Tenant.current();

const tabs = [
{
Expand Down Expand Up @@ -38,36 +37,43 @@ const InfoAbout = () => {

return (
<>
<h3 className="text-2xl font-black text-primary mt-10">
<h3 className="text-2xl font-black text-primary mt-12">
Getting started
</h3>
<div className="mt-4 rounded-xl border border-line bg-neutral shadow-sm">
<div className="p-6 flex flex-row flex-wrap sm:flex-nowrap gap-6">
<Image
src={page.hero!}
alt={page.title}
width={400}
className="rounded-lg"
/>
<div>
<div className="w-1/2 relative">
<Image
src={page.hero!}
alt={page.title}
fill
className="rounded-lg object-cover object-center"
/>
</div>
<div className="w-1/2">
<h3 className="text-lg font-bold text-primary capitalize">
About {namespace}
</h3>
<p className="text-secondary font-medium mt-3">
{page.description}
</p>
<p className="text-secondary mt-3">{page.description}</p>
{/* So the image doesn't look smooshed for scroll :eye-roll: */}
{namespace === TENANT_NAMESPACES.SCROLL && (
<div className="h-10 block"></div>
)}
</div>
</div>
{namespace === TENANT_NAMESPACES.SCROLL && (
<div className="p-6 border-t border-line">
<div className="text-lg font-bold text-primary capitalize">
Our approach to governance
</div>
<p className="text-secondary font-medium mt-3">
“A complex system that works is invariably found to have evolved
from a simple system that worked.” - John Gall.
<p className="text-secondary mt-3">
<span className="italic">
“A complex system that works is invariably found to have evolved
from a simple system that worked.”
</span>{" "}
- John Gall.
</p>
<p className="text-secondary font-medium mt-1">
<p className="text-secondary">
With this in mind, our plan is first to set up a minimal
governance structure, refine it, and iterate on first principles.
Scroll’s governance system will accordingly start simple. This
Expand All @@ -86,7 +92,7 @@ const InfoAbout = () => {
key={index}
className="flex flex-row gap-3 justify-center items-center mt-3"
>
<div className="min-w-[72px] h-[72px] flex justify-center items-center rounded-full border border-line">
<div className="min-w-[72px] h-[72px] flex justify-center items-center rounded-full border border-line bg-tertiary/10">
<Image
src={item.icon}
width={24}
Expand All @@ -95,10 +101,10 @@ const InfoAbout = () => {
/>
</div>
<div>
<h3 className="text-sm font-semibold text-primary">
{item.title}
</h3>
<p className="text-sm font-normal">{item.description}</p>
<h3 className="font-semibold text-primary">{item.title}</h3>
<p className="font-normal text-secondary">
{item.description}
</p>
</div>
</div>
))}
Expand Down
Loading
Loading