Merge branch 'dev' into disputable-registry

1Hive · Sep 21, 2024 · f9ceb0c · f9ceb0c
2 parents 44a317c + 55d3e76
commit f9ceb0c
Show file tree

Hide file tree

Showing 29 changed files with 173 additions and 160 deletions.
diff --git a/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/[proposalId]/page.tsx b/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/[proposalId]/page.tsx
@@ -80,6 +80,7 @@ export default function Page({
   const { data: poolToken } = useToken({
     address: poolTokenAddr,
     enabled: !!poolTokenAddr,
+    chainId,
   });
   const { data: ipfsResult } = useMetadataIpfsFetch({
     hash: proposalData?.metadataHash,
@@ -192,7 +193,7 @@ export default function Page({
             <MarkdownWrapper>
               {metadata?.description ?? "No description found"}
             </MarkdownWrapper>
-            <div className="flex justify-between">
+            <div className="flex justify-between flex-wrap gap-2">
               <div className="flex flex-col gap-2">
                 {!isSignalingType && (
                   <>

diff --git a/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/page.tsx b/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/page.tsx
@@ -49,6 +49,7 @@ export default function Page({
   const { data: poolToken } = useToken({
     address: poolTokenAddr,
     enabled: !!poolTokenAddr,
+    chainId: +chain,
   });
 
   useEffect(() => {

diff --git a/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/page.tsx b/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/page.tsx
@@ -219,7 +219,7 @@ export default function Page({
 
   return (
     <div className="page-layout">
-      <header className="section-layout flex flex-row items-center gap-10">
+      <header className="section-layout flex flex-row items-center gap-10 flex-wrap justify-end">
         <div>
           <Image
             src={commImg}
@@ -268,7 +268,7 @@ export default function Page({
             </div>
           </div>
         </div>
-        <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-4 mt-auto">
           <RegisterMember
             memberData={isMemberResult}
             registrationCost={getTotalRegistrationCost()}

diff --git a/apps/web/app/(app)/gardens/[chain]/[garden]/page.tsx b/apps/web/app/(app)/gardens/[chain]/[garden]/page.tsx
@@ -126,7 +126,7 @@ export default function Page({
             <div className="mb-2 flex flex-col">
               <div className="flex items-center gap-4">
                 <h2>{tokenGarden?.name}</h2>{" "}
-                <TokenLabel chainId={chain} classNames="bg-neutral-soft" />
+                <TokenLabel chainId={chain} className="bg-neutral-soft" />
               </div>
               <EthAddress
                 icon={false}
@@ -166,13 +166,14 @@ export default function Page({
           <div className="relative flex h-[219px] justify-center">
             <Link
               href={`/gardens/${chain}/${garden}/create-community`}
-              className="mt-6"
+              className="mt-6 z-10"
             >
               <Button
                 btnStyle="filled"
                 disabled={!isConnected || missmatchUrl}
                 tooltip={tooltipMessage}
                 icon={<PlusIcon height={24} width={24} />}
+                className="shadow-[0_9px_15px_-8px_rgba(0,0,0,0.75)]"
               >
                 Create a community
               </Button>

diff --git a/apps/web/app/(app)/gardens/page.tsx b/apps/web/app/(app)/gardens/page.tsx
@@ -103,7 +103,7 @@ export default function Page() {
           </div>
         </header>
         <section className="my-2 flex w-full max-w-2xl flex-col items-center justify-center gap-8 2xl:mt-10">
-          <div className="grid max-w-7xl grid-cols-[repeat(auto-fit,minmax(310px,1fr))] gap-6 md:grid-cols-[repeat(auto-fit,320px)] z-10">
+          <div className="flex flex-wrap mx-4 sm:grid max-w-7xl grid-cols-[repeat(auto-fit,minmax(310px,1fr))] gap-6 md:grid-cols-[repeat(auto-fit,320px)] z-10">
             {GardenList}
           </div>
         </section>

diff --git a/apps/web/components/Badge.tsx b/apps/web/components/Badge.tsx
@@ -9,7 +9,7 @@ type BadgeProps = {
   type?: number;
   status?: number;
   label?: string;
-  classNames?: string;
+  className?: string;
   icon?: React.ReactNode;
   isCapitalize?: boolean;
 };
@@ -37,7 +37,7 @@ export function Badge({
   type,
   status,
   label,
-  classNames,
+  className,
   icon,
 }: BadgeProps): JSX.Element {
   const isStatusBadge = status !== undefined;
@@ -69,7 +69,7 @@ export function Badge({
 
   return (
     <div
-      className={`${BASE_STYLES} ${styles} ${classNames} flex items-center gap-2`}
+      className={`${BASE_STYLES} ${styles} ${className} flex items-center gap-2`}
     >
       {iconIncluded && (
         <div className="h-6 w-6 text-inherit">{iconIncluded}</div>

diff --git a/apps/web/components/Button.tsx b/apps/web/components/Button.tsx
@@ -83,7 +83,7 @@ export function Button({
     <button
       type={type}
       className={`${btnStyles[btnStyle][disabled ? "disabled" : color]}
-      flex relative cursor-pointer  justify-center rounded-lg px-6 py-4 transition-all ease-out disabled:cursor-not-allowed ${styles}`}
+      flex relative cursor-pointer  justify-center rounded-lg px-6 py-4 transition-all ease-out disabled:cursor-not-allowed h-fit ${styles}`}
       onClick={onClick}
       disabled={disabled || isLoading}
     >

diff --git a/apps/web/components/CancelButton.tsx b/apps/web/components/CancelButton.tsx
@@ -1,10 +1,11 @@
 import React, { useState } from "react";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-import { Address, useChainId } from "wagmi";
+import { Address } from "wagmi";
 import { CVProposal, CVStrategy, Maybe } from "#/subgraph/.graphclient";
 import { Button } from "./Button";
 import { Modal } from "./Modal";
 import { usePubSubContext } from "@/contexts/pubsub.context";
+import { useChainIdFromPath } from "@/hooks/useChainIdFromPath";
 import { useContractWriteWithConfirmations } from "@/hooks/useContractWriteWithConfirmations";
 import { MetadataV1 } from "@/hooks/useIpfsFetch";
 import { cvStrategyABI } from "@/src/generated";
@@ -21,7 +22,7 @@ type Props = {
 
 function CancelButton({ proposalData }: Props) {
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const chainId = useChainId();
+  const chainId = useChainIdFromPath();
   const { publish } = usePubSubContext();
   const { strategy } = proposalData;
   const [strategyId, proposalNumber] = proposalData.id.split("-");
@@ -39,7 +40,7 @@ function CancelButton({ proposalData }: Props) {
         function: "cancelProposal",
         id: +proposalNumber,
         containerId: strategyId,
-        chainId,
+        chainId: chainId,
       });
     },
   });

diff --git a/apps/web/components/Card.tsx b/apps/web/components/Card.tsx
@@ -12,7 +12,7 @@ export const Card = ({ children, href, className }: CardProps) => {
     //todo: div or section ?
     <Link href={href}>
       <div
-        className={`border1 group relative cursor-pointer rounded-2xl bg-neutral p-6 transition-all duration-200 ease-in-out hover:border-secondary-content hover:bg-secondary-soft ${className}`}
+        className={`border1 group relative cursor-pointer rounded-2xl bg-neutral p-6 transition-all duration-200 ease-in-out hover:border-secondary-content hover:bg-secondary-soft overflow-visible ${className}`}
       >
         {children}
       </div>

diff --git a/apps/web/components/Charts/ChartWrapper.tsx b/apps/web/components/Charts/ChartWrapper.tsx
@@ -47,7 +47,7 @@ export const ChartWrapper = ({
     <>
       <div className="mt-7 flex flex-col gap-12">
         <h3>Conviction voting chart</h3>
-        <div className="flex gap-4">
+        <div className="flex gap-4 flex-wrap">
           {legend
             .filter((item) => !(isSignalingType && item.name === "Threshold"))
             .map((item) => (

diff --git a/apps/web/components/CommunityCard.tsx b/apps/web/components/CommunityCard.tsx
@@ -33,7 +33,7 @@ export function CommunityCard({
     <Card
       key={id}
       href={`${pathname}/${id}`}
-      className={`w-[313px] ${isNewCommunity ? "shadow-2xl" : ""}`}
+      className={`w-[275px] sm:m-w-[313px] ${isNewCommunity ? "shadow-2xl" : ""}`}
     >
       <Image
         src={commImg}

diff --git a/apps/web/components/DisputeButton.tsx b/apps/web/components/DisputeButton.tsx
@@ -257,7 +257,7 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
     useDisableButtons(disableSubmitBtn);
 
   const content = (
-    <div className="flex md:flex-col gap-10">
+    <div className="flex md:flex-col gap-10 flex-wrap">
       {proposalStatus !== "active" ?
         <div className="p-16 rounded-lg">
           {disputes.map((dispute) => (
@@ -300,7 +300,7 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
   const buttons = (
     <div className="modal-action w-full">
       {isDisputed ?
-        <div className="w-full flex justify-end gap-4">
+        <div className="w-full flex justify-end gap-4 flex-wrap">
           {(
             DisputeStatus[lastDispute.status] === "waiting" &&
             ((isTribunalMember ?? isTribunalSafe) || isTimeout)
@@ -314,7 +314,7 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
                 disabled={disableTribunalSafeButtons}
               >
                 <InfoWrapper
-                  classNames={`[&>svg]:text-secondary-content ${isTimeout ? "tooltip-left" : ""}`}
+                  className={"[&>svg]:text-secondary-content"}
                   tooltip={
                     "Abstain to follow the pool's default resolution (approve/reject) and return collaterals to both parties."
                   }
@@ -333,7 +333,7 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
                     tooltip={tooltipMessage}
                   >
                     <InfoWrapper
-                      classNames="[&>svg]:text-primary-content"
+                      className="[&>svg]:text-primary-content"
                       tooltip={
                         "Approve if the dispute is invalid and the proposal should remain active."
                       }
@@ -350,7 +350,7 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
                     tooltip={tooltipMessage}
                   >
                     <InfoWrapper
-                      classNames="[&>svg]:text-danger-button [&:before]:mr-10 tooltip-left"
+                      className="[&>svg]:text-danger-button [&:before]:mr-10"
                       tooltip={
                         "Reject if the proposal violates the rules outlined in the community covenant."
                       }
@@ -367,7 +367,7 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
             />
           }
         </div>
-      : <div className="flex w-full justify-between items-end">
+      : <div className="flex w-full justify-between items-end flex-wrap gap-2">
           <div>
             {totalStake && (
               <WalletBalance
@@ -390,7 +390,6 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
             <Button
               onClick={handleSubmit}
               color="danger"
-              tooltipSide="tooltip-left"
               disabled={
                 !isConnected || missmatchUrl || !isEnoughBalance || isCooldown
               }

diff --git a/apps/web/components/Forms/PoolEditForm.tsx b/apps/web/components/Forms/PoolEditForm.tsx
@@ -403,7 +403,7 @@ export default function PoolEditForm({
             <div className="flex flex-col">
               <h4 className="my-4">Arbitration settings</h4>
             </div>
-            <div className="flex gap-4 mt-2">
+            <div className="flex gap-4 mt-2 flex-wrap">
               <FormRadioButton
                 label="Global gardens tribunal"
                 checked={

diff --git a/apps/web/components/Forms/PoolForm.tsx b/apps/web/components/Forms/PoolForm.tsx
@@ -174,6 +174,7 @@ export function PoolForm({ token, communityAddr }: Props) {
   const watchedAddress = watch("poolTokenAddress").toLowerCase() as Address;
   const { data: customTokenData } = useToken({
     address: watchedAddress ?? "0x",
+    chainId: +chain,
   });
   const pointSystemType = watch("pointSystemType");
   const strategyType = watch("strategyType");
@@ -658,7 +659,7 @@ export function PoolForm({ token, communityAddr }: Props) {
             )}
           </div>
           <InfoBox
-            classNames="w-fit mt-4"
+            className="w-fit mt-4"
             infoBoxType="info"
             content={
               "The following sections can be updated by the council in the future."
@@ -753,7 +754,7 @@ export function PoolForm({ token, communityAddr }: Props) {
           {/* pool settings section */}
           <div className="flex flex-col">
             <h4 className="my-4">Pool settings</h4>
-            <div className="flex gap-8">
+            <div className="flex gap-8 flex-wrap">
               {Object.entries(poolSettingValues).map(
                 ([key, { label, description }]) => {
                   return (

diff --git a/apps/web/components/Forms/ProposalForm.tsx b/apps/web/components/Forms/ProposalForm.tsx
@@ -233,6 +233,7 @@ export const ProposalForm = ({
   const { data: poolToken } = useToken({
     address: poolTokenAddr,
     enabled: !!poolTokenAddr,
+    chainId,
   });
 
   const INPUT_TOKEN_MIN_VALUE = 1 / 10 ** (poolToken?.decimals ?? 0);
@@ -406,7 +407,7 @@ export const ProposalForm = ({
           </div>
         </div>
       }
-      <div className="flex w-full items-center justify-between py-6">
+      <div className="flex w-full items-center justify-between py-6 flex-wrap">
         <div>
           {arbitrableConfig && (
             <WalletBalance

diff --git a/apps/web/components/IncreasePower.tsx b/apps/web/components/IncreasePower.tsx
@@ -77,7 +77,7 @@ export const IncreasePower = ({
   const { data: accountTokenBalance } = useBalance({
     address: accountAddress,
     token: registerToken as Address,
-    chainId: urlChainId ?? 0,
+    chainId: urlChainId,
   });
 
   const registryContractCallConfig = {
@@ -232,7 +232,7 @@ export const IncreasePower = ({
         </div>
       </TransactionModal>
 
-      <div className="flex justify-between gap-4">
+      <div className="flex justify-between gap-4 flex-wrap">
         <div className="flex flex-col justify-between gap-2">
           <div className="flex justify-between">
             <div className="flex-start flex gap-2">
@@ -253,7 +253,7 @@ export const IncreasePower = ({
           <InfoBox
             content="staking more tokens in the community can increase your voting power in pools to support proposals."
             infoBoxType="info"
-            classNames="max-w-xl"
+            className="max-w-xl"
           />
         </div>
         <div className="flex flex-col gap-4">

diff --git a/apps/web/components/InfoBox.tsx b/apps/web/components/InfoBox.tsx
@@ -7,7 +7,7 @@ type InfoBoxProps = {
   infoBoxType: InfoBoxStyles;
   content?: string;
   contentStyle?: string;
-  classNames?: string;
+  className?: string;
   icon?: React.ReactNode;
   hideIcon?: boolean;
   children?: React.ReactNode;
@@ -28,14 +28,14 @@ export function InfoBox({
   infoBoxType,
   content,
   contentStyle,
-  classNames,
+  className,
   icon,
   hideIcon,
   children,
 }: InfoBoxProps): JSX.Element {
   return (
     <div
-      className={`${BASE_STYLES} ${infoBoxStyles[infoBoxType]} ${classNames}`}
+      className={`${BASE_STYLES} ${infoBoxStyles[infoBoxType]} ${className}`}
     >
       {!hideIcon && (
         <div className="h-9 w-9 text-inherit">

diff --git a/apps/web/components/InfoWrapper.tsx b/apps/web/components/InfoWrapper.tsx
@@ -4,7 +4,7 @@ import { InformationCircleIcon } from "@heroicons/react/24/outline";
 type InfoWrapperProps = {
   tooltip: string;
   children?: React.ReactNode;
-  classNames?: string;
+  className?: string;
   customIcon?: React.ReactNode;
   size?: "sm" | "md" | "lg";
 };
@@ -18,15 +18,15 @@ const sizeMap = {
 export function InfoWrapper({
   tooltip,
   children,
-  classNames,
+  className,
   customIcon,
   size = "md",
 }: InfoWrapperProps): JSX.Element {
   const { width, height } = sizeMap[size];
 
   return (
     <div
-      className={`tooltip flex gap-2 cursor-pointer items-center [&>svg]:text-primary-content max-w-sm [&>svg]:stroke-2 ${classNames}`}
+      className={`tooltip flex gap-2 cursor-pointer items-center [&>svg]:text-primary-content max-w-sm [&>svg]:stroke-2 ${className}`}
       data-tip={tooltip}
     >
       {children}

diff --git a/apps/web/components/Modal.tsx b/apps/web/components/Modal.tsx
@@ -53,7 +53,7 @@ export function Modal({
       className={`modal max-sm:modal-bottom ${className}`}
       ref={dialogRef}
     >
-      <div className="modal-box max-w-5xl w-fit flex flex-col gap-8 rounded-3xl bg-primary p-8">
+      <div className="modal-box overflow-auto sm:overflow-visible max-w-5xl w-fit flex flex-col gap-8 rounded-3xl bg-primary p-8">
         <div className="flex items-center justify-between gap-6">
           <div className="flex gap-4 items-center">
             {icon && (

diff --git a/apps/web/components/PoolCard.tsx b/apps/web/components/PoolCard.tsx
@@ -76,7 +76,7 @@ export function PoolCard({ pool, tokenGarden }: Props) {
         </Statistic>
       </div>
       {!isEnabled ?
-        <div className="banner  min-w-[262px]">
+        <div className="banner md:min-w-[262px]">
           <ClockIcon className="h-8 w-8 text-secondary-content" />
           <h6>Waiting for approval</h6>
         </div>