forked from antonnell/fixed-forex
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Styling & Mobile breakpoints refinement Temp logo added Fixed mobile navigation Yearn logo error Hid header on mobile breakpoints Mobile breakpoints is not completed overall, but an improvement. * Mobile Layout Adjustments Added grids & breakpoint styling * WIP Restyle Initial merge for Kabelo install * Connected vs Not Connected States * Deleted unused code * Not connected states added / Styling updates * Redirect users to the main page after connecting to wallet from the welcome page * Major UI Updates * Deleted unused Lottiefiles * Major UI Updates - Welcome page added -- Redirects user to Home page after connection - States created for all pages when user is not connected - Overall UI updates to entire app. * Major UI Updates + Fixes - Welcome page added -- Redirects user to Home page after connection - States created for all pages when user is not connected - Overall UI updates to entire app. * Major UI Updates + Fixes - Welcome page added -- Redirects user to Home page after connection - States created for all pages when user is not connected - Overall UI updates to entire app. * Deleted unwanted letter * UI Overhaul - Welcome page added -- Redirects user to Home page after connection - States created for all pages when user is not connected - Dashboard Added -- Todo: Add Staked values -- Todo: remove unused code - Overall UI updates to app. Co-authored-by: KabeloLeboaMB <[email protected]>
- Loading branch information
1 parent
efa2e43
commit e386e65
Showing
121 changed files
with
19,601 additions
and
1,173 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
| import { useRouter } from "next/router"; | ||
| import { Paper, Grid, Typography, Button, TextField, InputAdornment, CircularProgress } from '@material-ui/core'; | ||
| import Autocomplete from '@material-ui/lab/Autocomplete'; | ||
| import Skeleton from '@material-ui/lab/Skeleton'; | ||
|
|
||
| import classes from './ffWelcomeOverview.module.css'; | ||
|
|
||
|
|
||
| import { CONNECT_WALLET, ACCOUNT_CONFIGURED, ACCOUNT_CHANGED, FIXED_FOREX_BALANCES_RETURNED, FIXED_FOREX_CLAIM_VECLAIM, FIXED_FOREX_VECLAIM_CLAIMED, FIXED_FOREX_UPDATED, ERROR } from '../../stores/constants'; | ||
|
|
||
| import Unlock from '../unlock'; | ||
|
|
||
| import stores from '../../stores'; | ||
| import { formatAddress } from '../../utils'; | ||
|
|
||
|
|
||
| export default function ffWelcomeOverview() { | ||
|
|
||
| const router = useRouter(); | ||
|
|
||
| function handleNavigate(route) { | ||
| router.push(route); | ||
| } | ||
|
|
||
| const accountStore = stores.accountStore.getStore('account'); | ||
| const [account, setAccount] = useState(accountStore); | ||
| const [toggleAboutModal, setToggleAboutModal] = useState(false); | ||
| const [unlockOpen, setUnlockOpen] = useState(false); | ||
| const [chainInvalid, setChainInvalid] = useState(false) | ||
|
|
||
| useEffect(() => { | ||
| const accountConfigure = () => { | ||
| const accountStore = stores.accountStore.getStore('account'); | ||
| setAccount(accountStore); | ||
| closeUnlock(); | ||
| }; | ||
| const connectWallet = () => { | ||
| onAddressClicked(); | ||
| }; | ||
| const accountChanged = () => { | ||
| const invalid = stores.accountStore.getStore('chainInvalid'); | ||
| setChainInvalid(invalid) | ||
| } | ||
| stores.dispatcher.register(payload => { | ||
|
|
||
| switch (payload.type) { | ||
| case 'CONFIGURE_FIXED_FOREX': | ||
| if( payload.content.connected===true){ | ||
| router.push('/dashboard') | ||
| }else{ | ||
| router.push('/welcome') | ||
| } | ||
| } | ||
|
|
||
| }); | ||
|
|
||
| const invalid = stores.accountStore.getStore('chainInvalid'); | ||
| setChainInvalid(invalid) | ||
|
|
||
| stores.emitter.on(ACCOUNT_CONFIGURED, accountConfigure); | ||
| stores.emitter.on(CONNECT_WALLET, connectWallet); | ||
| stores.emitter.on(ACCOUNT_CHANGED, accountChanged); | ||
| return () => { | ||
| stores.emitter.removeListener(ACCOUNT_CONFIGURED, accountConfigure); | ||
| stores.emitter.removeListener(CONNECT_WALLET, connectWallet); | ||
| stores.emitter.removeListener(ACCOUNT_CHANGED, accountChanged); | ||
| }; | ||
| }, []); | ||
|
|
||
| const onAddressClicked = () => { | ||
| setUnlockOpen(true); | ||
| }; | ||
|
|
||
| const closeUnlock = () => { | ||
| setUnlockOpen(false); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className={ classes.container }> | ||
| <div className={ classes.containerBG }> | ||
| </div> | ||
| <div className={ classes.fieldsContainer }> | ||
|
|
||
| <br /><br /><br /> | ||
|
|
||
| <Grid container spacing={3} className={classes.testColor}> | ||
| <Grid item lg={12} md={12} sm={12} xs={12}> | ||
| <Typography variant="h1" className={classes.welcomeTitle}>Welcome to <span className={classes.blueTxt}>Fixed Forex</span></Typography> | ||
| <Typography variant="body2" className={classes.welcomeSubtitle}> | ||
| Supply Collateral to Borrow Iron Bank Assets. Fixed Forex provides an alternative to USD denominated stable coins. It allows liquidity providers exposure to currencies such as EUR, KRW, GBP, CHF, AUD, and JPY. | ||
| </Typography> | ||
| <Button | ||
| className={classes.connectBtn} | ||
| disableElevation | ||
| variant="contained" | ||
| onClick={onAddressClicked}> | ||
| {account && account.address && <div className={`${classes.accountIcon} ${classes.metamask}`}></div>} | ||
| <Typography className={classes.headBtnTxt}>{account && account.address ? formatAddress(account.address) : 'Connect Wallet'}</Typography> | ||
| </Button> | ||
| {unlockOpen && <Unlock modalOpen={unlockOpen} closeModal={closeUnlock} />} | ||
| <Button onClick={() => router.push('/dashboard')} className={classes.continueBtn}> | ||
| Continue to App | ||
| </Button> | ||
| </Grid> | ||
| </Grid> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
137 changes: 137 additions & 0 deletions
137
components/WelcomeOverview/ffWelcomeOverview.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
| .container { | ||
| width: 100%; | ||
| /* height: calc(100vh - 80px); */ | ||
| padding: 0px; | ||
| position: absolute; | ||
| top: 0; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| height: calc(100vh - 80px); | ||
| } | ||
|
|
||
| .containerBG { | ||
| width: 100%; | ||
| height: 100%; | ||
| position: absolute; | ||
| left: 0; | ||
| top: 0; | ||
| background: none; | ||
| background-image: url(../../public/images/FF_BG_IMG_2.svg); | ||
| background-size: cover; | ||
| background-position: center -70px; | ||
| opacity: 0.15; | ||
| } | ||
|
|
||
| .fieldsContainer { | ||
| max-width: 1400px; | ||
| margin: auto; | ||
| position: relative; | ||
| padding: 40px; | ||
| } | ||
|
|
||
| .connectBtn { | ||
| border: 0px solid #234ce7 !important; | ||
| padding: 15px 30px !important; | ||
| border-radius: 50px !important; | ||
| background: linear-gradient(-45deg, #ee7752, #234ce7, #23a6d5, #23d5ab); | ||
| background-size: 400% 400%; | ||
| animation: gradient 15s ease infinite; | ||
| font-weight: 700 !important; | ||
| color: #FFF !important; | ||
| text-transform: none !important; | ||
| font-size: 15px !important; | ||
| } | ||
|
|
||
| @keyframes gradient { | ||
| 0% { | ||
| background-position: 0% 50%; | ||
| } | ||
| 50% { | ||
| background-position: 100% 50%; | ||
| } | ||
| 100% { | ||
| background-position: 0% 50%; | ||
| } | ||
| } | ||
|
|
||
| .continueBtn { | ||
| border: 1px solid rgba(104,108,122,0.2) !important; | ||
| padding: 15px 30px !important; | ||
| border-radius: 50px !important; | ||
| font-weight: 700 !important; | ||
| margin-left: 20px !important; | ||
| text-transform: none !important; | ||
| font-size: 15px !important; | ||
| } | ||
|
|
||
| .blueTxt { | ||
| color: #234ce7 !important; | ||
| } | ||
|
|
||
| .testColor { | ||
| background-color: none !important; | ||
| text-align: center !important; | ||
| margin-top: -200px !important; | ||
| } | ||
|
|
||
| .welcomeTitle { | ||
| font: normal normal normal 60px/60px Inter Light !important; | ||
| margin: 40px !important; | ||
| } | ||
|
|
||
| .welcomeSubtitle { | ||
| font: normal normal normal 20px/32px Inter Light !important; | ||
| margin: auto !important; | ||
| margin-bottom: 40px !important; | ||
| max-width: 1080px; | ||
| opacity: 0.6 !important; | ||
| } | ||
|
|
||
| .expItem { | ||
| border: 1px solid rgba(104,108,122, 0.2); | ||
| border-radius: 10px; | ||
| padding: 40px !important; | ||
| } | ||
|
|
||
|
|
||
| .field { | ||
| display: flex; | ||
| } | ||
|
|
||
| .title { | ||
| background: rgba(256, 256, 256, 0.2); | ||
| border-radius: 30px; | ||
| padding: 4px 20px; | ||
| width: fit-content; | ||
| color: #fff !important; | ||
| font-size: 14px !important; | ||
| } | ||
|
|
||
| .value { | ||
| font-size: 40px !important; | ||
| font-weight: bold !important; | ||
| color: #fff !important; | ||
| } | ||
|
|
||
| .inline { | ||
| display: flex; | ||
| align-items: flex-end; | ||
| } | ||
|
|
||
| .valueSymbol { | ||
| font-size: 20px !important; | ||
| font-weight: bold !important; | ||
| color: #fff !important; | ||
| margin-bottom: 4px !important; | ||
| margin-left: 3px !important; | ||
| } | ||
|
|
||
| .balanceIcon { | ||
| color: #fff; | ||
| border: 1px solid rgba(255,255,255,0.2); | ||
| border-radius: 50%; | ||
| padding: 16px; | ||
| font-size: 70px !important; | ||
| margin-right: 24px !important; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| { | ||
| "main": "ffWelcomeOverview.js" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.