diff --git a/public/static/brave.png b/public/static/brave.png new file mode 100644 index 00000000..d2c76688 Binary files /dev/null and b/public/static/brave.png differ diff --git a/public/static/metamask.png b/public/static/metamask.png new file mode 100644 index 00000000..81cfa331 Binary files /dev/null and b/public/static/metamask.png differ diff --git a/src/context/RariContext.tsx b/src/context/RariContext.tsx index aa221974..a2b1780e 100644 --- a/src/context/RariContext.tsx +++ b/src/context/RariContext.tsx @@ -35,7 +35,8 @@ import WalletLink from "walletlink"; async function launchModalLazy( t: (text: string, extra?: any) => string, - cacheProvider: boolean = true + cacheProvider: boolean = true, + brave: boolean ) { const [WalletConnectProvider, Web3Modal] = await Promise.all([ import("@walletconnect/web3-provider"), @@ -45,6 +46,8 @@ async function launchModalLazy( const providerOptions = { injected: { display: { + logo: brave ? "/static/brave.png" : "/static/metamask.png", + name: brave ? "Brave Wallet" : "Metamask", description: t("Connect with a browser extension"), }, package: null, @@ -138,23 +141,6 @@ export const RariProvider = ({ children }: { children: ReactNode }) => { } }, [requestedAddress]) - - useEffect(() => { - //toast on brave users - if(typeof navigator !== 'object') return - const isBrave = (navigator as any).brave - if(isBrave){ - toast({ - title: "Warning", - description: "Brave Users may experience issues connecting. Please use Chrome/FF for now for optimal experience.", - status: "warning", - position: "bottom-right", - duration: 300000, - isClosable: true, - }); - } - }, []) - // Check the user's network: // First render only useEffect(() => { @@ -239,7 +225,9 @@ export const RariProvider = ({ children }: { children: ReactNode }) => { async (cacheProvider: boolean = true) => { try { setIsAttemptingLogin(true); - const providerWeb3Modal = await launchModalLazy(t, cacheProvider); + const clientVersion = await provider.send('web3_clientVersion',[]) + const isBrave = clientVersion.split('/')[0] !== 'MetaMask' + const providerWeb3Modal = await launchModalLazy(t, cacheProvider, isBrave); setWeb3ModalProvider(providerWeb3Modal); setRariAndAddressFromModal(providerWeb3Modal, "login"); setIsAttemptingLogin(false); diff --git a/src/static/icons/brave.svg b/src/static/icons/brave.svg new file mode 100644 index 00000000..54f1cf43 --- /dev/null +++ b/src/static/icons/brave.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/utils/web3Providers.ts b/src/utils/web3Providers.ts index ed046db0..436e1e54 100644 --- a/src/utils/web3Providers.ts +++ b/src/utils/web3Providers.ts @@ -20,19 +20,19 @@ export function chooseBestWeb3Provider( ): JsonRpcProvider | Web3Provider { let providerURL = getChainMetadata(chainId).rpcUrl ?? ""; - console.log({ chainId, providerURL }); - // return new JsonRpcProvider(providerURL); const isClient = typeof window === "object"; if (!isClient || vaults) { return new JsonRpcProvider(providerURL); } - if (window.web3) { - return new Web3Provider(window.web3.currentProvider); + if (window.ethereum) { + // @ts-ignore + return new Web3Provider(window.ethereum) } else { return new JsonRpcProvider(providerURL); } + } export const initFuseWithProviders = (