Can our extension wallet connect to metamask?

[lukaw3d]

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]

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]

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]

Does iframe inside extension get metamask injection?

• No

[lukaw3d]

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]

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]

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]

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>