WIP

package.json

@@ -64,7 +64,7 @@
     "@safe-global/safe-modules-deployments": "^1.2.0",
     "@sentry/react": "^7.91.0",
     "@spindl-xyz/attribution-lite": "^1.4.0",
-    "@stakekit/widget": "^0.0.107",
+    "@stakekit/widget": "^0.0.114",
     "@tkey-mpc/common-types": "^8.2.2",
     "@truffle/hdwallet-provider": "^2.1.4",
     "@vanilla-extract/next-plugin": "^2.3.6",

src/components/stake/Widget.tsx

@@ -1,21 +1,61 @@
 import '@stakekit/widget/package/css'
 import { SKApp, darkTheme, lightTheme } from '@stakekit/widget'
-import useSafeWalletProvider from '../../services/safe-wallet-provider/useSafeWalletProvider'
 import { useDarkMode } from '../../hooks/useDarkMode'
 import css from './styles.module.css'
+import useSafeWalletProvider, { _useTxFlowApi } from '../../services/safe-wallet-provider/useSafeWalletProvider'
+import type { ComponentProps } from 'react'
+import { useMemo } from 'react'
+import useSafeInfo from '../../hooks/useSafeInfo'
+import { OperationType } from '@safe-global/safe-core-sdk-types'
+import type { AppInfo } from '../../services/safe-wallet-provider'
 
 export const Widget = () => {
-  const wallet = useSafeWalletProvider()
+  const safeProvider = useSafeWalletProvider()
+  const { safe, safeAddress } = useSafeInfo()
+  const txFlowApi = _useTxFlowApi(safe.chainId, safeAddress)
   const darkMode = useDarkMode()
 
-  if (!wallet) return null
+  const providerParams = useMemo<NonNullable<ComponentProps<typeof SKApp>['externalProviders']> | null>(() => {
+    if (!safeProvider || !txFlowApi) return null
 
-  console.log('wallet', wallet)
+    return {
+      type: 'safe_wallet',
+      provider: {
+        getAccounts: safeProvider.eth_accounts.bind(safeProvider),
+        getChainId: safeProvider.eth_chainId.bind(safeProvider),
+        getTransactionReceipt: safeProvider.eth_getTransactionReceipt.bind(safeProvider),
+        switchEthereumChain: safeProvider.wallet_switchEthereumChain.bind(safeProvider),
+        sendTransactions: ({
+          txs,
+          appInfo,
+        }: {
+          txs: {
+            gas: string | number
+            to: string
+            value: string
+            data: string
+          }[]
+          appInfo: AppInfo
+        }) =>
+          txFlowApi
+            .send(
+              {
+                txs,
+                params: { safeTxGas: 0, operation: txs.length > 1 ? OperationType.DelegateCall : OperationType.Call },
+              },
+              appInfo,
+            )
+            .then((res) => ({ hash: res.txHash ?? res.safeTxHash })),
+      },
+    }
+  }, [safeProvider, txFlowApi])
+
+  if (!providerParams) return null
   return (
     <main className={css.widgetRoot}>
       <SKApp
         theme={darkMode ? darkTheme : lightTheme}
-        externalProviders={{ type: 'safe_wallet', provider: wallet }}
+        externalProviders={providerParams}
         apiKey="3e82ff42-9fc4-49a7-b9b4-66da4d7c0f04"
       />
     </main>

src/components/tx-flow/flows/SafeAppsTx/ReviewSafeAppsTx.tsx

@@ -37,6 +37,10 @@ const ReviewSafeAppsTx = ({
       const isMultiSend = txs.length > 1
       const tx = isMultiSend ? await createMultiSendCallOnlyTx(txs) : await createTx(txs[0])
 
+      if (params?.operation) {
+        tx.data.operation = params.operation
+      }
+
       if (params?.safeTxGas !== undefined) {
         // FIXME: do it properly via the Core SDK
         // @ts-expect-error safeTxGas readonly

src/components/tx-flow/flows/SafeAppsTx/index.tsx

@@ -3,13 +3,14 @@ import TxLayout from '@/components/tx-flow/common/TxLayout'
 import type { SafeAppData } from '@safe-global/safe-gateway-typescript-sdk'
 import ReviewSafeAppsTx from './ReviewSafeAppsTx'
 import { AppTitle } from '@/components/tx-flow/flows/SignMessage'
+import type { OperationType } from '@safe-global/safe-core-sdk-types'
 
 export type SafeAppsTxParams = {
   appId?: string
   app?: Partial<SafeAppData>
   requestId: RequestId
   txs: BaseTransaction[]
-  params?: SendTransactionRequestParams
+  params?: SendTransactionRequestParams & { operation?: OperationType }
 }
 
 const SafeAppsTxFlow = ({

src/services/safe-wallet-provider/index.ts

@@ -2,6 +2,7 @@ import type { TransactionDetails } from '@safe-global/safe-gateway-typescript-sd
 import { TransactionStatus } from '@safe-global/safe-gateway-typescript-sdk'
 import type { TransactionReceipt } from 'ethers'
 import { numberToHex } from '@/utils/hex'
+import type { OperationType } from '@safe-global/safe-core-sdk-types'
 
 type SafeInfo = {
   safeAddress: string
@@ -24,7 +25,7 @@ export type WalletSDK = {
   signMessage: (message: string, appInfo: AppInfo) => Promise<{ signature?: string }>
   signTypedMessage: (typedData: unknown, appInfo: AppInfo) => Promise<{ signature?: string }>
   send: (
-    params: { txs: unknown[]; params: { safeTxGas: number } },
+    params: { txs: unknown[]; params: { safeTxGas: number; operation?: OperationType } },
     appInfo: AppInfo,
   ) => Promise<{ safeTxHash: string; txHash?: string }>
   getBySafeTxHash: (safeTxHash: string) => Promise<TransactionDetails>

src/services/safe-wallet-provider/useSafeWalletProvider.tsx

@@ -22,6 +22,7 @@ import { SignMessageOnChainFlow } from '@/components/tx-flow/flows'
 import { useAppSelector } from '@/store'
 import { selectOnChainSigning } from '@/store/settingsSlice'
 import { isOffchainEIP1271Supported } from '@/utils/safe-messages'
+import type { OperationType } from '@safe-global/safe-core-sdk-types'
 
 export const _useTxFlowApi = (chainId: string, safeAddress: string): WalletSDK | undefined => {
   const { safe } = useSafeInfo()
@@ -110,7 +111,7 @@ export const _useTxFlowApi = (chainId: string, safeAddress: string): WalletSDK |
         return await signMessage(typedData as EIP712TypedData, appInfo, Methods.signTypedMessage)
       },
 
-      async send(params: { txs: any[]; params: { safeTxGas: number } }, appInfo) {
+      async send(params: { txs: any[]; params: { safeTxGas: number; operation?: OperationType } }, appInfo) {
         const id = Math.random().toString(36).slice(2)
 
         const transactions = params.txs.map(({ to, value, data }) => {