monerium integration

package.json

@@ -38,13 +38,15 @@
     "@emotion/react": "^11.10.0",
     "@emotion/server": "^11.10.0",
     "@emotion/styled": "^11.10.0",
+    "@monerium/sdk": "^2.3.0",
     "@moralisweb3/next": "^2.19.0",
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.11.10",
     "@mui/x-date-pickers": "^5.0.12",
     "@reduxjs/toolkit": "^1.8.2",
     "@safe-global/api-kit": "^1.1.0",
-    "@safe-global/protocol-kit": "^1.0.1",
+    "@safe-global/onramp-kit": "^1.1.0",
+    "@safe-global/protocol-kit": "^1.2.0",
     "@safe-global/safe-apps-sdk": "^7.10.1",
     "@safe-global/safe-core-sdk": "^3.3.3",
     "@safe-global/safe-core-sdk-utils": "^1.7.3",

src/components/folder-list/index.tsx

@@ -23,6 +23,7 @@ const FolderList: React.FC = () => {
       allOwnedSafes.get(137)?.forEach((safe: string) => folderList.push({ chainId: 137, address: `matic:${safe}` }))
       allOwnedSafes.get(10)?.forEach((safe: string) => folderList.push({ chainId: 10, address: `oeth:${safe}` }))
       allOwnedSafes.get(1)?.forEach((safe: string) => folderList.push({ chainId: 1, address: `eth:${safe}` }))
+      allOwnedSafes.get(5)?.forEach((safe: string) => folderList.push({ chainId: 5, address: `gor:${safe}` }))
       if (!folderList) {
         return
       }

src/hooks/useAllOwnedSafes.tsx

@@ -39,6 +39,14 @@ export const useAllOwnedSafes = (): any => {
             ethAdapter: ethAdapter as unknown as EthAdapter
           })
         },
