ref: updates

.env.qa

@@ -1,10 +1,10 @@
 mode=qa
 VITE_BACKEND_API_URL=http://35.208.209.92:3000/
 VITE_REDUX_DEBUG=true
-#NPM_TOKEN=secret
-#GSAP_TOKEN=secret
-#VITE_RPC_PROVIDER_ALCHEMY=secret
-#VITE_WALLET_CONNECT_ID=secret
+NPM_TOKEN=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
+GSAP_TOKEN=5b8296c2-d882-401b-be86-87707a83f99d
+VITE_RPC_PROVIDER_ALCHEMY=y9Gx-Wglr_8PQ67heuNUZ18rwoUEip9B
+VITE_WALLET_CONNECT_ID=210ab6fbbd6f9d07fd69a357b4c39a13
 
 # fire base configs
 VITE_FIREBASE_API_KEY=AIzaSyD6NTn82GLXFGWGWKNsmmwhohOHJXaHaoQ
@@ -14,3 +14,4 @@ VITE_FIREBASE_PROJECT_ID=inspired-bebop-399607
 VITE_FIREBASE_STORAGE_BUCKET=inspired-bebop-399607.appspot.com
 VITE_FIREBASE_MESSAGING_SENDER_ID=368714610861
 VITE_FIREBASE_APP_ID=1:368714610861:web:25a05efd0381cbd552ee24
+

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+ "recommendations": [
+  "blackboxapp.blackbox"
+ ]
+}

src/app/blockchainApiSlice.ts

@@ -9,6 +9,4 @@ export const blockchainApiSlice = createApi({
   baseQuery,
   reducerPath: baseUrl,
   endpoints: () => ({})
-});
-
-
+});

src/common/CoinSide/index.tsx

