Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add svg route #3424

Merged
merged 5 commits into from
Dec 1, 2024
Merged

add svg route #3424

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6dd7418
add svg route
trajan0x Dec 1, 2024
eec3393
route fix
trajan0x Dec 1, 2024
107f8df
cleanup
trajan0x Dec 1, 2024
9aec30a
chainrouter
trajan0x Dec 1, 2024
4883033
yarn cleanup
trajan0x Dec 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/rest-api/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@
"@ethersproject/providers": "^5.7.2",
"@ethersproject/units": "5.7.0",
"@synapsecns/sdk-router": "^0.11.7",
"@synapsecns/synapse-constants": "^1.8.3",
"bignumber": "^1.1.0",
"cross-fetch": "^4.0.0",
"dotenv": "^16.4.5",
"ethers": "5.7.2",
"express": "^4.18.2",
Expand Down
53 changes: 53 additions & 0 deletions packages/rest-api/src/routes/addressIconRoute.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import express from 'express'
import { BRIDGABLE_TOKENS, Token } from '@synapsecns/synapse-constants'
import fetch from 'cross-fetch'

const router: express.Router = express.Router()

router.get('/:chainId/:address.svg', async (req, res) => {
const chainId = parseInt(req.params.chainId, 10)
const address = req.params.address.toLowerCase()
Comment on lines +7 to +9
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add input validation for chainId and address parameters

The current implementation lacks validation for:

  1. chainId (could be NaN)
  2. address format (should be a valid hex string)

This could lead to unnecessary processing of invalid requests.

 router.get('/:chainId/:address.svg', async (req, res) => {
   const chainId = parseInt(req.params.chainId, 10)
+  if (isNaN(chainId)) {
+    res.status(400).json({ error: 'Invalid chainId' })
+    return
+  }
   const address = req.params.address.toLowerCase()
+  if (!/^0x[a-f0-9]{40}$/i.test(address)) {
+    res.status(400).json({ error: 'Invalid address format' })
+    return
+  }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
router.get('/:chainId/:address.svg', async (req, res) => {
const chainId = parseInt(req.params.chainId, 10)
const address = req.params.address.toLowerCase()
router.get('/:chainId/:address.svg', async (req, res) => {
const chainId = parseInt(req.params.chainId, 10)
if (isNaN(chainId)) {
res.status(400).json({ error: 'Invalid chainId' })
return
}
const address = req.params.address.toLowerCase()
if (!/^0x[a-f0-9]{40}$/i.test(address)) {
res.status(400).json({ error: 'Invalid address format' })
return
}


// Find the token with matching address on the specified chain
const token = Object.values(BRIDGABLE_TOKENS[chainId] || []).find(
(t): t is Token =>
typeof t === 'object' &&
t !== null &&
'addresses' in t &&
Object.entries(t.addresses).some(([chain, addr]) => {
const matches =
parseInt(chain, 10) === chainId && addr.toLowerCase() === address
return matches
})
)
Comment on lines +11 to +22
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Extract token lookup logic and optimize performance

The token lookup logic is complex and could benefit from:

  1. Extraction into a separate function for better maintainability
  2. Direct object lookup instead of array operations
+const findToken = (chainId: number, address: string): Token | undefined => {
+  const chainTokens = BRIDGABLE_TOKENS[chainId]
+  if (!chainTokens) return undefined
+  
+  return Object.values(chainTokens).find(
+    (t): t is Token =>
+      typeof t === 'object' &&
+      t !== null &&
+      'addresses' in t &&
+      Object.entries(t.addresses).some(([chain, addr]) =>
+        parseInt(chain, 10) === chainId && addr.toLowerCase() === address
+      )
+  )
+}
+
 router.get('/:chainId/:address.svg', async (req, res) => {
   const chainId = parseInt(req.params.chainId, 10)
   const address = req.params.address.toLowerCase()

-  const token = Object.values(BRIDGABLE_TOKENS[chainId] || []).find(
-    (t): t is Token =>
-      typeof t === 'object' &&
-      t !== null &&
-      'addresses' in t &&
-      Object.entries(t.addresses).some(([chain, addr]) => {
-        const matches =
-          parseInt(chain, 10) === chainId && addr.toLowerCase() === address
-        return matches
-      })
-  )
+  const token = findToken(chainId, address)
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// Find the token with matching address on the specified chain
const token = Object.values(BRIDGABLE_TOKENS[chainId] || []).find(
(t): t is Token =>
typeof t === 'object' &&
t !== null &&
'addresses' in t &&
Object.entries(t.addresses).some(([chain, addr]) => {
const matches =
parseInt(chain, 10) === chainId && addr.toLowerCase() === address
return matches
})
)
const findToken = (chainId: number, address: string): Token | undefined => {
const chainTokens = BRIDGABLE_TOKENS[chainId]
if (!chainTokens) return undefined
return Object.values(chainTokens).find(
(t): t is Token =>
typeof t === 'object' &&
t !== null &&
'addresses' in t &&
Object.entries(t.addresses).some(([chain, addr]) =>
parseInt(chain, 10) === chainId && addr.toLowerCase() === address
)
)
}
// Find the token with matching address on the specified chain
const token = findToken(chainId, address)


if (!token || !token.icon) {
console.log('Token not found or no icon:', { token })
res.status(404).json({ error: 'Token icon not found' })
return
}

try {
// Fetch the image from the URL
const response = await fetch(token.icon)
if (!response.ok) {
throw new Error(`Failed to fetch image: ${response.statusText}`)
}

const buffer = await response.arrayBuffer()

// Set cache headers (cache for 1 week)
res.set({
'Cache-Control': 'public, max-age=604800',
'Content-Type': response.headers.get('content-type') || 'image/svg+xml',
})

res.send(Buffer.from(buffer))
} catch (error) {
console.error('Error fetching token icon:', error)
res.status(500).json({ error: 'Failed to fetch token icon' })
}
return
})
Comment on lines +30 to +51
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add timeout and security measures for external requests

The external fetch operation needs additional safety measures:

  1. Request timeout
  2. URL validation
  3. Response size limits
+const isValidIconUrl = (url: string): boolean => {
+  try {
+    const parsed = new URL(url)
+    return ['http:', 'https:'].includes(parsed.protocol)
+  } catch {
+    return false
+  }
+}

 try {
+    if (!isValidIconUrl(token.icon)) {
+      throw new Error('Invalid icon URL')
+    }
+
+    const controller = new AbortController()
+    const timeout = setTimeout(() => controller.abort(), 5000)
+
-    const response = await fetch(token.icon)
+    const response = await fetch(token.icon, {
+      signal: controller.signal,
+      headers: {
+        'Accept': 'image/svg+xml,image/*'
+      }
+    })
+    clearTimeout(timeout)

     if (!response.ok) {
       throw new Error(`Failed to fetch image: ${response.statusText}`)
     }

+    const contentLength = response.headers.get('content-length')
+    if (contentLength && parseInt(contentLength, 10) > 1024 * 1024) {
+      throw new Error('Icon file too large')
+    }

     const buffer = await response.arrayBuffer()
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
try {
// Fetch the image from the URL
const response = await fetch(token.icon)
if (!response.ok) {
throw new Error(`Failed to fetch image: ${response.statusText}`)
}
const buffer = await response.arrayBuffer()
// Set cache headers (cache for 1 week)
res.set({
'Cache-Control': 'public, max-age=604800',
'Content-Type': response.headers.get('content-type') || 'image/svg+xml',
})
res.send(Buffer.from(buffer))
} catch (error) {
console.error('Error fetching token icon:', error)
res.status(500).json({ error: 'Failed to fetch token icon' })
}
return
})
try {
if (!isValidIconUrl(token.icon)) {
throw new Error('Invalid icon URL')
}
const controller = new AbortController()
const timeout = setTimeout(() => controller.abort(), 5000)
const response = await fetch(token.icon, {
signal: controller.signal,
headers: {
'Accept': 'image/svg+xml,image/*'
}
})
clearTimeout(timeout)
if (!response.ok) {
throw new Error(`Failed to fetch image: ${response.statusText}`)
}
const contentLength = response.headers.get('content-length')
if (contentLength && parseInt(contentLength, 10) > 1024 * 1024) {
throw new Error('Icon file too large')
}
const buffer = await response.arrayBuffer()
// Set cache headers (cache for 1 week)
res.set({
'Cache-Control': 'public, max-age=604800',
'Content-Type': response.headers.get('content-type') || 'image/svg+xml',
})
res.send(Buffer.from(buffer))
} catch (error) {
console.error('Error fetching token icon:', error)
res.status(500).json({ error: 'Failed to fetch token icon' })
}
return
})


export default router
44 changes: 44 additions & 0 deletions packages/rest-api/src/routes/chainIconRoute.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import express from 'express'
import { CHAINS, Chain } from '@synapsecns/synapse-constants'
import fetch from 'cross-fetch'

const router: express.Router = express.Router()

router.get('/:chainId.svg', async (req, res) => {
const chainId = parseInt(req.params.chainId, 10)

// Find the chain with matching ID
const chain = Object.values(CHAINS).find(
(c): c is Chain =>
typeof c === 'object' && c !== null && 'id' in c && c.id === chainId
)

if (!chain || !chain.chainImg) {
res.status(404).json({ error: 'Chain icon not found' })
return
}

try {
// Fetch the image from the URL
const response = await fetch(chain.chainImg)
if (!response.ok) {
throw new Error(`Failed to fetch image: ${response.statusText}`)
}

const buffer = await response.arrayBuffer()

// Set cache headers (cache for 1 week)
res.set({
'Cache-Control': 'public, max-age=604800',
'Content-Type': response.headers.get('content-type') || 'image/svg+xml',
})

res.send(Buffer.from(buffer))
} catch (error) {
console.error('Error fetching chain icon:', error)
res.status(500).json({ error: 'Failed to fetch chain icon' })
}
return
})
Comment on lines +37 to +42
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Improve error handling and logging

The error handling could be enhanced:

  1. The return statement after try-catch is unnecessary
  2. Error logging should be structured and sanitized
  3. Different error types should have different status codes

Apply these improvements:

-  } catch (error) {
-    console.error('Error fetching chain icon:', error)
-    res.status(500).json({ error: 'Failed to fetch chain icon' })
-  }
-  return
+  } catch (error) {
+    // Sanitize error message
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error'
+    
+    // Log structured error
+    console.error({
+      error: 'Failed to fetch chain icon',
+      chainId,
+      message: errorMessage,
+      timestamp: new Date().toISOString()
+    })
+    
+    // Return appropriate status code
+    if (errorMessage.includes('Invalid URL') || errorMessage.includes('Invalid content type')) {
+      res.status(400).json({ error: 'Invalid chain icon configuration' })
+    } else if (error instanceof Error && error.name === 'AbortError') {
+      res.status(504).json({ error: 'Chain icon fetch timeout' })
+    } else {
+      res.status(500).json({ error: 'Failed to fetch chain icon' })
+    }
+  }

Committable suggestion skipped: line range outside the PR's diff.


export default router
4 changes: 4 additions & 0 deletions packages/rest-api/src/routes/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import destinationTxRoute from './destinationTxRoute'
import tokenListRoute from './tokenListRoute'
import destinationTokensRoute from './destinationTokensRoute'
import bridgeLimitsRoute from './bridgeLimitsRoute'
import chainIconRoute from './chainIconRoute'
import addressIconRoute from './addressIconRoute'

const router: express.Router = express.Router()

Expand All @@ -25,5 +27,7 @@ router.use('/bridgeTxStatus', bridgeTxStatusRoute)
router.use('/destinationTx', destinationTxRoute)
router.use('/tokenList', tokenListRoute)
router.use('/destinationTokens', destinationTokensRoute)
router.use('/chainIcon', chainIconRoute)
router.use('/tokenIcon', addressIconRoute)

export default router
14 changes: 2 additions & 12 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18757,12 +18757,7 @@ fd-slicer@~1.1.0:
dependencies:
pend "~1.2.0"

fdir@^6.2.0:
version "6.4.2"
resolved "https://registry.yarnpkg.com/fdir/-/fdir-6.4.2.tgz#ddaa7ce1831b161bc3657bb99cb36e1622702689"
integrity sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==

fdir@^6.4.2:
fdir@^6.2.0, fdir@^6.4.2:
version "6.4.2"
resolved "https://registry.yarnpkg.com/fdir/-/fdir-6.4.2.tgz#ddaa7ce1831b161bc3657bb99cb36e1622702689"
integrity sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==
Expand Down Expand Up @@ -37610,12 +37605,7 @@ [email protected]:
resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.0.0-1.tgz#8c3029b3ee2028306d5bcf396980623115ff8d18"
integrity sha512-W7h5dEhywMKenDJh2iX/LABkbFnBxasD27oyXWDS/feDsxiw0dD5ncXdYXgkvAsXIY2MpW/ZKkr9IU30DBdMNQ==

yaml@^2.3.1, yaml@^2.3.4:
version "2.6.0"
resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.6.0.tgz#14059ad9d0b1680d0f04d3a60fe00f3a857303c3"
integrity sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==

yaml@^2.6.0:
yaml@^2.3.1, yaml@^2.3.4, yaml@^2.6.0:
version "2.6.0"
resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.6.0.tgz#14059ad9d0b1680d0f04d3a60fe00f3a857303c3"
integrity sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==
Expand Down
Loading