Merge pull request #1 from jejolare-dev/feature_add_matrix_connect_view

add matrix connect view

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));
     }
-})();
+})();

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) {

src/assets/images/UI/connection.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.6875 6.75H15.1875L11.8125 3.375" stroke="#1F8FEB" stroke-width="1.5" stroke-linecap="square"/>
+<path d="M16.3125 11.25L2.8125 11.25L6.1875 14.625" stroke="#1F8FEB" stroke-width="1.5" stroke-linecap="square"/>
+</svg>

src/interfaces/state/Alias.ts

@@ -1,6 +1,7 @@
 interface Alias {
     alias: string;
     address: string;
+    hasMatrixConnection: boolean;
 }
 
 export default Alias;

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 (
-            <div>
+            alias.length < 5 
+            ?
+            <div className={styles["alias_wrapper"]}>
+                <>
                 <div className={styles["short_alias"]}>
                     {alias}
                     <div className={styles["short_alias__crown"]}>
                         <CrownImg />
                     </div>
                 </div>
+                {hasMatrixConnection && <ConnectionIcon/>}
+                </>
+            </div> 
+            :
+            <div className={styles["alias_wrapper"]}>
+                <>
+                {alias}
+                {hasMatrixConnection && <ConnectionIcon/>}                
+                </>
             </div>
         );
     }
 
+    function ConnectionIcon(){
+        const [hovered, setHovered] = useState(false);
+
+        return (
+        <div className={styles["connection_icon"]} onMouseEnter={ () => setHovered(true)}
+            onMouseLeave={ ()=> setHovered(false)}
+        >   <>
+            <ConnectionImg/>
+            {hovered && <div className={styles["connection_icon__tooltip"]}>
+            <p>Matrix Connection</p>
+                <div className={styles["connection_icon__tooltip__arrow"]}>
+                </div>
+            </div>}
+            </>
+        </div>
+        )
+    }
+
     const tableElements = aliases.map(e => [
-        e.alias.length > 5 ? e.alias : <ShortAlias alias={e.alias} />,
+        <Alias alias={e.alias} hasMatrixConnection={e.hasMatrixConnection}/>,
         e.address
     ]);
 

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;

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
             }))
         },
     };