Skip to content

Commit ebee2a0

Browse files
Adamj1232lnbc1QWFyb24
Adamj1232
and
lnbc1QWFyb24
authored
Magic wallet module addition (#879)
* WIP * Magic wallet - WIP - previously functional until I put the files in the same module * Remove yarn lock * Remove yaml * Change to es for consistency * Match svelte ts config * Update global yarn lock * Fix imports * Fix package names * Add typesto tsconfig * Magic working! * Add email validation and close button back * Cleanup * Remove unused styles * Cleanup more styles * Update readme * Delete yarn-error.log * Add optional instance type to WalletInterface obj * WIP on removing web3 * Working for web3 removal for all but balance * fixed it! working balance without web3 * Its working!!!!!! * Add demo with Magic wallet * Removed commented code * Update common version to publish new instance prop * Remove web3 from Magic! * Fix account request * Fixes from PR comments * All working except after chain change, the instace passed through the baseRequest is the original instance rather than the updated instance with the newly set chain * Fix magic provider on chain change * Fix provider on chain change * Update yarn.lock * Increment versions on fortmatic module * Handle PR comments and optimize * Remove eth_accounts patch as provider returns as expected * Cleanup * Pass instance to browser * Add info to README about accessing the magic instance and further API info * Chaning loading to match MPEX * Cleanup demo * Cleanup readme * Cleanup styling * Update packages/magic/README.md Co-authored-by: Aaron Barnard <abarnard@protonmail.com> * Handle all PR comments * Add element cleanup Co-authored-by: Aaron Barnard <abarnard@protonmail.com>
1 parent abf672b commit ebee2a0

25 files changed

+4247
-11
lines changed

‎packages/common/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@web3-onboard/common",
3-
"version": "2.0.2",
3+
"version": "2.0.3",
44
"scripts": {
55
"build": "rollup -c",
66
"dev": "rollup -c -w",

‎packages/common/src/types.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,8 @@ export type ChainId = string
228228
export type RpcUrl = string
229229

230230
export type WalletInterface = {
231-
provider: EIP1193Provider
231+
provider: EIP1193Provider,
232+
instance?: unknown
232233
}
233234

234235
export interface ProviderRpcError extends Error {

‎packages/core/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@web3-onboard/core",
3-
"version": "2.0.10",
3+
"version": "2.0.11",
44
"scripts": {
55
"build": "rollup -c",
66
"dev": "rollup -c -w",

‎packages/core/src/validation.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ const wallet = Joi.object({
5757
label: Joi.string(),
5858
icon: Joi.string(),
5959
provider: unknownObject,
60+
instance: unknownObject,
6061
accounts,
6162
chains: Joi.array().items(connectedChain)
6263
})

‎packages/core/src/views/connect/Index.svelte

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@
9494
9595
const { chains } = state.get()
9696
97-
const { provider } = await getInterface({
97+
const { provider, instance } = await getInterface({
9898
chains,
9999
BigNumber,
100100
EventEmitter,
@@ -107,6 +107,7 @@
107107
label,
108108
icon: loadedIcon,
109109
provider,
110+
instance,
110111
accounts: [],
111112
chains: [{ namespace: 'evm', id: '0x1' }]
112113
}

‎packages/demo/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"@web3-onboard/trezor": "^2.0.0",
3535
"@web3-onboard/walletconnect": "^2.0.0",
3636
"@web3-onboard/walletlink": "^2.0.0",
37+
"@web3-onboard/magic": "^2.0.0",
3738
"vconsole": "^3.9.5"
3839
},
3940
"license": "MIT",

‎packages/demo/src/App.svelte

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
import trezorModule from '@web3-onboard/trezor'
1212
import walletConnectModule from '@web3-onboard/walletconnect'
1313
import walletLinkModule from '@web3-onboard/walletlink'
14+
import magicModule from '@web3-onboard/magic'
1415
import { verifyMessage, verifyTypedData } from 'ethers/lib/utils'
1516
import { share } from 'rxjs/operators'
1617
import VConsole from 'vconsole'
@@ -79,6 +80,10 @@
7980
}
8081
const trezor = trezorModule(trezorOptions)
8182
83+
const magic = magicModule({
84+
apiKey: 'pk_live_02207D744E81C2BA'
85+
})
86+
8287
const onboard = Onboard({
8388
wallets: [
8489
ledger,
@@ -88,6 +93,7 @@
8893
keystone,
8994
walletLink,
9095
injected,
96+
magic,
9197
fortmatic,
9298
portis,
9399
torus,

‎packages/fortmatic/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@web3-onboard/fortmatic",
3-
"version": "2.0.1",
3+
"version": "2.0.2",
44
"description": "Fortmatic module for web3-onboard",
55
"module": "dist/index.js",
66
"browser": "dist/index.js",
@@ -20,7 +20,7 @@
2020
"typescript": "^4.5.5"
2121
},
2222
"dependencies": {
23-
"@web3-onboard/common": "^2.0.0",
23+
"@web3-onboard/common": "^2.0.3",
2424
"fortmatic": "^2.2.1"
2525
}
2626
}

‎packages/fortmatic/src/index.ts

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ function fortmatic(options: APIKey): WalletInit {
2626
let provider: EIP1193Provider
2727

2828
function patchProvider(): EIP1193Provider {
29-
provider = createEIP1193Provider(fortmaticProvider, {
29+
const patchedProvider = createEIP1193Provider(fortmaticProvider, {
3030
eth_requestAccounts: async () => {
3131
try {
3232
const accounts = await instance.user.login()
@@ -74,10 +74,22 @@ function fortmatic(options: APIKey): WalletInit {
7474
}
7575
})
7676

77-
provider.on = emitter.on.bind(emitter)
78-
provider.disconnect = () => instance.user.logout()
77+
if (!provider) {
78+
patchedProvider.on = emitter.on.bind(emitter)
79+
patchedProvider.disconnect = () => () => instance.user.logout()
7980

80-
return provider
81+
return patchedProvider
82+
} else {
83+
provider.request = patchedProvider.request.bind(patchedProvider)
84+
85+
// @ts-ignore - bind old methods for backwards compat
86+
provider.send = patchedProvider.send.bind(patchedProvider)
87+
88+
// @ts-ignore - bind old methods for backwards compat
89+
provider.sendAsync = patchedProvider.sendAsync.bind(patchedProvider)
90+
91+
return provider
92+
}
8193
}
8294

8395
provider = patchProvider()

‎packages/magic/README.md

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
# @web3-onboard/magic
2+
3+
## Wallet module for connecting Ledger hardware wallets to Onboard V2
4+
5+
### Login options
6+
7+
- **Email** - The Magic module comes with a built in email login modal that is customizable
8+
in the same fashion that all other web3-onboard UI components are
9+
* note: The Magic Module currently only supports email login but we are open to expand to sms or socials*
10+
11+
### Install
12+
13+
`npm i @web3-onboard/magic`
14+
15+
Head over to https://magic.link/ and signup to get an API key
16+
17+
## Options
18+
19+
```typescript
20+
type magicOptions = {
21+
apiKey: string
22+
}
23+
```
24+
25+
## Usage
26+
27+
```typescript
28+
import Onboard from '@web3-onboard/core'
29+
import magicModule from '@web3-onboard/magic'
30+
31+
const magic = magicModule({ apiKey: 'API_KEY' })
32+
33+
const onboard = Onboard({
34+
// ... other Onboard options
35+
wallets: [
36+
magic
37+
//... other wallets
38+
]
39+
})
40+
41+
const connectedWallets = await onboard.connectWallet()
42+
console.log(connectedWallets)
43+
```
44+
45+
### Accessing the Magic Wallet Internals
46+
When a Magic wallet is connect the Magic instance is exposed.
47+
This can be used to get information such as user MetaData, update a user's email address or handle the user's token.
48+
```typescript
49+
const [magicWallet] = await onboard.connectWallet()
50+
51+
try {
52+
const { email, publicAddress } = await magicWallet.instance.user.getMetadata();
53+
} catch {
54+
// Handle errors if required!
55+
}
56+
For full documentation and examples please visit [Magic's official docs](https://magic.link/docs/api-reference/client-side-sdks/web#user-module)

‎packages/magic/package.json

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{
2+
"name": "@web3-onboard/magic",
3+
"version": "2.0.0",
4+
"description": "Magic module for Onboard.js",
5+
"scripts": {
6+
"build": "rollup -c",
7+
"dev": "rollup -c -w",
8+
"start": "sirv public --no-clear",
9+
"type-check": "svelte-check --tsconfig ./tsconfig.json",
10+
"lint": "eslint -c './.eslintrc.cjs' './src' && prettier --check './src/**/*'"
11+
},
12+
"module": "dist/index.js",
13+
"browser": "dist/index.js",
14+
"main": "dist/index.js",
15+
"type": "module",
16+
"typings": "dist/index.d.ts",
17+
"files": [
18+
"dist"
19+
],
20+
"license": "MIT",
21+
"devDependencies": {
22+
"@rollup/plugin-json": "^4.1.0",
23+
"@rollup/plugin-node-resolve": "^11.0.0",
24+
"@rollup/plugin-replace": "^3.0.0",
25+
"@rollup/plugin-typescript": "^8.0.0",
26+
"@tsconfig/svelte": "^2.0.0",
27+
"@typescript-eslint/eslint-plugin": "^4.31.1",
28+
"@typescript-eslint/parser": "^4.31.1",
29+
"eslint": "^7.32.0",
30+
"eslint-config-prettier": "^8.3.0",
31+
"eslint-plugin-svelte3": "^3.2.1",
32+
"eventemitter3": "^4.0.7",
33+
"prettier": "^2.4.0",
34+
"prettier-plugin-svelte": "^2.4.0",
35+
"rollup": "^2.3.4",
36+
"rollup-plugin-svelte": "^7.0.0",
37+
"svelte": "^3.42.5",
38+
"svelte-check": "^2.2.6",
39+
"svelte-preprocess": "^4.9.4",
40+
"tslib": "^2.0.0",
41+
"tsc": "^2.0.3",
42+
"typescript": "^4.5.5"
43+
},
44+
"dependencies": {
45+
"@web3-onboard/common": "^2.0.3",
46+
"magic-sdk": "^8.1.0",
47+
"rxjs": "^7.5.2"
48+
}
49+
}

‎packages/magic/rollup.config.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import svelte from 'rollup-plugin-svelte'
2+
import resolve from '@rollup/plugin-node-resolve'
3+
import replace from '@rollup/plugin-replace'
4+
import json from '@rollup/plugin-json'
5+
import sveltePreprocess from 'svelte-preprocess'
6+
import typescript from '@rollup/plugin-typescript'
7+
8+
const production = !process.env.ROLLUP_WATCH
9+
10+
export default {
11+
input: 'src/index.ts',
12+
output: {
13+
format: 'es',
14+
dir: 'dist/'
15+
},
16+
plugins: [
17+
json(),
18+
replace({
19+
'process.env.NODE_ENV': JSON.stringify(production),
20+
preventAssignment: true
21+
}),
22+
svelte({
23+
preprocess: sveltePreprocess({ sourceMap: !production }),
24+
compilerOptions: {
25+
dev: !production
26+
},
27+
emitCss: false
28+
}),
29+
resolve({
30+
browser: true,
31+
dedupe: ['svelte']
32+
}),
33+
typescript({
34+
sourceMap: !production,
35+
inlineSources: !production
36+
})
37+
],
38+
external: ['rxjs', 'magic-sdk', '@web3-onboard/common']
39+
}

‎packages/magic/src/branding.ts

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
export default `
2+
<a
3+
role="link"
4+
tabindex="0"
5+
aria-label="Secured by Magic"
6+
href="https://magic.link/"
7+
target="_blank"
8+
rel="noopener noreferrer"
9+
><div class="_w _x _u">
10+
<svg
11+
width="62.25"
12+
height="23.25"
13+
viewBox="0 0 83 31"
14+
xmlns="http://www.w3.org/2000/svg"
15+
><defs
16+
><radialGradient
17+
class="_y"
18+
id="logo-gradient"
19+
x1="50%"
20+
y1="0%"
21+
x2="50%"
22+
y2="100%"
23+
><stop offset="0%" /><stop offset="100%" /></radialGradient
24+
></defs
25+
><path
26+
d="M45.1797 20.8929H47.7932V8.70022H44.1379L41.1771 16.3047L38.2163 8.70022H34.5792V20.8929H37.1745V12.1186L40.6105 20.8929H41.7437L45.1797 12.1186V20.8929Z"
27+
/><path
28+
d="M55.4597 20.8929H57.7808V15.1896C57.7808 12.6487 55.9349 11.8444 53.9245 11.8444C52.5354 11.8444 51.1464 12.2831 50.0681 13.2336L50.9454 14.7874C51.6947 14.0928 52.572 13.7455 53.5224 13.7455C54.6921 13.7455 55.4597 14.3304 55.4597 15.2262V16.4509C54.8748 15.738 53.8331 15.3724 52.6634 15.3724C51.2561 15.3724 49.5929 16.1219 49.5929 18.1875C49.5929 20.1617 51.2561 21.1123 52.6634 21.1123C53.8148 21.1123 54.8566 20.6918 55.4597 19.9789V20.8929ZM55.4597 18.7725C55.0759 19.2843 54.3448 19.5402 53.5955 19.5402C52.6816 19.5402 51.9323 19.0649 51.9323 18.2423C51.9323 17.4015 52.6816 16.9079 53.5955 16.9079C54.3448 16.9079 55.0759 17.1638 55.4597 17.6757V18.7725Z"
29+
/><path
30+
d="M59.9003 23.1596C60.9969 24.1285 62.1849 24.4758 63.7019 24.4758C65.8768 24.4758 68.4721 23.6532 68.4721 20.2897V12.0637H66.1327V13.1971C65.4199 12.3014 64.4695 11.8444 63.4094 11.8444C61.1797 11.8444 59.5165 13.453 59.5165 16.3412C59.5165 19.2843 61.198 20.8381 63.4094 20.8381C64.4878 20.8381 65.4382 20.3262 66.1327 19.4488V20.3445C66.1327 22.0811 64.8167 22.5747 63.7019 22.5747C62.587 22.5747 61.6549 22.2639 60.9421 21.4779L59.9003 23.1596ZM66.1327 17.7671C65.7489 18.3337 64.9081 18.7725 64.1405 18.7725C62.8246 18.7725 61.9108 17.8585 61.9108 16.3412C61.9108 14.824 62.8246 13.91 64.1405 13.91C64.9081 13.91 65.7489 14.3304 66.1327 14.9154V17.7671Z"
31+
/><path
32+
d="M71.9256 10.7659C72.6933 10.7659 73.3147 10.1443 73.3147 9.37658C73.3147 8.60882 72.6933 7.9873 71.9256 7.9873C71.1763 7.9873 70.5366 8.60882 70.5366 9.37658C70.5366 10.1443 71.1763 10.7659 71.9256 10.7659ZM70.7742 20.8929H73.0953V12.0637H70.7742V20.8929Z"
33+
/><path
34+
d="M74.8303 16.4692C74.8303 19.1929 76.7859 21.1123 79.5092 21.1123C81.3185 21.1123 82.4151 20.3262 83 19.5037L81.483 18.0961C81.0627 18.6811 80.423 19.0467 79.6188 19.0467C78.2115 19.0467 77.2246 18.0047 77.2246 16.4692C77.2246 14.9337 78.2115 13.91 79.6188 13.91C80.423 13.91 81.0627 14.2573 81.483 14.8606L83 13.453C82.4151 12.6304 81.3185 11.8444 79.5092 11.8444C76.7859 11.8444 74.8303 13.7638 74.8303 16.4692Z"
35+
/><path
36+
fill-rule="evenodd"
37+
clip-rule="evenodd"
38+
d="M12.7002 -5.55184e-07C14.0256 1.62362 15.4875 3.13142 17.0683 4.50592C16.0151 7.92275 15.4481 11.5529 15.4481 15.3154C15.4481 19.078 16.0151 22.7082 17.0684 26.125C15.4876 27.4995 14.0257 29.0073 12.7003 30.6309C11.375 29.0075 9.91333 27.4998 8.33271 26.1255C9.38605 22.7085 9.95313 19.0782 9.95313 15.3154C9.95313 11.5527 9.38605 7.92237 8.3327 4.50537C9.9133 3.13103 11.375 1.6234 12.7002 -5.55184e-07ZM5.3107 23.7627C3.63771 22.5899 1.86221 21.5534 0.000311902 20.6694C0.516837 18.976 0.794702 17.1784 0.794702 15.316C0.794702 13.4532 0.516736 11.6553 3.00821e-05 9.9616C1.86203 9.07753 3.63762 8.04101 5.3107 6.86817C5.95048 9.57999 6.28902 12.4082 6.28902 15.3154C6.28902 18.2227 5.95049 21.0509 5.3107 23.7627ZM19.1114 15.3154C19.1114 18.2227 19.4499 21.051 20.0897 23.7628C21.763 22.5898 23.5388 21.5531 25.4011 20.669C24.8847 18.9757 24.6069 17.1783 24.6069 15.3159C24.6069 13.4534 24.8848 11.6557 25.4014 9.96213C23.539 9.07794 21.7631 8.04124 20.0897 6.86817C19.4499 9.57999 19.1114 12.4082 19.1114 15.3154Z"
39+
/></svg
40+
>
41+
</div></a
42+
>`

‎packages/magic/src/elements/CloseButton.svelte

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<script>
2+
import closeIcon from './close'
3+
</script>
4+
5+
<style>
6+
.close-button-container {
7+
cursor: pointer;
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
}
12+
.close-button {
13+
width: 2rem;
14+
height: 2rem;
15+
box-sizing: border-box;
16+
display: flex;
17+
justify-content: center;
18+
align-items: center;
19+
padding: 0.4rem;
20+
border-radius: 40px;
21+
color: var(--onboard-gray-400, var(--gray-400));
22+
background: var(--onboard-white, var(--white));
23+
}
24+
.close-icon {
25+
width: 14px;
26+
display: flex;
27+
align-items: center;
28+
}
29+
</style>
30+
31+
<div class="close-button-container">
32+
<div class="close-button">
33+
<div class="close-icon">{@html closeIcon}</div>
34+
</div>
35+
</div>

0 commit comments

Comments
 (0)