Skip to content
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.

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

Can our extension wallet connect to metamask? #2063

Open
lukaw3d opened this issue Sep 25, 2024 · 8 comments
Open

Can our extension wallet connect to metamask? #2063

lukaw3d opened this issue Sep 25, 2024 · 8 comments

Comments

@lukaw3d
Copy link
Member

lukaw3d commented Sep 25, 2024

If we want to do subcall withdrawal, we need to connect to evm extension wallets like metamask from inside https://chromewebstore.google.com/detail/ROSE%20Wallet/ppdadbejkmjnefldpcdjhnkpbjkikoip?hl=en

@lukaw3d
Copy link
Member Author

lukaw3d commented Sep 25, 2024

Does metamask inject window.ethereum into other extensions?

  • No

Does chrome have a config option for running ext in ext like Allow access to file URLs?

  • No. maybe chrome cmd flag

@lukaw3d
Copy link
Member Author

lukaw3d commented Sep 25, 2024

Does metamask support runtime.onMessageExternal or runtime.onConnectExternal to communicate ext to ext?

  • Not yet?
Early support for something behind a flag: 
https://github.com/jiexi/CAIPs/pull/1
https://github.com/MetaMask/metamask-extension/pull/25075
  • Yes?
https://github.com/MetaMask/extension-provider
but do non-metamask wallets support this?

Rainbowkit ConnectButton doesn't try to use it

@lukaw3d
Copy link
Member Author

lukaw3d commented Sep 25, 2024

Does iframe inside extension get metamask injection?

  • No

@lukaw3d
Copy link
Member Author

lukaw3d commented Sep 25, 2024

Can extension connect across wallet connect QR code?

  • metamask extension doesn't seem to have a way to read a QR code. Other wallets might

@lukaw3d
Copy link
Member Author

lukaw3d commented Sep 25, 2024

Can ext wallet open a data URL popup, and that popup communicates with metamask?

  • No. data:text/html,<script>setInterval(() => console.log(window.ethereum), 1000)</script> prints undefined. Metamask doesn't inject into data:
  • blob: URL.createObjectURL also no.

@lukaw3d
Copy link
Member Author

lukaw3d commented Sep 25, 2024

Can ext wallet open an external site and use it as a proxy?

  • Is it safe?
  • on first connect metamask would whitelist and auto-connect to that domain
  • is <WagmiProvider config={config} reconnectOnMount={false}> with rainbowkit connect sufficient to ignore any risk from auto-connect?
  • proxy site could communicate over handle = open(.._blank); handle.postMessage('withdraw', 'wallet-proxy.oasis.io'); + window.addEventListener('message', e => e.origin === 'wallet-ext-id?')
  • proxy site can just be empty and extension can inject everything into it
  • if proxy site is opened as a popup: metamask can't be loaded on demand with Site access: on click
  • if proxy site is opened as new tab: metamask can be loaded on demand, but reload will lose state and postMessage instructions
  • can I put instructions into history.pushState to survive the reload?

@lukaw3d
Copy link
Member Author

lukaw3d commented Sep 25, 2024

rainbowkit connect also requires more permissive CSP. Proxy site can have it less strict

minimum:

connect-src: https://*.walletconnect.com wss://*.walletconnect.com
frame-src: https://verify.walletconnect.org

docs:
https://github.com/WalletConnect/walletconnect-docs/blob/5e6ba2d5a94b4915b20e5b99a046be19c891d9a2/docs/advanced/security/content-security-policy.md?plain=1#L11-L21

try:

diff --git a/extension/src/popup/popup.tsx b/extension/src/popup/popup.tsx
index 4909fa76..6b96b197 100644
--- a/extension/src/popup/popup.tsx
+++ b/extension/src/popup/popup.tsx
@@ -11,6 +11,24 @@ import 'locales/i18n'
 import 'sanitize.css/sanitize.css'
 import 'styles/main.css'
 import { routes } from './routes'
+import { WagmiProvider } from 'wagmi'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
+
+import { getDefaultConfig } from '@rainbow-me/rainbowkit'
+import { sapphire } from 'wagmi/chains'
+import '@rainbow-me/rainbowkit/styles.css'
+
+export const config = getDefaultConfig({
+  appName: 'ROSE On-Ramp',
+  projectId: 'e3727c2e231abb0791d9cc90b55fb1e1',
+  chains: [sapphire],
+  ssr: false, // If your dApp uses server side rendering (SSR)
+  batch: {
+    multicall: false,
+  },
+})
+const queryClient = new QueryClient()
 
 const container = document.getElementById('root') as HTMLElement
 const root = createRoot(container!)
@@ -23,7 +41,13 @@ store.ready().then(() => {
       <ThemeProvider>
         <HelmetProvider>
           <React.StrictMode>
-            <RouterProvider router={router} />
+            <WagmiProvider config={config}>
+              <QueryClientProvider client={queryClient}>
+                <RainbowKitProvider>
+                  <RouterProvider router={router} />
+                </RainbowKitProvider>
+              </QueryClientProvider>
+            </WagmiProvider>
           </React.StrictMode>
         </HelmetProvider>
       </ThemeProvider>

@lukaw3d
Copy link
Member Author

lukaw3d commented Oct 1, 2024

Benefit of opening an external site in tab or popup:
signing a tx in metamask requires clicking outside ROSE wallet extension. clicking outside ROSE wallet extension closes it and loses progress.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant