Shixin 1

site/marketplace/lib/hooks/useZoomVirtualBackground.ts

@@ -0,0 +1,30 @@
+import { useState, useCallback } from 'react';
+import zoomSDK from '@zoom/appssdk';
+
+type PromiseType<T> = T extends Promise<infer P> ? P : never
+
+export type ZoomVirtualBackgroundResult = PromiseType<ReturnType<typeof zoomSDK.setVirtualBackground>>['message'] | 'Pendding' | 'Null'
+
+export function useZoomVirtualBackground() {
+  const [ state, setState ] = useState<ZoomVirtualBackgroundResult>('Null')
+
+  const upload = useCallback((data: ImageData | string) => {
+    const string = typeof data === 'string'
+    const params = string ? {
+      fileUrl: data
+    } : {
+      imageData: data
+    }
+    try {
+      zoomSDK.setVirtualBackground(params).then(resp => {
+        setState(resp.message)
+      }).catch(() => setState('Failure'))
+    } catch (err) {
+      setState('Failure')
+    }
+  }, [setState])
+  return {
+    state,
+    upload
+  }
+}

site/marketplace/next.config.js

@@ -2,7 +2,7 @@ const commerce = require('./commerce.config.json')
 const { withCommerceConfig } = require('./commerce-config')
 // const CircularDependencyPlugin = require('circular-dependency-plugin')
 const ContentSecurityPolicy = `
-  default-src 'self' data: blob: 'unsafe-inline' 'unsafe-eval' *.googleapis.com *.google.com *.gstatic.com vitals.vercel-insights.com *.googletagmanager.com *.firebase.com;
+  default-src 'self' data: blob: 'unsafe-inline' 'unsafe-eval' *.googleapis.com *.google.com *.gstatic.com vitals.vercel-insights.com *.googletagmanager.com *.firebase.com *.walletconnect.com;
   connect-src *;
 `
 // https://nextjs.org/docs/advanced-features/security-headers

site/marketplace/pages/create.tsx

@@ -28,6 +28,7 @@ import {
 import { marketplaceAddress } from '../../../packages/contract/config'
 import NFTMarketplace from '../../../packages/contract/artifacts/contracts/NFTMarketplace.sol/NFTMarketplace.json'
 import { createZoomConfig } from '@lib/zoom'
+import { useZoomVirtualBackground } from '@lib/hooks/useZoomVirtualBackground'
 
 const UploadIcon = '/image.svg'
 const IpfsHttpClient = createIpfsHttpClient({
@@ -69,6 +70,7 @@ export default function CreatePage() {
   useEffect(() => {
     createZoomConfig()
   }, [])
+  const zoombg = useZoomVirtualBackground()
   const { connect, connectors, isLoading, pendingConnector } = useConnect()
   const contract = useContract({
     addressOrName: marketplaceAddress,
@@ -384,6 +386,9 @@ export default function CreatePage() {
           >
             List NFT
           </Button>
+          <Button onClick={() => zoombg.upload('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfonEKk1Cbw674HQ-YckNKhIPr4-Vhh_TW9CiN4eaXYw&s')}>
+            test setbg{zoombg.state}
+          </Button>
           {errorMessage && (
             <>
               <span className="text-accent-8">

site/marketplace/tsconfig.json

@@ -26,8 +26,8 @@
       "@framework": ["../../packages/local/src"],
       "@framework/*": ["../../packages/local/src/*"],
       "@contract": ["../../packages/contract"]
-    }
+    },
   },
-  "include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],
+  "include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js", "../../node_modules/@zoom/appssdk/dist/sdk.d.ts"],
   "exclude": ["node_modules"]
 }