From 2de34583fa5d2813fffb5f5eda6e333840c2b863 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B8rn=20Andre=20Tangen=20=40gorillatron?= Date: Fri, 9 Feb 2024 12:17:16 +0100 Subject: [PATCH 1/3] Update MarketHeader.tsx --- components/markets/MarketHeader.tsx | 103 ++++++++++++++++++++-------- 1 file changed, 73 insertions(+), 30 deletions(-) diff --git a/components/markets/MarketHeader.tsx b/components/markets/MarketHeader.tsx index 8b6a499db..c193659ff 100644 --- a/components/markets/MarketHeader.tsx +++ b/components/markets/MarketHeader.tsx @@ -1,3 +1,5 @@ +import { Dialog } from "@headlessui/react"; +import { OutcomeReport } from "@zeitgeistpm/indexer"; import { IOBaseAssetId, IOForeignAssetId, @@ -6,50 +8,43 @@ import { ScalarRangeType, parseAssetId, } 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"; +import { PromotedMarket } from "lib/cms/get-promoted-markets"; import { BLOCK_TIME_SECONDS, ZTG } from "lib/constants"; -import { X } from "react-feather"; +import { lookupAssetImagePath } from "lib/constants/foreign-asset"; import { MarketPageIndexedData } from "lib/gql/markets"; +import { useMarketCaseId } from "lib/hooks/queries/court/useMarketCaseId"; import { useIdentity } from "lib/hooks/queries/useIdentity"; -import { shortenAddress } from "lib/util"; -import { formatNumberCompact } from "lib/util/format-compact"; -import { hasDatePassed } from "lib/util/hasDatePassed"; -import { FC, PropsWithChildren, useState } from "react"; -import { MarketTimer } from "./MarketTimer"; -import { MarketTimerSkeleton } from "./MarketTimer"; -import { OutcomeReport } from "@zeitgeistpm/indexer"; import { MarketEventHistory, useMarketEventHistory, } from "lib/hooks/queries/useMarketEventHistory"; -import Modal from "components/ui/Modal"; -import { getMarketStatusDetails } from "lib/util/market-status-details"; -import { formatScalarOutcome } from "lib/util/format-scalar-outcome"; -import { Dialog } from "@headlessui/react"; -import { usePoolLiquidity } from "lib/hooks/queries/usePoolLiquidity"; -import { estimateMarketResolutionDate } from "lib/util/estimate-market-resolution"; -import { MarketReport } from "lib/types"; -import { AddressDetails } from "./MarketAddresses"; -import Image from "next/image"; -import { - FOREIGN_ASSET_METADATA, - lookupAssetImagePath, -} from "lib/constants/foreign-asset"; import { useMarketsStats } from "lib/hooks/queries/useMarketsStats"; -import { MarketPromotionCallout } from "./PromotionCallout"; -import { PromotedMarket } from "lib/cms/get-promoted-markets"; -import { MarketDispute } from "lib/types/markets"; -import { useMarketCaseId } from "lib/hooks/queries/court/useMarketCaseId"; -import CourtStageTimer from "components/court/CourtStageTimer"; import { useMarketImage } from "lib/hooks/useMarketImage"; -import { isAbsoluteUrl } from "next/dist/shared/lib/utils"; +import { MarketReport } from "lib/types"; import { isMarketImageBase64Encoded } from "lib/types/create-market"; -import { MdModeEdit, MdOutlineHistory } from "react-icons/md"; -import InfoPopover from "components/ui/InfoPopover"; -import { FaRegEdit } from "react-icons/fa"; +import { MarketDispute } from "lib/types/markets"; +import { shortenAddress } from "lib/util"; +import { estimateMarketResolutionDate } from "lib/util/estimate-market-resolution"; +import { formatNumberCompact } from "lib/util/format-compact"; +import { formatScalarOutcome } from "lib/util/format-scalar-outcome"; +import { hasDatePassed } from "lib/util/hasDatePassed"; +import { getMarketStatusDetails } from "lib/util/market-status-details"; +import { isAbsoluteUrl } from "next/dist/shared/lib/utils"; 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"), @@ -58,6 +53,10 @@ export const QuillViewer = dynamic( }, ); +const MarketFavoriteToggle = dynamic(() => import("./MarketFavoriteToggle"), { + ssr: false, +}); + export const UserIdentity: FC< PropsWithChildren<{ user: string; @@ -535,9 +534,43 @@ const MarketHeader: FC<{ + {!market.disputeMechanism && ( +
+ + +
+ } + > +
+
+ This market has no dispute mechanism and will be resolved + automatically when reported. +
+
+
+ +
+
+ +
+
+
+ +
+
+ Trusted Market +
+
+ + )} + {market.hasEdits && (
@@ -582,6 +615,16 @@ const MarketHeader: FC<{
)} +
+
+ +
+
+
+ Toggle Favorited +
+
+
{promotionData && ( From 40a592bff66fd6db655a627f758de0fa38a6c442 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B8rn=20Andre=20Tangen=20=40gorillatron?= Date: Fri, 9 Feb 2024 12:17:36 +0100 Subject: [PATCH 2/3] Update MarketHeader.tsx --- components/markets/MarketHeader.tsx | 103 ++++++++-------------------- 1 file changed, 30 insertions(+), 73 deletions(-) diff --git a/components/markets/MarketHeader.tsx b/components/markets/MarketHeader.tsx index c193659ff..8b6a499db 100644 --- a/components/markets/MarketHeader.tsx +++ b/components/markets/MarketHeader.tsx @@ -1,5 +1,3 @@ -import { Dialog } from "@headlessui/react"; -import { OutcomeReport } from "@zeitgeistpm/indexer"; import { IOBaseAssetId, IOForeignAssetId, @@ -8,43 +6,50 @@ import { ScalarRangeType, parseAssetId, } 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"; -import { PromotedMarket } from "lib/cms/get-promoted-markets"; import { BLOCK_TIME_SECONDS, ZTG } from "lib/constants"; -import { lookupAssetImagePath } from "lib/constants/foreign-asset"; +import { X } from "react-feather"; import { MarketPageIndexedData } from "lib/gql/markets"; -import { useMarketCaseId } from "lib/hooks/queries/court/useMarketCaseId"; import { useIdentity } from "lib/hooks/queries/useIdentity"; +import { shortenAddress } from "lib/util"; +import { formatNumberCompact } from "lib/util/format-compact"; +import { hasDatePassed } from "lib/util/hasDatePassed"; +import { FC, PropsWithChildren, useState } from "react"; +import { MarketTimer } from "./MarketTimer"; +import { MarketTimerSkeleton } from "./MarketTimer"; +import { OutcomeReport } from "@zeitgeistpm/indexer"; import { MarketEventHistory, useMarketEventHistory, } from "lib/hooks/queries/useMarketEventHistory"; -import { useMarketsStats } from "lib/hooks/queries/useMarketsStats"; -import { useMarketImage } from "lib/hooks/useMarketImage"; +import Modal from "components/ui/Modal"; +import { getMarketStatusDetails } from "lib/util/market-status-details"; +import { formatScalarOutcome } from "lib/util/format-scalar-outcome"; +import { Dialog } from "@headlessui/react"; +import { usePoolLiquidity } from "lib/hooks/queries/usePoolLiquidity"; +import { estimateMarketResolutionDate } from "lib/util/estimate-market-resolution"; import { MarketReport } from "lib/types"; -import { isMarketImageBase64Encoded } from "lib/types/create-market"; +import { AddressDetails } from "./MarketAddresses"; +import Image from "next/image"; +import { + FOREIGN_ASSET_METADATA, + lookupAssetImagePath, +} from "lib/constants/foreign-asset"; +import { useMarketsStats } from "lib/hooks/queries/useMarketsStats"; +import { MarketPromotionCallout } from "./PromotionCallout"; +import { PromotedMarket } from "lib/cms/get-promoted-markets"; import { MarketDispute } from "lib/types/markets"; -import { shortenAddress } from "lib/util"; -import { estimateMarketResolutionDate } from "lib/util/estimate-market-resolution"; -import { formatNumberCompact } from "lib/util/format-compact"; -import { formatScalarOutcome } from "lib/util/format-scalar-outcome"; -import { hasDatePassed } from "lib/util/hasDatePassed"; -import { getMarketStatusDetails } from "lib/util/market-status-details"; +import { useMarketCaseId } from "lib/hooks/queries/court/useMarketCaseId"; +import CourtStageTimer from "components/court/CourtStageTimer"; +import { useMarketImage } from "lib/hooks/useMarketImage"; import { isAbsoluteUrl } from "next/dist/shared/lib/utils"; -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 { isMarketImageBase64Encoded } from "lib/types/create-market"; import { MdModeEdit, MdOutlineHistory } from "react-icons/md"; -import { AddressDetails } from "./MarketAddresses"; -import { MarketTimer, MarketTimerSkeleton } from "./MarketTimer"; -import { MarketPromotionCallout } from "./PromotionCallout"; +import InfoPopover from "components/ui/InfoPopover"; +import { FaRegEdit } from "react-icons/fa"; +import dynamic from "next/dynamic"; export const QuillViewer = dynamic( () => import("../../components/ui/QuillViewer"), @@ -53,10 +58,6 @@ export const QuillViewer = dynamic( }, ); -const MarketFavoriteToggle = dynamic(() => import("./MarketFavoriteToggle"), { - ssr: false, -}); - export const UserIdentity: FC< PropsWithChildren<{ user: string; @@ -534,43 +535,9 @@ const MarketHeader: FC<{ - {!market.disputeMechanism && ( -
- - -
- } - > -
-
- This market has no dispute mechanism and will be resolved - automatically when reported. -
-
-
- -
-
- -
-
-
- -
-
- Trusted Market -
-
- - )} - {market.hasEdits && (
@@ -615,16 +582,6 @@ const MarketHeader: FC<{
)} -
-
- -
-
-
- Toggle Favorited -
-
-
{promotionData && ( From 5c29f277134972bed61a6e2e8c5cc598287a99d1 Mon Sep 17 00:00:00 2001 From: Tom Robiquet Date: Fri, 16 Feb 2024 11:33:25 +0200 Subject: [PATCH 3/3] Add tutorial links --- components/front-page/WatchHow.tsx | 26 +++++++++++--------------- pages/create-account.tsx | 14 ++++++++------ 2 files changed, 19 insertions(+), 21 deletions(-) diff --git a/components/front-page/WatchHow.tsx b/components/front-page/WatchHow.tsx index a44242d40..e87df9fdf 100644 --- a/components/front-page/WatchHow.tsx +++ b/components/front-page/WatchHow.tsx @@ -76,21 +76,17 @@ const WatchHow = () => { ))} -
- - - Watch how - - -
- Coming soon! -
-
+ + Watch how + { })}
- {/* TODO: Update href attribute */} - -
- Watch this tutorial about how to buy tokens using crypto -
+ +
Watch this tutorial about how to buy tokens using crypto

Next Steps