Skip to content

Commit 1d18ea9

Browse files
alfredlouisw8alfredlouisw8
authored
account history override improvements (#1130)
* account history override improvements * update account override behaviour * update based on review
1 parent eef15f0 commit 1d18ea9

File tree

11 files changed

+185
-103
lines changed

11 files changed

+185
-103
lines changed

‎dapp/pages/history.js‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,43 @@ import BalanceHeader from 'components/buySell/BalanceHeader'
88
import TransactionHistory from 'components/TransactionHistory'
99
import GetOUSD from 'components/GetOUSD'
1010
import { assetRootPath } from 'utils/image'
11+
import { useOverrideAccount } from '../src/utils/hooks'
12+
import ErrorModal from '../src/components/buySell/ErrorModal'
13+
14+
const errorMap = [
15+
{
16+
errorCheck: (err) => {
17+
return err === 'invalidAddress'
18+
},
19+
friendlyMessage: fbt(
20+
"Overridden account's address is invalid",
21+
"Overridden account's address is invalid"
22+
),
23+
},
24+
]
1125

1226
export default function History({ locale, onLocale }) {
1327
const { active } = useWeb3React()
28+
const { overrideAccount, isValid } = useOverrideAccount()
29+
const [showErrorModal, setShowErrorModal] = useState(true)
1430

1531
return (
1632
<>
33+
{!isValid && showErrorModal && (
34+
<ErrorModal
35+
error="invalidAddress"
36+
errorMap={errorMap}
37+
onClose={() => {
38+
setShowErrorModal(false)
39+
}}
40+
/>
41+
)}
1742
<Layout locale={locale} onLocale={onLocale} dapp>
1843
<Nav dapp page={'history'} locale={locale} onLocale={onLocale} />
1944
<div className="home d-flex flex-column">
2045
<BalanceHeader />
21-
{active && <TransactionHistory />}
22-
{!active && (
46+
{(overrideAccount || active) && <TransactionHistory />}
47+
{!overrideAccount && !active && (
2348
<div className="empty-placeholder d-flex flex-column align-items-center justify-content-start">
2449
<img src={assetRootPath('/images/wallet-icons.svg')} />
2550
<div className="header-text">

‎dapp/src/components/AccountListener.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import AccountStore from 'stores/AccountStore'
88
import ContractStore from 'stores/ContractStore'
99
import PoolStore from 'stores/PoolStore'
1010
import StakeStore from 'stores/StakeStore'
11-
import { usePrevious } from 'utils/hooks'
11+
import { usePrevious, useOverrideAccount } from 'utils/hooks'
1212
import { isCorrectNetwork } from 'utils/web3'
1313
import { useStoreState } from 'pullstate'
1414
import { setupContracts } from 'utils/contracts'
@@ -25,7 +25,11 @@ import { transactionHistoryItemsPerPage } from 'utils/constants'
2525

2626
const AccountListener = (props) => {
2727
const web3react = useWeb3React()
28-
const { account, chainId, library, active } = web3react
28+
const { account: web3Account, chainId, library, active } = web3react
29+
30+
const { overrideAccount } = useOverrideAccount()
31+
const account = overrideAccount || web3Account
32+
2933
const prevAccount = usePrevious(account)
3034
const prevActive = usePrevious(active)
3135
const [contracts, setContracts] = useState(null)

‎dapp/src/components/AccountStatusDropdown.js‎

Lines changed: 9 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
11
import React, { useState } from 'react'
22
import { useWeb3React } from '@web3-react/core'
3-
import { fbt } from 'fbt-runtime'
43

54
import Dropdown from 'components/Dropdown'
65
import GetOUSD from 'components/GetOUSD'
7-
import {
8-
isCorrectNetwork,
9-
truncateAddress,
10-
switchEthereumChain,
11-
shortenAddress,
12-
} from 'utils/web3'
6+
import { isCorrectNetwork, switchEthereumChain } from 'utils/web3'
137

148
import withWalletSelectModal from 'hoc/withWalletSelectModal'
159
import analytics from 'utils/analytics'
1610

1711
import Content from './_AccountStatusContent'
12+
import AccountStatusIndicator from './_AccountStatusIndicator'
1813

1914
const AccountStatusDropdown = ({ className, showLogin, dapp }) => {
2015
const { active, account, chainId } = useWeb3React()
@@ -58,22 +53,13 @@ const AccountStatusDropdown = ({ className, showLogin, dapp }) => {
5853
trackSource="Account dropdown"
5954
/>
6055
)}
61-
{/* What causes !active && account? */}
62-
{dapp && !active && account && <div className="dot" />}
63-
{active && !correctNetwork && (
64-
<>
65-
<div className="dot yellow" />
66-
<div className="address">
67-
{fbt('Wrong network', 'Wrong network')}
68-
</div>
69-
</>
70-
)}
71-
{dapp && active && correctNetwork && (
72-
<>
73-
<div className="dot green" />
74-
<div className="address">{shortenAddress(account)}</div>
75-
</>
76-
)}
56+
<AccountStatusIndicator
57+
active={active}
58+
correctNetwork={correctNetwork}
59+
account={account}
60+
dapp={dapp}
61+
withAddress
62+
/>
7763
</a>
7864
</Dropdown>
7965
<style jsx>{`
@@ -139,34 +125,6 @@ const AccountStatusDropdown = ({ className, showLogin, dapp }) => {
139125
color: inherit;
140126
text-decoration: none;
141127
}
142-
143-
.dot {
144-
width: 10px;
145-
height: 10px;
146-
margin-left: 10px;
147-
border-radius: 5px;
148-
background-color: #ed2a28;
149-
}
150-
151-
.dot.green {
152-
background-color: #00d592;
153-
}
154-
155-
.dot.green.yellow {
156-
background-color: #ffce45;
157-
}
158-
159-
.dot.big {
160-
width: 16px;
161-
height: 16px;
162-
border-radius: 8px;
163-
margin-right: 12px;
164-
}
165-
166-
.dot.yellow.big,
167-
.dot.green.big {
168-
margin-left: 0px;
169-
}
170128
`}</style>
171129
</>
172130
)

‎dapp/src/components/AccountStatusPopover.js‎

Lines changed: 9 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import React from 'react'
22
import { useWeb3React } from '@web3-react/core'
3-
import { fbt } from 'fbt-runtime'
43

54
import { isCorrectNetwork } from 'utils/web3'
65
import withWalletSelectModal from 'hoc/withWalletSelectModal'
7-
import GetOUSD from 'components/GetOUSD'
86
import Content from './_AccountStatusContent'
97
import { assetRootPath } from 'utils/image'
8+
import AccountStatusIndicator from './_AccountStatusIndicator'
109

11-
const AccountStatusPopover = ({ className }) => {
10+
const AccountStatusPopover = ({ className, dapp }) => {
1211
const { active, account, chainId } = useWeb3React()
1312
const correctNetwork = isCorrectNetwork(chainId)
13+
1414
if (!active && !account) {
1515
return ''
1616
}
@@ -27,9 +27,12 @@ const AccountStatusPopover = ({ className }) => {
2727
aria-label="Toggle account popover"
2828
>
2929
<div className={`dropdown-marble${className ? ' ' + className : ''}`}>
30-
{!active && account && <div className="dot" />}
31-
{active && !correctNetwork && <div className="dot yellow" />}
32-
{active && correctNetwork && <div className="dot green" />}
30+
<AccountStatusIndicator
31+
active={active}
32+
correctNetwork={correctNetwork}
33+
account={account}
34+
dapp={dapp}
35+
/>
3336
</div>
3437
</button>
3538
<div
@@ -61,38 +64,6 @@ const AccountStatusPopover = ({ className }) => {
6164
padding: 0.25rem 10px;
6265
}
6366
64-
.dot {
65-
width: 10px;
66-
height: 10px;
67-
border-radius: 5px;
68-
background-color: #ed2a28;
69-
margin-left: 13px;
70-
}
71-
72-
.dot.empty {
73-
margin-left: 0px;
74-
}
75-
76-
.dot.green {
77-
background-color: #00d592;
78-
}
79-
80-
.dot.green.yellow {
81-
background-color: #ffce45;
82-
}
83-
84-
.dot.big {
85-
width: 16px;
86-
height: 16px;
87-
border-radius: 8px;
88-
margin-right: 12px;
89-
}
90-
91-
.dot.yellow.big,
92-
.dot.green.big {
93-
margin-left: 0px;
94-
}
95-
9667
.dropdown-marble .dot {
9768
margin-left: 0;
9869
}

‎dapp/src/components/Nav.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,7 @@ const Nav = ({ dapp, isMobile, locale, onLocale, page }) => {
222222
/>
223223
</button>
224224
)}
225-
{dapp && <AccountStatusPopover />}
225+
{dapp && <AccountStatusPopover dapp={dapp} />}
226226
{dapp && !active && !account && (
227227
<div className="d-flex d-md-none">
228228
<GetOUSD

‎dapp/src/components/_AccountStatusContent.js‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import React from 'react'
22
import { useWeb3React } from '@web3-react/core'
3+
import { useRouter } from 'next/router'
34
import { useStoreState } from 'pullstate'
45
import { fbt } from 'fbt-runtime'
56
import { get } from 'lodash'
67

78
import AccountStore from 'stores/AccountStore'
89
import { getEtherscanHost } from 'utils/web3'
910
import { isCorrectNetwork, truncateAddress, networkIdToName } from 'utils/web3'
11+
import { useOverrideAccount } from 'utils/hooks'
1012
import { currencies } from 'constants/Contract'
1113
import { formatCurrency } from 'utils/math'
1214
import { connectorNameIconMap, getConnectorIcon } from 'utils/connectors'
@@ -21,6 +23,8 @@ const AccountStatusContent = ({ className, onOpen }) => {
2123
const etherscanLink = `${getEtherscanHost(web3react)}/address/${account}`
2224
const connectorName = useStoreState(AccountStore, (s) => s.connectorName)
2325
const connectorIcon = getConnectorIcon(connectorName)
26+
const { overrideAccount } = useOverrideAccount()
27+
const router = useRouter()
2428

2529
return (
2630
<>
@@ -85,7 +89,19 @@ const AccountStatusContent = ({ className, onOpen }) => {
8589
</>
8690
)}
8791
</div>
88-
{active && (
92+
{overrideAccount && (
93+
<div className="disconnect-box d-flex">
94+
<a
95+
className="btn-clear-blue w-100"
96+
onClick={() => {
97+
router.replace('/history')
98+
}}
99+
>
100+
{fbt('Clear', 'Clear')}
101+
</a>
102+
</div>
103+
)}
104+
{active && !overrideAccount && (
89105
<div className="disconnect-box d-flex">
90106
<a
91107
className="btn-clear-blue w-100"

‎dapp/src/components/_AccountStatusIndicator.js‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import React from 'react'
2+
import { fbt } from 'fbt-runtime'
3+
import { shortenAddress } from 'utils/web3'
4+
5+
import { useOverrideAccount } from 'utils/hooks'
6+
7+
const AccountStatusIndicator = ({
8+
active,
9+
account,
10+
correctNetwork,
11+
dapp,
12+
withAddress,
13+
}) => {
14+
const { overrideAccount } = useOverrideAccount()
15+
16+
return (
17+
<>
18+
{/* What causes !active && account? */}
19+
{dapp && !active && account && <div className="dot" />}
20+
{active && overrideAccount && (
21+
<>
22+
<div className="dot white" />
23+
{withAddress && (
24+
<div className="address">
25+
{`${fbt('readonly', 'readonly')}: ${shortenAddress(
26+
overrideAccount,
27+
true
28+
)}`}
29+
</div>
30+
)}
31+
</>
32+
)}
33+
{active && !correctNetwork && !overrideAccount && (
34+
<>
35+
<div className="dot yellow" />
36+
{withAddress && (
37+
<div className="address">
38+
{fbt('Wrong network', 'Wrong network')}
39+
</div>
40+
)}
41+
</>
42+
)}
43+
{dapp && active && correctNetwork && !overrideAccount && (
44+
<>
45+
<div className="dot green" />
46+
{withAddress && (
47+
<div className="address">{shortenAddress(account)}</div>
48+
)}
49+
</>
50+
)}
51+
<style jsx>{`
52+
.address {
53+
font-size: 14px;
54+
color: white;
55+
margin-left: 10px;
56+
margin-right: 19px;
57+
margin-bottom: 2px;
58+
}
59+
60+
.dot {
61+
width: 10px;
62+
height: 10px;
63+
margin-left: 10px;
64+
border-radius: 5px;
65+
background-color: #ed2a28;
66+
}
67+
68+
.dot.white {
69+
background-color: #fff;
70+
}
71+
72+
.dot.green {
73+
background-color: #00d592;
74+
}
75+
76+
.dot.green.yellow {
77+
background-color: #ffce45;
78+
}
79+
`}</style>
80+
</>
81+
)
82+
}
83+
84+
export default AccountStatusIndicator

0 commit comments

Comments
 (0)