Newer
Older
import { ReactNode, createContext, useEffect, useState } from "react";
import type { InjectedExtension, InjectedAccountWithMeta, InjectedWindow } from "@polkadot/extension-inject/types";
import { SubscriptionFn, WalletAccount, getWallets, isWalletInstalled } from "@talismn/connect-wallets";
setActingAccountIdx: (idx: number) => void;
setActingAccountByAddress: (address: string) => void;
}
export const PolkadotExtensionContext =
createContext<PolkadotExtensionContextType>({} as PolkadotExtensionContextType);
export const PolkadotExtensionProvider = ( { children } : { children : ReactNode }) => {
const [isInitialized, setIsInitialized ] = useState<boolean>( false )
const [accounts, setAccounts] = useState<InjectedAccountWithMeta[]>([]);
const [actingAccountIdx, setActingAccountIdx] = useState<number | undefined>( undefined );
const [isWeb3Injected, setIsWeb3Injected] = useState<boolean>(false);
const [injector, setInjector] = useState<InjectedExtension>();
const [ allowExtensionConnection, setAllowExtensionConnection ] = useState<boolean>( false )
const setActingAccountByAddress = (address: string) => {
setActingAccountIdx( accounts?.findIndex( account => account.address === address ) )
}
const initWalletExtension = async () => {
const { web3AccountsSubscribe, web3Enable } = await import( "@polkadot/extension-dapp" );
if (!allowExtensionConnection) {
return setAccounts([])
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// let unsubscribePromise = Promise.resolve<SubscriptionFn>( () => {} )
if ( typeof window !== "undefined" ) {
const unsubscribePromise = web3Enable(process.env.REACT_APP_APPLICATION_NAME ?? 'Talisman').then(() =>
web3AccountsSubscribe(accounts => {
console.log( 'accounts', accounts)
setAccounts( accounts )
setActingAccountIdx( 0 )
})
)
}
// return () => {
// unsubscribePromise.then(unsubscribe => unsubscribe())
// }
// if (typeof window !== "undefined" ) {
// const installedWallets = getWallets().filter(wallet => wallet.installed)
// console.log( 'installedWallets', installedWallets )
// const firstWallet = installedWallets[0]
// console.log( 'firstWallet', firstWallet )
// // enable the wallet
// if (firstWallet) {
// try {
// await firstWallet?.enable( "Polkadot Tokengated Demo" )
// await firstWallet?.subscribeAccounts((allAccounts: WalletAccount[] | undefined) => {
// console.log("got accounts via talisman connect", allAccounts)
// if ( accounts === undefined || accounts.length === 0 ) {
// setAccounts( allAccounts )
// setActingAccountIdx( 0 )
// }
// });
// } catch (error) {
// console.log( error )
// }
// setIsInitialized( true )
// }
// }
useEffect(() => {
if ( typeof window !== "undefined" ) {
const getInjector = async() => {
const { web3FromSource } = await import( "@polkadot/extension-dapp" );
const actingAccount = actingAccountIdx !== undefined ? accounts[actingAccountIdx] : undefined
if ( actingAccount?.meta.source ) {
const injector = await web3FromSource(actingAccount?.meta.source);
setInjector( injector )
}
}
getInjector()
}
}, [actingAccountIdx, accounts] )
useEffect(() => {
initWalletExtension()
}, [allowExtensionConnection, setAccounts])
useEffect(() => {
const w = Object.keys((globalThis as InjectedWindow).injectedWeb3 )
if ( w && w !== undefined && Object.keys((globalThis as InjectedWindow).injectedWeb3 ).length > 0 ) {
return (
<PolkadotExtensionContext.Provider value={ {
accounts,
actingAccountIdx,
setActingAccountIdx,
setActingAccountByAddress,
injector,
} }>
{children}
</PolkadotExtensionContext.Provider>
)