Feat: stake

next.config.mjs

@@ -35,6 +35,7 @@ const nextConfig = {
     optimizePackageImports: ['@mui/material', '@mui/icons-material', 'lodash', 'date-fns', '@sentry/react', '@gnosis.pm/zodiac'],
   },
   webpack(config) {
+    config.externals.push("pino-pretty", "lokijs", "encoding")
     config.module.rules.push({
       test: /\.svg$/i,
       issuer: { and: [/\.(js|ts|md)x?$/] },

package.json

@@ -64,8 +64,10 @@
     "@safe-global/safe-modules-deployments": "^1.2.0",
     "@sentry/react": "^7.91.0",
     "@spindl-xyz/attribution-lite": "^1.4.0",
+    "@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",
     "@walletconnect/utils": "^2.11.1",
     "@walletconnect/web3wallet": "^1.10.1",
     "@web3-onboard/coinbase": "^2.2.6",
@@ -98,7 +100,9 @@
     "react-hook-form": "7.41.1",
     "react-papaparse": "^4.0.2",
     "react-redux": "^8.0.5",
-    "semver": "^7.5.2"
+    "semver": "^7.5.2",
+    "viem": "^1.21.4",
+    "wagmi": "^1.4.13"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.1.0",

src/components/sidebar/SidebarNavigation/config.tsx

@@ -36,6 +36,11 @@ export const navItems: NavItem[] = [
     icon: <SvgIcon component={ABIcon} inheritViewBox />,
     href: AppRoutes.addressBook,
   },
+  {
+    label: 'Stake',
+    icon: <SvgIcon component={ABIcon} inheritViewBox />,
+    href: AppRoutes.stake,
+  },
   {
     label: 'Apps',
     icon: <SvgIcon component={AppsIcon} inheritViewBox />,

src/components/stake/Widget.tsx

@@ -0,0 +1,63 @@
+import '@stakekit/widget/package/css'
+import { SKApp, darkTheme, lightTheme } from '@stakekit/widget'
+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 safeProvider = useSafeWalletProvider()
+  const { safe, safeAddress } = useSafeInfo()
+  const txFlowApi = _useTxFlowApi(safe.chainId, safeAddress)
+  const darkMode = useDarkMode()
+
+  const providerParams = useMemo<NonNullable<ComponentProps<typeof SKApp>['externalProviders']> | null>(() => {
+    if (!safeProvider || !txFlowApi) return null
+
+    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={providerParams}
+        apiKey="3e82ff42-9fc4-49a7-b9b4-66da4d7c0f04"
+      />
+    </main>
+  )
+}

src/components/stake/styles.module.css

@@ -0,0 +1,13 @@
+main.widgetRoot {
+    position: relative;
+    overflow-y: scroll;
+    height: calc(100vh - var(--header-height));
+}
+
+main.widgetRoot div[data-rk='stakekit'] > div[data-select-modal] {
+    position: absolute;
+}
+
+main.widgetRoot div[data-rk='stakekit'][role='dialog'] {
+    position: absolute;
+}

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/config/routes.ts

@@ -7,6 +7,7 @@ export const AppRoutes = {
   index: '/',
   imprint: '/imprint',
   home: '/home',
+  stake: '/stake',
   cookie: '/cookie',
   addressBook: '/address-book',
   addOwner: '/addOwner',

src/pages/stake.tsx

@@ -0,0 +1,18 @@
+import type { NextPage } from 'next'
+import Head from 'next/head'
+import { Widget } from '@/components/stake/Widget'
+const Stake: NextPage = () => {
+  return (
+    <>
+      <Head>
+        <title>{'Safe{Wallet} – Stake'}</title>
+      </Head>
+
+      <main>Stake</main>
+
+      <Widget />
+    </>
+  )
+}
+
+export default Stake

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 }) => {