Skip to content

🦊 Metamask integration #6372

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
thesan wants to merge 4 commits into
base: dev
Choose a base branch
from
Open

🦊 Metamask integration #6372

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2ed755d
Add `@chainsafe/metamask-polkadot-adapter`
thesan Jun 4, 2024
c9c50fb
Provide http rpc endpoint
thesan Jun 4, 2024
d4d359e
Add the Metamask wallet
thesan Jun 4, 2024
e46088d
Fix crash when metamask isn't installed
thesan Jun 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/atlas/atlas.config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -276,6 +276,8 @@ features:
name: Atlas
description: Web3 video streaming platform
icons: ['https://dev.gleev.xyz/favicon.ico']
metamask:
snapId: '$VITE_METAMASK_SNAP_ID' # Snap ID for Metamask - npm:@chainsafe/polkadot-snap or (`local:http://localhost:8081` for local development)
playback:
playbackRates: [2, 1.5, 1.25, 1, 0.5, 0.25] # Playback rates available in the player
comments:
Expand Down
2 changes: 2 additions & 0 deletions packages/atlas/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
},
"dependencies": {
"@apollo/client": "3.7.2",
"@chainsafe/metamask-polkadot-adapter": "^0.6.0",
"@elastic/apm-rum": "^5.12.0",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
Expand Down Expand Up @@ -112,6 +113,7 @@
"zustand": "^3.7.2"
},
"devDependencies": {
"@chainsafe/metamask-polkadot-types": "^0.7.0",
"@emotion/babel-plugin": "^11.10.5",
"@graphql-codegen/cli": "^2.16.1",
"@graphql-codegen/introspection": "^2.2.3",
Expand Down
6 changes: 5 additions & 1 deletion packages/atlas/src/.env
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ VITE_GEOLOCATION_SERVICE_URL=https://geolocation.joystream.org
VITE_HCAPTCHA_SITE_KEY=41cae189-7676-4f6b-aa56-635be26d3ceb
VITE_CHANGENOW_PUBLIC_API_KEY=0d8a58104f82b860a70e9460bccf62ae1e0fca4a93fd7e0c27c90448187b988f
VITE_WALLET_CONNECT_PROJECT_ID=33b2609463e399daee8c51726546c8dd
VITE_METAMASK_SNAP_ID=npm:@chainsafe/polkadot-snap

# YPP configuration
VITE_GOOGLE_CONSOLE_CLIENT_ID=246331758613-rc1psegmsr9l4e33nqu8rre3gno5dsca.apps.googleusercontent.com
Expand All @@ -37,6 +38,7 @@ VITE_PRODUCTION_ORION_AUTH_URL=https://auth.gleev.xyz/api/v1
VITE_PRODUCTION_ORION_URL=https://orion.gleev.xyz/graphql
VITE_PRODUCTION_QUERY_NODE_SUBSCRIPTION_URL=wss://orion.joystream.org/graphql
VITE_PRODUCTION_NODE_URL=wss://rpc.joystream.org:9944
VITE_PRODUCTION_NODE_HTTP_URL=https://rpc.joystream.org
VITE_PRODUCTION_FAUCET_URL=https://faucet.joystream.org/member-faucet/register
VITE_PRODUCTION_YPP_FAUCET_URL=https://18.184.136.237.nip.io/membership

Expand All @@ -45,6 +47,7 @@ VITE_DEVELOPMENT_ORION_AUTH_URL=https://atlas-dev.joystream.org/api/v1
VITE_DEVELOPMENT_ORION_URL=https://atlas-dev.joystream.org/orion-api/graphql
VITE_DEVELOPMENT_QUERY_NODE_SUBSCRIPTION_URL=wss://atlas-dev.joystream.org/orion-v2/graphql
VITE_DEVELOPMENT_NODE_URL=wss://atlas-dev.joystream.org/ws-rpc
VITE_DEVELOPMENT_NODE_HTTP_URL=https://atlas-dev.joystream.org/http-rpc
VITE_DEVELOPMENT_FAUCET_URL=https://atlas-dev.joystream.org/member-faucet/register
VITE_DEVELOPMENT_YPP_FAUCET_URL=https://50.19.175.219.nip.io/memberships

Expand All @@ -53,15 +56,16 @@ VITE_NEXT_ORION_AUTH_URL=https://3.73.121.180.nip.io/api/v1
VITE_NEXT_ORION_URL=https://3.73.121.180.nip.io/orion/graphql
VITE_NEXT_QUERY_NODE_SUBSCRIPTION_URL=wss://3.73.121.180.nip.io/orion/graphql
VITE_NEXT_NODE_URL=wss://3.73.121.180.nip.io/ws-rpc
VITE_NEXT_NODE_HTTP_URL=https://3.73.121.180.nip.io/http-rpc
VITE_NEXT_FAUCET_URL=https://3.73.121.180.nip.io/member-faucet/register
VITE_NEXT_YPP_FAUCET_URL=wss://3.73.121.180.nip.io/ws-rpc


# Local development env URLs
VITE_LOCAL_ORION_AUTH_URL=http://localhost:4074/api/v1
VITE_LOCAL_ORION_URL=http://localhost:4350/graphql
VITE_LOCAL_QUERY_NODE_SUBSCRIPTION_URL=ws://localhost:8081/graphql
VITE_LOCAL_NODE_URL=ws://localhost:9944/ws-rpc
VITE_LOCAL_NODE_HTTP_URL=http://localhost:9933/http-rpc
VITE_LOCAL_FAUCET_URL=http://localhost:3002/register
VITE_LOCAL_YPP_FAUCET_URL=https://52.204.147.11.nip.io/membership

Expand Down
3 changes: 3 additions & 0 deletions packages/atlas/src/config/configSchema.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,9 @@ export const configSchema = z.object({
icons: z.array(z.string()).nullable(),
}),
}),
metamask: z.object({
snapId: z.string().nullable(),
}),
playback: z.object({ playbackRates: z.array(z.number()) }),
comments: z.object({
reactions: z.array(z.object({ id: z.number(), emoji: z.string(), name: z.string() })),
Expand Down
1 change: 1 addition & 0 deletions packages/atlas/src/config/env.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export const ORION_GRAPHQL_URL = readEnv('ORION_URL')
export const ORION_AUTH_URL = readEnv('ORION_AUTH_URL')
export const QUERY_NODE_GRAPHQL_SUBSCRIPTION_URL = readEnv('QUERY_NODE_SUBSCRIPTION_URL')
export const NODE_URL = readEnv('NODE_URL')
export const NODE_HTTP_URL = readEnv('NODE_HTTP_URL')
export const FAUCET_URL = readEnv('FAUCET_URL')
export const YPP_FAUCET_URL = readEnv('YPP_FAUCET_URL')

Expand Down
3 changes: 2 additions & 1 deletion packages/atlas/src/joystream-lib/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export const NFT_DEFAULT_EXTENSION_PERIOD = 5
export const PERBILL_ONE_PERCENT = 10_000_000
export const PERMILL_PER_PERCENT = 10_000
export const JOYSTREAM_SS58_PREFIX = 126
export const HAPI_TO_JOY_RATE = 10 ** 10
export const JOY_DECIMALS = 10
export const HAPI_TO_JOY_RATE = 10 ** JOY_DECIMALS

export const AMM_DESCO_CURVE_CONST = 0.4522
85 changes: 85 additions & 0 deletions packages/atlas/src/providers/wallet/tmpwallet/metamask.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import { enablePolkadotSnap } from '@chainsafe/metamask-polkadot-adapter'
import { MetamaskSnapApi } from '@chainsafe/metamask-polkadot-adapter/build/types'
import { SnapNetworks } from '@chainsafe/metamask-polkadot-types'
import { Signer } from '@polkadot/types/types'
import { BaseDotsamaWallet, SubscriptionFn, WalletAccount } from '@talismn/connect-wallets'

import { atlasConfig } from '@/config'
import { NODE_HTTP_URL } from '@/config/env'
import { JOY_DECIMALS } from '@/joystream-lib/config'

import { JOYSTREAM_SS58_PREFIX } from './consts'

const networkName = 'joystream' as SnapNetworks
const addressPrefix = JOYSTREAM_SS58_PREFIX
const unit = { symbol: atlasConfig.joystream.tokenTicker, decimals: JOY_DECIMALS }

export class MetamaskWallet extends BaseDotsamaWallet {
protected _snapId: string
protected _snapApi: MetamaskSnapApi | undefined
protected _accounts: WalletAccount[] | undefined
protected _txId = 0

public get installed(): boolean {
return !!window.ethereum && '_metamask' in window.ethereum
}

constructor(snapId: string) {
super()

this.extensionName = 'Metamask'
this.title = 'Metamask'
this.logo = { src: 'https://metamask.io/images/metamask-logo.png', alt: 'Metamask Logo' }

this._snapId = snapId
}

public enable = async (): Promise<void> => {
const snap = await enablePolkadotSnap({ networkName, wsRpcUrl: NODE_HTTP_URL, addressPrefix, unit }, this._snapId)

this._snapApi = await snap.getMetamaskSnapApi()
const address = await this._snapApi.getAddress()
this._accounts = [
{
name: 'Metamask account',
address,
source: this.extensionName,
},
]

this._snapApi.signPayloadJSON
}

public getAccounts = async (): Promise<WalletAccount[]> => {
return this._accounts ?? []
}

public subscribeAccounts: (callback: SubscriptionFn) => Promise<() => void> = (callback) => {
callback(this._accounts ?? [])
return Promise.resolve(() => undefined)
}

public get signer(): Signer {
return {
signPayload: async (payload) => {
if (!this._snapApi) {
throw Error('Metamask was accessed before it was enabled')
}

const signature = (await this._snapApi.signPayloadJSON(payload)) as `0x${string}`

return { id: this._txId++, signature }
},

signRaw: async (raw) => {
if (!this._snapApi) {
throw Error('Metamask was accessed before it was enabled')
}

const signature = (await this._snapApi.signPayloadRaw(raw)) as `0x${string}`

return { id: this._txId++, signature }
},
}
}
}
5 changes: 5 additions & 0 deletions packages/atlas/src/providers/wallet/wallet.helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { BaseDotsamaWallet, Wallet, getWallets } from '@talismn/connect-wallets'

import { atlasConfig } from '@/config'

import { MetamaskWallet } from './tmpwallet/metamask'

export const getWalletsList = () => {
const supportedWallets = getWallets()
const supportedWalletsNames = supportedWallets.map((wallet) => wallet.extensionName)
Expand All @@ -26,10 +28,13 @@ export const getWalletsList = () => {
installed: true,
} as Wallet

const metamaskSnapId = atlasConfig.features.metamask.snapId

return [
...supportedWallets,
...unknownWallets,
...(atlasConfig.features.walletConnect.walletConnectProjectId ? [wcWallet] : []),
...(metamaskSnapId ? [new MetamaskWallet(metamaskSnapId)] : []),
]
}

Expand Down
4 changes: 1 addition & 3 deletions packages/atlas/src/providers/wallet/wallet.provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,9 +99,7 @@ export const WalletProvider: FC<PropsWithChildren> = ({ children }) => {

await selectedWallet.enable(atlasConfig.general.appName)

// taken from https://github.com/TalismanSociety/talisman-connect/blob/47cfefee9f1333326c0605c159d6ee8ebfba3e84/libs/wallets/src/lib/base-dotsama-wallet/index.ts#L98-L107
// should be part of future talisman-connect release
const accounts = await selectedWallet.extension.accounts.get()
const accounts = await selectedWallet.getAccounts()

const accountsWithWallet = accounts
.filter(filterUnsupportedAccounts)
Expand Down
Loading