fix(PromptInputCard): brings back as EVM compatible

aufacicenta · Feb 5, 2024 · 5235db9 · 5235db9
1 parent 4903463
commit 5235db9
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 34 deletions.
diff --git a/app/src/app/prompt-wars/PromptWars.tsx b/app/src/app/prompt-wars/PromptWars.tsx
@@ -9,18 +9,17 @@ import { Typography } from "ui/typography/Typography";
 import { GenericLoader } from "ui/generic-loader/GenericLoader";
 import { FaqsModal } from "ui/pulse/prompt-wars/faqs-modal/FaqsModal";
 import { useToastContext } from "hooks/useToastContext/useToastContext";
-import { ResultsModal } from "ui/pulse/prompt-wars/results-modal/ResultsModal";
 import { ShareModal } from "ui/pulse/prompt-wars/share-modal/ShareModal";
 import { useEVMPromptWarsMarketContractContext } from "context/evm/prompt-wars-market-contract/useEVMPromptWarsMarketContractContext";
 import { ImgPromptCard } from "ui/pulse/img-prompt-card/ImgPromptCard";
+import { PromptInputCard } from "ui/pulse/prompt-input-card/PromptInputCard";
 
 import styles from "./PromptWars.module.scss";
 import { PromptWarsProps } from "./PromptWars.types";
 
 export const PromptWars: React.FC<PromptWarsProps> = ({ marketId, className }) => {
   const [isShareModalVisible, displayShareModal] = useState(false);
   const [isFAQsModalVisible, displayFAQsModal] = useState(false);
-  const [isResultsModalVisible, displayResultsModal] = useState(false);
 
   const { marketContractValues, fetchMarketContractValues, ftTransferCall, sell, create, actions } =
     useEVMPromptWarsMarketContractContext();
@@ -84,14 +83,6 @@ export const PromptWars: React.FC<PromptWarsProps> = ({ marketId, className }) =
     displayFAQsModal(true);
   };
 
-  const onClickCloseResultsModal = () => {
-    displayResultsModal(false);
-  };
-
-  const onClickSeeResults = () => {
-    displayResultsModal(true);
-  };
-
   const onClickCreateNewGame = async () => {
     await create();
   };
@@ -120,16 +111,15 @@ export const PromptWars: React.FC<PromptWarsProps> = ({ marketId, className }) =
                   marketContractValues={marketContractValues}
                   datesElement={<></>}
                   onClaimDepositUnresolved={onClaimDepositUnresolved}
-                  onClickSeeResults={onClickSeeResults}
                   onClickCreateNewGame={onClickCreateNewGame}
                 />
               </Grid.Col>
               <Grid.Col lg={5} xs={12}>
-                {/* <PromptInputCard
+                <PromptInputCard
                   onSubmit={onSubmit}
                   onClickFAQsButton={onClickFAQsButton}
                   marketContractValues={marketContractValues}
-                /> */}
+                />
               </Grid.Col>
             </Grid.Row>
           </div>
@@ -139,10 +129,6 @@ export const PromptWars: React.FC<PromptWarsProps> = ({ marketId, className }) =
       {isShareModalVisible && <ShareModal onClose={onClickCloseShareModal} />}
 
       {isFAQsModalVisible && <FaqsModal onClose={onClickCloseFAQsModal} />}
-
-      {isResultsModalVisible && (
-        <ResultsModal onClose={onClickCloseResultsModal} marketContractValues={marketContractValues} />
-      )}
     </>
   );
 };