+        {
+          chainId: 5,
+          service: new SafeApiKit({
+            txServiceUrl: 'https://safe-transaction-goerli.safe.global/',
+            //@ts-ignore
+            ethAdapter: ethAdapter as unknown as EthAdapter
+          })
+        },
         {
           chainId: 137,
           service: new SafeApiKit({

src/hooks/useMonerium.tsx

@@ -0,0 +1,41 @@
+import { moneriumPack } from "@/services/monerium";
+import { ethers } from "ethers";
+import Safe, { EthersAdapter } from '@safe-global/protocol-kit'
+import { useState, useEffect } from "react";
+import useWallet from "./wallets/useWallet";
+import useSafeAddress from "./useSafeAddress";
+
+export const useMonerium = () => {
+  const [monerium, setMonerium] = useState<any>(null);
+  const wallet = useWallet()
+
+  const safeAddress = useSafeAddress()
+
+  useEffect(() => {
+    if (!wallet?.address || !wallet?.provider) return
+    const provider = new ethers.providers.Web3Provider(wallet?.provider)
+    const safeOwner = provider.getSigner()
+    const ethAdapter = new EthersAdapter({ ethers, signerOrProvider: safeOwner })
+
+    const initMonerium = async () => {
+      const safeSdk = await Safe.create({
+        ethAdapter: ethAdapter,
+        safeAddress: safeAddress,
+      })
+
+      if (!safeSdk) return;
+      const monerium = await moneriumPack.init({ safeSdk });
+      return monerium
+    }
+
+    const mon = initMonerium();
+    mon.then(setMonerium)
+
+  }, [wallet?.address, wallet?.provider, safeAddress])
+
+
+
+  return {
+    monerium
+  }
+}

src/pages/chat.tsx

@@ -12,7 +12,9 @@ import ViewSidebarIcon from '@/public/images/chat/sidebar-right-svgrepo-com.svg'
 import { ArrowBackIos } from '@mui/icons-material'
 import { useAppDispatch } from '@/store'
 import {
-  Box, Container,
+  Box,
+  Container,
+  Button,
   Drawer,
   IconButton, Toolbar,
   Typography,
@@ -26,6 +28,10 @@ import { useRouter } from 'next/router'
 import React, { useEffect, useState } from 'react'
 import { openModal } from '@/store/modalServiceSlice'
 import { modalTypes } from '@/components/chat/modals'
+import { useMonerium } from '@/hooks/useMonerium'
+import { moneriumPack } from '@/services/monerium'
+import { selectAuthCode } from '@/store/moneriumCodeSlice'
+import { useAppSelector } from '@/store'
 
 const ChatWrapper = dynamic(() => import('@/components/chat/ChatWrapper'), { ssr: false })
 
@@ -50,6 +56,7 @@ const Main = styled('div', { shouldForwardProp: (prop) => prop !== 'open' })<{
 }))
 
 const Chat = () => {
+  const monerium = useMonerium()
   const matches = useMediaQuery('(max-width: 900px)')
   const matchesDesktop = useMediaQuery('(min-width: 901px)')
   //routing
@@ -59,12 +66,30 @@ const Chat = () => {
   const { safe, safeAddress, safeLoading } = useSafeInfo()
   const owners = safe?.owners || ['']
   const ownerArray = owners.map((owner) => owner.value)
+  const authCode = useAppSelector((state) => selectAuthCode(state))
   //modals and modal control
   const [createSafe, setCreateSafe] = useState<boolean>(false)
   const [open, setOpen] = useState<boolean>((safeAddress && !safeLoading) ? true : false)
   const [app, toggleApp] = useState<boolean>(false)
   const dispatch = useAppDispatch()
 
+/*   useEffect(() => {
+    const getMoneriumClient = async () => {
+      console.log('authCode', authCode.slice(7))
+      const safeMoneriumClient = await moneriumPack.open({ authCode: 'Q-tTKVGhRXaZRihKHiYRWw' })
+      console.log('safeMoneriumClient', safeMoneriumClient)
+    }
+    getMoneriumClient()
+  }, [authCode, monerium]) */
+
+  const handleOpen = async () => {
+    if (safe?.chainId === wallet?.chainId) {
+      await moneriumPack.open({ redirectUrl: 'https://web-core-git-monerium-integration-decentra-hq.vercel.app' })
+    } else {
+      window.alert('Please connect to the correct network')
+    }
+  }
+
   useEffect(() => {
     if (router.asPath.includes('chain')) {
       setCreateSafe(true)
@@ -122,6 +147,7 @@ const Chat = () => {
             anchor="left"
           >
             <SafeList createSafe={createSafe} setCreateSafe={setCreateSafe} />
+            <Button onClick={handleOpen}>Link Monerium</Button>
           </Drawer>
         }
         <Main open={open} sx={{ flexGrow: 1, bgcolor: 'var(--color-background-lightcolor)' }}>

src/pages/index.tsx

@@ -4,6 +4,8 @@ import useLastSafe from '@/hooks/useLastSafe'
 import { Box, useMediaQuery } from '@mui/material'
 import { useRouter } from 'next/router'
 import { useEffect, useLayoutEffect } from 'react'
+import { useAppDispatch } from '@/store'
+import { addAuthCode } from '@/store/moneriumCodeSlice'
 
 const useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
 
@@ -13,11 +15,15 @@ const IndexPage = () => {
   const lastSafe = useLastSafe()
   const safeAddress = safe || lastSafe
   const matches = useMediaQuery('(max-width: 900px)')
+  const dispatch = useAppDispatch()
 
   useIsomorphicEffect(() => {
     if (router.pathname !== AppRoutes.index) {
       return
     }
+    if (router.asPath.includes('?code=')) {
+      dispatch(addAuthCode({ authCode: router.asPath }))
+    }
     console.log(matches)
     router.replace(
       safeAddress

src/services/monerium/index.ts

@@ -0,0 +1,6 @@
+import { MoneriumPack } from '@safe-global/onramp-kit'
+
+export const moneriumPack = new MoneriumPack({
+  clientId: 'e7d328a1-3773-11ee-94a6-369e770da2e3', // Get your client id from Moner
+  environment: 'sandbox' // Use the proper Monerium environment ('sandbox' | 'production')})
+})

src/store/index.ts

@@ -27,8 +27,10 @@ import { safeAppsSlice } from './safeAppsSlice'
 import { safeMessagesMiddleware, safeMessagesSlice } from './safeMessagesSlice'
 import { pendingSafeMessagesSlice } from './pendingSafeMessagesSlice'
 import { modalSlice } from './modalServiceSlice'
+import { moneriumSlice } from './moneriumCodeSlice'
 
 const rootReducer = combineReducers({
+  [moneriumSlice.name]: moneriumSlice.reducer,
   [modalSlice.name]: modalSlice.reducer,
   [chatServiceSlice.name]: chatServiceSlice.reducer,
   [chainsSlice.name]: chainsSlice.reducer,

src/store/moneriumCodeSlice.ts

@@ -0,0 +1,34 @@
+import { createSlice, createSelector, type PayloadAction } from "@reduxjs/toolkit";
+import type { RootState } from '@/store'
+
+export interface MoneriumState {
+  authCode: string;
+
+}
+
+const initialState: MoneriumState = {
+  authCode: '',
+};
+
+export const moneriumSlice = createSlice({
+  name: 'monerium',
+  initialState,
+  reducers: {
+    addAuthCode: (state, { payload }: PayloadAction<{ authCode: string }>) => {
+      state.authCode = payload.authCode;
+    },
+  },
+})
+
+export const { addAuthCode } = moneriumSlice.actions
+
+export const selectAuthCode = (state: RootState): string => {
+  return state.monerium.authCode
+}
+
+export const selectMoneriumState = createSelector(
+  selectAuthCode,
+  (authCode: string) => ({ authCode })
+)
+
+export default moneriumSlice.reducer

yarn.lock

@@ -2722,6 +2722,11 @@
     semver "^7.3.8"
     superstruct "^1.0.3"
 
+"@monerium/sdk@^2.3.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@monerium/sdk/-/sdk-2.6.0.tgz#5cd24809474097421ecd11b1a0176becc4daee58"
+  integrity sha512-NTvMks6M7HQNdFAQnfu5wVudr2Oxxa+vq0K8gTc4G4g7Sz/DIXYINclIzGQCnAJ7WVUwCmu0wM1Cnl8nWDi/7g==
+
 "@moralisweb3/api-utils@^2.19.0":
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/@moralisweb3/api-utils/-/api-utils-2.19.0.tgz#60f9fd06e229a0b2142a3d9bcc425e0705665c46"
@@ -3383,17 +3388,39 @@
     "@safe-global/safe-core-sdk-types" "^2.0.0"
     node-fetch "^2.6.6"
 
-"@safe-global/protocol-kit@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@safe-global/protocol-kit/-/protocol-kit-1.0.1.tgz#05c00436a75bebedb2cc35efc461c9aa909f8f89"
-  integrity sha512-ZLfFxV6U9f5bJKcCQmrDJq/FzDGz7FMpXOjJ+G90VkaqBme3En73sN1KGd7++VKS7H3ukyM/xetrJs2mtvHlZg==
+"@safe-global/api-kit@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@safe-global/api-kit/-/api-kit-1.3.0.tgz#3606aa52a3d5d0d46817fafc38572be7be1eaf31"
+  integrity sha512-3fdvoBtgufzmqmoBHir7vbS5N2t9Yc4kTeIJmAgmAGl8rHAy3z1bSv5uoEHYSMow34q1Am1aUar6vVAwwkIXhg==
+  dependencies:
+    "@ethersproject/abstract-signer" "^5.7.0"
+    "@safe-global/safe-core-sdk-types" "^2.2.0"
+    node-fetch "^2.6.6"
+
+"@safe-global/onramp-kit@^1.1.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@safe-global/onramp-kit/-/onramp-kit-1.3.0.tgz#463482bc4a985b960d29f2ea9a3ac7b54cc28844"
+  integrity sha512-yxyTrh7JMJogVrUd942EuGrJLyUc9Q1V0XoOkzeQYf874pubiglQ+pTi6D6+DfeHUAMLm9aHYAnTmSOenHo8DA==
+  dependencies:
+    "@monerium/sdk" "^2.3.0"
+    "@safe-global/api-kit" "^1.3.0"
+    "@safe-global/protocol-kit" "^1.2.0"
+    "@safe-global/safe-core-sdk-types" "^2.2.0"
+    "@stripe/crypto" "^0.0.4"
+    "@stripe/stripe-js" "^1.52.0"
+    ethers "^5.7.0"
+
+"@safe-global/protocol-kit@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@safe-global/protocol-kit/-/protocol-kit-1.2.0.tgz#5501fa0e2a1b4ad03cd5a4ee12bb9e799e1dd5a7"
+  integrity sha512-drU2uK30AZ4tqI/9ER7PGMD/lZp/5B9T02t+noTk7WF9Xb7HxskJd8GNU01KE55oyH31Y0AfXaE68H/f9lYa4A==
   dependencies:
     "@ethersproject/address" "^5.7.0"
     "@ethersproject/bignumber" "^5.7.0"
     "@ethersproject/solidity" "^5.7.0"
-    "@safe-global/safe-deployments" "^1.22.0"
+    "@safe-global/safe-deployments" "^1.26.0"
     ethereumjs-util "^7.1.5"
-    semver "^7.3.8"
+    semver "^7.5.4"
     web3 "^1.8.1"
     web3-core "^1.8.1"
     web3-utils "^1.8.1"
@@ -3444,6 +3471,17 @@
     web3-core "^1.8.1"
     web3-utils "^1.8.1"
 
+"@safe-global/safe-core-sdk-types@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@safe-global/safe-core-sdk-types/-/safe-core-sdk-types-2.2.0.tgz#2e34a5089035719e9a92a0bc6aa181c2edb0f108"
+  integrity sha512-vVG9qQnUYx+Xwsbuqraq25MPJX1I1aV1P81ZnHZa1lEMU7stqYWAmykUm/mvqsm8+AsvEB/wBKlFjbFJ/duzoA==
+  dependencies:
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/contracts" "^5.7.0"
+    "@safe-global/safe-deployments" "^1.26.0"
+    web3-core "^1.8.1"
+    web3-utils "^1.8.1"
+
 "@safe-global/safe-core-sdk-utils@^1.7.3":
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/@safe-global/safe-core-sdk-utils/-/safe-core-sdk-utils-1.7.3.tgz#40eeefeafa1cf4dad18d77cad50ac005b2b7f6fe"
@@ -3473,6 +3511,13 @@
   dependencies:
     semver "^7.3.7"
 
+"@safe-global/safe-deployments@^1.26.0":
+  version "1.26.0"
+  resolved "https://registry.yarnpkg.com/@safe-global/safe-deployments/-/safe-deployments-1.26.0.tgz#b83615b3b5a66e736e08f8ecf2801ed988e9e007"
+  integrity sha512-Tw89O4/paT19ieMoiWQbqRApb0Bef/DxweS9rxodXAM5EQModkbyFXGZca+YxXE67sLvWjLr2jJUOxwze8mhGw==
+  dependencies:
+    semver "^7.3.7"
+
 "@safe-global/safe-ethers-lib@^1.9.3":
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/@safe-global/safe-ethers-lib/-/safe-ethers-lib-1.9.3.tgz#bdff0ea52a9bd976f0325aa22571e0daeca22961"
@@ -3798,6 +3843,16 @@
     "@stablelib/random" "^1.0.2"
     "@stablelib/wipe" "^1.0.1"
 
+"@stripe/crypto@^0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@stripe/crypto/-/crypto-0.0.4.tgz#51dbcb3750c75a6b8a6c8775381af82367359146"
+  integrity sha512-gcD/aG0N90ZrNVppWYf9ADPECptw6PVtF67VIeaFP7fhgd2NvNx8erkzlcvk3VIVSY+bZ6YGX7c7cASoySX74Q==
+
+"@stripe/stripe-js@^1.52.0":
+  version "1.54.2"
+  resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-1.54.2.tgz#0665848e22cbda936cfd05256facdfbba121438d"
+  integrity sha512-R1PwtDvUfs99cAjfuQ/WpwJ3c92+DAMy9xGApjqlWQMj0FKQabUAys2swfTRNzuYAYJh7NqK2dzcYVNkKLEKUg==
+
 "@supabase/functions-js@^2.1.0":
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/@supabase/functions-js/-/functions-js-2.1.2.tgz#340a8d3845ef2014338b13a6d33cfa90eb745b14"
@@ -8693,7 +8748,7 @@ ethers@5.5.4:
     "@ethersproject/web" "5.5.1"
     "@ethersproject/wordlists" "5.5.0"
 
-ethers@5.7.2, ethers@^5.7.2:
+ethers@5.7.2, ethers@^5.7.0, ethers@^5.7.2:
   version "5.7.2"
   resolved "https://registry.yarnpkg.com/ethers/-/ethers-5.7.2.tgz#3a7deeabbb8c030d4126b24f84e525466145872e"
   integrity sha512-wswUsmWo1aOK8rR7DIKiWSw9DbLWe6x98Jrn8wcTflTVvaXhAMaB5zGAXy0GYQEQp9iO1iSHWVyARQm11zUtyg==
@@ -13563,6 +13618,13 @@ semver@^7.3.2, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8:
   dependencies:
     lru-cache "^6.0.0"
 
+semver@^7.5.4:
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
+  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
+  dependencies:
+    lru-cache "^6.0.0"
+
 semver@~5.4.1:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"