8102650533

Committed 29 Feb 2024 09:09PM UTC coverage: 65.69% (-0.3%) from 65.994%

Build # 8102650533

Build Type

Pull #2152

github

Committed by

LautaroPetaccio

Commit Message

fix: Tests

Pull Request Pull Request #2152: feat: Show new ENS images

Run Details

2474 of 4892 branches covered (50.57%)

Branch coverage included in aggregate %.

34 of 83 new or added lines in 5 files covered. (40.96%)

13 existing lines in 6 files now uncovered.

7547 of 10363 relevant lines covered (72.83%)

70.38 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

23.38

/webapp/src/components/AssetImage/EnsImage/utils.ts

import logoImg from '../../../images/logo_dcl.svg'

const gradientColors = [
  { min: 2, max: 3, colors: ['#C640CD', '#691FA9'] }, // Purple gradient for name length 2-3
  { min: 4, max: 5, colors: ['#FF2D55', '#FFBC5B'] }, // Orange gradient for name length 4-5
  { min: 5, max: 6, colors: ['#73FFAF', '#1A9850'] }, // Green gradient for name length 5-6
  { min: 7, max: 8, colors: ['#81D1FF', '#3077E1'] }, // Blue gradient for name length 7-8
  { min: 9, max: 10, colors: ['#F6C1FF', '#FF4BED'] }, // Pink gradient for name length 9-10
  { min: 11, max: 15, colors: ['#FF9EB1', '#FF2D55'] } // Red gradient for name length 11-15 (max length)
]

const fontFile = new FontFace(
  'Inter',
  'url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2)'
)

document.fonts.add(fontFile)
const promiseOfLoadedFont = fontFile.load()

function getGradientColors(nameLength: number) {
  // Find the gradient that matches the length of the name
  const matchingGradient = gradientColors.find(
    gradient => nameLength >= gradient.min && nameLength <= gradient.max
  )
  // Return the colors if found, or default colors if no match
  return matchingGradient ? matchingGradient.colors : ['#000000', '#FFFFFF'] // Default to black and white if no match
}

const promiseOfALogo = new Promise<HTMLImageElement>((resolve, reject) => {
  const img = new Image()
  img.src = logoImg
  img.onload = () => resolve(img)
  img.onabort = reject
  img.onerror = reject
})

export async function drawImage(
  canvas: HTMLCanvasElement,
  name: string,
  width: number,
  height: number,
  onlyLogo?: boolean
): Promise<void> {
  // Create a canvas and get the context
  const ctx = canvas.getContext('2d')

  const borderRadius = 8
  let nameYPosition = 0
  if (!ctx) {
    return
  }

  ctx.fillStyle = '#000000' // Set the background color
  ctx.fillRect(0, 0, width, height)

  ctx.canvas.width = width
  ctx.canvas.height = height

  // Create a rounded rectangle path
  ctx.beginPath()
  ctx.moveTo(borderRadius, 0)
  ctx.lineTo(width - borderRadius, 0)
  ctx.quadraticCurveTo(width, 0, width, borderRadius)
  if (onlyLogo) {
    ctx.lineTo(width, height - borderRadius)
    ctx.quadraticCurveTo(width, height, width - borderRadius, height)
    ctx.lineTo(borderRadius, height)
    ctx.quadraticCurveTo(0, height, 0, height - borderRadius)
  } else {
    ctx.lineTo(width, height)
    ctx.lineTo(0, height)
  }
  ctx.lineTo(0, borderRadius)
  ctx.quadraticCurveTo(0, 0, borderRadius, 0)
  ctx.closePath()

  // Clip the path so everything drawn afterwards will be within rounded corners
  ctx.clip()

  // Generate gradient based on the name length
  const colors = getGradientColors(name.length)

  const gradient = ctx.createLinearGradient(0, 0, width, height)
  gradient.addColorStop(0, colors[0])
  gradient.addColorStop(1, colors[1])
  ctx.fillStyle = gradient
  ctx.fillRect(0, 0, width, height)

  if (!onlyLogo) {
    try {
      await promiseOfLoadedFont
      ctx.font = '600 24px Inter' // This sets the font weight to 600 and the font size to 40px
      ctx.fillStyle = '#FCFCFC'
      ctx.textAlign = 'center'
      ctx.textBaseline = 'middle'

      // Calculate the vertical center for the name
      nameYPosition = height / 2 + 10 // Adjust as needed
      ctx.fillText(name, width / 2, nameYPosition)

      ctx.font = '700 16px Inter' // This sets the font weight to700 and the font size to 18px
      ctx.fillStyle = '#FCFCFCCC'
      ctx.textAlign = 'center'
      ctx.textBaseline = 'middle'
      const dclEthYPosition = nameYPosition + 30 // Position "DCL.ETH" below the name
      ctx.fillText('DCL.ETH', width / 2, dclEthYPosition)
    } catch (e) {
      console.error('Error loading fonts', e)
    }
  }

  // Load and draw the logo
  try {
    const logoWidth = onlyLogo ? width * 0.8 : 40 // LOGO WIDTH
    const logoHeight = onlyLogo ? height * 0.8 : 40 // LOGO HEIGHT
    const logoXPosition = width / 2 - logoWidth / 2 // Center the logo
    const logoYPosition = onlyLogo
      ? height / 2 - logoHeight / 2
      : nameYPosition - logoHeight - 25 // Adjust space above the name
    ctx.drawImage(
      await promiseOfALogo,
      logoXPosition,
      logoYPosition,
      logoWidth,
      logoHeight
    )
  } catch (e) {
    console.error('Error loading logo', e)
  }
}

