Merge pull request #14 from SnickerdoodleLabs/feat/add-success-modal-…

…images feat: add success modal images
SnickerdoodleLabs · Jun 7, 2022 · b53f175 · b53f175
2 parents bbe1ea5 + 7119a8c
commit b53f175
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 5 deletions.
diff --git a/packages/browserExtension/src/assets/img/crabada-item-claimed.png b/packages/browserExtension/src/assets/img/crabada-item-claimed.png
diff --git a/packages/browserExtension/src/assets/img/reward-item-qmark.png b/packages/browserExtension/src/assets/img/reward-item-qmark.png
diff --git a/packages/browserExtension/src/assets/img/reward-item-to-claim01.png b/packages/browserExtension/src/assets/img/reward-item-to-claim01.png
diff --git a/packages/browserExtension/src/assets/img/reward-item-to-claim02.png b/packages/browserExtension/src/assets/img/reward-item-to-claim02.png
diff --git a/packages/browserExtension/src/assets/img/reward-item-to-claim03.png b/packages/browserExtension/src/assets/img/reward-item-to-claim03.png
diff --git a/packages/browserExtension/src/assets/img/sharapnel-item-claimed.png b/packages/browserExtension/src/assets/img/sharapnel-item-claimed.png
diff --git a/packages/browserExtension/src/pages/Content/components/App/App.tsx b/packages/browserExtension/src/pages/Content/components/App/App.tsx
@@ -38,7 +38,9 @@ const App = () => {
     const hostname = window.location.hostname;
     const reward = REWARD_DATA.find((i) => i.host === hostname);
     if (reward) {
-      setRewardToDisplay(reward);
+      setTimeout(() => {
+        setRewardToDisplay(reward);
+      }, 2000);
     }
   };
 

diff --git a/packages/browserExtension/src/pages/Content/components/Screens/NftClaimed/NftClaimed.tsx b/packages/browserExtension/src/pages/Content/components/Screens/NftClaimed/NftClaimed.tsx
@@ -1,9 +1,16 @@
 import React from "react";
-import { Typography } from "@material-ui/core";
+import { Box, Typography } from "@material-ui/core";
 
 import SuccessModal, { useGenericModalStyles } from "../../Modals/SuccessModal";
 
-import { EAPP_STATE, IRewardItem } from "../../../constants";
+import {
+  EAPP_STATE,
+  IRewardItem,
+  rewardItemQMarkImg,
+  rewardItemToClaim01Img,
+  rewardItemToClaim02Img,
+  rewardItemToClaim03Img,
+} from "../../../constants";
 
 interface INftClaimedProps {
   changeAppState: (state: EAPP_STATE) => void;
@@ -15,7 +22,17 @@ const NftClaimed: React.FC<INftClaimedProps> = ({
   rewardItem,
 }: INftClaimedProps) => {
   const modalClasses = useGenericModalStyles();
-  const onPrimaryButtonClick = () => {};
+
+  const imgArr = [
+    rewardItemQMarkImg,
+    rewardItemToClaim01Img,
+    rewardItem.nftClaimedImage,
+    rewardItemToClaim02Img,
+    rewardItemToClaim03Img,
+  ];
+  const onPrimaryButtonClick = () => {
+    changeAppState(EAPP_STATE.DISMISSED);
+  };
 
   const onSecondaryButtonClick = () => {
     changeAppState(EAPP_STATE.DISMISSED);
@@ -26,7 +43,7 @@ const NftClaimed: React.FC<INftClaimedProps> = ({
       onCloseButtonClick={onSecondaryButtonClick}
       onSecondaryButtonClick={onSecondaryButtonClick}
       onPrimaryButtonClick={onPrimaryButtonClick}
-      primaryButtonText="More Offers"
+      primaryButtonText="Done!"
       secondaryButtonText="Go to Game"
       topContent={
         <>
@@ -60,6 +77,11 @@ const NftClaimed: React.FC<INftClaimedProps> = ({
           >
             {rewardItem.rewardName}
           </Typography>
+          <Box display="flex" justifyContent="space-evenly" alignItems="center">
+            {imgArr.map((i) => (
+              <img width={65} src={i} />
+            ))}
+          </Box>
         </>
       }
     />

diff --git a/packages/browserExtension/src/pages/Content/constants/index.ts b/packages/browserExtension/src/pages/Content/constants/index.ts
@@ -21,6 +21,7 @@ export interface IRewardItem {
   primaryButtonText: string;
   secondaryButtonText: string;
   rewardName: string;
+  nftClaimedImage: string;
 }
 
 export const REWARD_DATA: Array<IRewardItem> = [
@@ -33,6 +34,9 @@ export const REWARD_DATA: Array<IRewardItem> = [
     primaryButtonText: "Claim Reward",
     secondaryButtonText: "Back to Game",
     rewardName: "Crabada 761",
+    nftClaimedImage: chrome.runtime.getURL(
+      "assets/img/crabada-item-claimed.png",
+    ),
   },
   {
     host: EAVAILABLE_HOSTS.SHRAPNEL,
@@ -43,7 +47,22 @@ export const REWARD_DATA: Array<IRewardItem> = [
     primaryButtonText: "Claim Reward",
     secondaryButtonText: "Back to Game",
     rewardName: "ATG-36 Helmet",
+    nftClaimedImage: chrome.runtime.getURL(
+      "assets/img/sharapnel-item-claimed.png",
+    ),
   },
 ];
 
+export const rewardItemQMarkImg = chrome.runtime.getURL(
+  "assets/img/reward-item-qmark.png",
+);
+export const rewardItemToClaim01Img = chrome.runtime.getURL(
+  "assets/img/reward-item-to-claim01.png",
+);
+export const rewardItemToClaim02Img = chrome.runtime.getURL(
+  "assets/img/reward-item-to-claim02.png",
+);
+export const rewardItemToClaim03Img = chrome.runtime.getURL(
+  "assets/img/reward-item-to-claim03.png",
+);
 export const signatureMessage = `Welcome to Snickerdoodle! This transaction proves that you own this wallet so that only you benefit from the data it produces.`;