diff --git a/app/src/ui/pulse/img-prompt-card/ImgPromptCard.tsx b/app/src/ui/pulse/img-prompt-card/ImgPromptCard.tsx
@@ -22,7 +22,6 @@ export const ImgPromptCard: React.FC<ImgPromptCardProps> = ({
   className,
   datesElement,
   onClaimDepositUnresolved,
-  onClickSeeResults,
   onClickCreateNewGame,
 }) => {
   const { address } = useAccount();
@@ -40,9 +39,6 @@ export const ImgPromptCard: React.FC<ImgPromptCardProps> = ({
           <Typography.Text flat className={styles["img-prompt-card__status--text"]}>
             {t(`promptWars.status.${status}`)} <span>(closest to 0 wins)</span>
           </Typography.Text>
-          <Typography.MiniDescription onClick={onClickSeeResults}>
-            {t("promptWars.status.miniDescription.seeResults")}
-          </Typography.MiniDescription>
         </>
       );
     }
@@ -66,7 +62,6 @@ export const ImgPromptCard: React.FC<ImgPromptCardProps> = ({
             <br />
             <span className={styles["img-prompt-card__status--winner"]}>{resolution?.playerId}</span>
           </Typography.Text>
-          <Typography.MiniDescription onClick={onClickSeeResults}>See results</Typography.MiniDescription>
         </>
       );
     }

diff --git a/app/src/ui/pulse/img-prompt-card/ImgPromptCard.types.ts b/app/src/ui/pulse/img-prompt-card/ImgPromptCard.types.ts
@@ -5,7 +5,6 @@ import { PromptWarsMarketContractValues } from "context/evm/prompt-wars-market-c
 export type ImgPromptCardProps = {
   onClickCreateNewGame: () => void;
   onClaimDepositUnresolved: () => void;
-  onClickSeeResults: () => void;
   marketContractValues: PromptWarsMarketContractValues;
   marketId: string;
   currentResultElement?: ReactNode;

diff --git a/app/src/ui/pulse/prompt-input-card/PromptInputCard.tsx b/app/src/ui/pulse/prompt-input-card/PromptInputCard.tsx
@@ -3,6 +3,7 @@ import { Field, Form as RFForm } from "react-final-form";
 import { useState } from "react";
 import { useTranslation } from "next-i18next";
 import { useAccount } from "wagmi";
+import { useWeb3Modal } from "@web3modal/wagmi/react";
 
 import { Card } from "ui/card/Card";
 import { Typography } from "ui/typography/Typography";
@@ -11,29 +12,33 @@ import { Icon } from "ui/icon/Icon";
 import { PromptWarsMarketContractStatus } from "providers/near/contracts/prompt-wars/prompt-wars.types";
 import currency from "providers/currency";
 import pulse from "providers/pulse";
-import { useNearPromptWarsMarketContractContext } from "context/near/prompt-wars-market-contract/useNearPromptWarsMarketContractContext";
+import { useEVMPromptWarsMarketContractContext } from "context/evm/prompt-wars-market-contract/useEVMPromptWarsMarketContractContext";
 
 import { PromptInputCardProps } from "./PromptInputCard.types";
 import styles from "./PromptInputCard.module.scss";
 
-const handleOnDisplayWidgetClick = () => undefined;
-
 export const PromptInputCard: React.FC<PromptInputCardProps> = ({
   onSubmit,
   className,
   onClickFAQsButton,
   marketContractValues,
 }) => {
   const [isNegativePromptFieldVisible, displayNegativePromptField] = useState(false);
+
+  const { t } = useTranslation(["prompt-wars"]);
+
   const { isConnected } = useAccount();
+  const { open } = useWeb3Modal();
 
-  const { actions } = useNearPromptWarsMarketContractContext();
+  const { actions } = useEVMPromptWarsMarketContractContext();
 
   const { status, fees, collateralToken } = marketContractValues;
 
   const isDisabled = status !== PromptWarsMarketContractStatus.OPEN;
 
-  const { t } = useTranslation(["prompt-wars"]);
+  const handleOnDisplayWidgetClick = () => {
+    open();
+  };
 
   return (
     <RFForm

diff --git a/app/src/ui/pulse/prompt-wars/results-modal/ResultsModal.tsx b/app/src/ui/pulse/prompt-wars/results-modal/ResultsModal.tsx
@@ -7,8 +7,8 @@ import { Grid } from "ui/grid/Grid";
 import { Card } from "ui/card/Card";
 import ipfs from "providers/ipfs";
 import { OutcomeId } from "providers/near/contracts/prompt-wars/prompt-wars.types";
-import { useNearPromptWarsMarketContractContext } from "context/near/prompt-wars-market-contract/useNearPromptWarsMarketContractContext";
 import { Icon } from "ui/icon/Icon";
+import { useEVMPromptWarsMarketContractContext } from "context/evm/prompt-wars-market-contract/useEVMPromptWarsMarketContractContext";
 
 import styles from "./ResultsModal.module.scss";
 import { ResultsModalOutcomeToken, ResultsModalProps } from "./ResultsModal.types";
@@ -17,9 +17,9 @@ export const ResultsModal: React.FC<ResultsModalProps> = ({ onClose, className,
   const [outcomeToken, setOutcomeToken] = useState<ResultsModalOutcomeToken | undefined>();
   const [winnerOutcomeToken, setWinnerOutcomeToken] = useState<ResultsModalOutcomeToken | undefined>();
 
-  const contract = useNearPromptWarsMarketContractContext();
+  const contract = useEVMPromptWarsMarketContractContext();
 
-  const { resolution, market, outcomeIds, isResolved } = marketContractValues;
+  const { resolution, market, isResolved } = marketContractValues;
 
   const getOutcomeToken = async (outcome_id: OutcomeId) => {
     const ot = await contract.getOutcomeToken({ outcome_id });
@@ -79,9 +79,9 @@ export const ResultsModal: React.FC<ResultsModalProps> = ({ onClose, className,
         <Typography.Text flat>
           Winner:{" "}
           <>
-            {resolution?.result ? (
+            {resolution?.playerId ? (
               <>
-                {resolution?.result}, {winnerOutcomeToken?.result}
+                {resolution?.playerId}, {winnerOutcomeToken?.result}
               </>
             ) : (
               "TBD"
@@ -94,7 +94,7 @@ export const ResultsModal: React.FC<ResultsModalProps> = ({ onClose, className,
           <Grid.Col lg={4} className={styles["results-modal__img-col"]}>
             <Card>
               <Card.Content className={styles["results-modal__img-col--content"]}>
-                <img src={ipfs.asHttpsURL(market.image_uri)} alt="source" />
+                <img src={ipfs.asHttpsURL(market.imageUri)} alt="source" />
               </Card.Content>
             </Card>
           </Grid.Col>