Merge pull request #872 from madfish-solutions/v3.1.6

V3.1.6
madfish-solutions · Jul 8, 2022 · 441de34 · 441de34
2 parents 73ca742 + 5d5229d
commit 441de34
Show file tree

Hide file tree

Showing 27 changed files with 393 additions and 173 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "quipuswap-webapp",
-  "version": "3.1.5",
+  "version": "3.1.6",
   "private": true,
   "scripts": {
     "pre-build": "node -v && npm -v && yarn -v && node ./scripts/build.js",
@@ -19,8 +19,8 @@
     "@craco/craco": "^6.4.3",
     "@quipuswap/sdk": "^3.0.0",
     "@quipuswap/tokens-whitelist": "^1.0.3",
-    "@taquito/beacon-wallet": "^12.1.1",
-    "@taquito/taquito": "^12.1.1",
+    "@taquito/beacon-wallet": "13.0.0",
+    "@taquito/taquito": "13.0.0",
     "@temple-wallet/dapp": "^7.0.0",
     "@tippyjs/react": "^4.2.6",
     "@types/throttle-debounce": "^5.0.0",
@@ -61,7 +61,7 @@
     "react-toastify": "^9.0.1",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
-    "swap-router-sdk": "1.15.0-beta",
+    "swap-router-sdk": "^1.16.1",
     "swr": "^1.3.0",
     "throttle-debounce": "^5.0.0",
     "url": "^0.11.0",

diff --git a/src/config/constants.ts b/src/config/constants.ts
@@ -49,6 +49,7 @@ export const DEFAULT_DEADLINE_MINS = 30;
 //#region tokens
 export const DEFAULT_DECIMALS = 6;
 export const LP_TOKEN_DECIMALS = 6;
+export const STABLESWAP_LP_DECIMALS = 18;
 //#endregion
 
 //#region strings

diff --git a/src/modules/coinflip/components/coinflip-details/coinflip-details.vm.ts b/src/modules/coinflip/components/coinflip-details/coinflip-details.vm.ts
@@ -1,13 +1,16 @@
+import { useCallback, useEffect } from 'react';
+
 import BigNumber from 'bignumber.js';
 
 import { COINFLIP_CONTRACT_DECIMALS, COINFLIP_TOKEN_DECIMALS } from '@config/config';
+import { useRootStore } from '@providers/root-store-provider';
 import { useExchangeRates } from '@providers/use-new-exchange-rate';
 import { bigNumberToString, fromDecimals, isNull } from '@shared/helpers';
-import { useAuthStore } from '@shared/hooks';
+import { useAuthStore, useOnBlock } from '@shared/hooks';
 import { Token } from '@shared/types';
 
 import { getBetCoinSide, getGameResult, getTokenInstanceFromSymbol } from '../../helpers';
-import { useCoinflipStore } from '../../hooks';
+import { useCoinflipStore, useUserLastGame } from '../../hooks';
 import { DashboardGeneralStats } from '../../interfaces';
 
 const mapping = ({ bank, gamesCount, payoutCoefficient, totalWins }: DashboardGeneralStats, token: Token) => ({
@@ -21,8 +24,24 @@ const mapping = ({ bank, gamesCount, payoutCoefficient, totalWins }: DashboardGe
 
 export const useCoinflipDetailsViewModel = () => {
   const exchangeRates = useExchangeRates();
+  const { tezos } = useRootStore();
   const { generalStats, tokenToPlay, gamersStats, userLastGame } = useCoinflipStore();
   const { accountPkh } = useAuthStore();
+  const { getUserLastGame } = useUserLastGame();
+
+  const updateUserLastGame = useCallback(async () => {
+    if (isNull(tezos) || isNull(accountPkh)) {
+      return;
+    }
+
+    await getUserLastGame();
+  }, [accountPkh, getUserLastGame, tezos]);
+
+  useEffect(() => {
+    updateUserLastGame();
+  }, [updateUserLastGame]);
+
+  useOnBlock(tezos, updateUserLastGame);
 
   const tokenInstance = getTokenInstanceFromSymbol(tokenToPlay);
 

diff --git a/src/modules/coinflip/components/coinflip-game-form/use-coinflip-game-form.vm.ts b/src/modules/coinflip/components/coinflip-game-form/use-coinflip-game-form.vm.ts
@@ -4,7 +4,7 @@ import { BigNumber } from 'bignumber.js';
 import { useFormik } from 'formik';
 import { object, string } from 'yup';
 
-import { useCoinFlip } from '@modules/coinflip/hooks';
+import { useCoinFlip, useGamersStats, useUserLastGame } from '@modules/coinflip/hooks';
 import { bigNumberToString, isEqual } from '@shared/helpers';
 import { Noop, Nullable } from '@shared/types';
 import { balanceAmountSchema } from '@shared/validators';
@@ -30,6 +30,8 @@ export const useCoinflipGameFormViewModel = (
   onAmountInputChange: (amountInput: string) => void,
   onCoinSideSelect: (coinSide: Nullable<CoinSide>) => void
 ) => {
+  const { getGamersStats } = useGamersStats();
+  const { getUserLastGame } = useUserLastGame();
   const { handleCoinFlip: handleCoinFlipPure } = useCoinFlip();
   const formik = useFormik({
     initialValues: {
@@ -81,11 +83,15 @@ export const useCoinflipGameFormViewModel = (
   const payoutAmount = inputAmount && payout ? bigNumberToString(payout) : '';
 
   const handleCoinFlip = async () => {
-    if (inputAmount && coinSide) {
-      await handleCoinFlipPure(new BigNumber(inputAmount), coinSide);
-      onCoinSideSelect(null);
-      formik.resetForm();
+    if (!Boolean(inputAmount) || !Boolean(coinSide)) {
+      return;
     }
+
+    await handleCoinFlipPure(new BigNumber(inputAmount), coinSide);
+    onCoinSideSelect(null);
+    formik.resetForm();
+    await getGamersStats();
+    await getUserLastGame();
   };
 
   return {

diff --git a/src/modules/coinflip/components/coinflip-reward-info/coinflip-reward-info.tsx b/src/modules/coinflip/components/coinflip-reward-info/coinflip-reward-info.tsx
@@ -7,7 +7,8 @@ import { RewardInfo } from '../reward-info';
 import { useCoinflipRewardInfoViewModel } from './use-coinflip-reward-info.vm';
 
 export const CoinflipRewardInfo: FC = observer(() => {
-  const { tokensExchangeRateDollarEquivalent, gamesCount, tokensWon, isGamesCount } = useCoinflipRewardInfoViewModel();
+  const { tokensExchangeRateDollarEquivalent, gamesCount, tokensWon, isGamesCount, hasTokensReward } =
+    useCoinflipRewardInfoViewModel();
 
   return (
     <RewardInfo
@@ -16,6 +17,7 @@ export const CoinflipRewardInfo: FC = observer(() => {
       rewardTooltip="Reward Tooltip"
       yourGamesTooltip="Your Games Tooltip"
       currency="$"
+      hasTokensReward={hasTokensReward}
       isError={isGamesCount}
       details={<GameUserInfo tokensWon={tokensWon} />}
     />

diff --git a/src/modules/coinflip/components/coinflip-reward-info/use-coinflip-reward-info.vm.ts b/src/modules/coinflip/components/coinflip-reward-info/use-coinflip-reward-info.vm.ts
@@ -1,19 +1,20 @@
 import { useCoinflipStore } from '@modules/coinflip/hooks';
 import { useNewExchangeRates } from '@providers/use-new-exchange-rate';
-import { isExist, isNull } from '@shared/helpers';
+import { isExist, isNotEmptyArray, isNull } from '@shared/helpers';
 
 import { getDollarsWin } from './helpers';
 
 const DEFAULT_USER_INFO = {
   tokensExchangeRateDollarEquivalent: null,
   gamesCount: null,
   tokensWon: null,
+  hasTokensReward: false,
   isGamesCount: undefined
 };
 
 export const useCoinflipRewardInfoViewModel = () => {
   const coinflipStore = useCoinflipStore();
-  const { gamesCount, tokensWon } = coinflipStore;
+  const { gamesCount, tokensWon, tokensWithReward } = coinflipStore;
   const exchangeRate = useNewExchangeRates();
   const isGamesCount = isExist(gamesCount);
 
@@ -26,6 +27,7 @@ export const useCoinflipRewardInfoViewModel = () => {
     tokensExchangeRateDollarEquivalent,
     gamesCount,
     tokensWon,
-    isGamesCount
+    isGamesCount,
+    hasTokensReward: isNotEmptyArray(tokensWithReward)
   };
 };
diff --git a/src/modules/coinflip/components/game-user-info/use-game-user-info.vm.tsx b/src/modules/coinflip/components/game-user-info/use-game-user-info.vm.tsx
@@ -3,11 +3,12 @@ import { ReactNode, useContext, useMemo } from 'react';
 import cx from 'classnames';
 import { Column, HeaderGroup, MetaBase, Cell } from 'react-table';
 
+import { useCoinflipStore } from '@modules/coinflip/hooks';
 import { TokenRewardCell } from '@modules/farming/pages/list/components/token-reward-cell';
 import { ColorModes, ColorThemeContext } from '@providers/color-theme-context';
 import { useNewExchangeRates } from '@providers/use-new-exchange-rate';
 import { TokenInfo } from '@shared/elements';
-import { getTokenSlug, multipliedIfPossible, isNull } from '@shared/helpers';
+import { getTokenSlug, multipliedIfPossible } from '@shared/helpers';
 import { i18n } from '@translation';
 
 import { TokenWon } from '../../types';
@@ -53,13 +54,13 @@ const getCustomCellProps = (colorTheme: ColorModes) => (_: unknown, meta: MetaBa
   getColumnProps(meta.cell.column.id, colorTheme);
 
 export const useGameUserInfoViewModel = (tokensWon: Nullable<TokenWon[]>) => {
+  const coinflipStore = useCoinflipStore();
+  const { tokensWithReward } = coinflipStore;
   const exchangeRates = useNewExchangeRates();
   const { colorThemeMode } = useContext(ColorThemeContext);
 
-  const tokensThatUserPlayed = tokensWon?.filter(({ amount }) => !isNull(amount));
-
   const data: Array<Row> = useMemo(() => {
-    return (tokensThatUserPlayed ?? []).map(({ token, amount }) => {
+    return (tokensWithReward ?? []).map(({ token, amount }) => {
       const { contractAddress, fa2TokenId } = token;
       const tokenSlug = getTokenSlug({
         contractAddress: contractAddress,
@@ -74,7 +75,7 @@ export const useGameUserInfoViewModel = (tokensWon: Nullable<TokenWon[]>) => {
         [Columns.AMOUNT]: <TokenRewardCell amount={amount} dollarEquivalent={dollarEquivalent} />
       };
     });
-  }, [exchangeRates, tokensThatUserPlayed]);
+  }, [exchangeRates, tokensWithReward]);
 
   return {
     data,

diff --git a/src/modules/coinflip/components/reward-info/reward-info.module.scss b/src/modules/coinflip/components/reward-info/reward-info.module.scss
@@ -47,7 +47,7 @@
 }
 
 .footer {
-  padding: 40px 0 0;
+  padding: 0;
 }
 
 
@@ -63,7 +63,7 @@
   }
 
   .viewDetailsButton {
-    margin: 0;
+    margin-top: auto;
   }
 
   .cardContent {

diff --git a/src/modules/coinflip/components/reward-info/reward-info.tsx b/src/modules/coinflip/components/reward-info/reward-info.tsx
@@ -19,6 +19,7 @@ interface Props {
   yourGamesTooltip: string;
   currency: string;
   isError: Undefined<boolean>;
+  hasTokensReward: boolean;
   details?: ReactNode;
 }
 
@@ -29,29 +30,44 @@ export const RewardInfo: FC<Props> = ({
   currency,
   gamesCount,
   isError,
+  hasTokensReward,
   details
 }) => {
-  const { isDetailsOpen, toggle, transaction, showDetails } = useRewardInfoViewModel();
-  const { detailsButtonTransaction } = transaction;
+  const { isDetailsOpen, toggle, translation, isContentVisible } = useRewardInfoViewModel(
+    gamesCount,
+    details,
+    isError,
+    hasTokensReward
+  );
+  const { detailsButtonTransaction, yourGamesTranslation } = translation;
+  const { isFooterVisible, isYourGamesVisible, isViewDetailsVisible } = isContentVisible;
 
   return (
     <Card
       contentClassName={styles.cardContent}
-      footer={isDetailsOpen && details}
+      footer={isFooterVisible}
       className={styles.card}
       footerClassName={styles.footer}
     >
       <YourWinningsReward
         amount={userReward}
+        gamesCount={gamesCount}
+        hasTokensReward={hasTokensReward}
         rewardTooltip={rewardTooltip}
         currency={currency}
         className={styles.yourWinnigns}
       />
       <div className={styles.wrapper}>
-        <CoinflipStatsItem itemName="Your Games" loading={!Boolean(gamesCount)} tooltipContent={yourGamesTooltip}>
-          <StateCurrencyAmount amount={gamesCount} amountClassName={styles.amount} isError={!isError} />
-        </CoinflipStatsItem>
-        {details && showDetails && isError && (
+        {isYourGamesVisible && (
+          <CoinflipStatsItem
+            itemName={yourGamesTranslation}
+            loading={!Boolean(gamesCount)}
+            tooltipContent={yourGamesTooltip}
+          >
+            <StateCurrencyAmount amount={gamesCount} amountClassName={styles.amount} isError={!isError} />
+          </CoinflipStatsItem>
+        )}
+        {isViewDetailsVisible && (
           <Button
             className={cx(styles.viewDetailsButton)}
             theme="inverse"

diff --git a/src/modules/coinflip/components/reward-info/use-reward-info.vm.ts b/src/modules/coinflip/components/reward-info/use-reward-info.vm.ts
@@ -1,20 +1,48 @@
-import { useCallback, useState } from 'react';
+import { ReactNode, useCallback, useEffect, useState } from 'react';
 
+import BigNumber from 'bignumber.js';
+
+import { useCoinflipStore } from '@modules/coinflip/hooks';
 import { useAccountPkh } from '@providers/use-dapp';
+import { Undefined } from '@shared/types';
 import { useTranslation } from '@translation';
 
-export const useRewardInfoViewModel = () => {
+export const useRewardInfoViewModel = (
+  gamesCount: Nullable<BigNumber>,
+  details: ReactNode,
+  isError: Undefined<boolean>,
+  hasTokensReward: boolean
+) => {
   const { t } = useTranslation();
+  const { token } = useCoinflipStore();
   const accountPkh = useAccountPkh();
   const [isOpen, setToggles] = useState(false);
   const toggle = useCallback(() => setToggles(_isOpen => !_isOpen), []);
 
+  useEffect(() => {
+    setToggles(false);
+  }, [token, accountPkh]);
+
+  const isFooterVisible = accountPkh && isOpen && details;
+  const isYourGamesVisible = gamesCount?.isGreaterThan('0') && accountPkh;
+  const isViewDetailsVisible = hasTokensReward && details && Boolean(accountPkh) && isError;
+
+  const yourGamesTranslation = t('coinflip|yourGames');
+  const detailsButtonTransaction = isOpen ? t('common|lessDetails') : t('common|viewDetails');
+
   return {
+    accountPkh,
     isDetailsOpen: isOpen,
     toggle,
     showDetails: Boolean(accountPkh),
-    transaction: {
-      detailsButtonTransaction: isOpen ? t('common|lessDetails') : t('common|viewDetails')
+    isContentVisible: {
+      isFooterVisible,
+      isYourGamesVisible,
+      isViewDetailsVisible
+    },
+    translation: {
+      yourGamesTranslation,
+      detailsButtonTransaction
     }
   };
 };
diff --git a/src/modules/coinflip/components/your-winnigs/your-winnings.tsx b/src/modules/coinflip/components/your-winnigs/your-winnings.tsx
@@ -25,25 +25,37 @@ const modeClass = {
 
 interface Props {
   amount: Nullable<BigNumber>;
+  gamesCount?: Nullable<BigNumber>;
   dollarEquivalent?: Nullable<BigNumber.Value>;
   amountDecimals?: number;
   currency: string;
   rewardTooltip: string;
+  hasTokensReward: boolean;
   className?: string;
 }
 
 export const YourWinningsReward: FC<Props> = observer(
-  ({ amount, currency, dollarEquivalent, amountDecimals = USD_DECIMALS, rewardTooltip, className }) => {
+  ({
+    amount,
+    gamesCount,
+    currency,
+    dollarEquivalent,
+    amountDecimals = USD_DECIMALS,
+    rewardTooltip,
+    hasTokensReward,
+    className
+  }) => {
     const { accountPkh } = useAuthStore();
     const { t } = useTranslation();
     const { colorThemeMode } = useContext(ColorThemeContext);
     const isExchangeRatesExist = isEqual(NETWORK_ID, NetworkType.MAINNET);
+    const isYourWinnigsVisible = gamesCount?.isGreaterThan('0') && hasTokensReward;
 
     return (
       <div className={cx(styles.root, modeClass[colorThemeMode], className)}>
         <div className={styles.container}>
           {accountPkh ? (
-            <>
+            isYourWinnigsVisible ? (
               <CoinflipStatsItem itemName="Your Winnings" loading={!Boolean(amount)} tooltipContent={rewardTooltip}>
                 <StateCurrencyAmount
                   className={styles.amount}
@@ -55,7 +67,13 @@ export const YourWinningsReward: FC<Props> = observer(
                   isError={!isExchangeRatesExist}
                 />
               </CoinflipStatsItem>
-            </>
+            ) : (
+              <div className={styles.alternativeTitle}>
+                <div className={cx(styles.description, modeClass[colorThemeMode])}>
+                  {t('coinflip|luckFavorsPersistant')}
+                </div>
+              </div>
+            )
           ) : (
             <div className={styles.alternativeTitle}>
               <div className={styles.title}>{t('coinflip|connectWallet')}</div>