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:
parent
1de31e4eff
commit
d5256d2dc0
18
package-lock.json
generated
18
package-lock.json
generated
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -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 */
|
||||
|
@ -1,6 +1,7 @@
|
||||
.menu {
|
||||
}
|
||||
|
||||
.menu > div,
|
||||
.link {
|
||||
display: inline-block;
|
||||
color: var(--brand-grey);
|
||||
|
@ -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} />
|
||||
))}
|
||||
|
@ -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;
|
||||
}
|
29
src/components/molecules/Wallet/Account.tsx
Normal file
29
src/components/molecules/Wallet/Account.tsx
Normal 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
|
23
src/components/molecules/Wallet/Details.module.css
Normal file
23
src/components/molecules/Wallet/Details.module.css
Normal 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;
|
||||
}
|
36
src/components/molecules/Wallet/Details.tsx
Normal file
36
src/components/molecules/Wallet/Details.tsx
Normal 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>
|
||||
)
|
||||
}
|
@ -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 {
|
@ -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
|
||||
}
|
0
src/components/molecules/Wallet/index.module.css
Normal file
0
src/components/molecules/Wallet/index.module.css
Normal 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
|
60
src/components/molecules/Wallet/index.tsx
Normal file
60
src/components/molecules/Wallet/index.tsx
Normal 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>
|
||||
)
|
||||
}
|
@ -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
|
@ -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 {
|
||||
|
@ -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'
|
||||
|
@ -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'
|
||||
|
@ -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 (
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user