Merge pull request #1029 from madfish-solutions/v3.1.34

V3.1.34

package.json

@@ -1,6 +1,6 @@
 {
   "name": "quipuswap-webapp-2",
-  "version": "3.1.33",
+  "version": "3.1.34",
   "private": true,
   "scripts": {
     "pre-build": "node -v && npm -v && yarn -v && node ./scripts/build.js",
@@ -25,11 +25,11 @@
     "@craco/craco": "^6.4.3",
     "@percy/cli": "^1.7.2",
     "@quipuswap/sdk": "^3.0.0",
-    "@quipuswap/tokens-whitelist": "^1.0.8",
+    "@quipuswap/tokens-whitelist": "^1.1.8",
     "@sentry/react": "^7.11.1",
     "@sentry/tracing": "^7.11.1",
-    "@taquito/beacon-wallet": "13.0.0",
-    "@taquito/taquito": "13.0.0",
+    "@taquito/beacon-wallet": "13.0.1",
+    "@taquito/taquito": "13.0.1",
     "@temple-wallet/dapp": "^7.0.0",
     "@tippyjs/react": "^4.2.6",
     "@types/throttle-debounce": "^5.0.0",
@@ -75,7 +75,7 @@
     "reflect-metadata": "^0.1.13",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
-    "swap-router-sdk": "^1.16.1",
+    "swap-router-sdk": "^1.16.3",
     "swr": "^1.3.0",
     "throttle-debounce": "^5.0.0",
     "url": "^0.11.0",

src/app-root-routes.enum.ts

@@ -9,5 +9,6 @@ export enum AppRootRoutes {
   Voting = '/voting',
   Stableswap = '/stableswap',
   Coinflip = '/coinflip',
-  NewLiquidity = '/new-liquidity'
+  NewLiquidity = '/new-liquidity',
+  VersionOne = '/v1'
 }

src/blockchain/with-approve.api.ts

@@ -27,7 +27,7 @@ const getFA12ApproveParams = async (
     : [setAllowanceParams, ...operationParams];
 };
 
-const getFA2ApproveParams = async (
+export const getFA2ApproveParams = async (
   tezos: TezosToolkit,
   contractAddress: string,
   token: Token | TokenAddress,
@@ -152,6 +152,10 @@ export const withApproveApiForManyTokens = async (
 
   let accumParams: TransferParams[] = operationParams;
   for (const { token, amount } of tokensAndAmountsArray) {
+    if (isTezosToken(token)) {
+      continue;
+    }
+
     accumParams = await getApproveParams(tezos, contractAddress, token, accountPkh, amount, accumParams);
   }
 

src/config/constants.ts

@@ -88,6 +88,7 @@ export const STATS = 'stats';
 export const DIVIDENDS = 'farm';
 
 export const FARMING_LIST_API_URL = `${FARMING_API_URL}/${LIST}`;
+export const FARMING_LIST_API_URL_V2 = `${FARMING_API_URL}/v2/${LIST}`;
 export const FARMING_NEW_LIST_API_URL = `${FARMING_API_URL}/${NEW_LIST}`;
 export const FARMING_STATS_API_URL = `${FARMING_API_URL}/${STATS}`;
 
@@ -178,3 +179,9 @@ export const TESTNET_EXCHANGE_RATE = 1.5;
 
 //Charts
 export const COLORS = ['#1373E4', '#2ED33E', '#F9A605', '#FF8042'];
+
+// Baker
+export const ZERO_BAKER_ADDRESS = 'tz1burnburnburnburnburnburnburjAYjjX';
+
+// Choose token
+export const SINGLE_TOKEN_VALUE = 1;

src/modules/coinflip/api/bet-tokens.api.ts

@@ -5,20 +5,34 @@ import { withApproveApi } from '@blockchain';
 import { COINFLIP_CONTRACT_ADDRESS } from '@config/environment';
 import { Token } from '@shared/types';
 
-export const betTokens = async (
+import { TOKEN_ASSETS } from './types';
+
+export const getBetTokensParams = async (
   tezos: TezosToolkit,
   token: Token,
   accountPkh: string,
-  tokenAsset: number,
+  tokenAsset: TOKEN_ASSETS,
   formattedAmount: BigNumber,
   coinSide: string,
   fee: BigNumber
 ) => {
   const contract = await tezos.contract.at(COINFLIP_CONTRACT_ADDRESS);
 
-  const userBet = contract.methods
-    .bet(tokenAsset, formattedAmount, coinSide)
+  return contract.methods
+    .bet(tokenAsset, formattedAmount.integerValue(BigNumber.ROUND_DOWN), coinSide)
     .toTransferParams({ amount: Number(fee), mutez: true });
+};
+
+export const betTokens = async (
+  tezos: TezosToolkit,
+  token: Token,
+  accountPkh: string,
+  tokenAsset: TOKEN_ASSETS,
+  formattedAmount: BigNumber,
+  coinSide: string,
+  fee: BigNumber
+) => {
+  const userBetParams = await getBetTokensParams(tezos, token, accountPkh, tokenAsset, formattedAmount, coinSide, fee);
 
-  return await withApproveApi(tezos, COINFLIP_CONTRACT_ADDRESS, token, accountPkh, formattedAmount, [userBet]);
+  return await withApproveApi(tezos, COINFLIP_CONTRACT_ADDRESS, token, accountPkh, formattedAmount, [userBetParams]);
 };

src/modules/coinflip/coinflip-page.vm.ts

@@ -25,7 +25,7 @@ export const useCoinflipPageViewModel = () => {
   const { getGamesUserInfo } = useGamesUserInfo();
   const { getCoinflipGeneralStats } = useCoinflipGeneralStats();
   const { getGamersStats } = useGamersStats();
-  const { getUserLastGame } = useUserLastGame();
+  const { loadUserLastGame } = useUserLastGame();
 
   useEffect(() => {
     (async () => {
@@ -35,15 +35,15 @@ export const useCoinflipPageViewModel = () => {
       await getGamesUserInfo(accountPkh);
       await getCoinflipGeneralStats();
       await getGamersStats();
-      await getUserLastGame();
+      await loadUserLastGame();
       prevAccountPkhRef.current = accountPkh;
       prevSelectedTokenRef.current = selectedToken;
     })();
   }, [
     getGamesUserInfo,
     getCoinflipGeneralStats,
     getGamersStats,
-    getUserLastGame,
+    loadUserLastGame,
     dAppReady,
     accountPkh,
     selectedToken

src/modules/coinflip/coinflip.page.tsx

@@ -2,17 +2,17 @@ import { FC } from 'react';
 
 import { observer } from 'mobx-react-lite';
 
-import { PageTitle, TestnetAlert, StateWrapper, StickyBlock } from '@shared/components';
+import { PageTitle, StateWrapper, StickyBlock, TestnetAlert } from '@shared/components';
 import { useTranslation } from '@translation';
 
 import { useCoinflipPageViewModel } from './coinflip-page.vm';
 import {
   CoinflipDetails,
   CoinflipGame,
-  CoinflipTokenSelector,
+  CoinflipResultModal,
   CoinflipRewardInfo,
   CoinflipRules,
-  CoinflipResultModal
+  CoinflipTokenSelector
 } from './components';
 
 export const CoinflipPage: FC = observer(() => {
@@ -22,20 +22,14 @@ export const CoinflipPage: FC = observer(() => {
   return (
     <StateWrapper isLoading={!isInitialized} loaderFallback={<div>loading...</div>}>
       <TestnetAlert />
-
       <PageTitle data-test-id="coinflipPageTitle">{t('coinflip|Game')}</PageTitle>
-
       <CoinflipResultModal result={result} wonAmount={wonAmount} currency={currency} />
-
       <CoinflipRewardInfo />
-
       <CoinflipTokenSelector />
-
       <StickyBlock>
         <CoinflipGame />
         <CoinflipDetails />
       </StickyBlock>
-
       <CoinflipRules />
     </StateWrapper>
   );

src/modules/coinflip/components/coinflip-details/coinflip-details.tsx

@@ -180,6 +180,25 @@ export const CoinflipDetails: FC<Props> = observer(({ className }) => {
           />
         </DetailsCardCell>
 
+        <DetailsCardCell
+          className={styles.cardCell}
+          cellName={t('coinflip|yourSideIs')}
+          data-test-id="coinflipYourSideIs"
+        >
+          <StateWrapper
+            isError={shouldHideData || !isExist(betCoinSide) || !isExist(gameResult)}
+            errorFallback={<DashPlug animation={false} />}
+            isLoading={isUserLastGameLoading}
+            loaderFallback={<DashPlug />}
+          >
+            <div className={styles.resultContainer}>
+              <span className={styles.betCoinSide} data-test-id="coinflipBetCoinSide">
+                {betCoinSide && t(`coinflip|${betCoinSide}`)}
+              </span>
+            </div>
+          </StateWrapper>
+        </DetailsCardCell>
+
         <DetailsCardCell
           className={styles.cardCell}
           cellName={t('coinflip|result')}
@@ -193,11 +212,6 @@ export const CoinflipDetails: FC<Props> = observer(({ className }) => {
             loaderFallback={<DashPlug />}
           >
             <div className={styles.resultContainer}>
-              {betCoinSide && (
-                <span className={styles.yourSide} data-test-id="coinflipGameSide">
-                  (Your side is: {t(`coinflip|${betCoinSide}`)})
-                </span>
-              )}
               <span className={styles.result} data-test-id="coinflipGameResult">
                 {gameResult}
               </span>

src/modules/coinflip/components/coinflip-details/coinflip-details.vm.ts

@@ -37,7 +37,7 @@ export const useCoinflipDetailsViewModel = () => {
     bidSize: contractBidSize
   } = useCoinflipStore();
   const { accountPkh } = useAuthStore();
-  const { getUserLastGame } = useUserLastGame();
+  const { loadUserLastGame } = useUserLastGame();
   const { getCoinflipGeneralStats } = useCoinflipGeneralStats();
   const { getUserPendingGame } = useUserPendingGame();
 
@@ -54,8 +54,8 @@ export const useCoinflipDetailsViewModel = () => {
       return;
     }
 
-    await getUserLastGame();
-  }, [accountPkh, tezos, getUserLastGame]);
+    await loadUserLastGame();
+  }, [accountPkh, tezos, loadUserLastGame]);
 
   const updateUserPendingGame = useCallback(async () => {
     if (isNull(tezos) || isNull(accountPkh)) {
@@ -66,9 +66,9 @@ export const useCoinflipDetailsViewModel = () => {
   }, [accountPkh, tezos, getUserPendingGame]);
 
   useEffect(() => {
-    updateUserLastGame();
-    updateUserPendingGame();
-    updateGeneralStats();
+    void updateUserLastGame();
+    void updateUserPendingGame();
+    void updateGeneralStats();
   }, [updateUserLastGame, updateGeneralStats, updateUserPendingGame]);
 
   useOnBlock(updateUserLastGame);

src/modules/coinflip/components/coinflip-game-form/use-coinflip.validation.ts

@@ -1,25 +1,20 @@
 import BigNumber from 'bignumber.js';
 import { object, string } from 'yup';
 
-import { getBidSize } from '@modules/coinflip/helpers';
 import { useCoinflipStore } from '@modules/coinflip/hooks';
 import { isExist } from '@shared/helpers';
 
 import { getCoinflipValidation } from './get-coinflip.validation';
 import { FormFields } from './use-coinflip-game-form.vm';
 
 export const useCoinflipValidation = (balance: Nullable<BigNumber>) => {
-  const { token, generalStats } = useCoinflipStore();
-  const bank = generalStats.bank;
-  const maxBetPercent = generalStats.maxBetPercent;
+  const { token, maxBetSize } = useCoinflipStore();
 
-  const bidSize = getBidSize(bank, maxBetPercent);
-
-  if (!isExist(bank) || !isExist(maxBetPercent) || !isExist(balance) || !isExist(bidSize)) {
+  if (!isExist(maxBetSize) || !isExist(balance)) {
     return;
   }
 
-  const inputAmountValidationSchema = getCoinflipValidation(token, balance, bidSize);
+  const inputAmountValidationSchema = getCoinflipValidation(token, balance, maxBetSize);
 
   return object().shape({
     [FormFields.coinSide]: string().required('Coin Side is required'),

src/modules/coinflip/components/coinflip-game-select/coinflip-game-select.module.scss

@@ -30,6 +30,11 @@
   color: #EF0000;
 }
 
+.buttonLabel {
+  margin-top: 8px;
+  opacity: 0.5;
+}
+
 @include media('>tablet') {
   .button {
   }

src/modules/coinflip/components/coinflip-game-select/coinflip-game-select.tsx

@@ -9,8 +9,17 @@ import { CoinflipGameSelectProps } from './coinflip-game-select.props';
 import { useCoinflipGameSelectViewModel } from './use-coinflip-game-select.vm';
 
 export const CoinflipGameSelect: FC<CoinflipGameSelectProps> = props => {
-  const { error, isLoading, handleSelectSideA, handleSelectSideB, FaceIcon, BackIcon, animationData } =
-    useCoinflipGameSelectViewModel(props);
+  const {
+    error,
+    isLoading,
+    handleSelectHead,
+    handleSelectTail,
+    FaceIcon,
+    BackIcon,
+    animationData,
+    isHeadSelected,
+    isTailSelected
+  } = useCoinflipGameSelectViewModel(props);
 
   return (
     <div className={styles.root}>
@@ -32,20 +41,22 @@ export const CoinflipGameSelect: FC<CoinflipGameSelectProps> = props => {
           <>
             <Button
               data-test-id="coinflipHeadButton"
-              onClick={handleSelectSideA}
+              onClick={handleSelectHead}
               theme="clean"
               className={styles.button}
             >
               <FaceIcon />
+              <div className={styles.buttonLabel}>{isHeadSelected ? 'Head' : <br />}</div>
             </Button>
 
             <Button
               data-test-id="coinflipTailButton"
-              onClick={handleSelectSideB}
+              onClick={handleSelectTail}
               theme="clean"
               className={styles.button}
             >
               <BackIcon />
+              <div className={styles.buttonLabel}>{isTailSelected ? 'Tail' : <br />}</div>
             </Button>
           </>
         )}

src/modules/coinflip/components/coinflip-game-select/use-coinflip-game-select.vm.ts

@@ -35,18 +35,20 @@ export const useCoinflipGameSelectViewModel = ({
   const getFaceIcon = () => (isTez ? getTezosFaceIcon() : getQuipuSwapFaceIcon());
   const getBackIcon = () => (isTez ? getTezosBackIcon() : getQuipuSwapBackIcon());
 
-  const handleSelectSideA = () => handleSelectCoinSide(CoinSide.Head);
-  const handleSelectSideB = () => handleSelectCoinSide(CoinSide.Tail);
+  const handleSelectHead = () => handleSelectCoinSide(CoinSide.Head);
+  const handleSelectTail = () => handleSelectCoinSide(CoinSide.Tail);
 
   const animationData = isTez ? animationTezosData : animationQuipuData;
 
   return {
     isLoading,
     error,
     animationData,
-    handleSelectSideA,
-    handleSelectSideB,
+    handleSelectHead,
+    handleSelectTail,
     FaceIcon: getFaceIcon(),
-    BackIcon: getBackIcon()
+    BackIcon: getBackIcon(),
+    isHeadSelected,
+    isTailSelected
   };
 };

src/modules/coinflip/components/coinflip-game/coinflip-game.vm.ts

@@ -14,7 +14,7 @@ export const useCoinflipGameViewModel = () => {
   const tokenBalance = useTokenBalance(token) ?? null;
 
   const { getGamersStats } = useGamersStats();
-  const { getUserLastGame } = useUserLastGame();
+  const { loadUserLastGame } = useUserLastGame();
   const { getUserPendingGame } = useUserPendingGame();
   const { handleCoinFlip: handleCoinFlipPure } = useCoinFlip();
 
@@ -41,7 +41,7 @@ export const useCoinflipGameViewModel = () => {
       coinflipStore.setPendingGameTokenToPlay(tokenToPlay);
 
       await getGamersStats();
-      await getUserLastGame();
+      await loadUserLastGame();
       await getUserPendingGame();
 
       log('CLICK_FLIP_OPERATION_SUCCESS', logData);

src/modules/coinflip/hooks/use-coin-flip.ts.ts

@@ -35,7 +35,7 @@ export const useCoinFlip = () => {
 
       const operation = await betTokens(tezos, token, accountPkh, tokenAsset, atomicInputAmount, coinSide, fee);
 
-      await confirmOperation(operation.opHash, { message: 'Bet succesfull!' });
+      await confirmOperation(operation.opHash, { message: 'Bet successful!' });
     } catch (error) {
       showErrorToast(error as Error);
     }