feat: Generate Wert ENS image locally

decentraland · Apr 24, 2024 · c0d108a · c0d108a
1 parent f033cc9
commit c0d108a
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 19 deletions.
diff --git a/webapp/jest.config.ts b/webapp/jest.config.ts
@@ -5,7 +5,7 @@ export default async (): Promise<Config> => {
   return {
     verbose: true,
     testEnvironment: 'jsdom',
-    setupFiles: ['<rootDir>/src/tests/beforeSetupTests.ts'],
+    setupFiles: ['<rootDir>/src/tests/beforeSetupTests.ts', 'jest-canvas-mock'],
     setupFilesAfterEnv: ['<rootDir>/src/tests/afterSetupTest.ts'],
     transform: {
       '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':

diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git a/webapp/package.json b/webapp/package.json
@@ -88,6 +88,7 @@
     "husky": "^9.0.11",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
+    "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
     "node-fetch": "^2.7.0",
     "prettier": "^3.2.5",

diff --git a/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.css b/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.css
@@ -49,6 +49,7 @@
 
 .ClaimNameFatFingerModal.ui.modal .capsWarning {
   border: 1px solid #716b7c;
+  margin-top: 15px;
   padding: 12px 16px;
   border-radius: 6px;
   color: #a09ba8;
@@ -149,12 +150,7 @@
   position: absolute;
   aspect-ratio: 1/1;
   width: 130%;
-  background-image: radial-gradient(
-      100% 100% at 6% 9%,
-      #ffbc5bff 2%,
-      #ffffff00 73%
-    ),
-    linear-gradient(60deg, #ff2d55 18%, #c640cd 100%);
+  background-image: radial-gradient(100% 100% at 6% 9%, #ffbc5bff 2%, #ffffff00 73%), linear-gradient(60deg, #ff2d55 18%, #c640cd 100%);
   z-index: 0;
   animation: rotate 4s linear infinite;
 }
@@ -192,11 +188,7 @@
   line-height: 22px;
 }
 
-.ClaimNameFatFingerModal.ui.modal
-  .ui.form
-  .dcl.field
-  .ui.input
-  input::placeholder {
+.ClaimNameFatFingerModal.ui.modal .ui.form .dcl.field .ui.input input::placeholder {
   color: #716b7c;
   font-size: 16px;
   font-style: normal;
@@ -254,10 +246,7 @@
     margin-top: auto;
   }
 
-  .ClaimNameFatFingerModal.ui.modal
-    > .ui.form
-    > .actions
-    > .ui.button:not(.primary),
+  .ClaimNameFatFingerModal.ui.modal > .ui.form > .actions > .ui.button:not(.primary),
   .ClaimNameFatFingerModal.ui.modal .ui.button:not(.primary) {
     margin: 0;
   }

diff --git a/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.spec.tsx b/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.spec.tsx
@@ -12,6 +12,9 @@ import { Props } from './ClaimNameFatFingerModal.types'
 
 jest.mock('../../../modules/vendor/decentraland/marketplace/api')
 jest.mock('../../../contracts/factories/DCLController__factory')
+jest.mock('../../AssetImage/EnsImage/utils', () => ({
+  drawImage: jest.fn()
+}))
 jest.mock(
   'decentraland-dapps/dist/lib/eth',
   () =>

diff --git a/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.tsx b/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.tsx
@@ -12,8 +12,8 @@ import { config } from '../../../config'
 import { DCLController__factory } from '../../../contracts/factories/DCLController__factory'
 import { Asset } from '../../../modules/asset/types'
 import { PRICE } from '../../../modules/ens/utils'
-import { MARKETPLACE_SERVER_URL } from '../../../modules/vendor/decentraland/marketplace/api'
 import * as events from '../../../utils/events'
+import { drawImage } from '../../AssetImage/EnsImage/utils'
 import { BuyWithCardButton } from '../../AssetPage/SaleActionBox/BuyNFTButtons/BuyWithCardButton'
 import { BuyWithCryptoButton } from '../../AssetPage/SaleActionBox/BuyNFTButtons/BuyWithCryptoButton'
 import { Props } from './ClaimNameFatFingerModal.types'
@@ -62,6 +62,13 @@ const ClaimNameFatFingerModal = ({
 
       const sc_input_data = factory.interface.encodeFunctionData('register', [ENSName, wallet.address])
 
+      // Generate the image that will be loaded by the Wert modal
+      const temporaryCanvas = document.createElement('canvas')
+      temporaryCanvas.width = 330
+      temporaryCanvas.height = 330
+      await drawImage(temporaryCanvas, ENSName, 330, 330)
+      const dataUrl = temporaryCanvas.toDataURL()
+
       const data = {
         address: wallet.address,
         commodity: isDev ? 'TTS' : 'MANA',
@@ -75,7 +82,7 @@ const ClaimNameFatFingerModal = ({
           item_info: {
             category: 'Decentraland NAME',
             author: 'Decentraland',
-            image_url: `${MARKETPLACE_SERVER_URL}/ens/generate?ens=${ENSName}&width=330&height=330`,
+            image_url: dataUrl,
             ENSName,
             seller: 'DCL Names'
           }