@@ -1,10 +1,10 @@
-import { CoinSideHeadsIcon, CoinSideTailsIcon } from "../../assets/icons";
+import { CoinSideHeadsIcon, CoinSideTailsIconWithCircle } from "../../assets/icons";
 import { CoinSideTypes, CoinSideTypesEnum, AllPossibleCoinSides } from "../../models";
 import 'twin.macro';
 
 export const COIN_SIDE_COMPONENTS: any = {
  [CoinSideTypes[CoinSideTypesEnum.HEADS]]: CoinSideHeadsIcon, 
- [CoinSideTypes[CoinSideTypesEnum.TAILS]]: CoinSideTailsIcon, 
+ [CoinSideTypes[CoinSideTypesEnum.TAILS]]: CoinSideTailsIconWithCircle, 
 }
 
 export interface CoinSideProps extends React.Attributes, React.AllHTMLAttributes<HTMLDivElement> {

src/common/ToggleCoinFlipSides/index.tsx

@@ -46,7 +46,7 @@ export const ToggleCoinFlipSides: React.FC<ToggleCoinFlipSidesProps> = ({ setCur
     // replace gradient border with other approach
   return (<div tw="flex flex-row rounded-[20px] gap-x-[40px]" {...rest}>
     <button
-      tw="cursor-pointer flex w-[fit-content] justify-center items-center gap-[10px] px-[20px] py-[10px] rounded-[15px]" 
+      tw="cursor-pointer flex w-[fit-content] justify-center items-center gap-[10px] px-[20px] py-[10px] rounded-[15px] border border-[2px] border-shinishi" 
       css={[isHEADSSelected && selectedStyles]}
       onClick={handleHeadsClick} 
       >
@@ -57,7 +57,7 @@ export const ToggleCoinFlipSides: React.FC<ToggleCoinFlipSidesProps> = ({ setCur
     </button>
     <button 
       onClick={handleTailsClick} 
-      className="cursor-pointer flex w-[fit-content] justify-center items-center gap-[10px] px-[20px] py-[10px] rounded-[15px]"
+      tw="cursor-pointer flex w-[fit-content] justify-center items-center gap-[10px] px-[20px] py-[10px] rounded-[15px] border border-[2px] border-shinishi"
       css={[isTAILSSelected && selectedStyles]}
       >
       {/* icon */}

src/components/CoinFlip/animations.ts

@@ -26,7 +26,7 @@ export function useRoll(coinRef: any) {
    setAnimationTarget(String(rollDestination * 100));
    setStrigger(s => !s);
    if(isGameOver){
-    setTimeout(() => setRolled(true), 2000);
+    setTimeout(() => setRolled(true), 4000);
    }
   };
 

src/components/CreateGameCard/CreateCoinFlipGameCard.tsx

@@ -22,7 +22,8 @@ import {
   AllPossibleWegaTypes,
   AllPossibleCoinSides, 
   CoinSideTypes, 
-  CoinSideTypesEnum
+  CoinSideTypesEnum,
+  Network
 } from "../../models";
 import { 
   BadgeIcon, 
@@ -35,10 +36,14 @@ import { ErrorMessage } from '@hookform/error-message';
 import { ArrowDownIcon, StarLoaderIcon } from '../../assets/icons';
 import tw from 'twin.macro';
 import { useForm } from 'react-hook-form';
-import { useBlockchainApiHooks, useAppSelector, useNavigateTo } from '../../hooks';
-import { selectWagerApproved } from '../../api/blockchain/blockchainSlice';
+import { useNavigateTo } from '../../hooks';
+import { 
+  useCreateWagerAndDepositMutation,
+  useAllowanceQuery,
+  useApproveERC20Mutation,
+} from './blockchainApiSlice';
 import { useCreateGameMutation } from '../../containers/App/api';
-import { toastSettings } from '../../utils';
+import { toastSettings, toBigIntInWei, escrowConfig, parseTopicDataFromEventLog } from '../../utils';
 import Button from '../../common/Button';
 import { ToggleWagerBadge } from '../../common/ToggleWagerBadge';
 import { useFormReveal } from './animations';
@@ -51,6 +56,7 @@ export interface CreateGameCardInterface {
   playerAddress: HexishString;
   gameType: AllPossibleWegaTypes;
   playerUuid: string;
+  network: Network;
 }
 
 export const CreateCoinFlipGameCard = ({ 
@@ -60,6 +66,7 @@ export const CreateCoinFlipGameCard = ({
   playerAddress,
   playerUuid,
   gameType,
+  network,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   css, 
   ...rest 
@@ -72,13 +79,7 @@ export const CreateCoinFlipGameCard = ({
   const [currentCoinSide, setCurrentCoinSide] = useState<AllPossibleCoinSides>(CoinSideTypes[CoinSideTypesEnum.HEADS]);
   const {revealed, triggerRevealAnimation} = useFormReveal(false, formRef, detailsBlock);
 
-  const {
-    useAllowanceQuery,
-    useApproveERC20Mutation,
-    useCreateWagerMutation,
-  } = useBlockchainApiHooks;
-
-  const { register, formState: { errors }, getValues, watch, handleSubmit, setValue } = useForm({ 
+  const { register, formState: { errors }, watch, handleSubmit, setValue } = useForm({ 
     mode: 'onChange', 
     resolver: joiResolver(createGameSchema('wager')) , 
     reValidateMode: 'onChange',
@@ -88,38 +89,48 @@ export const CreateCoinFlipGameCard = ({
   });
 
   // approval for allowance
-  const isWagerApproved = useAppSelector(state => selectWagerApproved(state));
-  const { isLoading: isGetAllowanceLoading, allowance } = useAllowanceQuery();
-
+  const isWagerApproved = (allowance: number, wagerAmount: number) => allowance >= wagerAmount;
+  const allowanceQuery = useAllowanceQuery({ 
+    spender: escrowConfig.address[network.id as keyof typeof escrowConfig.address], 
+    owner: playerAddress,
+    tokenAddress,  
+  });
+
   // get token balance of user
   const { data: userWagerBalance, isLoading: isWagerbalanceLoading } = useBalance({ 
     address: playerAddress,
     token: tokenAddress,
   })
-
-  // approve token
-  const { isLoading: isApproveERC20Loading, approveERC20 } = useApproveERC20Mutation();  
-  const handleApproveWagerClick = ({ wager }: { wager: number }) => {
-    approveERC20(tokenAddress, wager);
-  };
-
+
   // create game
-  const { isLoading: isCreateWagerLoading,  createWager } = useCreateWagerMutation();
-  const [ createGame, { isLoading: isCreateGameLoading, status: createGameStatus, data: createGameResponse  } ] = useCreateGameMutation();
+  const [approveERC20, approveERC20Query] = useApproveERC20Mutation();
+  const [createWagerAndDeposit, createWagerAndDepositQuery] = useCreateWagerAndDepositMutation();
+  const [ createGame, { 
+    isLoading: isCreateGameLoading, 
+    status: createGameStatus, 
+    data: createGameResponse 
+  } ] = useCreateGameMutation();
+
   const handleCreateGameClick = async ({ wager }: { wager: number }) => {
     try {
-      const createWagerData = await createWager({ tokenAddress, playerAddress, accountsCount: 2, wager, gameType }).unwrap();
+      if(!isWagerApproved(allowanceQuery.data, wager)) {
+        await approveERC20({ 
+          spender: escrowConfig.address[network.id as keyof typeof escrowConfig.address], wagerAsBigint: toBigIntInWei(wager), tokenAddress }).unwrap();
+      }
+      const receipt = await createWagerAndDeposit({ tokenAddress, wagerAsBigint: toBigIntInWei(wager), gameType }).unwrap();
+      const { escrowHash, nonce } = parseTopicDataFromEventLog(receipt.logs[3], ['event GameCreation(bytes32 indexed escrowHash, uint256 indexed nonce, address creator, string name)']);
+
       await createGame({ 
         gameType, 
         players: [ { uuid: playerUuid } ],
         creatorUuid: playerUuid,
         wager: { 
           wagerType: currentWagerType.toUpperCase() as AllPossibleWagerTypes, 
-          wagerHash: createWagerData.wagerId as string, 
+          wagerHash: escrowHash, 
           tokenAddress, 
           wagerAmount: utils.parseEther(String(wager)).toString(), 
           wagerCurrency: currentCurrencyType,
-          nonce: createWagerData.nonce,
+          nonce: nonce.toNumber(),
         },
         gameAttributes: [{ key: "players[0].flipChoice", value: currentCoinSide.toString()}]
       }).unwrap();
@@ -138,7 +149,7 @@ export const CreateCoinFlipGameCard = ({
 
   const navigateToGameUi = useNavigateTo()
   useEffect(() => {
-    allowance(tokenAddress, playerAddress, getValues('wager'));
+    allowanceQuery.refetch();
     if(createGameStatus === 'fulfilled' && createGameResponse) {
       navigateToGameUi(`/${gameType.toLowerCase()}/play/${createGameResponse.uuid}`, 1500, { replace: true,
         state: { gameId: createGameResponse.id, gameUuid: createGameResponse.uuid } });
@@ -154,7 +165,7 @@ export const CreateCoinFlipGameCard = ({
   return (
     <form 
       tw="w-full flex flex-col justify-center items-center" 
-      onSubmit={isWagerApproved ? handleSubmit(handleCreateGameClick) : handleSubmit(handleApproveWagerClick)} 
+      onSubmit={handleSubmit(handleCreateGameClick)} 
       ref={formRef}
     >
       <ToggleCoinFlipSides currentCoinSide={currentCoinSide} setCurrentCoinSide={setCurrentCoinSide} tw="mb-[32px]" />
@@ -210,14 +221,13 @@ export const CreateCoinFlipGameCard = ({
         </div>
         {/* <Button buttonType="primary"><>Approve</></Button> */}
         {
-          isWagerApproved ? 
-          <Button type="submit" buttonType="primary" tw="flex">
-              {(isCreateWagerLoading || isCreateGameLoading) ? "Loading..." : "Start game" }
-              <StarLoaderIcon loading={isCreateWagerLoading || isCreateGameLoading} color="#151515" tw="h-[16px] w-[16px] ms-[5px]" />
-          </Button> :
           <Button type="submit" buttonType="primary" tw="flex">
-            {(isApproveERC20Loading || isGetAllowanceLoading)  ? "Loading..." : "Approve" }
-            <StarLoaderIcon loading={isApproveERC20Loading || isGetAllowanceLoading} color="#151515" tw="h-[16px] w-[16px] ms-[5px]" />
+          {(
+            approveERC20Query.isLoading || 
+            createWagerAndDepositQuery.isLoading || 
+            isCreateGameLoading
+          ) ? "Loading..." : "Start game" }
+          <StarLoaderIcon loading={approveERC20Query.isLoading || createWagerAndDepositQuery.isLoading || isCreateGameLoading} color="#151515" tw="h-[16px] w-[16px] ms-[5px]" />
           </Button>
         }
         {/* button approve */}

src/components/Dice/animations.ts

@@ -33,7 +33,7 @@ export function useRoll(diceRef: any, onBegin?: Callback, onEnd?: Callback) {
    setAnimationTarget(String(rollDestination * 100));
    setStrigger(s => !s); 
    if(isGameOver) {
-    setTimeout(() => setRolled(true), 3000);
+    setTimeout(() => setRolled(true), 4000);
    }
   };
 

src/components/Dice/images/WegaDice.tsx

@@ -270,4 +270,6 @@ const SvgComponent = forwardRef((props: SVGProps<SVGSVGElement>, ref: any) => (
     </defs>
   </svg>
 ))
-export default SvgComponent;
+export default SvgComponent;
+
+// transform: translateY(69px);

src/components/Dice/types.ts

@@ -13,10 +13,7 @@ export const DiceContainer = styled.div`
  background: rgba(75, 75, 75, 0.30 );
  backdrop-filter: blur(15px);
  ${tw`border border-blanc border-[1.5px]`}
-
- > svg {
-  border-radius: 5px;
- }
+ border-radius: 5px;
  `
 export const DiceWrapper = styled.div`
  position: relative;