Skip to content

Commit

Permalink
fix: fortune launcher client styling (#424)
Browse files Browse the repository at this point in the history
  • Loading branch information
@m00n620
m00n620 authored Apr 25, 2023
1 parent 761ff97 commit 6597cd9
Show file tree
Hide file tree
Showing 9 changed files with 308 additions and 102 deletions.
Binary file modified packages/examples/fortune/launcher/client/public/images/fortune-crypto.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/examples/fortune/launcher/client/public/images/fortune-fiat.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
213 changes: 117 additions & 96 deletions packages/examples/fortune/launcher/client/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Box from '@mui/material/Box';
import { ethers } from 'ethers';
import React, { useEffect, useState } from 'react';
import { useSigner, useChainId } from 'wagmi';
import fortuneSvg from './assets/fortune.svg';
import {
FortuneStages,
FortuneFundingMethod,
Expand All @@ -13,6 +14,7 @@ import {
FortuneLaunchSuccess,
FortuneLaunchFail,
} from './components';
import { Header } from './components/Header';
import {
FortuneStageStatus,
FundingMethodType,
Expand Down Expand Up @@ -77,108 +79,127 @@ function App() {
}, [chainId, signer]);

return (
<Box sx={{ px: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }, pt: 10 }}>
<Box
sx={{
background: '#f6f7fe',
borderRadius: {
xs: '16px',
sm: '16px',
md: '24px',
lg: '32px',
xl: '40px',
},
padding: {
xs: '24px 16px',
md: '42px 54px',
lg: '56px 72px',
xl: '70px 90px',
},
}}
>
<Grid container spacing={4}>
{status === FortuneStageStatus.FUNDING_METHOD && (
<Grid item xs={12} sm={12} md={5} lg={4}>
<Typography color="primary" fontWeight={600} variant="h4">
Fortune
</Typography>
<Typography color="primary" fontWeight={500} variant="h6">
HUMAN Protocol basic functionality demo
</Typography>
<Typography mt={4} color="primary" variant="body2">
Based on an old Unix program in which a pseudorandom message is
displayed from a database of quotations, created by the
community. We&apos;re adopting this basic idea, and
decentralizing it, placing the basic ask-and-receive
functionality on-chain.
</Typography>
<Link
href="#"
sx={{ textDecoration: 'none', mt: 1, display: 'block' }}
>
<Typography color="primary" fontWeight={600} variant="body2">
Blog Article
</Typography>
</Link>
</Grid>
)}
<Grid
item
xs={12}
sm={12}
md={status === FortuneStageStatus.FUNDING_METHOD ? 7 : 12}
lg={status === FortuneStageStatus.FUNDING_METHOD ? 7 : 12}
>
<FortuneStages status={status} />
<Box mt={3}>
{status === FortuneStageStatus.FUNDING_METHOD && (
<FortuneFundingMethod onChange={handleChangeFundingMethod} />
)}
{status === FortuneStageStatus.JOB_REQUEST &&
fundingMethod === 'crypto' && (
<FortuneJobRequest
fundingMethod={fundingMethod}
onBack={handleBack}
onLaunch={() => setStatus(FortuneStageStatus.LAUNCH)}
onSuccess={handleOnSuccess}
onFail={handleOnError}
<>
<Header />
<Box sx={{ px: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }, pt: 11 }}>
<Box
sx={{
background: '#f6f7fe',
borderRadius: {
xs: '16px',
sm: '16px',
md: '24px',
lg: '32px',
xl: '40px',
},
padding: {
xs: '24px 16px',
md: '42px 54px',
lg: '56px 72px',
xl: '70px 90px',
},
}}
>
<Grid container spacing={4}>
{status === FortuneStageStatus.FUNDING_METHOD && (
<Grid item xs={12} sm={12} md={5} lg={4}>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
}}
>
<Box>
<img src={fortuneSvg} alt="fortune" />
</Box>
<Typography color="primary" fontWeight={600} variant="h4">
Fortune
</Typography>
<Typography color="primary" fontWeight={500} variant="h6">
HUMAN Protocol basic functionality demo
</Typography>
<Typography mt={4} color="primary" variant="body2">
Based on an old Unix program in which a pseudorandom message
is displayed from a database of quotations, created by the
community. We&apos;re adopting this basic idea, and
decentralizing it, placing the basic ask-and-receive
functionality on-chain.
</Typography>
<Link
href="https://humanprotocol.org/blog/demonstration-of-human-protocol-inspired-by-fortune"
sx={{ textDecoration: 'none', mt: 1, display: 'block' }}
target="_blank"
>
<Typography
color="primary"
fontWeight={600}
variant="body2"
>
Blog Article
</Typography>
</Link>
</Box>
</Grid>
)}
<Grid
item
xs={12}
sm={12}
md={status === FortuneStageStatus.FUNDING_METHOD ? 7 : 12}
lg={status === FortuneStageStatus.FUNDING_METHOD ? 7 : 12}
>
<FortuneStages status={status} />
<Box mt={3}>
{status === FortuneStageStatus.FUNDING_METHOD && (
<FortuneFundingMethod onChange={handleChangeFundingMethod} />
)}
{status === FortuneStageStatus.JOB_REQUEST &&
fundingMethod === 'crypto' && (
<FortuneJobRequest
fundingMethod={fundingMethod}
onBack={handleBack}
onLaunch={() => setStatus(FortuneStageStatus.LAUNCH)}
onSuccess={handleOnSuccess}
onFail={handleOnError}
/>
)}
{status === FortuneStageStatus.JOB_REQUEST &&
fundingMethod === 'fiat' && (
<FortuneFiatJobRequest
fundingMethod={fundingMethod}
onBack={handleBack}
onLaunch={() => setStatus(FortuneStageStatus.LAUNCH)}
onSuccess={handleOnSuccess}
onFail={handleOnError}
/>
)}
{status === FortuneStageStatus.LAUNCH && <FortuneLaunch />}
{status === FortuneStageStatus.LAUNCH_SUCCESS && (
<FortuneLaunchSuccess
jobResponse={jobResponse}
onCreateNewEscrow={handleCreateNewEscrow}
/>
)}
{status === FortuneStageStatus.JOB_REQUEST &&
fundingMethod === 'fiat' && (
<FortuneFiatJobRequest
fundingMethod={fundingMethod}
onBack={handleBack}
onLaunch={() => setStatus(FortuneStageStatus.LAUNCH)}
onSuccess={handleOnSuccess}
onFail={handleOnError}
{status === FortuneStageStatus.LAUNCH_FAIL && (
<FortuneLaunchFail
message={errorMessage}
onBack={() => setStatus(FortuneStageStatus.JOB_REQUEST)}
/>
)}
{status === FortuneStageStatus.LAUNCH && <FortuneLaunch />}
{status === FortuneStageStatus.LAUNCH_SUCCESS && (
<FortuneLaunchSuccess
jobResponse={jobResponse}
onCreateNewEscrow={handleCreateNewEscrow}
/>
)}
{status === FortuneStageStatus.LAUNCH_FAIL && (
<FortuneLaunchFail
message={errorMessage}
onBack={() => setStatus(FortuneStageStatus.JOB_REQUEST)}
/>
)}
</Box>
<Box my={2}>
{lastEscrowAddress && (
<Typography variant="body2">
Last Escrow: {lastEscrowAddress}
</Typography>
)}
</Box>
</Box>
<Box my={2}>
{lastEscrowAddress && (
<Typography variant="body2">
Last Escrow: {lastEscrowAddress}
</Typography>
)}
</Box>
</Grid>
</Grid>
</Grid>
</Box>
</Box>
</Box>
</>
);
}

Expand Down
11 changes: 11 additions & 0 deletions packages/examples/fortune/launcher/client/src/assets/fortune.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions packages/examples/fortune/launcher/client/src/assets/logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions packages/examples/fortune/launcher/client/src/components/FiatJobRequest.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -274,15 +274,15 @@ export const JobRequest = ({
<Typography variant="caption" color="primary" sx={{ mb: 1 }}>
Card
</Typography>
<RoundedBox sx={{ p: 2 }}>
<RoundedBox sx={{ p: 2, borderRadius: '4px' }}>
<CardElement id="card" />
</RoundedBox>
</FormControl>
<FormControl>
<Typography variant="caption" color="primary" sx={{ mb: 1 }}>
Name on Card
</Typography>
<RoundedBox sx={{ p: 2 }}>
<RoundedBox sx={{ p: 2, borderRadius: '4px' }}>
<TextField
fullWidth
variant="standard"
Expand All @@ -300,7 +300,7 @@ export const JobRequest = ({
<Typography variant="caption" color="primary" sx={{ mb: 1 }}>
Amount
</Typography>
<RoundedBox sx={{ p: 2 }}>
<RoundedBox sx={{ p: 2, borderRadius: '4px' }}>
<TextField
fullWidth
placeholder="10"
Expand All @@ -318,7 +318,7 @@ export const JobRequest = ({
<Typography variant="caption" color="primary" sx={{ mb: 1 }}>
Currency
</Typography>
<RoundedBox sx={{ p: 1 }}>
<RoundedBox sx={{ p: 1, borderRadius: '4px' }}>
<Select
size="small"
variant="filled"
Expand Down
12 changes: 10 additions & 2 deletions packages/examples/fortune/launcher/client/src/components/FundingMethod.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,11 @@ export const FundingMethod = ({ onChange }: FundingMethodProps) => {
py: 8,
}}
>
<img src="/images/fortune-crypto.png" alt="crypto" />
<img
src="/images/fortune-crypto.png"
alt="crypto"
style={{ width: 135, height: 'auto' }}
/>
<Typography variant="body2" color="primary" mt={8}>
Click to connect your wallet
</Typography>
Expand All @@ -68,7 +72,11 @@ export const FundingMethod = ({ onChange }: FundingMethodProps) => {
py: 8,
}}
>
<img src="/images/fortune-fiat.png" alt="fiat" />
<img
src="/images/fortune-fiat.png"
alt="fiat"
style={{ width: 143, height: 'auto' }}
/>
<Typography variant="body2" color="primary" mt={8}>
Click to fund with credit card
</Typography>
Expand Down
Loading

1 comment on commit 6597cd9

@vercel
Copy link

@vercel vercel bot commented on 6597cd9 Apr 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

fortune-exchange-oracle-server – ./packages/examples/fortune/exchange-oracle/server

fortune-exchange-oracle-server-git-develop-humanprotocol.vercel.app
fortune-exchange-oracle-server-humanprotocol.vercel.app
fortune-exchange-oracle-server.vercel.app

Please sign in to comment.