Merge remote-tracking branch 'origin/dev' into fix-signaling-not-loading

# Conflicts:
#	apps/web/components/ProposalCard.tsx

.gitignore

@@ -48,6 +48,7 @@ cache/
 pkg/subgraph/generated
 pkg/**/data
 cookies.json
+.graphclientrc.yml
 
 lcov.info
 # some abi should be ignored

apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/[proposalId]/page.tsx

@@ -271,7 +271,7 @@ export default function Page({
  thresholdPct={thresholdPct}
  proposalSupportPct={totalSupportPct}
  isSignalingType={isSignalingType}
- proposalId={Number(proposalIdNumber)}
+ proposalNumber={Number(proposalIdNumber)}
  />
  </>
  }

apps/web/components/Charts/ConvictionBarChart.tsx

@@ -15,7 +15,7 @@ type ConvictionBarChartProps = {
  thresholdPct: number;
  proposalSupportPct: number;
  isSignalingType: boolean;
- proposalId: number;
+ proposalNumber: number;
  compact?: boolean;
 };
 
@@ -24,7 +24,7 @@ export const ConvictionBarChart = ({
  thresholdPct,
  proposalSupportPct,
  isSignalingType,
- proposalId,
+ proposalNumber,
  compact,
 }: ConvictionBarChartProps) => {
  const supportNeeded = (thresholdPct - proposalSupportPct).toFixed(2);
@@ -209,7 +209,7 @@ export const ConvictionBarChart = ({
  const option: EChartsOption = {
  emphasis: emphasis,
  yAxis: {
- data: [`Proposal #${proposalId}`],
+ data: [`Proposal #${proposalNumber}`],
  axisTick: { show: false },
 
  axisLine: {

apps/web/components/DisputeButton.tsx

@@ -27,6 +27,7 @@ import { InfoWrapper } from "./InfoWrapper";
 import { Modal } from "./Modal";
 import { ProposalTimeline } from "./ProposalTimeline";
 import { WalletBalance } from "./WalletBalance";
+import { DEFAULT_RULING_TIMEOUT_SEC } from "@/configs/constants";
 import { usePubSubContext } from "@/contexts/pubsub.context";
 import { useChainIdFromPath } from "@/hooks/useChainIdFromPath";
 import { useContractWriteWithConfirmations } from "@/hooks/useContractWriteWithConfirmations";
@@ -43,6 +44,7 @@ import { DisputeStatus, ProposalStatus } from "@/types";
 import { abiWithErrors2 } from "@/utils/abiWithErrors";
 import { delayAsync } from "@/utils/delayAsync";
 import { ipfsJsonUpload } from "@/utils/ipfsUtils";
+import { convertSecondsToReadableTime } from "@/utils/numbers";
 
 type Props = {
  proposalData: Maybe<
@@ -253,9 +255,14 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
  ],
  [isEnoughBalance, isCooldown],
  );
+
  const { isConnected, missmatchUrl, tooltipMessage } =
  useDisableButtons(disableSubmitBtn);
 
+ const rulingTimeout = convertSecondsToReadableTime(
+ DEFAULT_RULING_TIMEOUT_SEC,
+ );
+
  const content = (
  <div className="flex md:flex-col gap-10 flex-wrap">
  {proposalStatus !== "active" ?
@@ -277,7 +284,7 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
  />
  <InfoBox
  infoBoxType="info"
- content="Disputing this proposal stops it from being executed but not from growing in support. The Tribunal has one week to settle any disputes before it can be closed and collateral is returned."
+ content={`Disputing this proposal stops it from being executed but not from growing in support. The Tribunal has ${rulingTimeout.value} ${rulingTimeout.unit} to settle any disputes before it can be closed and collateral is returned.`}
  />
  </div>
  }

apps/web/components/Forms/CommunityForm.tsx

@@ -57,6 +57,7 @@ export const CommunityForm = ({
  handleSubmit,
  formState: { errors },
  getValues,
+ setValue,
  } = useForm<FormInputs>();
 
  const { publish } = usePubSubContext();
@@ -284,16 +285,16 @@ export const CommunityForm = ({
  className="pr-14"
  otherProps={{
  step: 1 / CV_PERCENTAGE_SCALE,
- min: 1 / CV_PERCENTAGE_SCALE,
+ min: 0,
  }}
  registerOptions={{
  max: {
  value: 100,
  message: "Max amount cannot exceed 100%",
  },
  min: {
- value: 1 / CV_PERCENTAGE_SCALE,
- message: `Amount must be greater than ${1 / CV_PERCENTAGE_SCALE}`,
+ value: 0,
+ message: "Amount must be greater than 0",
  },
  }}
  >
@@ -353,7 +354,11 @@ export const CommunityForm = ({
  required
  errors={errors}
  registerKey="covenant"
- type="textarea"
+ onChange={(e) => {
+ setValue("covenant", e.target.value);
+ }}
+ value={getValues("covenant")}
+ type="markdown"
  rows={7}
  placeholder="Covenant description..."
  />

apps/web/components/Forms/FormInput.tsx

@@ -1,17 +1,19 @@
 /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 "use client";
 
-import { HTMLInputTypeAttribute } from "react";
-import { RegisterOptions } from "react-hook-form";
+import { HTMLInputTypeAttribute, useEffect, useMemo } from "react";
+import MarkdownEditor from "@uiw/react-markdown-editor";
+import { RegisterOptions, UseFormRegister } from "react-hook-form";
+import {} from "react-hook-form";
 import { InfoWrapper } from "../InfoWrapper";
 
 type Props = {
  label?: string;
  subLabel?: string | undefined;
- type: HTMLInputTypeAttribute;
+ type: HTMLInputTypeAttribute | "markdown";
  registerKey?: string;
  placeholder?: string;
- register?: any;
+ register?: UseFormRegister<any>;
  errors?: any;
  required?: boolean;
  registerOptions?: RegisterOptions;
@@ -33,7 +35,7 @@ export function FormInput({
  type,
  registerKey = "",
  placeholder = "",
- register = () => ({}),
+ register = () => ({}) as any,
  errors = false,
  required = false,
  registerOptions,
@@ -50,6 +52,24 @@ export function FormInput({
 }: Props) {
  const fixedInputClassname =
  "!border-gray-300 focus:border-gray-300 focus:outline-gray-300 cursor-not-allowed bg-transparent";
+
+ useEffect(() => {
+ register(registerKey, registerOptions);
+ }, [registerKey]);
+
+ const registered = useMemo(() => {
+ return register(registerKey, {
+ required,
+ disabled,
+ ...registerOptions,
+ onChange: (e) => {
+ onChange?.(e);
+ registerOptions?.onChange?.(e);
+ },
+ value: value !== undefined ? value : undefined,
+ });
+ }, [registerKey]);
+
  return (
  <div className="flex flex-col">
  {label && (
@@ -67,12 +87,12 @@ export function FormInput({
  </label>
  )}
  {subLabel && <p className="mb-1 text-xs">{subLabel}</p>}
- <div className={`relative ${type !== "textarea" && "max-w-md"}`}>
- {type !== "textarea" ?
+ <div
+ className={`relative ${type !== "textarea" && type !== "markdown" && "max-w-md"}`}
+ >
+ {type !== "textarea" && type !== "markdown" ?
  <input
  id={registerKey}
- onChange={onChange}
- value={value}
  type={type}
  placeholder={placeholder}
  className={`hide-input-arrows input input-bordered ${
@@ -84,13 +104,14 @@ export function FormInput({
  readOnly={readOnly || disabled}
  {...register(registerKey, {
  required,
- readOnly,
  disabled,
  ...registerOptions,
  })}
  {...otherProps}
  />
- : <textarea
+ : type === "textarea" ?
+ <textarea
+ id={registerKey}
  placeholder={placeholder}
  className={`${className} textarea textarea-info line-clamp-5 w-full overflow-auto h-24 ${
  errors[registerKey] ? "input-error" : "input-info"
@@ -99,13 +120,37 @@ export function FormInput({
  rows={rows}
  disabled={disabled || readOnly}
  readOnly={readOnly || disabled}
- id={registerKey}
  {...register(registerKey, {
  required,
+ disabled,
  ...registerOptions,
  })}
  {...otherProps}
  />
+ : <div data-color-mode="light">
+ <MarkdownEditor
+ id={registerKey}
+ style={{
+ resize: "vertical",
+ overflow: "auto",
+ minHeight: "200px",
+ }}
+ disabled={disabled || readOnly}
+ readOnly={readOnly || disabled}
+ required={required}
+ {...register(registerKey, {
+ required,
+ disabled,
+ ...registerOptions,
+ })}
+ onChange={(v) => {
+ const e = { target: { value: v } };
+ registered.onChange(e);
+ onChange?.(e);
+ }}
+ {...otherProps}
+ />
+ </div>
  }
  {children}
  </div>

apps/web/components/Forms/PoolEditForm.tsx

@@ -30,6 +30,7 @@ type ArbitrationSettings = {
  proposalCollateral: number | string;
  disputeCollateral: number | string;
  tribunalAddress: string;
+ defaultRulingTimeout: number | string;
 };
 
 type FormInputs = {
@@ -132,12 +133,12 @@ export default function PoolEditForm({
  proposalCollateral: {
  label: "Proposal collateral:",
  parse: (value: string) =>
- value + " " + chain.nativeCurrency?.symbol ?? "ETH",
+ value + " " + chain.nativeCurrency?.symbol || "",
  },
  disputeCollateral: {
  label: "Dispute collateral:",
  parse: (value: string) =>
- value + " " + chain.nativeCurrency?.symbol ?? "ETH",
+ value + " " + chain.nativeCurrency?.symbol || "",
  },
  tribunalAddress: {
  label: "Tribunal safe:",
@@ -194,9 +195,7 @@ export default function PoolEditForm({
  token?.decimals,
  ),
  defaultRuling: BigInt(previewData.defaultResolution),
- defaultRulingTimeout: BigInt(
- process.env.NEXT_PUBLIC_DEFAULT_RULING_TIMEOUT ?? 300,
- ),
+ defaultRulingTimeout: BigInt(initValues.defaultRulingTimeout),
  },
  {
  maxRatio: maxRatio,

apps/web/components/Forms/PoolForm.tsx

@@ -229,12 +229,12 @@ export function PoolForm({ token, communityAddr }: Props) {
  proposalCollateral: {
  label: "Proposal collateral:",
  parse: (value: string) =>
- value + " " + chain.nativeCurrency?.symbol ?? "ETH",
+ value + " " + chain.nativeCurrency?.symbol || "",
  },
  disputeCollateral: {
  label: "Dispute collateral:",
  parse: (value: string) =>
- value + " " + chain.nativeCurrency?.symbol ?? "ETH",
+ value + " " + chain.nativeCurrency?.symbol || "",
  },
  tribunalAddress: {
  label: "Tribunal safe:",
@@ -530,11 +530,14 @@ export function PoolForm({ token, communityAddr }: Props) {
  <div className="flex flex-col">
  <FormInput
  label="Description"
- register={register}
+ onChange={(value) => {
+ setValue("description", value);
+ }}
+ value={getValues("description")}
  required
  errors={errors}
  registerKey="description"
- type="textarea"
+ type="markdown"
  rows={7}
  placeholder="Enter a description of your pool..."
  />

apps/web/components/Forms/ProposalForm.tsx

@@ -123,6 +123,7 @@ export const ProposalForm = ({
  handleSubmit,
  formState: { errors },
  getValues,
+ setValue,
  } = useForm<FormInputs>();
 
  const { publish } = usePubSubContext();
@@ -389,7 +390,11 @@ export const ProposalForm = ({
  required
  errors={errors}
  registerKey="description"
- type="textarea"
+ onChange={(e) => {
+ setValue("description", e.target.value);
+ }}
+ value={getValues("description")}
+ type="markdown"
  rows={10}
  placeholder="Proposal description"
  />

apps/web/components/MarkdownWrapper.tsx

@@ -1,31 +1,21 @@
 import React from "react";
-import Markdown, { MarkdownToJSX } from "markdown-to-jsx";
+import MarkdownEditor, {
+ MarkdownPreviewProps,
+} from "@uiw/react-markdown-editor";
 
 type Props = {
  children: string;
- optionsOverride?: MarkdownToJSX.Options;
+ optionsOverride?: MarkdownPreviewProps;
 };
 
 const MarkdownWrapper = ({ children, optionsOverride }: Props) => {
  return (
- <Markdown
- options={{
- disableParsingRawHTML: true,
- overrides: {
- hr: { props: { className: "my-4" } },
- h1: { props: { className: "text-xl font-semibold my-3" } },
- h2: { props: { className: "text-xl font-semibold my-2" } },
- h3: { props: { className: "text-lg font-semibold my-1" } },
- h4: { props: { className: "text-base font-semibold" } },
- h5: { props: { className: "text-sm font-semibold" } },
- h6: { props: { className: "text-xs font-semibold" } },
- },
-
- ...optionsOverride,
- }}
- >
- {children.replace(/\n/g, "\n\r")}
- </Markdown>
+ <div data-color-mode="light">
+ <MarkdownEditor.Markdown
+ source={children.replace(/\n/g, "\n\r")}
+ {...optionsOverride}
+ />
+ </div>
  );
 };