- )
-}
-
-export default PhaserTest
diff --git a/app/services/ui/src/components/appHeader.tsx b/app/services/ui/src/components/appHeader.tsx
deleted file mode 100644
index a2b1a0d1..00000000
--- a/app/services/ui/src/components/appHeader.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-import { AppHeaderProps } from '../types/props.d'
-import PlayerBalance from './playerBalance'
-
-// Header for the aplication, shows the title and the playerBalance component
-function AppHeader(AppHeaderProps: AppHeaderProps) {
- // Prop that controls if the header is shown
- const { show } = AppHeaderProps
-
- // Renders if show is true.
- return show ? (
-
-
Ardan's Liar's Dice
-
-
- ) : null
-}
-export default AppHeader
diff --git a/app/services/ui/src/components/button.test.tsx b/app/services/ui/src/components/button.test.tsx
deleted file mode 100644
index b9034506..00000000
--- a/app/services/ui/src/components/button.test.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react'
-import { fireEvent, render, screen } from '@testing-library/react'
-import Button from './button'
-
-test('handles onClick', () => {
- const onClick = jest.fn()
- // Tests what happens if you send a number to the Die component.
- // Checks if that number is rendered
- const props = {
- clickHandler: onClick,
- id: 'testing-id',
- disabled: false,
- style: { width: '100%' },
- classes: 'testing',
- }
- render(
- ,
- )
- const ButtonElement = screen.getByText('Testing')
- fireEvent.click(ButtonElement)
- expect(onClick).toHaveBeenCalledTimes(1)
- expect(ButtonElement.id).toEqual('testing-id')
- expect(ButtonElement.style.width).toEqual('100%')
- expect(ButtonElement.classList).toContain('testing')
- expect(ButtonElement.classList).toContain('btn')
- expect(ButtonElement.classList).toContain('btn-block')
-})
diff --git a/app/services/ui/src/components/button.tsx b/app/services/ui/src/components/button.tsx
deleted file mode 100644
index d3c1e793..00000000
--- a/app/services/ui/src/components/button.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react'
-import { ButtonProps } from '../types/props.d'
-
-// Button component
-function Button(props: ButtonProps) {
- // Extracts props.
- const { clickHandler, id, classes, disabled, children, style, tooltip } =
- props
-
- return (
-
- )
-}
-
-export default Button
diff --git a/app/services/ui/src/components/hooks/useEthersConnection.ts b/app/services/ui/src/components/hooks/useEthersConnection.ts
deleted file mode 100644
index 87dc41fb..00000000
--- a/app/services/ui/src/components/hooks/useEthersConnection.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-/* ************useGameHook************
-
- This hook provides all functions needed to connect to the web3 provider.
-
-**************************************** */
-
-import { ethers, Signer } from 'ethers'
-import { useContext } from 'react'
-import { EthersContext } from '../../contexts/ethersContext'
-
-function useEthersConnection() {
- const { ethersConnection, setEthersConnection } = useContext(EthersContext)
- const provider = new ethers.providers.Web3Provider(window.ethereum, 'any')
-
- // Signer setter.
- function setSigner(signer: Signer) {
- const newContext = ethersConnection
- newContext.signer = signer
-
- setEthersConnection(newContext)
- }
-
- // Signer getter.
- const signer = ethersConnection.signer
-
- // Signer account
- function setAccount(account: string | null) {
- const newContext = ethersConnection
- newContext.account = account
-
- window.sessionStorage.setItem('account', `${account}`)
- setEthersConnection(newContext)
- }
- // Account getter.
- const account = ethersConnection.account
- ? ethersConnection.account
- : undefined
-
- // Network setter
- function setNetwork(network: object) {
- const newContext = ethersConnection
- newContext.network = network
-
- setEthersConnection(newContext)
- }
-
- // Switches the current network that metamask is connected to
- function switchNetwork(network: Partial<{ chainId: string }>) {
- window.ethereum
- .request({
- method: 'wallet_switchEthereumChain',
- params: [network],
- })
- .catch((response: any) => {
- console.error(response)
- })
- }
-
- return {
- setSigner,
- signer,
- setAccount,
- account,
- setNetwork,
- switchNetwork,
- provider,
- }
-}
-
-export default useEthersConnection
diff --git a/app/services/ui/src/components/hooks/useGame.ts b/app/services/ui/src/components/hooks/useGame.ts
deleted file mode 100644
index 4da7bf63..00000000
--- a/app/services/ui/src/components/hooks/useGame.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-/* ************useGameHook************
-
- This hook provides all functions needed to run the game.
- It only exports the methods needed to run the game from another component.
- Apart from the gameflow methods (line 36) we have the gamepot set in here.
- Inside ~/src/components/mainRoom.tsx you can see an implementation of how all of this is working.
- Might be helpfull to see ~/src/hooks/useWebSocket.ts to understand the events that run the game notifications/updating system.
-
- **************************************** */
-import axios, { AxiosError } from 'axios'
-import { apiUrl } from '../../utils/axiosConfig'
-import { connectResponse } from '../../types/responses.d'
-import { getAppConfig } from '../..'
-import { useNavigate } from 'react-router-dom'
-
-// Create an axios instance to keep the token updated
-const axiosInstance = axios.create({
- headers: {
- authorization: window.sessionStorage.getItem('token') as string,
- },
-})
-
-function useGame() {
- const navigate = useNavigate()
-
- // connectToGameEngine connects to the game engine, and stores the token
- // in the sessionStorage. Takes an object with the following type:
- // { dateTime: string; sig: string }
- function connectToGameEngine(data: {
- address: string
- dateTime: string
- sig: string
- }) {
- const getAppConfigFn = () => {
- navigate('/mainroom')
- }
- if (window.sessionStorage.getItem('token')) {
- window.localStorage.setItem('account', data.address)
- getAppConfig.then(getAppConfigFn)
- }
- const axiosConnectFn = (connectResponse: connectResponse) => {
- window.sessionStorage.setItem(
- 'token',
- `Bearer ${connectResponse.data.token}`,
- )
-
- window.localStorage.setItem('account', data.address)
-
- getAppConfig.then(getAppConfigFn)
- }
-
- const axiosConnectErrorFn = (error: AxiosError) => {
- const errorMessage = (error as any).response.data.error.replace(
- / \[.+\]/gm,
- '',
- )
-
- console.group()
- console.error('Error:', errorMessage)
- console.groupEnd()
- }
-
- axiosInstance
- .post(`http://${apiUrl}/connect`, { ...data })
- .then(axiosConnectFn)
- .catch(axiosConnectErrorFn)
- }
-
- return {
- connectToGameEngine,
- }
-}
-
-export default useGame
diff --git a/app/services/ui/src/components/hooks/usePhaser.ts b/app/services/ui/src/components/hooks/usePhaser.ts
deleted file mode 100644
index 8e009b48..00000000
--- a/app/services/ui/src/components/hooks/usePhaser.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useState, useEffect } from 'react'
-import { Game, Types } from 'phaser'
-
-function usePhaser(
- config: Types.Core.GameConfig,
- containerRef: React.RefObject,
-): Game | undefined {
- const [game, setGame] = useState()
- useEffect(() => {
- if (!game && containerRef.current) {
- const newGame = new Game({ ...config, parent: containerRef.current })
- setGame(newGame)
- }
- return () => {
- game?.destroy(true)
- }
- }, [config, containerRef, game])
-
- return game
-}
-
-export default usePhaser
diff --git a/app/services/ui/src/components/icons/coinbase.tsx b/app/services/ui/src/components/icons/coinbase.tsx
deleted file mode 100644
index 05eaa4ae..00000000
--- a/app/services/ui/src/components/icons/coinbase.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, { FC } from 'react'
-
-interface CoinBaseLogoProps {
- width?: string
- height?: string
-}
-
-const CoinBaseLogo: FC = (CoinBaseLogoProps) => {
- let { width, height } = CoinBaseLogoProps
- width = width ? width : '50px'
- height = height ? height : '50px'
- return (
-
- )
-}
-
-export default CoinBaseLogo
diff --git a/app/services/ui/src/components/icons/logout.test.tsx b/app/services/ui/src/components/icons/logout.test.tsx
deleted file mode 100644
index 6bb72029..00000000
--- a/app/services/ui/src/components/icons/logout.test.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import Logout from './logout'
-
-test('renders logout icon', () => {
- // Tests what happens if you send a number to the Die component.
- // Checks if that number is rendered
- const { container } = render()
-
- const svgElement = container.querySelector('#logout_svg') as SVGElement
- const pathElement = svgElement.querySelector('path')
- expect(svgElement).toBeInTheDocument()
- expect(pathElement).toBeInTheDocument()
- expect(svgElement.style.height).toBe('24px')
- expect(svgElement.style.width).toBe('24px')
- expect(pathElement?.getAttribute('fill')).toBe('#00284d')
-})
diff --git a/app/services/ui/src/components/icons/logout.tsx b/app/services/ui/src/components/icons/logout.tsx
deleted file mode 100644
index 0bbbffdf..00000000
--- a/app/services/ui/src/components/icons/logout.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, { FC } from 'react'
-
-interface LogoutProps {
- width?: string
- height?: string
-}
-
-const Logout: FC = (LogoutProps) => {
- let { width, height } = LogoutProps
- width = width ? width : '24px'
- height = height ? height : '24px'
- return (
-
- )
-}
-
-export default Logout
diff --git a/app/services/ui/src/components/icons/metamask.test.tsx b/app/services/ui/src/components/icons/metamask.test.tsx
deleted file mode 100644
index d02bceea..00000000
--- a/app/services/ui/src/components/icons/metamask.test.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import MetamaskLogo from './metamask'
-
-test('renders metamask logo', () => {
- // Tests what happens if you send a number to the Die component.
- // Checks if that number is rendered
- const { container } = render()
-
- const svgElement = container.querySelector('#Layer_1') as SVGElement
- expect(svgElement).toBeInTheDocument()
-
- const polygons = svgElement.querySelectorAll('[class^="st"]')
- // The svg is composed of 29 polygons
- expect(polygons.length).toBe(29)
-})
diff --git a/app/services/ui/src/components/icons/metamask.tsx b/app/services/ui/src/components/icons/metamask.tsx
deleted file mode 100644
index 60127f24..00000000
--- a/app/services/ui/src/components/icons/metamask.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React, { FC } from "react";
-
-interface MetamaskLogoProps {
- width?: string,
- height?: string,
-
-}
-
-const MetamaskLogo: FC = (MetamaskLogoProps) => {
- let { width, height } = MetamaskLogoProps
- width = width ? width : '50px'
- height = height ? height : '50px'
- return (
-
- )
-}
-
-export default MetamaskLogo
\ No newline at end of file
diff --git a/app/services/ui/src/components/icons/star.test.tsx b/app/services/ui/src/components/icons/star.test.tsx
deleted file mode 100644
index c13eb3e3..00000000
--- a/app/services/ui/src/components/icons/star.test.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import Star from './star'
-
-test('renders star icon', () => {
- // Tests what happens if you send a number to the Die component.
- // Checks if that number is rendered
- const { container } = render(
- ,
- )
-
- const svgElement = container.querySelector('#star_svg') as SVGElement
- const pathElement = svgElement.querySelector('path')
- expect(svgElement).toBeInTheDocument()
- expect(pathElement).toBeInTheDocument()
- expect(svgElement.style.height).toBe('26px')
- expect(svgElement.style.width).toBe('29px')
- expect(pathElement?.getAttribute('fill')).toBe('#0000')
-})
diff --git a/app/services/ui/src/components/icons/star.tsx b/app/services/ui/src/components/icons/star.tsx
deleted file mode 100644
index d6fbd835..00000000
--- a/app/services/ui/src/components/icons/star.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { FC } from 'react'
-
-interface StarProps {
- width?: string
- height?: string
- fill?: string
-}
-
-const Star: FC = (StarProps) => {
- let { width, height, fill } = StarProps
- width = width ? width : '29px'
- height = height ? height : '26px'
- fill = fill ? fill : '#F0EAD6'
- return (
-
- )
-}
-
-export default Star
diff --git a/app/services/ui/src/components/icons/walletconnect.tsx b/app/services/ui/src/components/icons/walletconnect.tsx
deleted file mode 100644
index cdd25709..00000000
--- a/app/services/ui/src/components/icons/walletconnect.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { FC } from 'react'
-
-interface WalletConnectLogoProps {
- width?: string
- height?: string
-}
-
-const WalletConnectLogo: FC = (
- WalletConnectLogoProps,
-) => {
- let { width, height } = WalletConnectLogoProps
- width = width ? width : '50px'
- height = height ? height : '50px'
- return (
-
- )
-}
-
-export default WalletConnectLogo
diff --git a/app/services/ui/src/components/join.tsx b/app/services/ui/src/components/join.tsx
deleted file mode 100644
index 0e32eb7b..00000000
--- a/app/services/ui/src/components/join.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react'
-import Button from './button'
-import { JoinProps } from '../types/props.d'
-
-// Join component
-function Join(props: JoinProps) {
- // Extracts props.
- const { disabled } = props
-
- // Checks if button is disabled
- const isButtonDisabled = disabled
-
- // ===========================================================================
- function handleClick() {}
-
- // Renders this markup
- return (
-
- )
-}
-
-export default Join
diff --git a/app/services/ui/src/components/login.tsx b/app/services/ui/src/components/login.tsx
deleted file mode 100644
index 7cf3e076..00000000
--- a/app/services/ui/src/components/login.tsx
+++ /dev/null
@@ -1,256 +0,0 @@
-import React, { useContext, useEffect, useState } from 'react'
-import Button from './button'
-import MetamaskLogo from './icons/metamask'
-import { toast } from 'react-toastify'
-import getNowDate from '../utils/getNowDate'
-import { useNavigate } from 'react-router-dom'
-import { getAppConfig } from '..'
-import { token } from '../utils/axiosConfig'
-import useEthersConnection from './hooks/useEthersConnection'
-import useGame from './hooks/useGame'
-import { WalletContext } from '@viaprotocol/web3-wallets'
-import LogOutIcon from './icons/logout'
-import CoinBaseLogo from './icons/coinbase'
-import WalletConnectLogo from './icons/walletconnect'
-import { Web3Provider } from '@ethersproject/providers'
-import Wallets from '../utils/wallets'
-
-// Login component.
-// Doesn't receives parameters
-// Outputs the Html output for login in.
-// Handles logic for login in and also connecting to the game engine.
-function Login() {
- // ===========================================================================
- // Hooks setup.
-
- // Extract connectToGameEngine from useGame hook
- const { connectToGameEngine } = useGame()
-
- // Extracts navigate from useNavigate Hook
- const navigate = useNavigate()
-
- // Extracts functions from useEthersConnection Hook
- // useEthersConnection hook handles all connections to ethers.js
- const { account, setAccount, setSigner } = useEthersConnection()
-
- const { connect, isConnected, disconnect, address, signMessage, provider } =
- useContext(WalletContext)
-
- // Sets local state to trigger re-render when load is complete.
- const [loading, setLoading] = useState(true)
-
- // Prompts user to connect to metamask usign the provider
- // and registers it to useEthersConnection hook
- async function init() {
- if (provider instanceof Web3Provider) {
- const signer = provider.getSigner()
- setSigner(signer)
- }
-
- setAccount(address)
- }
-
- // ===========================================================================
-
- function accountsChangeUEFn() {
- // handleAccountsChanged handles what happen when metamask account changes
- // If the array of accounts is non-empty, you're already connected.
- function handleAccountsChanged(accounts: string[]) {
- if (accounts.length === 0) {
- // MetaMask is locked or the user has not connected any accounts
- setLoading(true)
- return
- }
- }
-
- function connectFn() {
- init().then(() => setLoading(false))
- }
- // Note that this event is emitted on page load.
- window.ethereum.on('accountsChanged', handleAccountsChanged)
- // This event checks when the provider becomes able to submit
- // RPC requests to a chain.
- window.ethereum.on('connect', connectFn)
- init().then(() => setLoading(false))
- }
-
- // The Effect Hook lets you perform side effects in function components
- // In this case we use it to handle what happens when metamask accounts change.
- // An empty dependecies array triggers useEffect only on the first render
- // of the component. We disable the next line so eslint doens't complain about
- // missing dependencies.
-
- // eslint-disable-next-line
- useEffect(accountsChangeUEFn, [])
-
- // ===========================================================================
-
- // loggedUEFn handles what happen if you're already log when you enter the app
- const loggedUEFn = () => {
- if (token() && account) {
- getAppConfig.then((response) => {
- navigate('/mainRoom', {
- state: { ...response, reload: true },
- replace: true,
- })
- })
- }
- }
-
- // Next line is disabled so eslint doens't complain about missing dependencies.
-
- // eslint-disable-next-line
- useEffect(loggedUEFn, [account, isConnected])
-
- function connectPageOnLoadUEFn() {
- const connectWalletOnPageLoad = async () => {
- const connectedWallet: string | null =
- localStorage.getItem('connectedWallet')
- if (connectedWallet) {
- const isWalletConnected =
- JSON.parse(connectedWallet).name === `${Wallets.Metamask.name}` ||
- JSON.parse(connectedWallet).name === `${Wallets.Coinbase.name}` ||
- JSON.parse(connectedWallet).name === `${Wallets.WalletConnect.name}`
-
- if (isWalletConnected) {
- try {
- await connect(
- JSON.parse(localStorage.getItem('connectedWallet') as string),
- ).then(() => {
- init().then(() => setLoading(false))
- })
- } catch (ex) {
- console.log(ex)
- }
- }
- }
- }
- connectWalletOnPageLoad()
- }
-
- useEffect(connectPageOnLoadUEFn, [])
-
- // ===========================================================================
- //
- // End of hooks.
- //
- // ===========================================================================
-
- // handleConnectAccount takes care of the connection to the browser wallet.
- async function handleConnectAccount(wallet: { name: any; chainId: any }) {
- await connect(wallet).then(() => {
- init().then(() => {
- window.localStorage.setItem('connectedWallet', JSON.stringify(wallet))
- setLoading(false)
- })
- })
- }
-
- // signTransaction handles click on sign transaction
- // Creates a document to sign, signs the document and connects to game engine.
- function signTransaction() {
- toast.info('Connecting to game engine')
-
- const date = getNowDate()
-
- const doc = { address: address as string, dateTime: date }
-
- const parsedDoc = JSON.stringify(doc)
-
- // signerFn connects to the game Engine sending the signature and the signed document.
- const signerFn = (signerResponse: any) => {
- const data = { ...doc, sig: signerResponse }
- connectToGameEngine(data)
- }
-
- // signer.signmessage signs the data. The underlying code will apply the Ardan stamp and
- // ID to the signature thanks to changes made to the ether.js api.
-
- signMessage(parsedDoc).then(signerFn)
- }
-
- // ===========================================================================
-
- // Renders this final markup.
- return (
-
-
-
- Connect your wallet
-
- Or you can also select a provider to create one.
-
- )
-}
-
-export default Transaction
diff --git a/app/services/ui/src/components/wrongNetwork.tsx b/app/services/ui/src/components/wrongNetwork.tsx
deleted file mode 100644
index 94384592..00000000
--- a/app/services/ui/src/components/wrongNetwork.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { useState } from 'react'
-import { getAppConfig } from '..'
-import { AppConfig } from '../types/index.d'
-
-// Component that shows when your network doesn't match the backend config.
-const WrongNetwork = () => {
- // We set a state to trigger a re-render when the configuration is loaded.
- // React re-renders the UI when you have a state change inside of it.
- const [appConfig, setAppConfig] = useState({} as AppConfig)
-
- const getAppConfigFn = (response: AppConfig) => {
- setAppConfig(response)
- }
- // Gets the backend config and sets it to the state.
- getAppConfig.then(getAppConfigFn)
-
- // ===========================================================================
-
- // Render
- return appConfig ? (
-