Pulling refs/heads/staging into test-staging

.env.example

@@ -55,3 +55,7 @@ NEXT_PUBLIC_SANITY_VERSION="2022-03-07"
 # enable topics
 NEXT_PUBLIC_SHOW_TOPICS=true
 
+# whitelisted creators of trusted markets
+# note: should be addresses of official zeitgeist markets or trusted third party creators.
+NEXT_PUBLIC_WHITELISTED_TRUSTED_CREATORS=["xxxxxx"]
+

components/assets/AssetActionButtons/AssetTradingButtons.tsx

@@ -52,7 +52,7 @@ const AssetTradingButtons = ({
       </div>
       {tradeItem && (
         <Modal open={isOpen} onClose={() => setIsOpen(false)}>
-          <Dialog.Panel className="w-full max-w-[462px] rounded-[10px] bg-white">
+          <Dialog.Panel className="w-full max-w-[564px] rounded-[10px] bg-white">
             {market?.scoringRule === ScoringRule.Lmsr ? (
               <Amm2TradeForm
                 marketId={marketId}

components/assets/AssetActionButtons/DisputeButton.tsx

@@ -44,7 +44,7 @@ const DisputeButton = ({
       </SecondaryButton>
 
       <Modal open={isOpen} onClose={() => setOpen(false)}>
-        <Dialog.Panel className="w-full max-w-[462px] rounded-[10px] bg-white">
+        <Dialog.Panel className="w-full max-w-[564px] rounded-[10px] bg-white">
           {market.marketType.scalar ? (
             <ScalarDisputeBox
               market={market}

components/court/CourtExitButton.tsx

@@ -96,7 +96,7 @@ const CourtExitButton = ({ className }: { className?: string }) => {
         )}
       </button>
       <Modal open={isOpen} onClose={() => setIsOpen(false)}>
-        <Dialog.Panel className="w-full max-w-[462px] rounded-[10px] bg-white p-[30px]">
+        <Dialog.Panel className="w-full max-w-[564px] rounded-[10px] bg-white p-[30px]">
           <h3 className="mb-8">Exit Court</h3>
           <div className="mb-3 flex flex-col">
             <div className="flex">

components/court/CourtUnstakeButton.tsx

@@ -52,7 +52,7 @@ const CourtUnstakeButton = ({ className }: { className?: string }) => {
         Unstake
       </button>
       <Modal open={isOpen} onClose={() => setIsOpen(false)}>
-        <Dialog.Panel className="w-full max-w-[462px] rounded-[10px] bg-white p-[30px]">
+        <Dialog.Panel className="w-full max-w-[564px] rounded-[10px] bg-white p-[30px]">
           <h3 className="mb-8">Unstake</h3>
           <div className="flex flex-col">
             <div className="flex">

components/court/DelegateButton.tsx

@@ -103,7 +103,7 @@ const DelegateButton = ({ address }: { address: string }) => {
         Delegate
       </SecondaryButton>
       <Modal open={isOpen} onClose={() => setIsOpen(false)}>
-        <Dialog.Panel className="w-full max-w-[462px] rounded-[10px] bg-white p-[30px]">
+        <Dialog.Panel className="w-full max-w-[564px] rounded-[10px] bg-white p-[30px]">
           <h3 className="mb-8">Delegate to</h3>
           <div className="flex items-center gap-2 text-xxs">
             <Avatar address={address} />

components/court/JoinCourtAsJurorButton.tsx

@@ -127,7 +127,7 @@ const JoinCourtAsJurorButton = ({ className }: { className?: string }) => {
       </div>
 
       <Modal open={isOpen} onClose={() => setIsOpen(false)}>
-        <Dialog.Panel className="w-full max-w-[462px] rounded-[10px] bg-white p-[30px]">
+        <Dialog.Panel className="w-full max-w-[564px] rounded-[10px] bg-white p-[30px]">
           <h3 className="mb-4">
             {connectedParticipant?.type === "Juror"
               ? "Set Personal Stake"

components/court/ManageDelegationButton.tsx

@@ -43,7 +43,7 @@ const ManageDelegationButton = ({ className }: { className?: string }) => {
       </div>
 
       <Modal open={isOpen} onClose={() => setIsOpen(false)}>
-        <Dialog.Panel className="w-full max-w-[462px] rounded-[10px] bg-white p-[30px]">
+        <Dialog.Panel className="w-full max-w-[564px] rounded-[10px] bg-white p-[30px]">
           <h3 className="mb-8">Delegate</h3>
 
           <div className="mt-[20px] flex w-full flex-col items-center gap-8 text-ztg-18-150 font-semibold">

components/create/editor/ResetButton.tsx

@@ -36,7 +36,7 @@ export const EditorResetButton = ({ editor }: EditorResetButtonProps) => {
         open={showResetConfirmation}
         onClose={() => setShowResetConfirmation(false)}
       >
-        <Dialog.Panel className="w-full max-w-[462px] cursor-pointer rounded-[10px] bg-white p-8">
+        <Dialog.Panel className="w-full max-w-[564px] cursor-pointer rounded-[10px] bg-white p-8">
           <div className="mb-6 text-center">
             Are you sure you want to clear the form?
           </div>

components/liquidity/LiquidityModal.tsx

@@ -128,7 +128,7 @@ const LiquidityModal = ({
 
   return (
     <Modal open={open} onClose={onClose}>
-      <Dialog.Panel className="w-full max-w-[462px] rounded-[10px] bg-white">
+      <Dialog.Panel className="w-full max-w-[564px] rounded-[10px] bg-white">
         <Tab.Group>
           <Tab.List className="flex h-[71px] text-center text-ztg-18-150 font-medium">
             <Tab className="w-1/2 rounded-tl-[10px] bg-anti-flash-white transition-all ui-selected:bg-white ui-selected:font-bold">

components/liquidity/LiquidityModalAmm2.tsx

@@ -40,7 +40,7 @@ const LiquidityModalAmm2 = ({
 
   return (
     <Modal open={open} onClose={onClose}>
-      <Dialog.Panel className="w-full max-w-[462px] rounded-[10px] bg-white">
+      <Dialog.Panel className="w-full max-w-[564px] rounded-[10px] bg-white">
         <Tab.Group>
           <Tab.List className="flex h-[71px] text-center text-ztg-18-150 font-medium">
             <Tab className="w-1/2 rounded-tl-[10px] bg-anti-flash-white transition-all ui-selected:bg-white ui-selected:font-bold">

components/markets/BuySellFullSetsButton.tsx

@@ -32,7 +32,7 @@ const BuySellFullSetsButton = ({
       </SecondaryButton>
 
       <Modal open={isOpen} onClose={() => setIsOpen(false)}>
-        <Dialog.Panel className="w-full max-w-[462px] rounded-[10px] bg-white">
+        <Dialog.Panel className="w-full max-w-[564px] rounded-[10px] bg-white">
           <Tab.Group>
             <Tab.List className="flex h-[71px] text-center text-ztg-18-150 font-medium">
               <Tab className="w-1/2 rounded-tl-[10px] bg-anti-flash-white transition-all ui-selected:bg-white ui-selected:font-bold">

components/markets/MarketAddresses.tsx

@@ -123,7 +123,7 @@ export const AddressDetails = ({
   return (
     <>
       <div
-        className="ztg-transition flex w-fit cursor-pointer flex-col items-start rounded-lg hover:bg-sky-100 sm:flex-row sm:items-center"
+        className="ztg-transition flex w-fit cursor-pointer flex-col items-start rounded-lg sm:flex-row sm:items-center"
         onClick={() => setInspected(true)}
         data-test="inspectButton"
       >

components/markets/MarketHeader.tsx

@@ -10,6 +10,7 @@ import {
 } from "@zeitgeistpm/sdk";
 import CourtStageTimer from "components/court/CourtStageTimer";
 import Avatar from "components/ui/Avatar";
+import InfoPopover from "components/ui/InfoPopover";
 import Modal from "components/ui/Modal";
 import Skeleton from "components/ui/Skeleton";
 import Decimal from "decimal.js";
@@ -39,10 +40,19 @@ import dynamic from "next/dynamic";
 import Image from "next/image";
 import { FC, PropsWithChildren, useState } from "react";
 import { X } from "react-feather";
+import { HiOutlineShieldCheck } from "react-icons/hi";
+import { MdModeEdit, MdOutlineHistory } from "react-icons/md";
 import { AddressDetails } from "./MarketAddresses";
 import { MarketTimer, MarketTimerSkeleton } from "./MarketTimer";
 import { MarketPromotionCallout } from "./PromotionCallout";
 
+export const QuillViewer = dynamic(
+  () => import("../../components/ui/QuillViewer"),
+  {
+    ssr: false,
+  },
+);
+
 const MarketFavoriteToggle = dynamic(() => import("./MarketFavoriteToggle"), {
   ssr: false,
 });
@@ -99,55 +109,56 @@ const MarketOutcome: FC<
   }>
 > = ({ status, outcome, by, setShowMarketHistory, marketHistory }) => {
   return (
-    <div
-      className={`center flex w-full items-center gap-4 rounded-lg py-3 ${
-        status === "Resolved"
-          ? "bg-green-light"
-          : status === "Reported"
-            ? "bg-powderblue"
-            : "bg-yellow-light"
-      }`}
-    >
-      <div className="center gap-1">
-        {status === "Reported" && (
-          <div className="flex gap-1">
-            <span>{status} Outcome </span>
-            {outcome ? (
-              <span className="font-bold">{outcome}</span>
-            ) : status === "Reported" ? (
-              <Skeleton width={100} height={24} />
-            ) : (
-              ""
-            )}
-          </div>
-        )}
+    <div className="flex gap-2">
+      {status === "Resolved" && (
+        <div className="flex-1 rounded-lg bg-green-light px-5 py-3">
+          <span className="text-gray-500">Outcome:</span>{" "}
+          <span className="font-bold">{outcome}</span>
+        </div>
+      )}
 
-        {status === "Disputed" && (
-          <div className="flex gap-1">
-            <span>{status} Outcome </span>
-          </div>
-        )}
+      {status === "Reported" && (
+        <div className="flex-1 rounded-lg bg-powderblue px-5 py-3">
+          <span>{status} Outcome </span>
+          {outcome ? (
+            <span className="font-bold">{outcome}</span>
+          ) : status === "Reported" ? (
+            <Skeleton width={100} height={24} />
+          ) : (
+            ""
+          )}
+        </div>
+      )}
 
-        {status !== "Resolved" && by && (
-          <div className="flex items-center gap-4">
-            <span>by: </span>
-            <div className="flex items-center">
-              <UserIdentity user={by} />
-            </div>
+      {status === "Disputed" && (
+        <div className="flex-1 rounded-lg bg-yellow-light px-5 py-3">
+          <span>{status} Outcome </span>
+        </div>
+      )}
+
+      {status !== "Resolved" && by && (
+        <div className="flex flex-1 gap-2 rounded-lg bg-gray-200 px-5 py-3">
+          <span className="text-gray-400">By: </span>
+          <div className="flex items-center">
+            <UserIdentity user={by} />
           </div>
+        </div>
+      )}
+
+      <div
+        className={`center flex w-40  items-center gap-4 rounded-lg bg-powderblue py-3`}
+      >
+        {marketHistory ? (
+          <button
+            className="center gap-3 font-medium text-ztg-blue"
+            onClick={() => setShowMarketHistory(true)}
+          >
+            History <MdOutlineHistory size={20} />
+          </button>
+        ) : (
+          <Skeleton width={100} height={24} />
         )}
       </div>
-
-      {marketHistory ? (
-        <button
-          className="font-medium text-ztg-blue"
-          onClick={() => setShowMarketHistory(true)}
-        >
-          See History
-        </button>
-      ) : (
-        <Skeleton width={100} height={24} />
-      )}
     </div>
   );
 };
@@ -523,6 +534,87 @@ const MarketHeader: FC<{
           </div>
         </div>
 
+        {!market.disputeMechanism && (
+          <div className="group relative">
+            <InfoPopover
+              position="bottom-end"
+              icon={
+                <div className="center h-[22px] w-[22px] rounded-full bg-orange-200">
+                  <HiOutlineShieldCheck size={14} />
+                </div>
+              }
+            >
+              <div className="text-left">
+                <div className="mb-3">
+                  This market has no dispute mechanism and will be resolved
+                  automatically when reported.
+                </div>
+                <div className="flex gap-4">
+                  <div>
+                    <AddressDetails title="Creator" address={market.creator} />
+                  </div>
+                  <div>
+                    <AddressDetails title="Oracle" address={market.oracle} />
+                  </div>
+                </div>
+              </div>
+            </InfoPopover>
+            <div className="absolute bottom-0 right-0 z-10 translate-x-[50%] translate-y-[115%] whitespace-nowrap pt-1 opacity-0 transition-opacity group-hover:opacity-100">
+              <div className="rounded-lg bg-orange-200 px-2 py-1 text-sm">
+                Trusted Market
+              </div>
+            </div>
+          </div>
+        )}
+
+        {market.hasEdits && (
+          <div className="group relative">
+            <InfoPopover
+              position="bottom-end"
+              icon={
+                <div className="center h-[22px] w-[22px] rounded-full bg-yellow-200">
+                  <MdModeEdit size={12} />
+                </div>
+              }
+            >
+              <div className="text-left">
+                <h4 className="mb-1 text-lg font-bold">Market edits</h4>
+                <p className="mb-3 text-sm text-gray-500">
+                  This market has been edited in the zeitgeist cms. The
+                  following is the immutable original metadata that was set when
+                  the market was created.
+                </p>
+
+                {market.originalMetadata?.question && (
+                  <div className="mb-3">
+                    <label className="mb-1 text-xs text-gray-500">
+                      Question:
+                    </label>
+                    <div>{market.originalMetadata.question}</div>
+                  </div>
+                )}
+
+                {market.originalMetadata?.description && (
+                  <div className="mb-3">
+                    <label className="mb-1 text-xs text-gray-500">
+                      Description:
+                    </label>
+                    <div>
+                      <QuillViewer
+                        value={market.originalMetadata.description}
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+            </InfoPopover>
+            <div className="absolute bottom-0 right-0 z-10 translate-x-[50%] translate-y-[115%] whitespace-nowrap pt-1 opacity-0 transition-opacity group-hover:opacity-100">
+              <div className="rounded-lg bg-yellow-200 px-2 py-1 text-sm">
+                Has been edited.
+              </div>
+            </div>
+          </div>
+        )}
         <div className="group relative flex items-center">
           <div className="pt-1">
             <MarketFavoriteToggle size={24} marketId={market.marketId} />

components/portfolio/DepositButton.tsx

@@ -164,7 +164,7 @@ const DepositModal = ({
   };
 
   return (
-    <Dialog.Panel className="w-full max-w-[462px] rounded-[10px] bg-white p-[30px]">
+    <Dialog.Panel className="w-full max-w-[564px] rounded-[10px] bg-white p-[30px]">
       <h3 className="mb-8 text-center">Deposit</h3>
       <div className="mt-[20px] flex w-full flex-col items-center gap-8 text-ztg-18-150 font-semibold">
         <Transfer sourceChain={sourceChain} destinationChain="Zeitgeist" />

components/portfolio/TransferButton.tsx

@@ -203,7 +203,7 @@ const TransferModal = ({
   };
 
   return (
-    <Dialog.Panel className="w-full max-w-[462px] rounded-[10px] bg-white p-[30px]">
+    <Dialog.Panel className="w-full max-w-[564px] rounded-[10px] bg-white p-[30px]">
       <h3 className="mb-5 text-center text-lg font-bold">On-Chain Transfers</h3>
       <form className="flex flex-col" onSubmit={handleSubmit(submit)}>
         <div className="mb-2 flex justify-between text-sm font-semibold">

components/portfolio/WithdrawButton.tsx

@@ -210,7 +210,7 @@ const WithdrawModal = ({
   };
 
   return (
-    <Dialog.Panel className="w-full max-w-[462px] rounded-[10px] bg-white p-[30px]">
+    <Dialog.Panel className="w-full max-w-[564px] rounded-[10px] bg-white p-[30px]">
       <h3 className="mb-8 text-center">Withdraw</h3>
       <div className="mt-[20px] flex w-full flex-col items-center gap-8 text-ztg-18-150 font-semibold">
         <Transfer destinationChain={toChain} sourceChain="Zeitgeist" />

components/settings/SettingsModal.tsx

@@ -28,7 +28,7 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ open, onClose }) => {
 
   return (
     <Modal open={open} onClose={onClose}>
-      <Dialog.Panel className="w-full max-w-[462px] rounded-md bg-white p-8">
+      <Dialog.Panel className="w-full max-w-[564px] rounded-md bg-white p-8">
         <h3 className="mb-5 text-center text-2xl">Settings</h3>
         <Tab.Group
           onChange={(index) => setTabSelection(index)}

components/ui/InfoPopover.tsx

@@ -86,7 +86,7 @@ export const InfoPopover: React.FC<InfoPopoverProps> = ({
               leaveTo="opacity-0 scale-1"
             >
               <Popover.Panel
-                className={`absolute z-[100] bg-tooltip-bg ${positionCss} w-screen rounded-md lg:w-[500px] ${popoverCss}`}
+                className={`absolute z-[100] bg-tooltip-bg ${positionCss} w-screen rounded-md lg:w-[564px] ${popoverCss}`}
               >
                 <div className="shadow-xs overflow-hidden rounded-md p-5 text-left text-base font-light text-black ring-2 ring-orange-400 ring-opacity-20">
                   {children}
@@ -100,7 +100,7 @@ export const InfoPopover: React.FC<InfoPopoverProps> = ({
       <Modal open={isOpen} onClose={() => setIsOpen(false)}>
         <Dialog.Panel
           onClick={() => setIsOpen(false)}
-          className={`w-full max-w-[462px] cursor-pointer rounded-[10px] bg-tooltip-bg p-6 ${className} text-base font-light`}
+          className={`w-full max-w-[564px] cursor-pointer rounded-[10px] bg-tooltip-bg p-6 ${className} text-base font-light`}
         >
           {title}
           <div className="text-center">{children}</div>