Skip to content

Commit

Permalink
Merge pull request #65 from XDeFi-tech/feat/refactoring-wip
Browse files Browse the repository at this point in the history
feat: [XDEFI-3373] EVM provider connect refactoring
  • Loading branch information
Amurmurmur committed Aug 8, 2023
2 parents 1f5674e + 7442a27 commit 17c6e7d
Show file tree
Hide file tree
Showing 54 changed files with 816 additions and 2,363 deletions.
32 changes: 23 additions & 9 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
{
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint", "import-helpers"],
"extends": [
"standard",
"standard-react",
"eslint:recommended",
"plugin:prettier/recommended",
"prettier/standard",
"prettier/react",
"plugin:@typescript-eslint/eslint-recommended",
// "plugin:@typescript-eslint/recommended",
"plugin:react-hooks/recommended"
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended"
],
"env": {
"browser": true,
"es6": true,
"node": true
},
"parserOptions": {
Expand All @@ -25,13 +25,27 @@
"version": "16"
}
},
// "plugins": ["unused-imports"], // "simple-import-sort",
"rules": {
"space-before-function-paren": 0,
"react/prop-types": 0,
"react/jsx-handler-names": 0,
"react/jsx-fragments": 0,
"react/no-unused-prop-types": 0,
"import/export": 0
"import/export": 0,
"@typescript-eslint/interface-name-prefix": 0,
"@typescript-eslint/explicit-function-return-type": 0,
"@typescript-eslint/member-delimiter-style": [
"error",
{
"multiline": {
"delimiter": "none",
"requireLast": false
},
"singleline": {
"delimiter": "semi",
"requireLast": false
}
}
]
}
}
1 change: 0 additions & 1 deletion .prettierrc
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
"semi": false,
"tabWidth": 2,
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "always",
"trailingComma": "none"
}
1 change: 1 addition & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{}
33 changes: 9 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,17 @@
- [Using in vanilla JavaScript](#using-in-vanilla-javascript)
- [Events](#events)
- [Provider Events](#provider-events)
- [Connector events (at `src/constants/events` and usage at `src/hooks/events` )](#connector-events-at-srcconstantsevents-and-usage-at-srchooksevents-)
- [React example of usage with custom hooks (but we recommend to use this Hooks)](#react-example-of-usage-with-custom-hooks-but-we-recommend-to-use-this-hooks)
- [Hooks](#hooks)
- [Hooks for multi/single connections (library allows to connect more then 1 provider per session)](#hooks-for-multisingle-connections-library-allows-to-connect-more-then-1-provider-per-session)
- [Hooks for multi connections (library allows to connect more then 1 provider per session)](#hooks-for-multi-connections-library-allows-to-connect-more-then-1-provider-per-session)
- [Hooks for multichain methods](#hooks-for-multichain-methods)
- [Custom Theme](#custom-theme)
- [Provider Options](#provider-options)
- [Adding a new provider](#adding-a-new-provider) - [Add new injected provider](#add-new-injected-provider)
- [Contributions](#contributions)
- [License](#license)

Example: https://xdefi-tech.github.io/walletconnect/
Example: <https://xdefi-tech.github.io/walletconnect/>

Please, look at the example application in folder `example`

Expand Down Expand Up @@ -92,8 +91,6 @@ import { ethers } from "ethers";

...

const provider = useConnectorSingleProvider();

const walletRequest = useWalletRequest();

const signTransaction = useCallback(
Expand Down Expand Up @@ -210,9 +207,7 @@ const providerOptions = {
const connector = new WalletsConnector(
options, // from getProviderOptions
network, // 'mainnet'
cacheEnabled, // true
isSingleProviderEnabled // true
);
await connector.connect();
Expand Down Expand Up @@ -250,7 +245,7 @@ provider.on('disconnect', (error: { code: number; message: string }) => {
})
```

## Connector events (at `src/constants/events` and usage at `src/hooks/events` )
<!-- ## Connector events (at `src/constants/events` and usage at `src/hooks/events` ) -->

### React example of usage with custom hooks (but we recommend to use this [Hooks](#hooks))

Expand All @@ -271,28 +266,21 @@ useEffect(() => {

# Hooks

## Hooks for multi/single connections (library allows to connect more then 1 provider per session)
## Hooks for multi connections (library allows to connect more then 1 provider per session)

| Hooks | Description |
| -------------------------- | ----------------------------------------------------------------------------------- |
| -------------------------- | ----------------------------------------------------------------------------------- | --- | --- |
| useConnectorActiveIds | Returns list of connected providers (Metamask, XDeFi, WalletConnect, etc) |
| useConnectorMultiConfigs | Return configs per provider (chain, network, address - just for web3/EVM providers) |
| useConnectorSingleConfigs | Same, just for one connected provider (for single connection mode) |
| useConnectorMultiConfigs | Return configs per provider (chain, network, address - just for web3/EVM providers) | | --> |
| useConnectorMultiProviders | Returns list of providers for using with `Web3` or `Ether.js` library |
| useConnectorSingleProvider | Same, just for one connected provider (for single connection mode) |
| useConnectorMultiChains | Returns list of connected chains per provider |
| useConnectorSingleChains | Same, just for one connected provider (for single connection mode) |
| useConnectedMultiAccounts | Returns list of connected accounts with providers |
| useConnectedSingleAccounts | Same, just for one connected provider (for single connection mode) |
| useWalletEvents | Hook tracks connection/error/disconnection events |
| useWalletsOptions | Returns list of providers (provided by user application) and method to disconnect |

## Hooks for multichain methods

| Hooks | Description |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| useWalletRequest | Allows to send custom txs/request into connected wallet |
| useRequestAvailability | Just for multichain providers. It checks availability for request/method usage in wallet (check [this example](#adding-a-new-provider) with fields 'methods' for different requests. For example XDEFI has `getAccounts` and `request` methods ) |
| Hooks | Description |
| ---------------- | ------------------------------------------------------- |
| useWalletRequest | Allows to send custom txs/request into connected wallet |

```tsx
const accounts = useConnectedAccounts()
Expand All @@ -309,8 +297,6 @@ const onErrorHandler = useCallback(() => {
const onCloseHandler = useCallback(() => {
setIsConnected(false)
}, [setIsConnected])

useWalletEvents(onConnectHandler, onCloseHandler, onErrorHandler)
```

## Custom Theme
Expand Down Expand Up @@ -338,7 +324,6 @@ const CUSTOM_THEME_BUILDER = (darkMode: boolean): any => ({
<WalletsModal
themeBuilder={CUSTOM_THEME_BUILDER}
isDark={true} // true/false
isSingleProviderEnabled={false} // true/false
trigger={(props: any) => (
<BtnOpen {...props}>Connect Styled Modal</BtnOpen>
)}
Expand Down
2 changes: 1 addition & 1 deletion example/config-overrides.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ module.exports = function override(config, env) {
buffer: 'buffer',
console: 'console-browserify',
constants: 'constants-browserify',
crypto: 'crypto-browserify',
crypto: require.resolve('crypto-browserify'),
domain: 'domain-browser',
events: 'events',
fs: false,
Expand Down
12 changes: 6 additions & 6 deletions example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,13 @@
"deploy": "gh-pages -d build"
},
"dependencies": {
"@coinbase/wallet-sdk": "^3.0.11",
"@coinbase/wallet-sdk": "^3.7.1",
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"@walletconnect/ethereum-provider": "^2.9.1",
"@walletconnect/modal": "^2.6.0",
"@web3auth/base": "^6.1.7",
"@web3auth/modal": "^6.1.7",
"@xdefi/wallets-connector": "link:..",
"gh-pages": "^4.0.0",
"react": "^18.2.0",
Expand All @@ -27,13 +29,11 @@
},
"devDependencies": {
"@babel/plugin-syntax-object-rest-spread": "^7.8.3",
"@toruslabs/torus-embed": "^1.22.6",
"@toruslabs/torus-embed": "^2.2.6",
"@types/styled-components": "^5.1.25",
"@web3auth/web3auth": "^2.1.3",
"@web3modal/ledger-provider": "^1.0.0",
"@web3modal/trezor-provider": "^1.0.0",
"browserify-zlib": "^0.2.0",
"crypto-browserify": "^3.12.0",
"eslint-config-react-app": "^7.0.1",
"ethereumjs-util": "^7.1.4",
"https-browserify": "^1.0.0",
"os-browserify": "^0.3.0",
"react-scripts": "^5.0.1",
Expand Down
69 changes: 1 addition & 68 deletions example/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,74 +1,7 @@
import React from 'react'
import styled from 'styled-components'

import {
HashRouter as Router,
Routes,
Route,
Link,
Navigate,
useLocation
} from 'react-router-dom'

import SingleProviderPage from './pages/SingleProviderPage'
import MultiProvidersPage from './pages/MultiProvidersPage'

const Nav = styled.div`
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
`

const LinkStyled = styled(Link)<{ current?: boolean }>`
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
opacity: ${({ current }) => (current ? 1 : 0.4)};
background: ${({ current }) => (current ? 'green' : 'initial')};
color: black;
`

const PATHS = {
multi: 'multi',
single: 'single'
}

const Navigation = () => {
const location = useLocation()

return (
<Nav>
<LinkStyled
current={location.pathname === `/${PATHS.multi}`}
to={PATHS.multi}
>
Multi Wallets Connection
</LinkStyled>
<LinkStyled
current={location.pathname === `/${PATHS.single}`}
to={PATHS.single}
>
Single Wallet Connection
</LinkStyled>
</Nav>
)
}

function App() {
return (
<Router>
<div>
<Navigation />

<Routes>
<Route path={PATHS.multi} element={<MultiProvidersPage />} />
<Route path={PATHS.single} element={<SingleProviderPage />} />
<Route path='*' element={<Navigate to={PATHS.single} />} />
</Routes>
</div>
</Router>
)
return <MultiProvidersPage />
}

export default App
53 changes: 0 additions & 53 deletions example/src/components/AccountAssets.tsx

This file was deleted.

10 changes: 5 additions & 5 deletions example/src/components/AccountsBlock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ import React from 'react'
import styled from 'styled-components'
import Column from 'src/components/Column'

export const SLanding = styled(Column)``

export const SChain = styled.div`
font-size: 24px;
padding-bottom: 12px;
Expand All @@ -16,16 +14,18 @@ export const SAccounts = styled.div`
`

export const SList = styled.div`
display: flex;
flex-direction: column;
flex-shrink: 1;
color: green;
`

export const SBalances = styled(SLanding)`
width: 100%;
export const SBalances = styled(Column)`
display: flex;
border-radius: 16px;
width: 100%;
border: 1px solid black;
padding: 12px;
overflow: hidden;
& h3 {
padding-top: 30px;
Expand Down

0 comments on commit 17c6e7d

Please sign in to comment.