From f73bc1d09481f5d35993312ff1879ca6c4a9f6a4 Mon Sep 17 00:00:00 2001
From: Daniel Dimitrov <daniel@compojoom.com>
Date: Mon, 26 Feb 2024 15:13:00 +0100
Subject: [PATCH] update widget to v 0.0.107

---
 package.json                           |  2 +-
 src/components/stake/Widget.tsx        | 27 ++++++++++++++++++--------
 src/components/stake/styles.module.css | 13 +++++++++++++
 yarn.lock                              | 18 ++++++++---------
 4 files changed, 42 insertions(+), 18 deletions(-)
 create mode 100644 src/components/stake/styles.module.css

diff --git a/package.json b/package.json
index 6141938617..a299a9553e 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,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.102",
+    "@stakekit/widget": "^0.0.107",
     "@tkey-mpc/common-types": "^8.2.2",
     "@truffle/hdwallet-provider": "^2.1.4",
     "@vanilla-extract/next-plugin": "^2.3.6",
diff --git a/src/components/stake/Widget.tsx b/src/components/stake/Widget.tsx
index f65b2eeb83..c45ae0dd53 100644
--- a/src/components/stake/Widget.tsx
+++ b/src/components/stake/Widget.tsx
@@ -1,12 +1,23 @@
-"use client"
-
-import "@stakekit/widget/package/css";
-import { SKApp, darkTheme } from "@stakekit/widget"
+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'
 
 export const Widget = () => {
+  const wallet = useSafeWalletProvider()
+  const darkMode = useDarkMode()
+
+  if (!wallet) return null
+
+  console.log('wallet', wallet)
   return (
-    <>
-      <SKApp apiKey="api-key-here" theme={darkTheme} connectKitForceTheme="darkMode" />
-    </>
+    <main className={css.widgetRoot}>
+      <SKApp
+        theme={darkMode ? darkTheme : lightTheme}
+        externalProviders={{ type: 'safe_wallet', provider: wallet }}
+        apiKey="3e82ff42-9fc4-49a7-b9b4-66da4d7c0f04"
+      />
+    </main>
   )
-}
+}
\ No newline at end of file
diff --git a/src/components/stake/styles.module.css b/src/components/stake/styles.module.css
new file mode 100644
index 0000000000..99124a6aba
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 2dac1820e3..3a376a61d1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5731,10 +5731,10 @@
   resolved "https://registry.yarnpkg.com/@stakekit/common/-/common-0.0.24.tgz#579afa2a7082989614888c0ad004b807ff2cc78d"
   integrity sha512-BNT1+PD7afWp10eeUFcx19/vGeKNdwHJTXlXDCnmepMHALc+byaWcvPVQ0bn25ax0y5GlfgPLhsuCTecN9qPfg==
 
-"@stakekit/rainbowkit@^1.3.9":
-  version "1.3.9"
-  resolved "https://registry.yarnpkg.com/@stakekit/rainbowkit/-/rainbowkit-1.3.9.tgz#d9c487bcf4d427d7b47d2c0d33170956c1fca5e4"
-  integrity sha512-dP5iLKm6GTOFN3oAevG4sKy1y2BWAGlUWEv1wj+ScO4nAQUMkYfByxiRiatRQrEgDT8Azdx5L68jOFCet4GxMA==
+"@stakekit/rainbowkit@^1.3.10":
+  version "1.3.10"
+  resolved "https://registry.yarnpkg.com/@stakekit/rainbowkit/-/rainbowkit-1.3.10.tgz#93fd8618eed9ff5e7c09bd79910b64f750367813"
+  integrity sha512-byLzOwzzE2JHnx8jY1OsH3plUjVEKINqd4aPo9w1EAVN+FDaV61BZPO8tHFSsqiQxK/gWNThFgNSOzVEMMn9fQ==
   dependencies:
     "@vanilla-extract/css" "1.9.1"
     "@vanilla-extract/dynamic" "2.0.2"
@@ -5745,10 +5745,10 @@
     react-remove-scroll "2.5.4"
     ua-parser-js "^1.0.35"
 
-"@stakekit/widget@^0.0.102":
-  version "0.0.102"
-  resolved "https://registry.yarnpkg.com/@stakekit/widget/-/widget-0.0.102.tgz#199a94fc8c7d19ad5b8105e21ce44cc5f5d387a7"
-  integrity sha512-3JPWptNm6djR5iBEPFpz2V0tOMlA2Oj5v/v7qo3OZOS3fZtoD6+EoGTVhbDbSW/hHCuEPu3Bbk/AxdSQlrT3nw==
+"@stakekit/widget@^0.0.107":
+  version "0.0.107"
+  resolved "https://registry.yarnpkg.com/@stakekit/widget/-/widget-0.0.107.tgz#6afb482bb11dd8a772544c44819e3668322b7e5b"
+  integrity sha512-uaFSL5Kx4l4gb3f3z7sTedPz75yndqgQ6nwMtfzQpcu59J1Cn6e9Xr+OzRbXyH13Dw+LQXG1N5EIu714aXdXMQ==
   dependencies:
     "@cassiozen/usestatemachine" "^1.0.1"
     "@cosmjs/amino" "^0.32.2"
@@ -5764,7 +5764,7 @@
     "@radix-ui/react-dropdown-menu" "^2.0.6"
     "@stakekit/api-hooks" "^0.0.56"
     "@stakekit/common" "^0.0.24"
-    "@stakekit/rainbowkit" "^1.3.9"
+    "@stakekit/rainbowkit" "^1.3.10"
     "@tanstack/react-query" "^5.17.19"
     "@tanstack/react-query-devtools" "^5.20.5"
     "@tronweb3/tronwallet-abstract-adapter" "^1.1.6"