mirror of https://github.com/kremalicious/blog.git
build fixes
This commit is contained in:
parent
678e983076
commit
80c1c31a01
|
@ -147,7 +147,7 @@ exports.onPostBuild = async ({ graphql }) => {
|
||||||
return Promise.resolve()
|
return Promise.resolve()
|
||||||
}
|
}
|
||||||
|
|
||||||
exports.onCreateWebpackConfig = ({ actions, stage, loaders }) => {
|
exports.onCreateWebpackConfig = ({ actions }) => {
|
||||||
actions.setWebpackConfig({
|
actions.setWebpackConfig({
|
||||||
resolve: {
|
resolve: {
|
||||||
fallback: {
|
fallback: {
|
||||||
|
@ -155,17 +155,4 @@ exports.onCreateWebpackConfig = ({ actions, stage, loaders }) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
if (stage === 'build-html') {
|
|
||||||
actions.setWebpackConfig({
|
|
||||||
module: {
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
test: /@ethersproject/,
|
|
||||||
use: loaders.null()
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
20
package.json
20
package.json
|
@ -29,12 +29,12 @@
|
||||||
],
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@kremalicious/react-feather": "^2.1.0",
|
"@kremalicious/react-feather": "^2.1.0",
|
||||||
"@rainbow-me/rainbowkit": "^0.5.3",
|
"@rainbow-me/rainbowkit": "^0.6.0",
|
||||||
"axios": "^0.27.2",
|
"axios": "^0.27.2",
|
||||||
"classnames": "^2.3.1",
|
"classnames": "^2.3.2",
|
||||||
"date-fns": "^2.29.2",
|
"date-fns": "^2.29.3",
|
||||||
"dms2dec": "^1.1.0",
|
"dms2dec": "^1.1.0",
|
||||||
"ethers": "^5.7.0",
|
"ethers": "^5.7.1",
|
||||||
"fast-exif": "^1.0.1",
|
"fast-exif": "^1.0.1",
|
||||||
"feather-icons": "^4.29.0",
|
"feather-icons": "^4.29.0",
|
||||||
"fraction.js": "^4.2.0",
|
"fraction.js": "^4.2.0",
|
||||||
|
@ -75,17 +75,17 @@
|
||||||
"remark-rehype": "^10.1.0",
|
"remark-rehype": "^10.1.0",
|
||||||
"slugify": "^1.6.5",
|
"slugify": "^1.6.5",
|
||||||
"unified": "^10.1.2",
|
"unified": "^10.1.2",
|
||||||
"wagmi": "^0.6.5"
|
"use-debounce": "^8.0.4",
|
||||||
|
"wagmi": "^0.6.6"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@svgr/webpack": "^6.3.1",
|
"@svgr/webpack": "^6.3.1",
|
||||||
"@testing-library/jest-dom": "^5.16.5",
|
"@testing-library/jest-dom": "^5.16.5",
|
||||||
"@testing-library/react": "^13.4.0",
|
"@testing-library/react": "^13.4.0",
|
||||||
"@types/fs-extra": "^9.0.13",
|
"@types/fs-extra": "^9.0.13",
|
||||||
"@types/jest": "^29.0.0",
|
"@types/jest": "^29.0.3",
|
||||||
"@types/loadable__component": "^5.13.4",
|
|
||||||
"@types/lunr": "^2.3.4",
|
"@types/lunr": "^2.3.4",
|
||||||
"@types/node": "^18.7.16",
|
"@types/node": "^18.7.18",
|
||||||
"@types/react": "^18.0.18",
|
"@types/react": "^18.0.18",
|
||||||
"@types/react-dom": "^18.0.6",
|
"@types/react-dom": "^18.0.6",
|
||||||
"@types/react-helmet": "^6.1.5",
|
"@types/react-helmet": "^6.1.5",
|
||||||
|
@ -94,13 +94,13 @@
|
||||||
"@typescript-eslint/parser": "^5.36.2",
|
"@typescript-eslint/parser": "^5.36.2",
|
||||||
"@welldone-software/why-did-you-render": "^7.0.1",
|
"@welldone-software/why-did-you-render": "^7.0.1",
|
||||||
"babel-preset-gatsby": "^2.23.0",
|
"babel-preset-gatsby": "^2.23.0",
|
||||||
"eslint": "^8.23.0",
|
"eslint": "^8.23.1",
|
||||||
"eslint-config-prettier": "^8.5.0",
|
"eslint-config-prettier": "^8.5.0",
|
||||||
"eslint-plugin-graphql": "^4.0.0",
|
"eslint-plugin-graphql": "^4.0.0",
|
||||||
"eslint-plugin-jsx-a11y": "^6.6.1",
|
"eslint-plugin-jsx-a11y": "^6.6.1",
|
||||||
"eslint-plugin-prettier": "^4.2.1",
|
"eslint-plugin-prettier": "^4.2.1",
|
||||||
"eslint-plugin-react": "^7.31.8",
|
"eslint-plugin-react": "^7.31.8",
|
||||||
"eslint-plugin-testing-library": "^5.6.3",
|
"eslint-plugin-testing-library": "^5.6.4",
|
||||||
"fs-extra": "^10.1.0",
|
"fs-extra": "^10.1.0",
|
||||||
"identity-obj-proxy": "^3.0.0",
|
"identity-obj-proxy": "^3.0.0",
|
||||||
"jest": "^29.0.3",
|
"jest": "^29.0.3",
|
||||||
|
|
|
@ -3,12 +3,12 @@ import { render, fireEvent } from '@testing-library/react'
|
||||||
|
|
||||||
import InputGroup from './InputGroup'
|
import InputGroup from './InputGroup'
|
||||||
|
|
||||||
const sendTransaction = jest.fn()
|
const setAmount = jest.fn()
|
||||||
|
|
||||||
describe('InputGroup', () => {
|
describe('InputGroup', () => {
|
||||||
it('renders without crashing', async () => {
|
it('renders without crashing', async () => {
|
||||||
const { container } = render(
|
const { container } = render(
|
||||||
<InputGroup sendTransaction={sendTransaction} />
|
<InputGroup amount="1" setAmount={setAmount} />
|
||||||
)
|
)
|
||||||
expect(container.firstChild).toBeInTheDocument()
|
expect(container.firstChild).toBeInTheDocument()
|
||||||
|
|
||||||
|
@ -16,6 +16,6 @@ describe('InputGroup', () => {
|
||||||
const button = container.querySelector('button')
|
const button = container.querySelector('button')
|
||||||
fireEvent.change(input, { target: { value: '3' } })
|
fireEvent.change(input, { target: { value: '3' } })
|
||||||
fireEvent.click(button)
|
fireEvent.click(button)
|
||||||
expect(sendTransaction).toHaveBeenCalled()
|
expect(setAmount).toHaveBeenCalled()
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { ReactElement, useState } from 'react'
|
import React, { ReactElement } from 'react'
|
||||||
import { useAccount, useNetwork } from 'wagmi'
|
import { useAccount, useNetwork } from 'wagmi'
|
||||||
import Input from '../../atoms/Input'
|
import Input from '../../atoms/Input'
|
||||||
import Conversion from './Conversion'
|
import Conversion from './Conversion'
|
||||||
|
@ -10,17 +10,14 @@ import {
|
||||||
} from './InputGroup.module.css'
|
} from './InputGroup.module.css'
|
||||||
|
|
||||||
export default function InputGroup({
|
export default function InputGroup({
|
||||||
sendTransaction
|
amount,
|
||||||
|
setAmount
|
||||||
}: {
|
}: {
|
||||||
sendTransaction(amount: string): void
|
amount: string
|
||||||
|
setAmount(amount: string): void
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
const { data: account } = useAccount()
|
const { address } = useAccount()
|
||||||
const { activeChain } = useNetwork()
|
const { chain } = useNetwork()
|
||||||
const [amount, setAmount] = useState('0.01')
|
|
||||||
|
|
||||||
const onAmountChange = ({ target }: { target: any }) => {
|
|
||||||
setAmount(target.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -31,19 +28,15 @@ export default function InputGroup({
|
||||||
inputMode="decimal"
|
inputMode="decimal"
|
||||||
pattern="[0-9.]*"
|
pattern="[0-9.]*"
|
||||||
value={amount}
|
value={amount}
|
||||||
onChange={onAmountChange}
|
onChange={(e) => setAmount(e.target.value)}
|
||||||
className={inputInput}
|
className={inputInput}
|
||||||
disabled={!account}
|
disabled={!address}
|
||||||
/>
|
/>
|
||||||
<div className={currency}>
|
<div className={currency}>
|
||||||
<span>{activeChain?.nativeCurrency?.symbol || 'ETH'}</span>
|
<span>{chain?.nativeCurrency?.symbol || 'ETH'}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button className="btn btn-primary" disabled={!address}>
|
||||||
className="btn btn-primary"
|
|
||||||
onClick={() => sendTransaction(amount)}
|
|
||||||
disabled={!account}
|
|
||||||
>
|
|
||||||
Make it rain
|
Make it rain
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import React, { ReactElement, useState } from 'react'
|
import React, { ReactElement, useState } from 'react'
|
||||||
import { parseEther } from '@ethersproject/units'
|
import { parseEther } from '@ethersproject/units'
|
||||||
|
import { useDebounce } from 'use-debounce'
|
||||||
import InputGroup from './InputGroup'
|
import InputGroup from './InputGroup'
|
||||||
import Alert, { getTransactionMessage } from './Alert'
|
import Alert, { getTransactionMessage } from './Alert'
|
||||||
import { web3 as styleWeb3 } from './index.module.css'
|
import { web3 as styleWeb3 } from './index.module.css'
|
||||||
|
@ -11,25 +12,28 @@ export default function Web3Donation({
|
||||||
}: {
|
}: {
|
||||||
address: string
|
address: string
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
const { config } = usePrepareSendTransaction({ request: {} })
|
const [amount, setAmount] = useState('0.01')
|
||||||
|
const [debouncedAmount] = useDebounce(amount, 500)
|
||||||
|
|
||||||
|
const { config } = usePrepareSendTransaction({
|
||||||
|
request: {
|
||||||
|
to: address,
|
||||||
|
value: debouncedAmount ? parseEther(debouncedAmount) : undefined
|
||||||
|
}
|
||||||
|
})
|
||||||
const { sendTransactionAsync } = useSendTransaction(config)
|
const { sendTransactionAsync } = useSendTransaction(config)
|
||||||
|
|
||||||
const [message, setMessage] = useState<{ status: string; text: string }>()
|
const [message, setMessage] = useState<{ status: string; text: string }>()
|
||||||
const [transactionHash, setTransactionHash] = useState<string>()
|
const [transactionHash, setTransactionHash] = useState<string>()
|
||||||
|
|
||||||
async function handleSendTransaction(amount: string) {
|
async function handleSendTransaction() {
|
||||||
setMessage({
|
setMessage({
|
||||||
status: 'loading',
|
status: 'loading',
|
||||||
text: getTransactionMessage().waitingForUser
|
text: getTransactionMessage().waitingForUser
|
||||||
})
|
})
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const tx = await sendTransactionAsync({
|
const tx = await sendTransactionAsync()
|
||||||
recklesslySetUnpreparedRequest: {
|
|
||||||
to: address,
|
|
||||||
value: parseEther(amount) // ETH -> Wei
|
|
||||||
}
|
|
||||||
})
|
|
||||||
setTransactionHash(tx.hash)
|
setTransactionHash(tx.hash)
|
||||||
setMessage({
|
setMessage({
|
||||||
status: 'loading',
|
status: 'loading',
|
||||||
|
@ -48,14 +52,20 @@ export default function Web3Donation({
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styleWeb3}>
|
<form
|
||||||
|
className={styleWeb3}
|
||||||
|
onSubmit={(e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
handleSendTransaction()
|
||||||
|
}}
|
||||||
|
>
|
||||||
<ConnectButton chainStatus="icon" showBalance={false} />
|
<ConnectButton chainStatus="icon" showBalance={false} />
|
||||||
|
|
||||||
{message ? (
|
{message ? (
|
||||||
<Alert message={message} transactionHash={transactionHash} />
|
<Alert message={message} transactionHash={transactionHash} />
|
||||||
) : (
|
) : (
|
||||||
<InputGroup sendTransaction={handleSendTransaction} />
|
<InputGroup amount={amount} setAmount={setAmount} />
|
||||||
)}
|
)}
|
||||||
</div>
|
</form>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue