Merge branch 'staging' of https://github.com/zeitgeistpm/ui into tr-o…

…rder-book
zeitgeistpm · Jun 19, 2024 · dd75405 · dd75405
2 parents 1b8753d + 1373aac
commit dd75405
Show file tree

Hide file tree

Showing 41 changed files with 468 additions and 255 deletions.
diff --git a/components/account/AccountModalContent.tsx b/components/account/AccountModalContent.tsx
@@ -5,6 +5,7 @@ import { useWallet } from "lib/state/wallet";
 import { useZtgBalance } from "lib/hooks/queries/useZtgBalance";
 import { ZTG } from "@zeitgeistpm/sdk";
 import { useChainConstants } from "lib/hooks/queries/useChainConstants";
+import { formatNumberLocalized } from "lib/util";
 
 const AccountModalContent: FC = () => {
   const { activeAccount, disconnectWallet, accounts, selectAccount } =
@@ -38,40 +39,40 @@ const AccountModalContent: FC = () => {
         value={value}
         onChange={onAccountChange}
       />
-      <div className="mt-ztg-15 flex h-ztg-50 items-center justify-between">
-        <div className="flex h-full flex-grow items-center rounded-ztg-10 bg-sky-100 dark:bg-black">
-          <div className="flex items-center px-ztg-8">
-            <div className="center h-ztg-28 w-ztg-28 rounded-full bg-white dark:bg-sky-1000">
-              <div className="center h-ztg-22 w-ztg-22 rounded-full bg-sky-100 dark:bg-black">
-                <div className="center h-ztg-16 w-ztg-16 rounded-full bg-border-dark dark:bg-sky-1000">
+      <div className="mt-4 flex h-12.5 items-center justify-between">
+        <div className="flex h-full w-full items-center rounded-lg bg-sky-100 px-2">
+          <div className="flex items-center px-2">
+            <div className="center rounded-full bg-white">
+              <div className="center rounded-full bg-sky-100">
+                <div className="center h-6 w-6 rounded-full">
                   <img
-                    src="/icons/acc-balance.svg"
+                    src="/currencies/ztg.svg"
                     alt="Account balance"
                     style={{ marginTop: "-1px" }}
                   />
                 </div>
               </div>
             </div>
-            <div className="ml-ztg-16 flex flex-col">
-              <div className="text-ztg-10-150 font-bold uppercase text-sky-600">
+            <div className="ml-4 flex flex-col">
+              <div className="text-xxs font-bold uppercase text-sky-600">
                 balance
               </div>
-              <div className="font-mono text-ztg-14-120 font-bold text-sheen-green">
-                {`${activeBalance?.div(ZTG).toFixed(4)} ${
+              <div className="font-mono text-sm font-bold text-blue">
+                {`${formatNumberLocalized(Number(activeBalance?.div(ZTG)))} ${
                   constants?.tokenSymbol ?? ""
                 }` ?? "---"}
               </div>
             </div>
           </div>
         </div>
         <div
-          className="ml-ztg-16 flex h-full w-ztg-176 cursor-pointer items-center justify-evenly rounded-ztg-10 bg-border-light text-white dark:bg-sky-700"
+          className="ml-4 flex h-12.5 cursor-pointer items-center justify-center gap-2 rounded-lg bg-border-light px-2 text-white md:w-44"
           onClick={() => {
             disconnectWallet();
           }}
         >
-          <div className=" text-ztg-16-150 capitalize">disconnect</div>
-          <LogOut size={16} className="-ml-ztg-30 text-white" />
+          <div className="capitalize">disconnect</div>
+          <LogOut size={16} className="text-white" />
         </div>
       </div>
     </div>

diff --git a/components/account/AccountModalHead.tsx b/components/account/AccountModalHead.tsx
@@ -9,9 +9,9 @@ const AccountModalHead = () => {
 
   return (
     <div className="flex flex-row justify-between">
-      <div className="text-ztg-16-150 font-bold text-black">Account</div>
+      <div className="text-lg font-bold">Account</div>
       <div
-        className="mr-ztg-7 cursor-pointer underline"
+        className="cursor-pointer rounded-lg border-2 border-gray-300 px-1 hover:border-gray-400"
         onClick={() => {
           switchExtension();
         }}

diff --git a/components/account/AccountSelect.tsx b/components/account/AccountSelect.tsx
@@ -9,7 +9,6 @@ import Select, {
   SingleValueProps,
   StylesConfig,
 } from "react-select";
-
 import CopyIcon from "../ui/CopyIcon";
 import AccountSelectOption from "./AccountSelectOption";
 import AccountSelectValue from "./AccountSelectValue";
@@ -19,7 +18,7 @@ export type AccountOption = { label: string; value: string };
 const Control = ({ children, ...rest }: ControlProps<AccountOption, false>) => {
   return (
     <components.Control {...(rest as ControlProps)}>
-      <div className="flex cursor-pointer items-center justify-between rounded-ztg-10 bg-sky-100 dark:bg-black">
+      <div className="flex cursor-pointer items-center justify-between rounded-lg bg-sky-100">
         {children}
       </div>
     </components.Control>
@@ -28,7 +27,6 @@ const Control = ({ children, ...rest }: ControlProps<AccountOption, false>) => {
 
 const Option = (props: OptionProps<AccountOption, false>) => {
   const { label, value } = props.data;
-
   return (
     <components.Option {...props} className="bg-black">
       <AccountSelectOption name={label} address={value} />
@@ -47,7 +45,7 @@ const DropdownIndicator = () => {
 };
 
 const IndicatorSeparator = () => {
-  return <></>;
+  return null;
 };
 
 const customStyles: StylesConfig<AccountOption> = {
@@ -98,32 +96,29 @@ const AccountSelect: FC<AccountSelectProps> = ({
   const wallet = useWallet();
 
   return (
-    <div className="flex h-ztg-50 w-full items-center rounded-ztg-10 bg-sky-100 dark:bg-black">
-      <div className="flex-1">
-        <Select
-          isSearchable={false}
-          options={options}
-          styles={customStyles}
-          value={value}
-          isMulti={false}
-          isDisabled={disabled}
-          placeholder="Select an account"
-          components={{
-            Control,
-            Option,
-            SingleValue,
-            DropdownIndicator,
-            IndicatorSeparator,
-          }}
-          onChange={onChange}
-        />
-      </div>
-
+    <div className="flex w-full items-center justify-between rounded-lg bg-sky-100 px-2">
+      <Select
+        isSearchable={false}
+        options={options}
+        styles={customStyles}
+        value={value}
+        isMulti={false}
+        isDisabled={disabled}
+        placeholder="Select an account"
+        components={{
+          Control,
+          Option,
+          SingleValue,
+          DropdownIndicator,
+          IndicatorSeparator,
+        }}
+        onChange={onChange}
+      />
       {wallet.activeAccount?.address && (
         <CopyIcon
           copyText={wallet.activeAccount?.address}
-          className="w-auto pr-ztg-8"
-          size={16}
+          className="w-auto px-1"
+          size={18}
         />
       )}
     </div>

diff --git a/components/account/AccountSelectValue.tsx b/components/account/AccountSelectValue.tsx
@@ -1,30 +1,34 @@
 import Avatar from "components/ui/Avatar";
 import { shortenAddress } from "lib/util";
-
+import CopyIcon from "../ui/CopyIcon";
+import { IoIosArrowDropdownCircle } from "react-icons/io";
 import React, { FC } from "react";
-
+import { useWallet } from "lib/state/wallet";
 export interface AccountSelectValueProps {
   name: string;
   address: string;
 }
 
 const AccountSelectValue: FC<AccountSelectValueProps> = ({ name, address }) => {
+  const wallet = useWallet();
   return (
-    <div className="flex h-full  w-full items-center rounded-ztg-10 bg-sky-100 px-ztg-8 dark:bg-black">
-      <div className="center h-ztg-28 w-ztg-28 rounded-full bg-white dark:bg-sky-1000">
-        <div className="h-ztg-22 w-ztg-22 rounded-full bg-sky-100 dark:bg-black">
+    <div className="flex h-full w-full items-center rounded-lg bg-sky-100 px-2">
+      <div className="center rounded-full bg-white">
+        <div className="rounded-full bg-sky-100">
           <Avatar zoomed address={address} />
         </div>
       </div>
-      <div className="ml-ztg-16 flex flex-col">
-        <div className="text-ztg-10-150 font-bold uppercase text-sky-600">
-          {name}
-        </div>
-        <div className="font-mono text-ztg-12-120 font-semibold md:hidden">
+      <div className="ml-4 flex flex-col">
+        <div className="text-xxs font-bold uppercase text-sky-600">{name}</div>
+        <div className="flex items-center gap-1 font-mono text-sm font-semibold md:hidden">
           {shortenAddress(address, 8, 12)}
+          <IoIosArrowDropdownCircle size={16} />
         </div>
-        <div className="hidden font-mono text-ztg-12-120 font-semibold md:block">
+        <div className="hidden gap-1 font-mono text-sm font-semibold md:flex">
           {address}
+          {wallet.activeAccount?.address && (
+            <IoIosArrowDropdownCircle size={18} />
+          )}
         </div>
       </div>
     </div>

diff --git a/components/assets/AssetActionButtons/AssetTradingButtons.tsx b/components/assets/AssetActionButtons/AssetTradingButtons.tsx
@@ -53,19 +53,15 @@ const AssetTradingButtons = ({
       {tradeItem && (
         <Modal open={isOpen} onClose={() => setIsOpen(false)}>
           <Dialog.Panel className="w-full max-w-[564px] rounded-[10px] bg-white">
-            {market?.scoringRule === ScoringRule.AmmCdaHybrid ? (
-              <Amm2TradeForm
-                marketId={marketId}
-                initialAsset={assetId}
-                selectedTab={
-                  tradeItem.action === "buy"
-                    ? TradeTabType.Buy
-                    : TradeTabType.Sell
-                }
-              />
-            ) : (
-              <TradeForm />
-            )}
+            <Amm2TradeForm
+              marketId={marketId}
+              initialAsset={assetId}
+              selectedTab={
+                tradeItem.action === "buy"
+                  ? TradeTabType.Buy
+                  : TradeTabType.Sell
+              }
+            />
           </Dialog.Panel>
         </Modal>
       )}

diff --git a/components/court/DelegateButton.tsx b/components/court/DelegateButton.tsx
@@ -168,6 +168,7 @@ const DelegateButton = ({ address }: { address: string }) => {
                 </span>
               </div>
               <FormTransactionButton
+                loading={isLoading}
                 className="w-full max-w-[250px]"
                 disabled={formState.isValid === false || isLoading}
               >

diff --git a/components/court/JoinCourtAsJurorButton.tsx b/components/court/JoinCourtAsJurorButton.tsx
@@ -216,6 +216,7 @@ const JoinCourtAsJurorButton = ({ className }: { className?: string }) => {
               </div>
 
               <FormTransactionButton
+                loading={isLoading}
                 className="w-full max-w-[250px]"
                 disabled={formState.isValid === false || isLoading}
               >

diff --git a/components/court/ManageDelegationsForm.tsx b/components/court/ManageDelegationsForm.tsx
@@ -249,6 +249,7 @@ const ManageDelegationsForm = (props: ManageDelegationsFormProps) => {
       </div>
 
       <FormTransactionButton
+        loading={isLoading}
         className="w-full max-w-[250px]"
         disabled={
           formState.isValid === false ||

diff --git a/components/liquidity/ExitPoolFormAmm2.tsx b/components/liquidity/ExitPoolFormAmm2.tsx
@@ -245,6 +245,7 @@ const ExitPoolForm = ({
         {...register("poolSharesPercentage", { min: 0, value: "0" })}
       />
       <FormTransactionButton
+        loading={isLoading}
         disabled={formState.isValid === false || isLoading}
       >
         Exit Pool

diff --git a/components/liquidity/JoinPoolFormAmm2.tsx b/components/liquidity/JoinPoolFormAmm2.tsx
@@ -235,6 +235,7 @@ const JoinPoolForm = ({
       </div>
 
       <FormTransactionButton
+        loading={isLoading}
         disabled={
           formState.isValid === false ||
           isLoading ||

diff --git a/components/liquidity/MarketLiquiditySection.tsx b/components/liquidity/MarketLiquiditySection.tsx
@@ -28,10 +28,7 @@ export const MarketLiquiditySection = ({
   market: FullMarketFragment;
   poll?: boolean;
 }) => {
-  const marketHasPool =
-    (market?.scoringRule === ScoringRule.Cpmm && market.pool != null) ||
-    (market?.scoringRule === ScoringRule.AmmCdaHybrid &&
-      market.neoPool != null);
+  const marketHasPool = market.neoPool != null;
 
   return (
     <>

diff --git a/components/markets/BuyFullSetForm.tsx b/components/markets/BuyFullSetForm.tsx
@@ -158,7 +158,11 @@ const BuyFullSetForm = ({
           </p>
         </div>
       </div>
-      <TransactionButton onClick={handleSignTransaction} disabled={disabled}>
+      <TransactionButton
+        onClick={handleSignTransaction}
+        disabled={disabled}
+        loading={isLoading}
+      >
         Confirm Buy
         {fee && (
           <span className="block text-xs font-normal">

diff --git a/components/markets/MarketHeader.tsx b/components/markets/MarketHeader.tsx
@@ -45,6 +45,7 @@ import { MdModeEdit, MdOutlineHistory } from "react-icons/md";
 import { AddressDetails } from "./MarketAddresses";
 import { MarketTimer, MarketTimerSkeleton } from "./MarketTimer";
 import { MarketPromotionCallout } from "./PromotionCallout";
+import Link from "next/link";
 
 export const QuillViewer = dynamic(
   () => import("../../components/ui/QuillViewer"),
@@ -140,7 +141,9 @@ const MarketOutcome: FC<
         <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} />
+            <Link href={`/portfolio/${by}`}>
+              <UserIdentity user={by} />
+            </Link>
           </div>
         </div>
       )}
@@ -236,10 +239,12 @@ const MarketHistory: FC<
                   <span className="inline font-medium">
                     <span className="font-bold">
                       {marketHistory?.reported?.by ? (
-                        <UserIdentity
-                          user={marketHistory.reported.by}
-                          className="items-baseline"
-                        />
+                        <Link href={`/portfolio/${marketHistory.reported.by}`}>
+                          <UserIdentity
+                            user={marketHistory.reported.by}
+                            className="items-baseline"
+                          />
+                        </Link>
                       ) : (
                         "Unknown"
                       )}
@@ -270,10 +275,12 @@ const MarketHistory: FC<
                         <span className="inline font-medium">
                           <span className="font-bold">
                             {dispute?.by ? (
-                              <UserIdentity
-                                user={dispute?.by}
-                                className="items-baseline"
-                              />
+                              <Link href={`/portfolio/${dispute.by}`}>
+                                <UserIdentity
+                                  user={dispute?.by}
+                                  className="items-baseline"
+                                />
+                              </Link>
                             ) : (
                               "Unknown"
                             )}
@@ -631,7 +638,7 @@ const MarketHeader: FC<{
         {marketStage?.type === "Court" ? (
           <div className="w-full">
             <h3 className="mb-2 text-sm text-gray-700">Market is in court</h3>
-            {caseId ? (
+            {caseId != null ? (
               <CourtStageTimer caseId={caseId} />
             ) : (
               <Skeleton height={22} className="w-full rounded-md" />

diff --git a/components/markets/SellFullSetForm.tsx b/components/markets/SellFullSetForm.tsx
@@ -137,7 +137,11 @@ const SellFullSetForm = ({
           </p>
         </div>
       </div>
-      <TransactionButton onClick={handleSignTransaction} disabled={disabled}>
+      <TransactionButton
+        onClick={handleSignTransaction}
+        disabled={disabled}
+        loading={isLoading}
+      >
         Confirm Sell
         {fee && (
           <span className="block text-xs font-normal">

diff --git a/components/portfolio/DepositButton.tsx b/components/portfolio/DepositButton.tsx
@@ -235,6 +235,7 @@ const DepositModal = ({
             </span>
           </div>
           <FormTransactionButton
+            loading={isLoading}
             className="w-full max-w-[250px]"
             disabled={formState.isValid === false || isLoading}
             disableFeeCheck={true}