Merge pull request #46 from Samuellyworld/dev

cleaning/MVC + fixing and debugging 🧹

package.json

@@ -20,6 +20,7 @@
     "dotenv": "^16.0.3",
     "eslint": "8.27.0",
     "eslint-config-next": "13.0.3",
+    "ethers": "^5.7.2",
     "next": "13.0.3",
     "react": "18.2.0",
     "react-copy-to-clipboard": "5.0.4",
@@ -37,7 +38,6 @@
   },
   "devDependencies": {
     "@types/styled-components": "^5.1.26",
-    "@types/styled-system": "^5.1.15",
-    "hardhat": "^2.12.2"
+    "@types/styled-system": "^5.1.15"
   }
 }

styles/sass/main.scss

@@ -157,6 +157,9 @@
 		border-left: solid transparent 0;
 		border-right: solid orange calc(200px / 2);
 	}
+	.disconnect {
+		font-size: 8px !important;
+	}
 }
 
 @media screen and (max-width: 1030px) {

ui/components/Header/index.styled.ts

@@ -15,7 +15,7 @@ export const HeaderContainer = styled.div`
 		background: purple;
 		border-radius: 8px;
 		display: none;
-		border: 1px solid blue;
+		border: 1px;
 		width: 223px;
 
 		@media (max-width: 576.98px) {
@@ -43,9 +43,6 @@ export const HeaderContainer = styled.div`
 			}
 		}
 	  }
-	  .dropDownConnect_item {
-		border-bottom: 1px solid var(--border-default);
-	  }
 	  .dropDownConnect_item:last-child {
 		border-bottom: none;
 	  }

ui/components/Header/index.tsx

@@ -1,7 +1,8 @@
 // Copyright Tippers 🎲🃏 2022
 // 17 U.S.C §§ 101-1511
 
-//
+//// declaring global module
+declare let window: any;
 import {useDispatch, useSelector} from 'react-redux';
 // importing  stylings from styled component
 import { ConnectButton, HeaderContainer, SVGLogo, TextLogo, connectButtonDropdown } from './index.styled';
@@ -12,9 +13,10 @@ import { CopyToClipboard } from "react-copy-to-clipboard";
 import { UilCopy } from '@iconscout/react-unicons' 
 
 //importing connect wallet functions
-import { metaMaskConnection } from '../../../utils/walletConnection';
-import { useState } from 'react';
+import { metaMaskConnection, walletDisconnect } from '../../../utils/walletConnection';
+import { useEffect, useState } from 'react';
 import { RootState } from '../../../store/store';
+import { setUserAddress } from '../../../store/address/address.reducer';
 // JSX Component
 const Header = (): JSX.Element => {
 
@@ -24,6 +26,18 @@ const dispatch= useDispatch();
 const address = useSelector((state:RootState) => state.address.address)
   //copying address
   const [handleCopyAddress, setHandleCopyAddress] = useState(false);
+
+  useEffect(() => {
+	if (window.ethereum) {
+		window.ethereum.on("accountsChanged", (accounts: string | any[]) => {
+		  if (accounts.length > 0) {
+			  dispatch(setUserAddress(accounts[0]))
+			  localStorage.setItem("wallet-type", "metamask");
+		  }
+		}
+		)}
+}, [])
+
 	return (
 		<HeaderContainer>
 			<TextLogo href="/">
@@ -81,7 +95,7 @@ const address = useSelector((state:RootState) => state.address.address)
 				}
 
 			</ConnectButton>
-			{ !address&&
+			{ !address ?
 			 <div className='dropDownConnect__items'>
 				<div className='dropDownConnect_item' onClick={() => metaMaskConnection(dispatch)}>
 					<div className='dropDownConnect_img'>
@@ -96,9 +110,24 @@ const address = useSelector((state:RootState) => state.address.address)
 					<p>WalletConnect</p>
 				</div>
 			 </div>
+			:
+				address &&  
+				<div className='dropDownConnect__items'>
+				<div className='dropDownConnect_item' onClick={() => walletDisconnect(dispatch)} style={{
+					background: 'rgba(170, 74, 68, 0.6)',
+					borderRadius: "3px"
+				}}>
+					<div className='dropDownConnect_img'>
+                      <img src="/assets/cancel.png" alt='disconnect logo' />
+					</div>
+					<p style={{
+						fontSize: "10px"
+					}}
+					className='disconnect'>Disconnect wallet</p>
+				</div>
+				</div>
 			}
 
-
 			</div>
 
 		</HeaderContainer>

ui/components/StakeCard/index.tsx

@@ -152,7 +152,7 @@ const StakeCard = (props: StakeCardProps): JSX.Element => {
 	 if(game.includes('coins')) {
 		const bet:number = chosenOutcome.includes('head') ? 1 : 0
 		dispatch(alert('Processing transaction... 🔂'))
-		const result= await flip(bet, Math.round(Number(stake)*10**15), address)
+		const result= await flip(bet, (Number(stake)), address)
 		 if(result.hash) {
 			 setTxHash(result.hash)
 			const id = await getRequestId(bet)
@@ -176,7 +176,7 @@ const StakeCard = (props: StakeCardProps): JSX.Element => {
 		} else if (game.includes('dice')) {
             const bet:number = chosenOutcome.includes('greater') ? 0 : 1
 			dispatch(alert('Processing transaction... 🔂'))
-		const result= await roll(bet, Math.round(Number(stake)*10**15), address)
+		const result= await roll(bet, (Number(stake)), address)
 		if(result.hash) {
 			setTxHash(result.hash)
 			const id = await getDiceRequestId(bet)
@@ -201,7 +201,7 @@ const StakeCard = (props: StakeCardProps): JSX.Element => {
 	//wheel
 		} else if(game.includes('wheel')) {
 			dispatch(alert('Processing Transaction... 🔂'))
-			const result= await spinWheel(Math.round(Number(stake)*10**15), address)
+			const result= await spinWheel((Number(stake)), address)
 			if(result.hash) {
 				setTxHash(result.hash)
 				dispatch(close(''))
@@ -299,8 +299,11 @@ const StakeCard = (props: StakeCardProps): JSX.Element => {
 					) : null}
 					<ActionButton
 					    disabled={disabled}
+						style={{
+							cursor: disabled ? "not-allowed" : "cursor"
+						}}
 						spin={spin}
-						onClick={spinGame}>
+						onClick={!disabled && spinGame}>
 						{buttonText(game)}
 					</ActionButton>
 				</CardBody>

ui/widgets/DiceGame/RollDice/index.tsx

@@ -1,13 +1,18 @@
+// Copyright Tippers 🎲🃏 2022
+// 17 U.S.C §§ 101-1511
+
+// importing relevant modules
 import { MutableRefObject, useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import Dice from 'react-dice-roll';
 import { Typography } from '../../../atoms/Typography';
 import { DiceViewIcon } from '../../../svgs';
 
 import { DiceContainer, DiceRoll } from './index.styled';
-import { stat } from 'fs';
+
 import { RootState } from '../../../../store/store';
 
+// roll  a dice
 const RollDice = ({
 	spin,
 	setResult
@@ -16,7 +21,7 @@ const RollDice = ({
 	spin: boolean;
 }): JSX.Element => {
 
-
+// set result and faces
 	const result = useSelector((state:RootState) => state.result.result )
 	const faces = [
 		'https://svgshare.com/i/oZP.svg',
@@ -54,7 +59,7 @@ const RollDice = ({
 	useEffect(() => {
 		console.log(result, 'result')
 	})
-
+	// JSX building
 	return (
 		<DiceContainer>
 			{!spin ? (

ui/widgets/Landingpage/index.tsx

@@ -13,10 +13,7 @@ import { LandingpageContainer, LandingpageComponent1, StartButton, LandingpageCo
 
 const Landingpage = ():JSX.Element => {
     const [play]:any= useSound('/assets/sound/enter_game.mp3');
-    const redirect = () => {
-
-    }
-    const setRedirect =  () => {
+    const setRedirect:()=> void =  () => {
         play()
         setTimeout(() => {
             window.location.pathname = '/games'

utils/interact.ts

@@ -7,6 +7,7 @@ declare let ethereum: any;
 
 //importing relevant module
 import { Dispatch, AnyAction } from "@reduxjs/toolkit";
+import { ethers } from "ethers";
 import Web3 from "web3";
 import { setResult } from "../store/result/result.reducer";
 
@@ -48,10 +49,11 @@ export const flip = async (choice: number, stake:number, address:string) => {
  const transactionParameters = {
     to: coinContractAddress, // Required except during contract publications.
     from: address, // must match user's active address.
-    value: stake.toString(),
+    value: ethers.utils.parseUnits(stake.toString(), "ether")._hex,
     data: CoinFlipContract.methods.flip(choice).encodeABI(),
 
   };
+  console.log(transactionParameters.value)
   // sign the transaction
   try {
     const txHash = await window.ethereum.request({
@@ -90,7 +92,7 @@ export const roll = async (choice: number, stake:number, address:string) => {
 const transactionParameters = {
   to: diceContractAddress, // Required except during contract publications.
   from: address, // must match user's active address.
-  value: stake.toString(),
+  value: ethers.utils.parseUnits(stake.toString(), "ether")._hex,
   data: DiceRollContract.methods.roll(choice).encodeABI(),
 
 };
@@ -130,7 +132,7 @@ export const spinWheel = async (stake:number, address:string) => {
 const transactionParameters = {
   to: wheelContractAddress, // Required except during contract publications.
   from: address, // must match user's active address.
-  value: stake.toString(),
+  value: ethers.utils.parseUnits(stake.toString(), "ether")._hex,
   data: WheelSpinContract.methods.spin().encodeABI(),
 
 };

utils/walletConnection.ts

@@ -34,6 +34,7 @@ export const metaMaskConnection:connectwalletTypes["metaMaskConnection"] = (disp
                 console.log(accounts[0])
                 //store and alert
                 dispatch(setUserAddress(accounts[0]))
+                localStorage.setItem("wallet-type", "metamask");
                 dispatch(alert('Wallet Connected'));
 
                 setTimeout(() => {
@@ -72,6 +73,7 @@ export const metaMaskConnection:connectwalletTypes["metaMaskConnection"] = (disp
         // Log public address of user
         console.log(accounts[0])
         dispatch(setUserAddress(accounts[0]))
+        localStorage.setItem("wallet-type", "metamask");
         dispatch(alert('Wallet Connected'));
         setTimeout(() => {
             dispatch(close(""))
@@ -106,4 +108,14 @@ export const metaMaskConnection:connectwalletTypes["metaMaskConnection"] = (disp
 
 export const walletConnect = () => {
 
+}
+
+export const walletDisconnect = (dispatch: (arg0: { payload: string; type: `${string}/close` | `${string}/alert` | `${string}/setUserAddress`;  }) => void) => {
+  localStorage.clear()
+  dispatch(alert('wallet disconnected'))
+  dispatch(setUserAddress(''))
+  setTimeout(() => {
+    dispatch(close(""))
+  }, 2000) 
+
 }