Merge pull request #104 from lidofinance/feature/ethui-584-parsing-li…

…nks-in-votes-meta-data

feat: votes metadata links parsed

modules/shared/utils/regexEthAddress.ts

@@ -0,0 +1 @@
+export const REGEX_ETH_ADDRESS = /(\b0x[a-fA-F0-9]{40}\b)/g

modules/shared/utils/regexURL.ts

@@ -0,0 +1 @@
+export const REGEX_URL = /((?:https?:\/\/|www\.)[^\s]+)/g

modules/shared/utils/replaceLinksWithComponents.tsx

@@ -0,0 +1,20 @@
+import { Link } from '@lidofinance/lido-ui'
+import { AddressBadge } from '../ui/Common/AddressBadge'
+
+import { REGEX_ETH_ADDRESS } from 'modules/shared/utils/regexEthAddress'
+import { REGEX_URL } from 'modules/shared/utils/regexURL'
+
+import { replaceRegexWithJSX } from './replaceRegexWithJSX'
+
+export const replaceJsxElements = (text: string) => {
+ return replaceRegexWithJSX(text, [
+ {
+ regex: REGEX_URL,
+ replace: link => <Link href={link}>{link}</Link>,
+ },
+ {
+ regex: REGEX_ETH_ADDRESS,
+ replace: address => <AddressBadge address={address} />,
+ },
+ ])
+}

modules/shared/utils/replaceRegexWithJSX.tsx

@@ -1,13 +1,31 @@
 import { Fragment } from 'react'
 
-export function replaceRegexWithJSX(
- text: string,
- regex: RegExp,
- replace: (substr: string) => JSX.Element,
-) {
- const textArray = text.split(regex)
- return textArray.map((str, i) => {
- const children = regex.test(str) ? replace(str) : str
+export const REGEX_REPLACER_HINT = /(__\$\d+__)/g
+export const REGEX_REPLACER_INDEX = /__\$(\d+)__/g
+
+type ReplaceRule = {
+ regex: RegExp
+ replace: (substr: string) => JSX.Element
+}
+
+export function replaceRegexWithJSX(text: string, rules: ReplaceRule[]) {
+ let textBuffer = text
+ const jsxBuffer: JSX.Element[] = []
+
+ rules.forEach(rule => {
+ textBuffer = textBuffer.replaceAll(rule.regex, match => {
+ jsxBuffer.push(rule.replace(match))
+ return `__$${jsxBuffer.length - 1}__`
+ })
+ })
+
+ const textArray = textBuffer.split(REGEX_REPLACER_HINT)
+
+ const result = textArray.map((str, i) => {
+ const test = REGEX_REPLACER_INDEX.exec(str)
+ const children = test ? jsxBuffer[Number(test[1])] : str
  return <Fragment key={i}>{children}</Fragment>
  })
+
+ return result
 }

modules/votes/ui/VoteMetadataDescription/VoteMetadataDescription.tsx

@@ -1,10 +1,10 @@
-import { replaceAddressWithBadges } from 'modules/shared/utils/replaceAddressWithBadges'
 import { DescriptionText } from './VoteMetadataDescriptionStyle'
+import { replaceJsxElements } from 'modules/shared/utils/replaceLinksWithComponents'
 
 type Props = {
  metadata: string
 }
 
 export function VoteMetadataDescription({ metadata }: Props) {
- return <DescriptionText>{replaceAddressWithBadges(metadata)}</DescriptionText>
+ return <DescriptionText>{replaceJsxElements(metadata)}</DescriptionText>
 }