Skip to content

Commit

Permalink
Merge pull request #292 from LinkdropHQ/dev_wallet-connect_update
Browse files Browse the repository at this point in the history
Dev wallet connect update
  • Loading branch information
spacehaz authored Jun 3, 2024
2 parents 7ad2207 + 5e8c015 commit 0a2c34d
Show file tree
Hide file tree
Showing 24 changed files with 7,218 additions and 8,111 deletions.
Binary file modified .DS_Store
Binary file not shown.
31 changes: 24 additions & 7 deletions craco.config.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,30 @@
const path = require('path')
const rewireBabelLoader = require("craco-babel-loader")
const fs = require("fs")
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
const webpack = require('webpack')
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')

module.exports = {
webpack: {
alias: {
react: path.resolve('./node_modules/react')
plugins: [
new NodePolyfillPlugin(),
new webpack.ProvidePlugin({
process: 'process/browser',
})
]
},
configure: (webpackConfig) => {
return {
...webpackConfig,
resolve: {
...webpackConfig.resolve,
fallback: {
...webpackConfig.resolve.fallback,
assert: false,
crypto: false,
http: false,
https: false,
os: false,
stream: false,
}
}
}
},
babel: {
Expand Down
42 changes: 28 additions & 14 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,31 +5,36 @@
"dependencies": {
"@auth0/auth0-react": "^2.1.1",
"@coinbase/wallet-sdk": "^3.6.6",
"@craco/craco": "^6.4.0",
"@craco/craco": "^7.1.0",
"@datadog/browser-logs": "^5.18.0",
"@datadog/browser-rum": "^5.18.0",
"@ledgerhq/connect-kit-loader": "1.1.8",
"@linkdrop/contracts": "^1.2.2",
"@reduxjs/toolkit": "^1.6.2",
"@tanstack/react-query": "^5.40.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@types/react": "^18.2.21",
"@types/react-dom": "^18.3.0",
"@types/react-router-dom": "^5.3.1",
"@walletconnect/auth-client": "^2.0.3",
"@walletconnect/auth-client": "^2.1.2",
"@walletconnect/ethereum-provider": "^2.9.2",
"@walletconnect/sign-client": "^2.9.2",
"@walletconnect/types": "^2.13.1",
"@walletconnect/universal-provider": "^2.9.2",
"@walletconnect/utils": "2.0.0-beta.100",
"@web3modal/ethereum": "^2.2.2",
"@web3modal/react": "^2.2.2",
"@web3modal/ui": "^4.2.3",
"@web3modal/wagmi": "^4.2.3",
"alchemy-sdk": "^2.6.3",
"ansi-html": "^0.0.8",
"axios": "^0.24.0",
"browserslist": "^4.16.5",
"crypto-browserify": "^3.12.0",
"detect-browser": "^5.3.0",
"ejs": "^3.1.7",
"ethers": "^5.5.1",
Expand All @@ -44,25 +49,26 @@
"node-forge": "^1.3.0",
"nth-check": "^2.0.1",
"plausible-tracker-linkdrop": "^0.3.9",
"react": "^17.0.2",
"react": "^18.3.1",
"react-dev-utils": "^12.0.1",
"react-dom": "^17.0.2",
"react-dom": "^18.3.1",
"react-error-overlay": "6.0.9",
"react-redux": "^7.2.6",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"react-scripts": "^5.0.1",
"react-select": "^5.4.0",
"redux": "^4.1.1",
"redux-thunk": "^2.4.1",
"shell-quote": "^1.7.3",
"styled-components": "^5.3.1",
"typescript": "^4.1.2",
"viem": "^1.4.1",
"wagmi": "^1.3.9",
"typescript": "^5.4.2",
"viem": "2.x",
"wagmi": "^2.9.8",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"start": "DISABLE_ESLINT_PLUGIN=true craco --openssl-legacy-provider start",
"build": "DISABLE_ESLINT_PLUGIN=true craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
Expand Down Expand Up @@ -93,7 +99,9 @@
"ansi-html": "^0.0.8",
"shell-quote": "^1.7.3",
"ejs": "^3.1.7",
"browserslist": "^4.16.5"
"browserslist": "^4.16.5",
"@types/react": "^18.0.21",
"react-error-overlay": "6.0.9"
},
"devDependencies": {
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
Expand All @@ -102,6 +110,12 @@
"@types/styled-components": "^5.1.15",
"babel-eslint": "^10.1.0",
"craco-babel-loader": "^1.0.4",
"typesafe-actions": "^5.1.0"
"node-polyfill-webpack-plugin": "^4.0.0",
"process": "^0.11.10",
"typesafe-actions": "^5.1.0",
"webpack": "^5.91.0"
},
"browser": {
"crypto": false
}
}
12 changes: 0 additions & 12 deletions src/components/application/connectors/coinbase-connector.tsx

This file was deleted.

1 change: 0 additions & 1 deletion src/components/application/connectors/metamask-connect.tsx

This file was deleted.

102 changes: 65 additions & 37 deletions src/components/application/connectors/wallet-connect.tsx
Original file line number Diff line number Diff line change
@@ -1,47 +1,75 @@
import { createWeb3Modal } from '@web3modal/wagmi/react'
import { defaultWagmiConfig } from '@web3modal/wagmi/react/config'
import { WagmiProvider } from 'wagmi'
import {
EthereumClient
} from "@web3modal/ethereum"
import { configureChains, createConfig } from "wagmi"
import { mainnet, polygon, goerli, polygonMumbai, base, baseGoerli } from "wagmi/chains"
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'
import { InjectedConnector } from 'wagmi/connectors/injected'
import { infuraProvider } from 'wagmi/providers/infura'
import { publicProvider } from 'wagmi/providers/public'
import { coinbaseConnector } from './coinbase-connector'

const { REACT_APP_WC_PROJECT_ID, REACT_APP_INFURA_ID } = process.env
const chains = [mainnet, polygon, goerli, polygonMumbai, base, baseGoerli]

// Wagmi client
const { publicClient, webSocketPublicClient } = configureChains(
[
mainnet, polygon, goerli, polygonMumbai, base, baseGoerli
],
[
infuraProvider({ apiKey: REACT_APP_INFURA_ID as string }),
publicProvider()
],
)
mainnet,
polygon,
sepolia,
base,
baseGoerli,
polygonMumbai
} from 'wagmi/chains'
import { http } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
// import { metamaskConfig } from './metamask-connect'
// import { coinbaseConfig } from './coinbase-connector'

import { injected, walletConnect } from 'wagmi/connectors'

const { REACT_APP_WC_PROJECT_ID } = process.env

// 0. Setup queryClient
const queryClient = new QueryClient()

// 1. Get projectId at https://cloud.walletconnect.com
const projectId = REACT_APP_WC_PROJECT_ID as string

const wagmiConfig = createConfig({
autoConnect: true,
// 2. Create wagmiConfig
const metadata = {
name: 'Linkdrop Claim App',
description: 'Linkdrop Claim App',
url: 'https://linkdrop.io', // origin must match your domain & subdomain
icons: ['https://avatars.githubusercontent.com/u/37784886']
}

const chains = [
mainnet,
polygon,
sepolia,
base,
baseGoerli,
polygonMumbai
] as const

const config = defaultWagmiConfig({
chains,
projectId,
metadata,
connectors: [
new WalletConnectConnector({
chains, options: {
projectId: REACT_APP_WC_PROJECT_ID as string
}
}),
new InjectedConnector({
chains
walletConnect({
projectId
}),
coinbaseConnector
injected()
],
publicClient
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
[polygon.id]: http(),
[base.id]: http(),
[baseGoerli.id]: http(),
[polygonMumbai.id]: http(),
},
})

// 3. Create modal
createWeb3Modal({
wagmiConfig: config,
projectId,
enableAnalytics: true, // Optional - defaults to your Cloud configuration
})

const ethereumClient = new EthereumClient(wagmiConfig, chains)

export {
wagmiConfig,
ethereumClient
config,
queryClient
}
32 changes: 14 additions & 18 deletions src/components/application/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,20 @@ import { Provider } from 'react-redux'
import RouterProvider from './router-provider'
import store from 'data/store'
import { Container } from './styled-components'
import { Web3Modal } from "@web3modal/react"
import { ethereumClient, wagmiConfig } from './connectors/wallet-connect'
import { WagmiConfig } from "wagmi"
const { REACT_APP_WC_PROJECT_ID } = process.env
import { queryClient, config } from './connectors/wallet-connect'
import { QueryClientProvider } from '@tanstack/react-query'
import { WagmiProvider } from 'wagmi'

class Application extends React.Component {
render () {
return <Container>
<WagmiConfig config={wagmiConfig}>
<Provider store={store}>
<RouterProvider />
</Provider>
</WagmiConfig>
<Web3Modal
projectId={REACT_APP_WC_PROJECT_ID as string}
ethereumClient={ethereumClient}
/>
</Container>
}
function Application () {
return <WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<Container>
<Provider store={store}>
<RouterProvider />
</Provider>
</Container>
</QueryClientProvider>
</WagmiProvider>
}

export default Application
1 change: 1 addition & 0 deletions src/components/common/link/type.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
type TProps = {
href: string
target?: string
children?: React.ReactNode
}

export default TProps
1 change: 1 addition & 0 deletions src/components/common/text/types.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
type TProps = {
className?: string,
onClick?: () => void
children?: React.ReactNode
}

export default TProps
1 change: 1 addition & 0 deletions src/components/common/title/types.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
type TProps = {
className?: string
children?: React.ReactNode
}

export default TProps
1 change: 1 addition & 0 deletions src/components/common/widget/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { WidgetContainer, WidgetBody } from './styled-components'

type TProps = {
image?: React.ReactNode
children?: React.ReactNode
}

const Widget: FC<TProps> = ({ children, image }) => {
Expand Down
7 changes: 4 additions & 3 deletions src/components/pages/claim-page/set-connector/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ const SetConnector: FC<ReduxType> = ({
}) => {
const { connect, connectors } = useConnect()
const { open } = useWeb3Modal()

const injected = connectors.find(connector => connector.id === 'injected')
const system = defineSystem()
const [ initialized, setInitialized ] = useState<boolean>(false)
Expand All @@ -95,14 +96,15 @@ const SetConnector: FC<ReduxType> = ({
useEffect(() => {
// connect instantly if opened in Coinbase wallet
if(window &&

//@ts-ignore
window.ethereum &&
(
// @ts-ignore
window.ethereum.isCoinbaseWallet || window.ethereum.isOneInchIOSWallet || window.ethereum.isOneInchAndroidWallet
) &&
system !== 'desktop' &&
injected &&
injected.ready
injected
) {
return connect({ connector: injected })
} else {
Expand Down Expand Up @@ -141,7 +143,6 @@ const SetConnector: FC<ReduxType> = ({
if (
!address &&
injected &&
injected.ready &&
system !== 'desktop' &&
injected.name !== 'Brave Wallet'
) {
Expand Down
4 changes: 2 additions & 2 deletions src/components/pages/common/wallet-redirect-await/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,13 @@ const WalletRedirectAwait: FC<ReduxType> = ({
<PreviewImage src={Image} alt='redirect await image' />
<TitleComponent>Continue in {wallet?.name}</TitleComponent>
<Subtitle>You will be redirected to the wallet where you will be guided to claim {type === 'ERC20' ? 'tokens' : 'an NFT'}</Subtitle>
{walletDeeplink && <ButtonStyled
{walletDeeplink ? <ButtonStyled
href={walletDeeplink}
target='_blank'
appearance='action'
>
Open in {wallet?.name}
</ButtonStyled>}
</ButtonStyled> : null}
<AdditionalNoteComponent
text='Need help? Read here how to proceed'
position='bottom'
Expand Down
Loading

0 comments on commit 0a2c34d

Please sign in to comment.