Merge branch 'staging' of https://github.com/zeitgeistpm/ui into moon…

…beam-usdc-config

.env.development

@@ -35,4 +35,6 @@ NEXT_PUBLIC_VERCEL_ENV=staging
 NEXT_PUBLIC_SITE_URL="http://localhost:3000"
 NEXT_PUBLIC_SHOW_CROSS_CHAIN=true
 NEXT_PUBLIC_GRILLCHAT_DISABLE=true
-NEXT_PUBLIC_MARKET_ID_REFERENDUM_INDEX_MAP={"689":"245"}
+
+NEXT_PUBLIC_SANITY_PROJECT_ID="4wbnjof1"
+NEXT_PUBLIC_SANITY_VERSION="2022-03-07"

.env.example

@@ -46,7 +46,8 @@ NEXT_PUBLIC_WEB3AUTH_CLIENT_ID_ZTG=BHyRKGUvkWeDLXdLO1FBFZDqLtSMPuDN-zMWN1_Yb9KMZ
 
 NEXT_PUBLIC_OTHER_TAGS=["Coindesk"]
 
-#key is the market id, value is the referendum index
-NEXT_PUBLIC_MARKET_ID_REFERENDUM_INDEX_MAP={"689":"245"}
 NEXT_PUBLIC_COIN_GECKO_API_KEY=
 
+NEXT_PUBLIC_SANITY_PROJECT_ID="4wbnjof1"
+NEXT_PUBLIC_SANITY_VERSION="2022-03-07"
+

components/account/AccountButton.tsx

@@ -93,7 +93,7 @@ const AccountButton: FC<{
   const proxy = getProxyFor(activeAccount?.address);
 
   const accountModals = useAccountModals();
-  const { locationAllowed, isUsingVPN } = useUserLocation();
+  const { locationAllowed } = useUserLocation();
   const [hovering, setHovering] = useState<boolean>(false);
   const [showOnboarding, setShowOnboarding] = useState(false);
   const [showGetZtgModal, setShowGetZtgModal] = useState(false);
@@ -149,28 +149,23 @@ const AccountButton: FC<{
         >
           {hasWallet === true ? (
             <HeaderActionButton
-              disabled={
-                locationAllowed !== true || isUsingVPN || !isRpcSdk(sdk)
-              }
+              disabled={locationAllowed !== true || !isRpcSdk(sdk)}
               onClick={() => connect()}
             >
               Connect Wallet
             </HeaderActionButton>
           ) : (
             <HeaderActionButton
-              disabled={locationAllowed !== true || isUsingVPN}
+              disabled={locationAllowed !== true}
               onClick={() => setShowOnboarding(true)}
             >
               Get Started
             </HeaderActionButton>
           )}
 
-          {hovering === true &&
-          (locationAllowed !== true || isUsingVPN === true) ? (
+          {hovering === true && locationAllowed !== true ? (
             <div className="absolute bottom-0 right-0 rounded bg-white text-sm font-bold text-black">
-              {locationAllowed !== true
-                ? "Your jurisdiction is not authorised to trade"
-                : "Trading over a VPN is not allowed due to legal restrictions"}
+              Your jurisdiction is not authorised to trade
             </div>
           ) : (
             <></>

components/court/CourtExitButton.tsx

@@ -0,0 +1,135 @@
+import { Dialog } from "@headlessui/react";
+import { useQueryClient } from "@tanstack/react-query";
+import { isRpcSdk, ZTG } from "@zeitgeistpm/sdk";
+import { toMs } from "@zeitgeistpm/utility/dist/time";
+import Modal from "components/ui/Modal";
+import TransactionButton from "components/ui/TransactionButton";
+import { useConnectedCourtParticipant } from "lib/hooks/queries/court/useConnectedCourtParticipant";
+import { courtParticipantsRootKey } from "lib/hooks/queries/court/useCourtParticipants";
+import { useChainConstants } from "lib/hooks/queries/useChainConstants";
+import { useExtrinsic } from "lib/hooks/useExtrinsic";
+import { useSdkv2 } from "lib/hooks/useSdkv2";
+import { useChainTime } from "lib/state/chaintime";
+import { useNotifications } from "lib/state/notifications";
+import { useWallet } from "lib/state/wallet";
+import moment from "moment";
+import { useMemo, useState } from "react";
+
+const CourtExitButton = ({ className }: { className?: string }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { data: constants } = useChainConstants();
+  const [sdk, id] = useSdkv2();
+  const notificationStore = useNotifications();
+  const wallet = useWallet();
+  const participant = useConnectedCourtParticipant();
+  const queryClient = useQueryClient();
+  const time = useChainTime();
+
+  const {
+    isLoading: isLeaveLoading,
+    send: leaveCourt,
+    fee,
+  } = useExtrinsic(
+    () => {
+      if (!isRpcSdk(sdk) || !wallet.realAddress) return;
+      return sdk.api.tx.court.exitCourt(wallet.realAddress);
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries([id, courtParticipantsRootKey]);
+        notificationStore.pushNotification("Successfully exited court", {
+          type: "Success",
+        });
+      },
+    },
+  );
+
+  const cooldownTime = useMemo(() => {
+    if (time && participant && constants && participant?.prepareExitAt) {
+      const preparedExitAt = participant?.prepareExitAt;
+      const canExitAt = preparedExitAt + constants?.court.inflationPeriodBlocks;
+
+      return {
+        total: toMs(time, {
+          start: 0,
+          end: constants?.court.inflationPeriodBlocks,
+        }),
+        left: toMs(time, { start: time?.block, end: canExitAt }),
+      };
+    }
+
+    return null;
+  }, [time, participant, constants]);
+
+  const canExit = !Boolean(cooldownTime?.left && cooldownTime?.left > 0);
+
+  const percentage = cooldownTime
+    ? 100 - (cooldownTime?.left / cooldownTime?.total) * 100
+    : null;
+
+  return (
+    <>
+      <button
+        className={`rounded-md ${
+          canExit ? "bg-[#DC056C]" : "bg-gray-400"
+        }  px-4 py-2 text-white ${className}`}
+        onClick={() => setIsOpen(true)}
+        disabled={!canExit}
+      >
+        <div className="flex items-center gap-1">
+          {canExit ? "Exit" : "Preparing to exit"}
+          {!canExit && (
+            <span className="text-xs text-gray-500">
+              ({moment.duration(cooldownTime?.left).humanize()} left)
+            </span>
+          )}
+        </div>
+        {!canExit && (
+          <div className="mb-1 w-full">
+            <div className="h-[3px] w-full rounded-lg bg-gray-100 bg-opacity-25">
+              <div
+                className={`h-full rounded-lg bg-blue-400 transition-all`}
+                style={{ width: `${percentage}%` }}
+              />
+            </div>
+          </div>
+        )}
+      </button>
+      <Modal open={isOpen} onClose={() => setIsOpen(false)}>
+        <Dialog.Panel className="w-full max-w-[462px] rounded-[10px] bg-white p-[30px]">
+          <h3 className="mb-8">Exit Court</h3>
+          <div className="mb-3 flex flex-col">
+            <div className="flex">
+              <div className="mr-auto">Stake:</div>
+              <div>
+                {participant?.stake.div(ZTG).toNumber()}{" "}
+                {constants?.tokenSymbol}
+              </div>
+            </div>
+          </div>
+          <p className="mb-3 text-center text-sm text-gray-500">
+            By confirming exit you will leave the court, your stake will be
+            unlocked and moved back to your free balance.
+          </p>
+          <div className="mt-[20px] flex w-full flex-col items-center gap-8 text-ztg-18-150 font-semibold">
+            <div className="center mb-[10px] text-ztg-12-120 font-normal text-sky-600">
+              <span className="ml-1 text-black">
+                Network Fee: {fee ? fee.amount.div(ZTG).toFixed(3) : 0}{" "}
+                {fee?.symbol}
+              </span>
+            </div>
+            <TransactionButton
+              className="w-full max-w-[250px]"
+              disabled={isLeaveLoading}
+              onClick={() => leaveCourt()}
+            >
+              Confirm Exit
+            </TransactionButton>
+          </div>
+        </Dialog.Panel>
+      </Modal>
+    </>
+  );
+};
+
+export default CourtExitButton;

components/court/CourtStageTimer.tsx

@@ -58,9 +58,9 @@ export const CourtStageTimer = ({
           <div className="text-sm text-sky-600">
             {courtStageCopy[stage.type].description}
           </div>
-          <div className="ml-auto flex items-center gap-2">
+          <div className="ml-auto flex items-center gap-2 ">
             {stage.type !== "closed" && stage.type !== "reassigned" && (
-              <div className=" text-right text-black">
+              <div className="pl-1 text-right text-sm text-sky-600">
                 {timeLeft?.humanize()} left
               </div>
             )}

components/court/DelegateButton.tsx

@@ -16,7 +16,7 @@ import { useSdkv2 } from "lib/hooks/useSdkv2";
 import { useNotifications } from "lib/state/notifications";
 import { useWallet } from "lib/state/wallet";
 import { shortenAddress } from "lib/util";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 
 const DelegateButton = ({ address }: { address: string }) => {
@@ -37,10 +37,16 @@ const DelegateButton = ({ address }: { address: string }) => {
   const [sdk, id] = useSdkv2();
   const notificationStore = useNotifications();
   const wallet = useWallet();
-  const { data: balance } = useZtgBalance(wallet.realAddress);
+  const { data: freeZtgBalance } = useZtgBalance(wallet.realAddress);
   const connectedParticipant = useConnectedCourtParticipant();
   const queryClient = useQueryClient();
 
+  const balance = useMemo(() => {
+    return new Decimal(freeZtgBalance ?? 0).plus(
+      connectedParticipant?.stake ?? 0,
+    );
+  }, [freeZtgBalance, connectedParticipant?.stake]);
+
   const { isLoading, send, fee } = useExtrinsic(
     () => {
       const amount = getValues("amount");

components/court/JoinCourtAsJurorButton.tsx

@@ -14,7 +14,7 @@ import { useExtrinsic } from "lib/hooks/useExtrinsic";
 import { useSdkv2 } from "lib/hooks/useSdkv2";
 import { useNotifications } from "lib/state/notifications";
 import { useWallet } from "lib/state/wallet";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import { IoIosInformation, IoIosWarning } from "react-icons/io";
 
@@ -36,10 +36,16 @@ const JoinCourtAsJurorButton = ({ className }: { className?: string }) => {
   const [sdk, id] = useSdkv2();
   const notificationStore = useNotifications();
   const wallet = useWallet();
-  const { data: balance } = useZtgBalance(wallet.realAddress);
+  const { data: freeZtgBalance } = useZtgBalance(wallet.realAddress);
   const connectedParticipant = useConnectedCourtParticipant();
   const queryClient = useQueryClient();
 
+  const balance = useMemo(() => {
+    return new Decimal(freeZtgBalance ?? 0).plus(
+      connectedParticipant?.stake ?? 0,
+    );
+  }, [freeZtgBalance, connectedParticipant?.stake]);
+
   const { isLoading, send, fee } = useExtrinsic(
     () => {
       const amount = getValues("amount");
@@ -101,7 +107,7 @@ const JoinCourtAsJurorButton = ({ className }: { className?: string }) => {
           onClick={() => setIsOpen(true)}
         >
           {connectedParticipant?.type === "Juror"
-            ? "Increase Personal Stake"
+            ? "Set Personal Stake"
             : "Become a Juror"}
         </button>
         {connectedParticipant?.type === "Delegator" && (
@@ -125,7 +131,7 @@ const JoinCourtAsJurorButton = ({ className }: { className?: string }) => {
         <Dialog.Panel className="w-full max-w-[462px] rounded-[10px] bg-white p-[30px]">
           <h3 className="mb-4">
             {connectedParticipant?.type === "Juror"
-              ? "Increase Personal Stake"
+              ? "Set Personal Stake"
               : "Become a Juror"}
           </h3>
 
@@ -215,7 +221,7 @@ const JoinCourtAsJurorButton = ({ className }: { className?: string }) => {
                 disabled={formState.isValid === false || isLoading}
               >
                 {connectedParticipant?.type === "Juror"
-                  ? "Increase Stake"
+                  ? "Set Stake"
                   : "Join as Juror"}
               </FormTransactionButton>
             </form>

components/court/JurorsTable.tsx

@@ -5,6 +5,9 @@ import DelegateButton from "./DelegateButton";
 import { useCourtParticipants } from "lib/hooks/queries/court/useCourtParticipants";
 import Decimal from "decimal.js";
 import { ZTG } from "@zeitgeistpm/sdk";
+import { useIdentities } from "lib/hooks/queries/useIdentities";
+import { formatNumberLocalized } from "lib/util";
+import { isNumber } from "lodash-es";
 
 const columns: TableColumn[] = [
   {
@@ -32,44 +35,55 @@ const columns: TableColumn[] = [
     accessor: "status",
     type: "text",
   },
-  {
-    header: "",
-    accessor: "button",
-    type: "component",
-    width: "150px",
-  },
+  // {
+  //   header: "",
+  //   accessor: "button",
+  //   type: "component",
+  //   width: "150px",
+  // },
 ];
 
 const JurorsTable = () => {
   const { data: participants } = useCourtParticipants();
+  const jurors = participants?.filter((p) => p.type === "Juror");
+  const { data: identities } = useIdentities(
+    participants?.map((j) => j.address),
+  );
 
-  const tableData: TableData[] | undefined = participants
+  const tableData: TableData[] | undefined = jurors
     ?.filter((p) => p.type === "Juror")
-    .map((juror) => {
-      const delegators = participants.filter(
+    .map((juror, index) => {
+      const delegators = participants?.filter(
         (participant) =>
           participant.delegations?.some((d) => d === juror.address),
       );
 
-      const delegatorStake = delegators.reduce<Decimal>(
+      const delegatorStake = delegators?.reduce<Decimal>(
         (total, delegator) => total.plus(delegator.stake),
         new Decimal(0),
       );
 
+      const identity = identities?.[index];
+
       return {
         address: (
           <Link
             href={`/portfolio/${juror.address}`}
             className="flex items-center gap-2 text-xs"
           >
             <Avatar address={juror.address} />
-            <span>{juror.address}</span>
+            <span>{identity ? identity.displayName : juror.address}</span>
           </Link>
         ),
-        personalStake: juror.stake.div(ZTG).toNumber(),
-        totalStake: juror.stake.plus(delegatorStake).div(ZTG).toNumber(),
-        status: juror.prepareExit ? "Exiting" : "Active",
-        delegators: delegators.length,
+        personalStake: formatNumberLocalized(juror.stake.div(ZTG).toNumber()),
+        totalStake: formatNumberLocalized(
+          juror.stake
+            .plus(delegatorStake ?? 0)
+            .div(ZTG)
+            .toNumber(),
+        ),
+        status: isNumber(juror.prepareExitAt) ? "Exiting" : "Active",
+        delegators: delegators?.length ?? 0,
         button: <DelegateButton address={juror.address} />,
       };
     });