1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-22 18:00:06 +01:00

make transactions work, switch to ethereum-blockies

This commit is contained in:
Matthias Kretschmann 2019-11-23 18:19:41 +01:00
parent ab14272675
commit 7528261252
Signed by: m
GPG Key ID: 606EEEF3C479A91F
8 changed files with 1261 additions and 319 deletions

1504
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -29,14 +29,15 @@
"not op_mini all"
],
"dependencies": {
"@ethersproject/providers": "^5.0.0-beta.145",
"@ethersproject/units": "^5.0.0-beta.131",
"@ethersproject/providers": "^5.0.0-beta.146",
"@ethersproject/units": "^5.0.0-beta.132",
"@loadable/component": "^5.10.3",
"@web3-react/core": "^6.0.0-beta.15",
"@web3-react/injected-connector": "^6.0.0-beta.17",
"classnames": "^2.2.6",
"date-fns": "^2.8.1",
"dms2dec": "^1.1.0",
"ethereum-blockies": "github:MyEtherWallet/blockies",
"fast-exif": "^1.0.1",
"feather-icons": "^4.24.1",
"fraction.js": "^4.0.12",
@ -62,35 +63,32 @@
"gatsby-remark-copy-linked-files": "^2.1.30",
"gatsby-remark-images": "^3.1.33",
"gatsby-remark-smartypants": "^2.1.16",
"gatsby-remark-vscode": "^1.3.0",
"gatsby-remark-vscode": "^1.4.0",
"gatsby-source-filesystem": "^2.1.38",
"gatsby-source-graphql": "^2.1.24",
"gatsby-transformer-remark": "^2.6.37",
"gatsby-transformer-sharp": "^2.3.5",
"graphql": "^14.5.8",
"intersection-observer": "^0.7.0",
"load-script": "^1.0.0",
"pigeon-maps": "^0.14.0",
"pigeon-marker": "^0.3.4",
"react": "^16.12.0",
"react-blockies": "^1.4.1",
"react-clipboard.js": "^2.0.13",
"react-clipboard.js": "^2.0.16",
"react-dom": "^16.12.0",
"react-feather": "^2.0.3",
"react-helmet": "^5.2.1",
"react-modal": "^3.11.1",
"react-pose": "^4.0.9",
"react-pose": "^4.0.10",
"react-qr-svg": "^2.2.1",
"react-transition-group": "^4.3.0",
"remark": "^11.0.1",
"remark": "^11.0.2",
"remark-react": "^6.0.0",
"slugify": "^1.3.6",
"use-dark-mode": "^2.3.1"
},
"devDependencies": {
"@babel/node": "^7.7.0",
"@babel/preset-env": "^7.7.1",
"@babel/preset-typescript": "^7.7.0",
"@babel/node": "^7.7.4",
"@babel/preset-env": "^7.7.4",
"@babel/preset-typescript": "^7.7.4",
"@svgr/webpack": "^4.3.3",
"@testing-library/jest-dom": "^4.2.3",
"@testing-library/react": "^9.3.2",
@ -98,11 +96,10 @@
"@types/jest": "^24.0.21",
"@types/loadable__component": "^5.10.0",
"@types/lunr": "^2.3.2",
"@types/node": "^12.12.11",
"@types/react": "^16.9.11",
"@types/node": "^12.12.12",
"@types/react": "^16.9.12",
"@types/react-dom": "^16.9.3",
"@types/react-helmet": "^5.0.14",
"@types/react-modal": "^3.10.0",
"@types/react-transition-group": "^4.2.3",
"@types/shortid": "0.0.29",
"@typescript-eslint/eslint-plugin": "^2.8.0",
@ -110,7 +107,7 @@
"@welldone-software/why-did-you-render": "^3.3.9",
"babel-eslint": "^10.0.3",
"babel-jest": "^24.9.0",
"eslint": "^6.6.0",
"eslint": "^6.7.0",
"eslint-config-prettier": "^6.7.0",
"eslint-loader": "^3.0.2",
"eslint-plugin-graphql": "^3.1.0",

View File

@ -2,3 +2,7 @@ declare module 'pigeon-maps'
declare module 'pigeon-marker'
declare module 'react-blockies'
declare module 'remark-react'
declare module 'ethereum-blockies' {
export function toDataUrl(address: string): string
}

View File

@ -1,4 +1,5 @@
@import 'variables';
@import 'mixins';
.accountWrap {
font-size: $font-size-small;
@ -8,12 +9,14 @@
justify-content: space-between;
}
.identicon {
.blockies {
width: 1.2rem;
height: 1.2rem;
border-radius: 50%;
overflow: hidden;
display: inline-block;
vertical-align: middle;
margin-right: $spacer / 8;
margin-right: $spacer / 4;
}
.balance {

View File

@ -1,5 +1,5 @@
import React from 'react'
import Blockies from 'react-blockies'
import { toDataUrl } from 'ethereum-blockies'
import { formatEther } from '@ethersproject/units'
import styles from './Account.module.scss'
import useWeb3, { getBalance } from '../../../hooks/use-web3'
@ -7,6 +7,7 @@ import useWeb3, { getBalance } from '../../../hooks/use-web3'
export default function Account() {
const { library, account } = useWeb3()
const ethBalance = account && getBalance(account, library)
const blockies = account && toDataUrl(account)
const accountDisplay =
account &&
@ -17,12 +18,7 @@ export default function Account() {
return (
<div className={styles.accountWrap} title={account}>
<span className={styles.account}>
<Blockies
seed={account}
scale={2}
size={8}
className={styles.identicon}
/>
<img className={styles.blockies} src={blockies} alt="Blockies" />
{accountDisplay}
</span>
<span className={styles.balance}>{balanceDisplay}</span>

View File

@ -17,7 +17,7 @@ const constructMessage = (
transactionHash
? message &&
message.text +
'<br />' +
'<br /><br />' +
getTransactionMessage(transactionHash).transaction
: message && message.text

View File

@ -46,10 +46,12 @@ export default function Web3Donation({ address }: { address: string }) {
text: getTransactionMessage().waitingConfirmation
})
// setMessage({
// status: 'success',
// text: getTransactionMessage().success
// })
await tx.wait()
setMessage({
status: 'success',
text: getTransactionMessage().success
})
}
return (

View File

@ -36,7 +36,7 @@ export default function Thanks() {
)
return (
<Web3ReactProvider getLibrary={getLibrary}>
<>
<Helmet>
<title>Say thanks</title>
<meta name="robots" content="noindex,nofollow" />
@ -54,10 +54,12 @@ export default function Thanks() {
<p>Send Ether with MetaMask or Brave.</p>
</header>
<Web3ReactProvider getLibrary={getLibrary}>
<LazyWeb3Donation
fallback={<div className={styles.loading}>Loading...</div>}
address={author.ether}
/>
</Web3ReactProvider>
</div>
<div className={styles.coins}>
@ -71,6 +73,6 @@ export default function Thanks() {
))}
</div>
</article>
</Web3ReactProvider>
</>
)
}