1	import logoImg from '../../../images/logo_dcl.svg'	9✔
2
3	const gradientColors = [	9✔
4	{ min: 2, max: 3, colors: ['#C640CD', '#691FA9'] }, // Purple gradient for name length 2-3
5	{ min: 4, max: 5, colors: ['#FF2D55', '#FFBC5B'] }, // Orange gradient for name length 4-5
6	{ min: 5, max: 6, colors: ['#73FFAF', '#1A9850'] }, // Green gradient for name length 5-6
7	{ min: 7, max: 8, colors: ['#81D1FF', '#3077E1'] }, // Blue gradient for name length 7-8
8	{ min: 9, max: 10, colors: ['#F6C1FF', '#FF4BED'] }, // Pink gradient for name length 9-10
9	{ min: 11, max: 15, colors: ['#FF9EB1', '#FF2D55'] } // Red gradient for name length 11-15 (max length)
10	]
11
12	const fontFile = new FontFace(	9✔
13	'Inter',
14	'url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2)'
15	)
16
17	document.fonts.add(fontFile)	9✔
18	const promiseOfLoadedFont = fontFile.load()	9✔
19
20	function getGradientColors(nameLength: number) {
21	// Find the gradient that matches the length of the name
NEW 22	const matchingGradient = gradientColors.find(	×
NEW 23	gradient => nameLength >= gradient.min && nameLength <= gradient.max	×
24	)
25	// Return the colors if found, or default colors if no match
26	return matchingGradient ? matchingGradient.colors : ['#000000', '#FFFFFF'] // Default to black and white if no match	×
27	}
28
29	const promiseOfALogo = new Promise<HTMLImageElement>((resolve, reject) => {	9✔
30	const img = new Image()	9✔
31	img.src = logoImg	9✔
32	img.onload = () => resolve(img)	9✔
33	img.onabort = reject	9✔
34	img.onerror = reject	9✔
35	})
36
37	export async function drawImage(	1✔
38	canvas: HTMLCanvasElement,
39	name: string,
40	width: number,
41	height: number,
42	onlyLogo?: boolean
43	): Promise<void> {
44	// Create a canvas and get the context
45	const ctx = canvas.getContext('2d')	1✔
46
47	const borderRadius = 8	1✔
48	let nameYPosition = 0	1✔
49	if (!ctx) {	1✔
50	return	1✔
51	}
52
53	ctx.fillStyle = '#000000' // Set the background color
NEW 54	ctx.fillRect(0, 0, width, height)	×
55
NEW 56	ctx.canvas.width = width	×
NEW 57	ctx.canvas.height = height	×
58
59	// Create a rounded rectangle path
NEW 60	ctx.beginPath()	×
NEW 61	ctx.moveTo(borderRadius, 0)	×
NEW 62	ctx.lineTo(width - borderRadius, 0)	×
NEW 63	ctx.quadraticCurveTo(width, 0, width, borderRadius)	×
NEW 64	if (onlyLogo) {	×
NEW 65	ctx.lineTo(width, height - borderRadius)	×
NEW 66	ctx.quadraticCurveTo(width, height, width - borderRadius, height)	×
NEW 67	ctx.lineTo(borderRadius, height)	×
NEW 68	ctx.quadraticCurveTo(0, height, 0, height - borderRadius)	×
69	} else {
NEW 70	ctx.lineTo(width, height)	×
NEW 71	ctx.lineTo(0, height)	×
72	}
NEW 73	ctx.lineTo(0, borderRadius)	×
NEW 74	ctx.quadraticCurveTo(0, 0, borderRadius, 0)	×
NEW 75	ctx.closePath()	×
76
77	// Clip the path so everything drawn afterwards will be within rounded corners
NEW 78	ctx.clip()	×
79
80	// Generate gradient based on the name length
NEW 81	const colors = getGradientColors(name.length)	×
82
NEW 83	const gradient = ctx.createLinearGradient(0, 0, width, height)	×
NEW 84	gradient.addColorStop(0, colors[0])	×
NEW 85	gradient.addColorStop(1, colors[1])	×
NEW 86	ctx.fillStyle = gradient	×
NEW 87	ctx.fillRect(0, 0, width, height)	×
88
NEW 89	if (!onlyLogo) {	×
NEW 90	try {	×
NEW 91	await promiseOfLoadedFont	×
92	ctx.font = '600 24px Inter' // This sets the font weight to 600 and the font size to 40px
NEW 93	ctx.fillStyle = '#FCFCFC'	×
NEW 94	ctx.textAlign = 'center'	×
NEW 95	ctx.textBaseline = 'middle'	×
96
97	// Calculate the vertical center for the name
98	nameYPosition = height / 2 + 10 // Adjust as needed
NEW 99	ctx.fillText(name, width / 2, nameYPosition)	×
100
101	ctx.font = '700 16px Inter' // This sets the font weight to700 and the font size to 18px
NEW 102	ctx.fillStyle = '#FCFCFCCC'	×
NEW 103	ctx.textAlign = 'center'	×
NEW 104	ctx.textBaseline = 'middle'	×
NEW 105	const dclEthYPosition = nameYPosition + 30 // Position "DCL.ETH" below the name	×
NEW 106	ctx.fillText('DCL.ETH', width / 2, dclEthYPosition)	×
107	} catch (e) {
NEW 108	console.error('Error loading fonts', e)	×
109	}
110	}
111
112	// Load and draw the logo
NEW 113	try {	×
NEW 114	const logoWidth = onlyLogo ? width * 0.8 : 40 // LOGO WIDTH	×
NEW 115	const logoHeight = onlyLogo ? height * 0.8 : 40 // LOGO HEIGHT	×
NEW 116	const logoXPosition = width / 2 - logoWidth / 2 // Center the logo	×
NEW 117	const logoYPosition = onlyLogo	×
118	? height / 2 - logoHeight / 2
119	: nameYPosition - logoHeight - 25 // Adjust space above the name
NEW 120	ctx.drawImage(	×
121	await promiseOfALogo,
122	logoXPosition,
123	logoYPosition,
124	logoWidth,
125	logoHeight
126	)
127	} catch (e) {
NEW 128	console.error('Error loading logo', e)	×
129	}
130	}

decentraland / marketplace / 8102650533

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous