log the things

Author: keithbro-imx

packages/checkout/sdk/src/sdk.ts

@@ -366,7 +366,12 @@ export class Checkout {
   public async getAllBalances(
     params: GetAllBalancesParams,
   ): Promise<GetAllBalancesResult> {
-    const browserProvider = !params.provider || (params.provider instanceof WrappedBrowserProvider)
+    console.log('getAllBalances');
+    console.log({ pp: params.provider });
+    console.log({ io: params.provider instanceof WrappedBrowserProvider });
+    console.log({ epi: params.provider && 'ethereumProvider' in params.provider });
+
+    const browserProvider = (!params.provider || ('ethereumProvider' in params.provider))
       ? params.provider
       : new WrappedBrowserProvider(params.provider);
 

packages/checkout/sdk/src/types/provider.ts

@@ -55,6 +55,8 @@ export class WrappedBrowserProvider extends BrowserProvider {
 
   // eslint-disable-next-line max-len
   constructor(ethereum: EthersEip1193Provider, network?: Networkish, _options?: BrowserProviderOptions) {
+    console.log('creating WBP');
+    console.log({ ethereum });
     super(ethereum, network, _options);
 
     this.#setEthereumProvider(ethereum);

packages/checkout/widgets-lib/src/lib/hooks/useInjectedProviders.ts

@@ -43,6 +43,9 @@ const processProviders = async (
   // Injected providers
   const filteredProviders = [...injectedProviders];
 
+  console.log({ windowEthInstWrapped: window.ethereum instanceof WrappedBrowserProvider });
+  console.log({ requestInWindowEth: 'request' in window.ethereum });
+
   // Attempt to fallback to window.ethereum if no EIP-6963 providers are found
   // Assuming this is MetaMask on mobile
   if (filteredProviders.length === 0 && window.ethereum) {

packages/checkout/widgets-sample-app/src/components/ui/bridge/bridge.tsx

@@ -1,14 +1,28 @@
-import { BridgeEventType, Checkout, WidgetTheme, WidgetType, WidgetLanguage } from '@imtbl/checkout-sdk';
+import { BridgeEventType, Checkout, WidgetTheme, WidgetType, WidgetLanguage, Widget } from '@imtbl/checkout-sdk';
 import { WidgetsFactory } from '@imtbl/checkout-widgets'
-import { useEffect, useMemo } from 'react';
+import { Environment } from '@imtbl/config';
+import { useEffect, useMemo, useState } from 'react';
+import { passport } from '../../../utils/passport';
 
 const BRIDGE_TARGET_ID = 'bridge-widget-target';
 function BridgeUI() {
-  const checkout = useMemo(() => new Checkout(), []);
-  const factory = useMemo(() => new WidgetsFactory(checkout, { theme: WidgetTheme.DARK }), [checkout]);
-  const bridge = useMemo(() => factory.create(WidgetType.BRIDGE), [factory]);
+  const [bridge, setBridge] = useState<Widget<WidgetType.BRIDGE> | null>(null);
 
   useEffect(() => {
+    passport.connectEvm().then(() => {
+      const checkout = new Checkout({
+        baseConfig: {
+          environment: Environment.SANDBOX,
+        },
+        passport,
+      });
+      const factory = new WidgetsFactory(checkout, { theme: WidgetTheme.DARK });
+      setBridge(factory.create(WidgetType.BRIDGE));
+    })
+  }, []);
+
+  useEffect(() => {
+    if (!bridge) return;
     bridge.mount(BRIDGE_TARGET_ID, { amount: '0.1', tokenAddress: 'NATIVE' });
     bridge.addListener(BridgeEventType.TRANSACTION_SENT, (data: any) => {
       console.log('SUCCESS', data);
@@ -22,6 +36,8 @@ function BridgeUI() {
     });
   }, [bridge])
 
+  if (!bridge) return null;
+
   return (
     <div>
       <h1 className="sample-heading">Checkout Bridge</h1>