Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

display space status (rented or available) #33

Merged
merged 4 commits into from
Aug 2, 2020
Merged

display space status (rented or available) #33

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2341998
display space status (rented or available)
raphaelpg Aug 1, 2020
9540729
display rent details
raphaelpg Aug 1, 2020
2f39791
minor context adjust + signer in context
obernardovieira Aug 1, 2020
c8736d9
correct bug when user don't have a space yet
raphaelpg Aug 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions webui/pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
EstateAgentInstance,
RentalAgentInstance,
} from '../../smart-contracts/types/truffle-contracts/index';
import { IUser, IChainContext, ISpace, IRent } from '../src/types'
import { IChainContext, ISpace, IRent } from '../src/types'
import { createPow } from '@textile/powergate-client'


Expand All @@ -28,6 +28,7 @@ export const ChainContext = React.createContext<IChainContext>({

export default function MyApp(props: AppProps) {
const [spaces, setSpaces] = useState<ISpace[]>([]);
const [signer, setSigner] = useState<ethers.Signer>();
const [userRent, setUserRent] = useState<IRent>();
const [userSpace, setUserSpace] = useState<ISpace>();
const [decentramallTokenInstance, setDecentramallToken] = useState<ethers.Contract & DecentramallTokenInstance | undefined>();
Expand All @@ -43,16 +44,17 @@ export default function MyApp(props: AppProps) {
}

const loadWeb3 = async () => {
await (window as any).ethereum.enable();
await (window as any).ethereum.request({ method: 'eth_requestAccounts' });
// A Web3Provider wraps a standard Web3 provider, which is
// what Metamask injects as window.ethereum into each page
const provider = new ethers.providers.Web3Provider((window as any).ethereum);

// The Metamask plugin also allows signing transactions to
// send ether and pay to change state within the blockchain.
// For this, we need the account signer...
const signer = provider.getSigner();
const signerAddress = await signer.getAddress();
const currentSigner = provider.getSigner();
const signerAddress = await currentSigner.getAddress();
setSigner(currentSigner);

const { chainId } = await provider.getNetwork();
const decentramallTokenInstance = new ethers.Contract(
Expand Down Expand Up @@ -146,7 +148,7 @@ export default function MyApp(props: AppProps) {
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<ChainContext.Provider value={{ spaces, user: { space: userSpace, rent: userRent }, decentramallTokenInstance, estateAgentInstance, rentalAgentInstance }}>
<ChainContext.Provider value={{ spaces, user: { space: userSpace, rent: userRent, signer }, decentramallTokenInstance, estateAgentInstance, rentalAgentInstance }}>
<Component {...pageProps} />
</ChainContext.Provider>
</ThemeProvider>
Expand Down
116 changes: 90 additions & 26 deletions webui/pages/user/space.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,48 +1,37 @@
import Box from '@material-ui/core/Box'
import Container from '@material-ui/core/Container'
import Typography from '@material-ui/core/Typography'
import React, { useState, useEffect } from 'react'
import React, { useState, useEffect, useContext } from 'react'
import { ChainContext } from '../_app'
import { IChainContext } from '../../src/types'
import { Button } from '@material-ui/core'
import { ethers, BigNumber } from 'ethers'
import { DecentramallTokenInstance, EstateAgentInstance } from '../../../smart-contracts/types/truffle-contracts';
import { EstateAgentInstance } from '../../../smart-contracts/types/truffle-contracts';


export default function Space() {
const chainContext = useContext(ChainContext);
const { decentramallTokenInstance, estateAgentInstance, user } = chainContext;
const [nextPrice, setNextPrice] = useState<string>('0');
let decentramallTokenInstance: ethers.Contract & DecentramallTokenInstance;
let estateAgentInstance: ethers.Contract & EstateAgentInstance;
let signer: ethers.providers.JsonRpcSigner;
let signerAddress: string;

useEffect(() => {
const loadNextPrice = async () => {
await (window as any).ethereum.request({ method: 'eth_requestAccounts' });
const provider = new ethers.providers.Web3Provider((window as any).ethereum);

signer = provider.getSigner();
signerAddress = await signer.getAddress();

// const { chainId } = await provider.getNetwork();
const nextT = await decentramallTokenInstance.totalSupply();
const currentNextPrice = BigNumber.from((await estateAgentInstance.price(nextT.toNumber() + 1)).toString()).mul(BigNumber.from('10000000000000000')).toString();
setNextPrice(currentNextPrice);
}
loadNextPrice();
});

const buySpace = () => {
(estateAgentInstance.connect(signer) as ethers.Contract & EstateAgentInstance).buy({ from: signerAddress, value: nextPrice }).then(console.log);
const buySpace = async () => {
const { signer } = user;
if (signer !== undefined) {
const signerAddress = await signer.getAddress();
(estateAgentInstance.connect(signer) as ethers.Contract & EstateAgentInstance).buy({ from: signerAddress, value: nextPrice }).then(console.log);
}
// TODO: refresh page after buying successfully
}

const renderContext = (chainContext: IChainContext) => {
decentramallTokenInstance = chainContext.decentramallTokenInstance;
estateAgentInstance = chainContext.estateAgentInstance;

const renderContext = () => {
if (chainContext.user.space !== undefined) {
var data = JSON.parse(JSON.stringify(chainContext.user.space));
return <Box display="flex" flexDirection="column" margin="auto" justifyContent="center" alignItems="center">
<Typography component="div" gutterBottom style={{marginTop: '4rem', textAlign: 'center'}}>
<Box fontWeight="lighter" fontSize="2rem" marginBottom="3rem">
Expand Down Expand Up @@ -72,6 +61,14 @@ export default function Space() {
{chainContext.user.space.tokenId}
</Box>
</Box>
{/* <Box display="flex" flexDirection="row" fontSize="1.5rem" marginBottom="2rem">
<Box fontWeight="bold" marginRight="1rem">
Space status:
</Box>
<Box fontWeight="regular">
{chainContext.user.space.rent !== undefined ? "Rented" : "Available for rent"}
</Box>
</Box>*/}
</Typography>
</Box>;
} else {
Expand All @@ -85,14 +82,81 @@ export default function Space() {
</Box>;
}
}

const renderContextStatus = () => {
if (chainContext.user.space.rent !== undefined) {
return <Box display="flex" flexDirection="column" margin="auto" justifyContent="center" alignItems="center">
<Typography component="div" gutterBottom style={{marginTop: '4rem', textAlign: 'center'}}>
<Box fontWeight="lighter" fontSize="2rem" marginBottom="3rem" textAlign="left">
Space status: rented
</Box>
<Box display="flex" flexDirection="row" fontSize="1.5rem" marginBottom="2rem">
<Box fontWeight="bold" marginRight="1rem">
Rented to:
</Box>
<Box fontWeight="regular">
{chainContext.user.space.rent.rentedTo}
</Box>
</Box>
<Box display="flex" flexDirection="row" fontSize="1.5rem" marginBottom="2rem">
<Box fontWeight="bold" marginRight="1rem">
Rental earned:
</Box>
<Box fontWeight="regular">
{chainContext.user.space.rent.rentalEarned}
</Box>
</Box>
<Box display="flex" flexDirection="row" fontSize="1.5rem" marginBottom="2rem">
<Box fontWeight="bold" marginRight="1rem">
Store's name:
</Box>
<Box fontWeight="regular">
{chainContext.user.space.rent.title}
</Box>
</Box>
<Box display="flex" flexDirection="row" fontSize="1.5rem" marginBottom="2rem">
<Box fontWeight="bold" marginRight="1rem">
Category:
</Box>
<Box fontWeight="regular">
{chainContext.user.space.rent.category}
</Box>
</Box>
<Box display="flex" flexDirection="row" fontSize="1.5rem" marginBottom="2rem">
<Box fontWeight="bold" marginRight="1rem">
Description:
</Box>
<Box fontWeight="regular">
{chainContext.user.space.rent.description}
</Box>
</Box>
<Box display="flex" flexDirection="row" fontSize="1.5rem" marginBottom="2rem">
<Box fontWeight="bold" marginRight="1rem">
URL:
</Box>
<Box fontWeight="regular">
{chainContext.user.space.rent.url}
</Box>
</Box>
</Typography>
</Box>;
} else {
return <Box display="flex" flexDirection="column" margin="auto" justifyContent="center" alignItems="center">
<Typography variant="h5" gutterBottom style={{marginTop: '4rem', textAlign: 'left'}}>
<Box fontWeight="lighter" fontSize="2rem" marginBottom="3rem" textAlign="left">
Space status: available for rent
</Box>
</Typography>
</Box>;
}
}
return (
<Box display="flex" flexDirection="column" style={{width:'85%', margin: 'auto'}}>
<Typography variant="h4" gutterBottom style={{marginTop: '4rem', textAlign: 'center', fontWeight: 'bold'}}>
SPACE
</Typography>
<ChainContext.Consumer>
{(chainContext) => renderContext(chainContext)}
</ChainContext.Consumer>
{renderContext()}
{renderContextStatus()}
</Box>
)
}
}
1 change: 1 addition & 0 deletions webui/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export interface ISpace {

// each space has only one rent, but a user, can have a space (rented or not) and can be renting a space to someone else
export interface IUser {
signer?: ethers.Signer;
space?: ISpace;
rent?: IRent;
}
Expand Down