1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00

wallet UI & feedback refactor

This commit is contained in:
Matthias Kretschmann 2020-07-08 16:39:12 +02:00
parent 1de31e4eff
commit d5256d2dc0
Signed by: m
GPG Key ID: 606EEEF3C479A91F
20 changed files with 200 additions and 97 deletions

18
package-lock.json generated
View File

@ -6071,6 +6071,15 @@
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
"integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4="
},
"@types/loadable__component": {
"version": "5.10.0",
"resolved": "https://registry.npmjs.org/@types/loadable__component/-/loadable__component-5.10.0.tgz",
"integrity": "sha512-AaDP1VxV3p7CdPOtOTl3ALgQ6ES4AxJKO9UGj9vJonq/w2yERxwdzFiWNQFh9fEDXEzjxujBlM2RmSJtHV1/pA==",
"dev": true,
"requires": {
"@types/react": "*"
}
},
"@types/lodash": {
"version": "4.14.157",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.157.tgz",
@ -28779,6 +28788,15 @@
"throttle-debounce": "^2.1.0"
}
},
"react-spring": {
"version": "8.0.27",
"resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz",
"integrity": "sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==",
"requires": {
"@babel/runtime": "^7.3.1",
"prop-types": "^15.5.8"
}
},
"react-syntax-highlighter": {
"version": "12.2.1",
"resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-12.2.1.tgz",

View File

@ -63,6 +63,7 @@
"react-paginate": "^6.3.2",
"react-rating": "^2.0.5",
"react-responsive-modal": "^5.0.2",
"react-spring": "^8.0.27",
"react-toastify": "^6.0.8",
"shortid": "^2.2.15",
"slugify": "^1.4.4",
@ -78,6 +79,7 @@
"@testing-library/jest-dom": "^5.11.0",
"@testing-library/react": "^10.4.4",
"@types/jest": "^26.0.4",
"@types/loadable__component": "^5.10.0",
"@types/node": "^14.0.19",
"@types/numeral": "^0.0.28",
"@types/react": "^16.9.41",

View File

@ -1,7 +1,7 @@
/* default: success, green circle */
.status {
width: var(--font-size-mini);
height: var(--font-size-mini);
width: var(--font-size-small);
height: var(--font-size-small);
border-radius: 50%;
display: inline-block;
background: var(--brand-alert-green);
@ -14,9 +14,9 @@
background: none;
width: 0;
height: 0;
border-left: calc(var(--font-size-mini) / 1.7) solid transparent;
border-right: calc(var(--font-size-mini) / 1.7) solid transparent;
border-bottom: var(--font-size-mini) solid var(--brand-alert-orange);
border-left: calc(var(--font-size-small) / 1.7) solid transparent;
border-right: calc(var(--font-size-small) / 1.7) solid transparent;
border-bottom: var(--font-size-small) solid var(--brand-alert-yellow);
}
/* red square */

View File

@ -1,6 +1,7 @@
.menu {
}
.menu > div,
.link {
display: inline-block;
color: var(--brand-grey);

View File

@ -3,6 +3,7 @@ import { Link } from 'gatsby'
import { useLocation } from '@reach/router'
import styles from './Menu.module.css'
import { useSiteMetadata } from '../../hooks/useSiteMetadata'
import Wallet from './Wallet'
declare type MenuItem = {
name: string
@ -29,6 +30,7 @@ export default function Menu() {
return (
<nav className={styles.menu}>
<Wallet />
{menu.map((item: MenuItem) => (
<MenuLink key={item.name} item={item} />
))}

View File

@ -1,8 +1,11 @@
.wallet {
text-align: right;
border: 1px solid var(--brand-grey-lighter);
border-radius: var(--border-radius);
padding: calc(var(--spacer) / 8) calc(var(--spacer) / 4);
}
.address {
font-size: var(--font-size-small);
font-family: var(--font-family-monospace);
white-space: nowrap;
margin-bottom: calc(var(--spacer) / 8);
@ -17,16 +20,3 @@
vertical-align: middle;
margin-right: calc(var(--spacer) / 6);
}
.balance {
color: var(--color-secondary);
white-space: nowrap;
font-size: var(--font-size-mini);
}
.balance span {
font-size: var(--font-size-small);
font-weight: var(--font-weight-bold);
display: inline-block;
margin-left: 0.1rem;
}

View File

@ -0,0 +1,29 @@
import React from 'react'
import Button from '../../atoms/Button'
import styles from './Account.module.css'
import { useWeb3 } from '@oceanprotocol/react'
import { toDataUrl } from 'ethereum-blockies'
// Forward ref for Tippy.js
// eslint-disable-next-line
const Account = React.forwardRef((props, ref: any) => {
const { account, web3Connect } = useWeb3()
const blockies = account && toDataUrl(account)
return (
<div className={styles.wallet} ref={ref}>
{account ? (
<div className={styles.address}>
<img className={styles.blockies} src={blockies} alt="Blockies" />
{`${account.substring(0, 12)}...`}
</div>
) : (
<Button style="text" size="small" onClick={() => web3Connect.connect()}>
Activate Wallet
</Button>
)}
</div>
)
})
export default Account

View File

@ -0,0 +1,23 @@
.details {
composes: box from '../../atoms/Box.module.css';
padding: calc(var(--spacer) / 2) !important;
min-width: 20rem;
max-width: 25rem;
}
.details > ul {
margin-bottom: calc(var(--spacer) / 4);
}
.balance {
color: var(--color-secondary);
white-space: nowrap;
font-size: var(--font-size-small);
}
.balance span {
font-size: var(--font-size-base);
font-weight: var(--font-weight-bold);
display: inline-block;
margin-left: 0.1rem;
}

View File

@ -0,0 +1,36 @@
import React, { ReactElement } from 'react'
import Button from '../../atoms/Button'
import styles from './Details.module.css'
import { useWeb3, useOcean } from '@oceanprotocol/react'
import Web3Feedback from './Feedback'
import { formatNumber } from '../../../utils'
export default function Details({ attrs }: { attrs: any }): ReactElement {
const { balance, web3Connect } = useWeb3()
const { balanceInOcean } = useOcean()
const ethBalanceText = formatNumber(Number(balance))
const oceanBalanceText = formatNumber(Number(balanceInOcean))
return (
<div className={styles.details}>
<ul {...attrs}>
<li className={styles.balance}>
OCEAN <span>{oceanBalanceText}</span>
</li>
<li className={styles.balance}>
ETH <span>{ethBalanceText}</span>
</li>
<li>
<Button
style="text"
size="small"
onClick={() => web3Connect.toggleModal()}
>
Switch Wallet
</Button>
</li>
</ul>
<Web3Feedback />
</div>
)
}

View File

@ -1,29 +1,22 @@
.feedback {
font-size: var(--font-size-small);
display: flex;
max-width: 100%;
padding-left: calc(var(--spacer) / 1.5);
padding-left: var(--spacer);
padding-top: calc(var(--spacer) / 2);
margin-top: calc(var(--spacer) / 2);
border-top: 1px solid var(--brand-grey-lighter);
position: relative;
width: 100%;
}
.statuscontainer {
flex-grow: 1;
}
.walletcontainer {
width: 35%;
}
.feedback i {
position: absolute;
left: 0;
top: 2px;
top: calc(var(--spacer) / 2);
}
.title {
margin-bottom: calc(var(--spacer) / 12);
font-size: var(--font-size-small);
font-size: var(--font-size-base);
}
.error {

View File

@ -1,13 +1,7 @@
import React, { ReactElement } from 'react'
import Status from '../../atoms/Status'
import Wallet from './Wallet'
import styles from './index.module.css'
import {
useWeb3,
useOcean,
InjectedProviderStatus,
OceanConnectionStatus
} from '@oceanprotocol/react'
import styles from './Feedback.module.css'
import { useWeb3, useOcean } from '@oceanprotocol/react'
export declare type Web3Error = {
status: 'error' | 'warning' | 'success'
@ -21,7 +15,7 @@ export default function Web3Feedback({
isBalanceInsufficient?: boolean
}): ReactElement {
const { ethProviderStatus } = useWeb3()
const { status, balanceInOcean } = useOcean()
const { status } = useOcean()
const isEthProviderAbsent = ethProviderStatus === -1
const isEthProviderDisconnected = ethProviderStatus === 0
const isOceanDisconnected = status === 0
@ -60,18 +54,11 @@ export default function Web3Feedback({
? 'You do not have enough OCEAN in your wallet to purchase this asset.'
: 'Something went wrong.'
return (
return !hasSuccess ? (
<section className={styles.feedback}>
<div className={styles.statuscontainer}>
<Status state={state} aria-hidden />
<h3 className={styles.title}>{title}</h3>
{!hasSuccess && <p className={styles.error}>{message}</p>}
</div>
{!isEthProviderAbsent && (
<div className={styles.walletcontainer}>
<Wallet balanceOcean={balanceInOcean} />
</div>
)}
<Status state={state} aria-hidden />
<h3 className={styles.title}>{title}</h3>
<p className={styles.error}>{message}</p>
</section>
)
) : null
}

View File

@ -1,5 +1,5 @@
import React from 'react'
import Web3Feedback from '.'
import Web3Feedback from './Feedback'
import web3Mock from '../../../../tests/unit/__mocks__/web3'
import web3ProviderMock, {
context

View File

@ -0,0 +1,60 @@
import React, { ReactElement } from 'react'
import loadable from '@loadable/component'
import { useSpring, animated } from 'react-spring'
import { useWeb3 } from '@oceanprotocol/react'
import Account from './Account'
import Details from './Details'
const Tippy = loadable(() => import('@tippyjs/react/headless'))
const animation = {
config: { tension: 400, friction: 20 },
from: { transform: 'scale(0.5) translateY(-3rem)' },
to: { transform: 'scale(1) translateY(0)' }
}
export default function Wallet(): ReactElement {
const { account, ethProviderStatus } = useWeb3()
const [props, setSpring] = useSpring(() => animation.from)
function onMount() {
setSpring({
transform: 'scale(1) translateY(0)',
onRest: (): void => null,
config: animation.config
})
}
function onHide({ unmount }: { unmount: any }) {
setSpring({
...animation.from,
onRest: unmount,
config: { ...animation.config, clamp: true }
})
}
const isEthProviderAbsent = ethProviderStatus === -1
if (isEthProviderAbsent) return null
return (
<Tippy
interactive
interactiveBorder={30}
render={(attrs: any) => (
<animated.div style={props}>
<Details attrs={attrs} />
</animated.div>
)}
appendTo={
typeof document !== 'undefined' && document.querySelector('body')
}
animation
onMount={onMount}
onHide={onHide}
disabled={!account}
fallback={<Account />}
>
<Account />
</Tippy>
)
}

View File

@ -1,38 +0,0 @@
import React, { ReactElement } from 'react'
import { toDataUrl } from 'ethereum-blockies'
import styles from './Wallet.module.css'
import Button from '../../atoms/Button'
import { formatNumber } from '../../../utils'
import { useWeb3 } from '@oceanprotocol/react'
const Wallet = ({ balanceOcean }: { balanceOcean: string }): ReactElement => {
const { account, balance, web3Connect } = useWeb3()
const ethBalanceText = formatNumber(Number(balance))
const oceanBalanceText = formatNumber(Number(balanceOcean))
const blockies = account && toDataUrl(account)
return (
<div className={styles.wallet}>
{account ? (
<ul>
<li className={styles.address} title={account}>
<img className={styles.blockies} src={blockies} alt="Blockies" />
{`${account.substring(0, 8)}...`}
</li>
<li className={styles.balance}>
OCEAN <span>{oceanBalanceText}</span>
</li>
<li className={styles.balance}>
ETH <span>{ethBalanceText}</span>
</li>
</ul>
) : (
<Button style="text" size="small" onClick={() => web3Connect.connect()}>
Activate Wallet
</Button>
)}
</div>
)
}
export default Wallet

View File

@ -3,7 +3,7 @@ import { Ocean } from '@oceanprotocol/squid'
import { fromWei } from 'web3-utils'
import compareAsBN, { Comparisson } from '../../utils/compareAsBN'
import Loader from '../atoms/Loader'
import Web3Feedback from '../molecules/Web3Feedback'
import Web3Feedback from '../molecules/Wallet/Feedback'
import Dropzone from '../atoms/Dropzone'
import Price from '../atoms/Price'
import {

View File

@ -4,7 +4,7 @@ import compareAsBN, { Comparisson } from '../../utils/compareAsBN'
import Button from '../atoms/Button'
import File from '../atoms/File'
import Price from '../atoms/Price'
import Web3Feedback from '../molecules/Web3Feedback'
import Web3Feedback from '../molecules/Wallet/Feedback'
import styles from './Consume.module.css'
import Loader from '../atoms/Loader'
import { useOcean, useConsume } from '@oceanprotocol/react'

View File

@ -1,6 +1,6 @@
import React from 'react'
import styles from './History.module.css'
import Web3Feedback from '../molecules/Web3Feedback'
import Web3Feedback from '../molecules/Wallet/Feedback'
import ConsumedList from '../organisms/ConsumedList'
import PublishedList from '../organisms/PublishedList'
import JobsList from '../organisms/JobsList'

View File

@ -1,7 +1,7 @@
import React from 'react'
import PublishForm from '../molecules/PublishForm/PublishForm'
import styles from './Publish.module.css'
import Web3Feedback from '../molecules/Web3Feedback'
import Web3Feedback from '../molecules/Wallet/Feedback'
const PublishPage: React.FC = () => {
return (

View File

@ -28,7 +28,7 @@
--font-family-monospace: 'Fira Code', 'Fira Mono', Menlo, Monaco, Consolas,
'Courier New', monospace;
--font-size-root: 16px;
--font-size-root: 14px;
--font-size-base: 1rem;
--font-size-large: 1.2rem;
--font-size-small: 0.85rem;