Merge branch 'release/0.7.3'

CHANGELOG.md

@@ -4,6 +4,11 @@
 
 -
 
+### v0.7.3
+
+- Added new variant of TopWidget with single image from freeport
+- Added email field to the save method in sdk
+
 ### v0.7.2
 
 - Added plural versions of the words

lerna.json

@@ -1,3 +1,3 @@
 {
-  "version": "0.7.2"
+  "version": "0.7.3"
 }

packages/eslint-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cere/eslint-config-games-sdk",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "main": "index.js",
   "private": true,
   "dependencies": {

packages/sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cere/games-sdk",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "Cere Games SDK to integrate games with CERE infrastructure",
   "sideEffects": false,
   "main": "dist/bundle.umd.js",
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@cere/embed-wallet": "0.12.0",
-    "@cere/games-sdk-ui": "0.7.2",
+    "@cere/games-sdk-ui": "0.7.3",
     "react-gtm-module": "^2.0.11"
   },
   "devDependencies": {

packages/sdk/src/GameSdk.ts

@@ -420,6 +420,7 @@ export class GamesSDK {
 
     const save = async () => {
       const [ethAddress] = await this.wallet.getAccounts();
+      const { email } = await this.wallet.getUserInfo();
 
       if (!this.session) {
         this.reporting.message(`Attempt to save score without sessionId`);
@@ -428,7 +429,7 @@ export class GamesSDK {
       }
 
       await this.saveSession();
-      await this.api.saveScore(ethAddress.address, score, this.session);
+      await this.api.saveScore(ethAddress.address, score, email, this.session);
     };
 
     /**

packages/sdk/src/api/GamesApi.ts

@@ -10,6 +10,13 @@ type LeaderBoardRecord = {
   gameId: string;
 };
 
+type TournamentImage = {
+  guid: string;
+  id: string;
+  mainImage: boolean;
+  path: string;
+};
+
 export type LeaderBoard = LeaderBoardRecord[];
 export type Rank = number;
 export type Tournament = {
@@ -19,6 +26,7 @@ export type Tournament = {
   startDate: Date;
   endDate: Date;
   status: 'DISABLED' | 'ENABLED';
+  images: TournamentImage[];
 };
 export type Game = {
   id: number;
@@ -77,13 +85,14 @@ export class GamesApi {
     }));
   }
 
-  async saveScore(walletId: string, score: number, { sessionId }: Session) {
+  async saveScore(walletId: string, score: number, email: string, { sessionId }: Session) {
     const endpoint = this.createEndpoint('/leader-board');
 
     await this.post(endpoint, {
       score,
       sessionId,
       walletId,
+      email,
       gameId: this.options.gameId,
     });
   }

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cere/games-sdk-ui",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "Cere Games SDK UI Elements",
   "sideEffects": false,
   "main": "dist/bundle.umd.js",

packages/ui/src/components/CopyButton/CopyButton.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react';
+import styled from '@emotion/styled';
+import { CopiedIcon, CopyIcon } from '../../icons';
+import { Button } from '../Button';
+import { useWalletContext } from '../../hooks';
+
+const Container = styled.div({
+  position: 'relative',
+  height: 'auto',
+  width: 'auto',
+  display: 'flex',
+  alignItems: 'center',
+});
+
+const ButtonContainer = styled(Button)({
+  width: 14,
+  minHeight: 14,
+  background: 'transparent',
+  padding: '8px 16px',
+  display: 'flex',
+  alignItems: 'center',
+  '@media (max-width: 600px)': {
+    padding: '12px 16px',
+  },
+});
+
+const TooltipContainer = styled.div({
+  width: 'auto',
+  height: 'auto',
+  background: 'transparent',
+  position: 'absolute',
+  top: '-40px',
+  right: '-20px',
+});
+
+export const CopyButton = () => {
+  const [showTooltip, setShowTooltip] = useState<boolean>(false);
+  const { address } = useWalletContext();
+
+  const copyButton = async () => {
+    try {
+      if (address) {
+        await navigator.clipboard.writeText(address);
+        setShowTooltip(true);
+      }
+    } catch (err) {
+      console.log('error');
+    }
+  };
+
+  useEffect(() => {
+    let timeOut: NodeJS.Timeout;
+    if (showTooltip) {
+      timeOut = setTimeout(() => {
+        setShowTooltip(false);
+      }, 1500);
+    }
+    return () => {
+      clearTimeout(timeOut);
+    };
+  }, [showTooltip]);
+
+  return (
+    <Container>
+      {showTooltip && (
+        <TooltipContainer>
+          <CopiedIcon />
+        </TooltipContainer>
+      )}
+      <ButtonContainer onClick={copyButton}>
+        <CopyIcon />
+      </ButtonContainer>
+    </Container>
+  );
+};

packages/ui/src/components/CopyButton/index.ts

@@ -0,0 +1 @@
+export * from './CopyButton';

packages/ui/src/components/PlayAgainButton/PlayAgainButton.tsx

@@ -0,0 +1,45 @@
+import styled from '@emotion/styled';
+import { Button } from '../Button';
+import { Typography } from '../Typography';
+import { RepeatIcon } from '../../icons';
+
+type PlayAgainButtonProps = {
+  onPlayAgain: () => void;
+  tournament: boolean;
+  playAgainText: string;
+};
+
+export const PlayAgain = styled(Button)(({ tournament }: { tournament?: boolean }) => ({
+  marginTop: tournament ? '20px!important' : '37px!important',
+  maxWidth: 146,
+  height: 36,
+  minHeight: 36,
+  fontSize: 14,
+  fontWeight: '24px',
+  borderRadius: 4,
+  padding: 0,
+  background: 'rgba(243, 39, 88, 1)',
+  ...(tournament && {
+    whiteSpace: 'nowrap',
+    '@media (max-width: 600px)': {
+      marginTop: '14px!important',
+    },
+  }),
+}));
+
+export const PlayAgainText = styled(Typography)({
+  marginLeft: 6,
+  fontSize: 14,
+});
+
+export const PlayAgainButton = ({ onPlayAgain, tournament, playAgainText }: PlayAgainButtonProps) => {
+  return (
+    <PlayAgain onClick={onPlayAgain} tournament={tournament}>
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <RepeatIcon />
+        <PlayAgainText>{playAgainText}</PlayAgainText>
+      </div>
+    </PlayAgain>
+  );
+};
+//Play Again

packages/ui/src/components/PlayAgainButton/index.ts

@@ -0,0 +1 @@
+export * from './PlayAgainButton';

packages/ui/src/components/Steps/Steps.tsx

@@ -37,39 +37,28 @@ const Number = styled(Typography)({
   },
 });
 
-interface StepsProps {
-  number: string;
-  text: string;
-}
-
 export const Steps = (): JSX.Element => {
   const isMobile = useMediaQuery('(max-width: 600px)');
-  const { name } = useGameInfo();
+  const {
+    name,
+    preloader: { description },
+  } = useGameInfo();
 
-  const mockData: StepsProps[] = [
-    {
-      number: '01',
-      text: `Play ${name}` || 'Play Metaverse Dash Run',
-    },
-    {
-      number: '02',
-      text: 'Create your account',
-    },
-    {
-      number: '03',
-      text: 'Be top-3 and get a prize',
-    },
+  const mockData: string[] = [
+    `Play ${name}` || 'Play Metaverse Dash Run',
+    'Create your account',
+    'Be top-3 and get a prize',
   ];
 
   return (
     <Container direction="row" margin={[0, 0, 4, 0]} align="start">
-      {mockData.map(({ number, text }, index) => (
+      {description?.map((text, index) => (
         <StepContainer direction="row">
           <NumberWrapper>
             <Number variant="body1" align="center" fontWight="semi-bold">
-              {number}
+              {`0${index + 1}`}
               <Typography align="center" fontWight="regular" style={{ fontSize: isMobile ? '13px' : '16px' }}>
-                {text}
+                {text || mockData[index]}
               </Typography>
             </Number>
           </NumberWrapper>

packages/ui/src/components/index.ts

@@ -11,3 +11,5 @@ export * from './Alert';
 export * from './WalletBenefits';
 export * from './ProgressiveImg';
 export * from './Steps';
+export * from './CopyButton';
+export * from './PlayAgainButton';

packages/ui/src/createContext.ts

@@ -40,7 +40,7 @@ export type GameInfoContext = {
   preloader: {
     url?: string;
     title?: string;
-    description?: string;
+    description?: string[];
   };
 };
 

packages/ui/src/icons/CopiedIcon.tsx

@@ -0,0 +1,10 @@
+export const CopiedIcon = () => (
+  <svg width="76" height="32" viewBox="0 0 76 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="76" height="26" rx="8" fill="#8546B7" />
+    <path
+      d="M19.388 18.14C18.7067 18.14 18.0814 18.0187 17.512 17.776C16.9427 17.5333 16.448 17.188 16.028 16.74C15.608 16.2827 15.2814 15.746 15.048 15.13C14.824 14.514 14.712 13.8373 14.712 13.1C14.712 12.4 14.8334 11.7513 15.076 11.154C15.328 10.5473 15.6734 10.0153 16.112 9.558C16.5507 9.10067 17.0594 8.746 17.638 8.494C18.2167 8.242 18.842 8.116 19.514 8.116C19.99 8.116 20.452 8.19067 20.9 8.34C21.3574 8.48 21.768 8.68067 22.132 8.942C22.5054 9.194 22.8087 9.48333 23.042 9.81L22.034 10.86C21.7634 10.5893 21.488 10.3653 21.208 10.188C20.9374 10.0013 20.6574 9.86133 20.368 9.768C20.088 9.67467 19.8034 9.628 19.514 9.628C19.0567 9.628 18.6274 9.71667 18.226 9.894C17.834 10.062 17.4887 10.3 17.19 10.608C16.9007 10.916 16.672 11.2847 16.504 11.714C16.336 12.134 16.252 12.596 16.252 13.1C16.252 13.632 16.3314 14.1173 16.49 14.556C16.658 14.9853 16.8914 15.354 17.19 15.662C17.4887 15.97 17.8434 16.208 18.254 16.376C18.674 16.5347 19.136 16.614 19.64 16.614C19.948 16.614 20.2514 16.572 20.55 16.488C20.8487 16.404 21.1287 16.2827 21.39 16.124C21.6514 15.9653 21.8894 15.7787 22.104 15.564L22.86 16.796C22.6454 17.048 22.3514 17.2767 21.978 17.482C21.614 17.6873 21.2034 17.8507 20.746 17.972C20.298 18.084 19.8454 18.14 19.388 18.14ZM27.854 18.14C27.1353 18.14 26.4913 17.9767 25.922 17.65C25.362 17.314 24.9187 16.8613 24.592 16.292C24.2653 15.7133 24.102 15.0553 24.102 14.318C24.102 13.5807 24.2653 12.9273 24.592 12.358C24.9187 11.7793 25.362 11.3267 25.922 11C26.4913 10.664 27.1353 10.496 27.854 10.496C28.5633 10.496 29.198 10.664 29.758 11C30.3273 11.3267 30.7753 11.7793 31.102 12.358C31.4287 12.9273 31.592 13.5807 31.592 14.318C31.592 15.0553 31.4287 15.7133 31.102 16.292C30.7753 16.8613 30.3273 17.314 29.758 17.65C29.198 17.9767 28.5633 18.14 27.854 18.14ZM27.854 16.824C28.2927 16.824 28.6847 16.7167 29.03 16.502C29.3753 16.278 29.646 15.9793 29.842 15.606C30.038 15.2233 30.1313 14.794 30.122 14.318C30.1313 13.8327 30.038 13.4033 29.842 13.03C29.646 12.6473 29.3753 12.3487 29.03 12.134C28.6847 11.9193 28.2927 11.812 27.854 11.812C27.4153 11.812 27.0187 11.924 26.664 12.148C26.3187 12.3627 26.048 12.6613 25.852 13.044C25.656 13.4173 25.5627 13.842 25.572 14.318C25.5627 14.794 25.656 15.2233 25.852 15.606C26.048 15.9793 26.3187 16.278 26.664 16.502C27.0187 16.7167 27.4153 16.824 27.854 16.824ZM33.1633 21.08V10.65H34.6193V12.33L34.3953 12.204C34.4513 11.924 34.6099 11.658 34.8713 11.406C35.1326 11.1447 35.4499 10.9347 35.8233 10.776C36.2059 10.608 36.5979 10.524 36.9993 10.524C37.6619 10.524 38.2499 10.6873 38.7633 11.014C39.2766 11.3407 39.6826 11.7887 39.9813 12.358C40.2799 12.9273 40.4293 13.5807 40.4293 14.318C40.4293 15.046 40.2799 15.6993 39.9813 16.278C39.6919 16.8473 39.2906 17.3 38.7773 17.636C38.2639 17.9627 37.6853 18.126 37.0413 18.126C36.6119 18.126 36.1966 18.042 35.7953 17.874C35.3939 17.6967 35.0533 17.4727 34.7733 17.202C34.4933 16.9313 34.3206 16.6513 34.2553 16.362L34.6193 16.166V21.08H33.1633ZM36.8033 16.796C37.2326 16.796 37.6153 16.6887 37.9513 16.474C38.2873 16.2593 38.5533 15.9653 38.7493 15.592C38.9453 15.2187 39.0433 14.794 39.0433 14.318C39.0433 13.842 38.9453 13.422 38.7493 13.058C38.5626 12.6847 38.3013 12.3907 37.9653 12.176C37.6293 11.9613 37.2419 11.854 36.8033 11.854C36.3646 11.854 35.9773 11.9613 35.6413 12.176C35.3053 12.3813 35.0393 12.6707 34.8433 13.044C34.6473 13.4173 34.5493 13.842 34.5493 14.318C34.5493 14.794 34.6473 15.2187 34.8433 15.592C35.0393 15.9653 35.3053 16.2593 35.6413 16.474C35.9773 16.6887 36.3646 16.796 36.8033 16.796ZM42.2333 18V10.65H43.6753V18H42.2333ZM42.9333 9.026C42.6253 9.026 42.3873 8.94667 42.2193 8.788C42.0513 8.62933 41.9673 8.40533 41.9673 8.116C41.9673 7.84533 42.0513 7.626 42.2193 7.458C42.3966 7.29 42.6346 7.206 42.9333 7.206C43.2413 7.206 43.4793 7.28533 43.6473 7.444C43.8153 7.60267 43.8993 7.82667 43.8993 8.116C43.8993 8.38667 43.8106 8.606 43.6333 8.774C43.4653 8.942 43.232 9.026 42.9333 9.026ZM49.3218 18.14C48.5658 18.14 47.8938 17.9813 47.3058 17.664C46.7271 17.3373 46.2698 16.894 45.9338 16.334C45.6071 15.774 45.4438 15.13 45.4438 14.402C45.4438 13.8233 45.5371 13.296 45.7238 12.82C45.9105 12.344 46.1671 11.9333 46.4938 11.588C46.8298 11.2333 47.2265 10.9627 47.6838 10.776C48.1505 10.58 48.6545 10.482 49.1958 10.482C49.6718 10.482 50.1151 10.5753 50.5258 10.762C50.9365 10.9393 51.2911 11.1867 51.5898 11.504C51.8978 11.8213 52.1311 12.1993 52.2898 12.638C52.4578 13.0673 52.5371 13.5387 52.5278 14.052L52.5138 14.668H46.5078L46.1858 13.52H51.2678L51.0578 13.758V13.422C51.0298 13.114 50.9271 12.8387 50.7498 12.596C50.5725 12.3533 50.3485 12.162 50.0778 12.022C49.8071 11.882 49.5131 11.812 49.1958 11.812C48.6918 11.812 48.2671 11.91 47.9218 12.106C47.5765 12.2927 47.3151 12.5727 47.1378 12.946C46.9605 13.31 46.8718 13.7627 46.8718 14.304C46.8718 14.8173 46.9791 15.2653 47.1938 15.648C47.4085 16.0213 47.7118 16.3107 48.1038 16.516C48.4958 16.7213 48.9485 16.824 49.4618 16.824C49.8258 16.824 50.1618 16.7633 50.4698 16.642C50.7871 16.5207 51.1278 16.3013 51.4918 15.984L52.2198 17.006C51.9958 17.23 51.7205 17.426 51.3938 17.594C51.0765 17.762 50.7358 17.8973 50.3718 18C50.0171 18.0933 49.6671 18.14 49.3218 18.14ZM57.1609 18.14C56.4889 18.14 55.8869 17.9767 55.3549 17.65C54.8322 17.314 54.4169 16.8613 54.1089 16.292C53.8009 15.7133 53.6469 15.0553 53.6469 14.318C53.6469 13.5807 53.7962 12.9273 54.0949 12.358C54.4029 11.7793 54.8182 11.3267 55.3409 11C55.8636 10.664 56.4562 10.496 57.1189 10.496C57.4829 10.496 57.8329 10.5567 58.1689 10.678C58.5142 10.79 58.8222 10.9487 59.0929 11.154C59.3636 11.35 59.5736 11.5693 59.7229 11.812C59.8816 12.0453 59.9609 12.2833 59.9609 12.526L59.5409 12.554V7.64H60.9829V18H59.5409V16.25H59.8209C59.8209 16.474 59.7462 16.698 59.5969 16.922C59.4476 17.1367 59.2469 17.3373 58.9949 17.524C58.7522 17.7107 58.4676 17.86 58.1409 17.972C57.8236 18.084 57.4969 18.14 57.1609 18.14ZM57.3569 16.894C57.7956 16.894 58.1829 16.782 58.5189 16.558C58.8549 16.334 59.1162 16.0307 59.3029 15.648C59.4989 15.256 59.5969 14.8127 59.5969 14.318C59.5969 13.8233 59.4989 13.3847 59.3029 13.002C59.1162 12.61 58.8549 12.302 58.5189 12.078C58.1829 11.854 57.7956 11.742 57.3569 11.742C56.9182 11.742 56.5309 11.854 56.1949 12.078C55.8589 12.302 55.5929 12.61 55.3969 13.002C55.2102 13.3847 55.1169 13.8233 55.1169 14.318C55.1169 14.8127 55.2102 15.256 55.3969 15.648C55.5929 16.0307 55.8589 16.334 56.1949 16.558C56.5309 16.782 56.9182 16.894 57.3569 16.894Z"
+      fill="white"
+    />
+    <path d="M59 32V26H65L59 32Z" fill="#8546B7" />
+  </svg>
+);

packages/ui/src/icons/CopyIcon.tsx

@@ -0,0 +1,12 @@
+export const CopyIcon = () => (
+  <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M8.89 1.41675H6.61841C5.58926 1.41674 4.77411 1.41673 4.13615 1.50285C3.47959 1.59147 2.94818 1.77821 2.5291 2.19897C2.11001 2.61974 1.92403 3.15329 1.83576 3.81248C1.74998 4.453 1.74999 5.27142 1.75 6.3047V9.70992C1.75 10.5897 2.28664 11.3436 3.04918 11.6596C3.00993 11.1291 3.00996 10.3847 3.01 9.76544V6.84316C3.00996 6.09552 3.00992 5.45134 3.079 4.93548C3.15303 4.38263 3.31998 3.8527 3.74809 3.42286C4.17621 2.99303 4.70402 2.82541 5.25466 2.75108C5.76845 2.68173 6.41005 2.68176 7.1547 2.68181H8.9453C9.68995 2.68176 10.3302 2.68173 10.8439 2.75108C10.5366 1.96962 9.7776 1.41675 8.89 1.41675Z"
+      fill="#E6E0E9"
+    />
+    <path
+      d="M3.85006 6.89856C3.85006 5.30828 3.85006 4.51314 4.34212 4.0191C4.83418 3.52506 5.62614 3.52506 7.21006 3.52506H8.89006C10.474 3.52506 11.2659 3.52506 11.758 4.0191C12.2501 4.51314 12.2501 5.30828 12.2501 6.89856V9.7098C12.2501 11.3001 12.2501 12.0952 11.758 12.5893C11.2659 13.0833 10.474 13.0833 8.89006 13.0833H7.21006C5.62614 13.0833 4.83418 13.0833 4.34212 12.5893C3.85006 12.0952 3.85006 11.3001 3.85006 9.7098V6.89856Z"
+      fill="#E6E0E9"
+    />
+  </svg>
+);

packages/ui/src/icons/index.ts

@@ -14,3 +14,5 @@ export * from './TrophyRedIcon';
 export * from './GameIcon';
 export * from './LockIcon';
 export * from './CurrentPlayerIconWhite';
+export * from './CopyIcon';
+export * from './CopiedIcon';