.

src/components/default/Table/Table.tsx

@@ -68,57 +68,59 @@ function Table(props: TableProps) {
                     
                 </tbody>
             </table>
-            {pagination && 
-                <div className={styles["table__pagination"]}>
-                    <div className={styles["table__pagination__pages"]}>
-                        <p>Pages: </p>
-                        <div>
-                            <button 
-                                className={page === "1" ? styles.disabled : undefined}
-                                onClick={() => changePage(-1)}
-                            >
-                                <ArrowImg />
-                            </button>
-                            <button
-                                onClick={() => changePage(1)}
-                            >
-                                <ArrowImg />
-                            </button>
-                        </div>
-                        <Input 
-                            type="text"
-                            value={page}
-                            onInput={(e) => onNumberInput(e, setPage)}
-                        />
-                    </div>
-                    {pagesTotal && <p>Pages total: {pagesTotal}</p>}
-                    <div className={styles["table__pagination__blocks"]}>
-                        <div>
-                            <p>Items on page: </p>
-                            <Input 
-                                type="text" 
-                                value={itemsOnPage} 
-                                onInput={(e) => onNumberInput(e, setItemsOnPage, 50)} 
-                            />
-                        </div>
-                        {!hidePaginationBlock &&
-                            <div>
-                                <p>Go to block: </p>
-                                <Input
-                                    type="text" 
-                                    placeholder="number" 
-                                    value={goToBlock} 
-                                    onInput={(e) => onNumberInput(e, setGoToBlock)} 
-                                    onEnterPress={goToBlockEnter}
-                                />
-                            </div>
-                        }
-                    </div>
-                </div>
-            }
-           
+                <Pagination pagination={pagination}/>
         </div>
     )
+
+    function Pagination ({pagination}:{pagination:boolean | undefined}) {
+        if (!pagination) return null
+        return   <div className={styles["table__pagination"]}>
+        <div className={styles["table__pagination__pages"]}>
+            <p>Pages: </p>
+            <div>
+                <button 
+                    className={page === "1" ? styles.disabled : undefined}
+                    onClick={() => changePage(-1)}
+                >
+                    <ArrowImg />
+                </button>
+                <button
+                    onClick={() => changePage(1)}
+                >
+                    <ArrowImg />
+                </button>
+            </div>
+            <Input 
+                type="text"
+                value={page}
+                onInput={(e) => onNumberInput(e, setPage)}
+            />
+        </div>
+        {pagesTotal && <p>Pages total: {pagesTotal}</p>}
+        <div className={styles["table__pagination__blocks"]}>
+            <div>
+                <p>Items on page: </p>
+                <Input 
+                    type="text" 
+                    value={itemsOnPage} 
+                    onInput={(e) => onNumberInput(e, setItemsOnPage, 50)} 
+                />
+            </div>
+            {!hidePaginationBlock &&
+                <div>
+                    <p>Go to block: </p>
+                    <Input
+                        type="text" 
+                        placeholder="number" 
+                        value={goToBlock} 
+                        onInput={(e) => onNumberInput(e, setGoToBlock)} 
+                        onEnterPress={goToBlockEnter}
+                    />
+                </div>
+            }
+        </div>
+    </div>
+    }
 }
 
 export default Table;

src/pages/aliases/index.tsx

@@ -66,12 +66,15 @@ function Aliases(props: AliasesPageProps) {
                 hasMatrixConnection: e.hasMatrixConnection || false
             }))
         );
-    }, [itemsOnPage, page, searchState, isPremiumOnly]);
+    }, [itemsOnPage, page, searchState, isPremiumOnly, isInMatrix]);
 
     const fetchMatrixAliases = useCallback(async () => {
         const result = await Fetch.getMatrixAddresses(page, itemsOnPage);
         if(!result.success || !(result.addresses instanceof Array)) return;
-        setAliases(result.addresses);
+        const aliases = result.addresses.map((e :any)=>{
+            return {...e, hasMatrixConnection: true}
+        })
+        setAliases(aliases);
     },[itemsOnPage, page])
 
     useEffect(() => {
@@ -121,23 +124,25 @@ function Aliases(props: AliasesPageProps) {
                         <CrownImg />
                     </div>
                 </div>
-                {hasMatrixConnection && <ConnectionIcon/>}
+                {hasMatrixConnection && <ConnectionIcon alias={alias}/>}
                 </>
             </div> 
             :
             <div className={styles["alias_wrapper"]}>
                 <>
                 {alias}
-                {hasMatrixConnection && <ConnectionIcon/>}                
+                {hasMatrixConnection && <ConnectionIcon alias={alias}/>}                
                 </>
             </div>
         );
     }
 
-    function ConnectionIcon(){
+    function ConnectionIcon({alias}:{alias: string}){
         const [hovered, setHovered] = useState(false);
+        const link = `https://matrix.to/#/@${alias}:zano.org`
 
         return (
+        <a href={link}>
         <div className={styles["connection_icon"]} onMouseEnter={ () => setHovered(true)}
             onMouseLeave={ ()=> setHovered(false)}
         >   <>
@@ -149,6 +154,7 @@ function Aliases(props: AliasesPageProps) {
             </div>}
             </>
         </div>
+        </a>
         )
     }
 

src/styles/Aliases.module.scss

@@ -20,7 +20,7 @@
             .connection_icon__tooltip__arrow {
                 z-index: 1;
                 position: absolute;
-                top:0px;
+                top: 0px;
                 transform: rotate(45deg) translateY(-5px);
                 height: 10px;
                 width: 10px;