diff --git a/server/server.ts b/server/server.ts index ea1fc25..30ca236 100644 --- a/server/server.ts +++ b/server/server.ts @@ -337,13 +337,34 @@ const requestsLimiter = rateLimit({ } try { - const aliases = await Alias.findAll({ + const aliasesRow = await Alias.findAll({ where: whereClause, order: [['block', 'DESC']], limit, offset: parsedOffset, }); - + const aliasesAddresses = aliasesRow.map((aliasRow) => aliasRow.address); + let registeredAddresses: string[] = []; + try { + const addressesHasMatrixConnectionResp = await axios({ + method: "post", + url: config.matrix_api_url + "/get-addresses", + data: { + addresses: aliasesAddresses + }, + transformResponse: [(data) => JSON.parse(data)], + }); + const addresses = addressesHasMatrixConnectionResp.data.addresses; + registeredAddresses = addresses.filter((address) => address.registered === true).map(({address})=> address); + } catch (e) { + console.error(e) + } + const aliases = aliasesRow.map((aliasRow) => { + const hasMatrixConnection = registeredAddresses.includes(aliasRow.address); + aliasRow.dataValues.hasMatrixConnection = hasMatrixConnection; + return aliasRow + }) + res.json(aliases.length > 0 ? aliases : []); } catch (error) { next(error); @@ -1955,4 +1976,4 @@ const requestsLimiter = rateLimit({ // Wait for 60 seconds before the next iteration await new Promise(res => setTimeout(res, 60 * 1e3)); } -})(); \ No newline at end of file +})(); diff --git a/server/utils/utils.ts b/server/utils/utils.ts index d30dd2c..86c3f5d 100644 --- a/server/utils/utils.ts +++ b/server/utils/utils.ts @@ -14,7 +14,8 @@ export const config = { "enabled_during_sync": process.env.WEBSOCKET_ENABLED_DURING_SYNC === "true" }, "enableVisibilityInfo": process.env.ENABLE_VISIBILITY_INFO === "true", - "maxDaemonRequestCount": parseInt(process.env.MAX_DAEMON_REQUEST_COUNT || "", 10) || 1000 + "maxDaemonRequestCount": parseInt(process.env.MAX_DAEMON_REQUEST_COUNT || "", 10) || 1000, + "matrix_api_url": process.env.MATRIX_API_URL } export function log(msg: string) { diff --git a/src/assets/images/UI/connection.svg b/src/assets/images/UI/connection.svg new file mode 100644 index 0000000..ccac7c9 --- /dev/null +++ b/src/assets/images/UI/connection.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/interfaces/state/Alias.ts b/src/interfaces/state/Alias.ts index bba720e..b1e7d04 100644 --- a/src/interfaces/state/Alias.ts +++ b/src/interfaces/state/Alias.ts @@ -1,6 +1,7 @@ interface Alias { alias: string; address: string; + hasMatrixConnection: boolean; } export default Alias; \ No newline at end of file diff --git a/src/pages/aliases/index.tsx b/src/pages/aliases/index.tsx index e20a24b..c766a87 100644 --- a/src/pages/aliases/index.tsx +++ b/src/pages/aliases/index.tsx @@ -6,6 +6,7 @@ import Table from "../../components/default/Table/Table"; import Alias from "../../interfaces/state/Alias"; import Fetch from "../../utils/methods"; import CrownImg from "../../assets/images/UI/crown.svg"; +import ConnectionImg from "../../assets/images/UI/connection.svg"; import CommonStatsPanel from "../../components/UI/CommonStatsPanel/CommonStatsPanel"; import { GetServerSideProps } from "next"; import { AliasesPageProps, getAliases } from "@/utils/ssr"; @@ -47,6 +48,8 @@ function Aliases(props: AliasesPageProps) { searchState || undefined, ); + console.log(result) + if (newFetchId !== fetchIdRef.current) return; if (result.sucess === false) return; @@ -54,7 +57,8 @@ function Aliases(props: AliasesPageProps) { setAliases( result.map((e: any) => ({ alias: e.alias || "", - address: e.address || "" + address: e.address || "", + hasMatrixConnection: e.hasMatrixConnection || false })) ); }, [itemsOnPage, page, searchState, isPremiumOnly]); @@ -87,21 +91,52 @@ function Aliases(props: AliasesPageProps) { const tableHeaders = [ "NAME", "ADDRESS" ]; - function ShortAlias({ alias }: { alias: string }) { + function Alias({ alias, hasMatrixConnection }: { alias: string, hasMatrixConnection: boolean }) { + return ( -
+ alias.length < 5 + ? +
+ <>
{alias}
+ {hasMatrixConnection && } + +
+ : +
+ <> + {alias} + {hasMatrixConnection && } +
); } + function ConnectionIcon(){ + const [hovered, setHovered] = useState(false); + + return ( +
setHovered(true)} + onMouseLeave={ ()=> setHovered(false)} + > <> + + {hovered &&
+

Matrix Connection

+
+
+
} + +
+ ) + } + const tableElements = aliases.map(e => [ - e.alias.length > 5 ? e.alias : , + , e.address ]); diff --git a/src/styles/Aliases.module.scss b/src/styles/Aliases.module.scss index c43b58d..1d55a69 100644 --- a/src/styles/Aliases.module.scss +++ b/src/styles/Aliases.module.scss @@ -1,4 +1,33 @@ .aliases { + .alias_wrapper { + display: flex; + gap: 8px; + align-items: center; + } + .connection_icon { + cursor: pointer; + position: relative; + .connection_icon__tooltip { + position: absolute; + height: 40px; + width: 144px; + background-color: #11316B; + display: flex; + justify-content: center; + align-items: center; + transform: translateX(-65px) translateY(10px); + z-index: 1; + .connection_icon__tooltip__arrow { + z-index: 1; + position: absolute; + top:0px; + transform: rotate(45deg) translateY(-5px); + height: 10px; + width: 10px; + background-color: #11316B; + } + } + } .short_alias { background-color: red; float: left; diff --git a/src/utils/ssr.ts b/src/utils/ssr.ts index e4ced86..99198d4 100644 --- a/src/utils/ssr.ts +++ b/src/utils/ssr.ts @@ -194,7 +194,7 @@ export async function getBlock(context: GetServerSidePropsContext) { export interface AliasesPageProps { aliasesAmount?: number; premiumAliasesAmount?: number; - aliases: { alias: string, address: string }[]; + aliases: { alias: string, address: string, hasMatrixConnection: boolean }[]; } export async function getAliases() { @@ -213,7 +213,8 @@ export async function getAliases() { premiumAliasesAmount, aliases: (aliasesResp || []).map((e: any) => ({ alias: e.alias || "" as string, - address: e.address || "" as string + address: e.address || "" as string, + hasMatrixConnection: e.hasMatrixConnection || false as boolean })) }, };