Wallet apps (#4650)

wallet/apps/dapps.json

@@ -0,0 +1,45 @@
+[
+    {
+        "name": "Sui NFT Mint",
+        "description": "Mint your NFTs on the Sui Network",
+        "link": "https://sui-wallet-demo.sui.io/",
+        "icon": "https://sui.io/img/sui-social.jpg",
+        "tags": ["NFT"]
+    },
+    {
+        "name": "Ethos 2048: An NFT Game",
+        "description": "Ethos 2048: An NFT Game",
+        "link": "https://ethoswallet.github.io/2048-demo/",
+        "icon": "https://ethoswallet.github.io/2048-demo/meta/apple-touch-icon.png",
+        "tags": ["Game"]
+    },
+    {
+        "name": "Goblinsuinft",
+        "description": "Mint a random warrior NFT. Then head over to the Inventory section to mint weapon NFTs that you can equip/unequip to boost your chances of winning battles.",
+        "link": "https://goblinsuinft.web.app/",
+        "icon": "https://goblinsuinft.web.app/assets/img/goblin2.png",
+        "tags": ["Game"]
+    },
+
+    {
+        "name": "Keepsake",
+        "description": "The Marketplace for SUI collections and Non Fungible Tokens",
+        "link": "https://keepsake.gg/",
+        "icon": "https://keepsake.gg/assets/icon/Favicon.png",
+        "tags": ["Marketplace"]
+    },
+    {
+        "name": "Sui Name Service",
+        "description": "Decentralized Digital Identities for Sui Ecosystem",
+        "link": "https://sui-names.com/",
+        "icon": "https://sui-names.com/static/media/logo_white.036f90a89d49832dbef3.png",
+        "tags": ["Infra"]
+    },
+    {
+        "name": "Bluemove",
+        "description": "NFT Marketplace on blockchain Sui",
+        "link": "https://sui.bluemove.net/",
+        "icon": "https://sui.bluemove.net/BlueMove_main_logo_RGB-Blue_250.png",
+        "tags": ["Marketplace"]
+    }
+]

wallet/configs/environment/.env.defaults

@@ -13,3 +13,4 @@ EXPLORER_URL_DEV_NET=https://explorer.devnet.sui.io/
 EXPLORER_URL_STAGING=https://explorer.staging.sui.io/
 SHOW_STAGING=false
 STAKING_ENABLED=false
+SUI_APPS_API_ENDPOINT=https://raw.githubusercontent.com/MystenLabs/sui/main/wallet/apps/dapps.json

wallet/src/shared/messaging/messages/payloads/permissions/Permission.ts

@@ -4,9 +4,13 @@
 import type { PermissionType } from './PermissionType';
 import type { SuiAddress } from '@mysten/sui.js';
 
+//TODO: add description, name, tags
+//TODO add PageLink for instance where the origin and the wallet landing page are different.
 export interface Permission {
+    name?: string;
     id: string;
     origin: string;
+    pagelink?: string;
     favIcon: string | undefined;
     accounts: SuiAddress[];
     allowed: boolean | null;

wallet/src/ui/app/components/external-link/index.tsx

@@ -13,6 +13,7 @@ export type ExternalLinkProps = {
     children: ReactNode;
     title?: string;
     showIcon?: boolean;
+    onClick?(): void;
 };
 
 function ExternalLink({
@@ -21,6 +22,7 @@ function ExternalLink({
     children,
     title,
     showIcon = true,
+    onClick,
 }: ExternalLinkProps) {
     return (
         <a
@@ -29,6 +31,7 @@ function ExternalLink({
             className={className}
             rel="noreferrer"
             title={title}
+            onClick={onClick}
         >
             {children}
             {showIcon ? <Icon icon="link-45deg" /> : null}

wallet/src/ui/app/components/filters-tags/Filters.module.scss

@@ -0,0 +1,25 @@
+@use '_variables' as v;
+@use '_values' as values;
+@use '_values/colors';
+
+.filter-tags {
+    display: flex;
+    gap: 8px;
+
+    .filter {
+        height: 25px;
+        background: colors.$white;
+        color: colors.$sui-steel-blue;
+        padding: 6px 10px;
+        border: 1px solid colors.$gray-60;
+        border-radius: 16px;
+        text-decoration: none;
+        display: flex;
+        align-items: center;
+
+        &.active {
+            background: v.use(v.$colors-nav-item-highlighted-color);
+            color: colors.$white;
+        }
+    }
+}

wallet/src/ui/app/components/filters-tags/index.tsx

@@ -0,0 +1,59 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import cl from 'classnames';
+import { memo, useState, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { NavLink } from 'react-router-dom';
+
+import st from './Filters.module.scss';
+
+const ELEMENT_ID = '#sui-apps-filters';
+
+function activeTagsFilter({ isActive }: { isActive: boolean }) {
+    return cl({ [st.active]: isActive }, st.filter);
+}
+
+// TODO: extend this interface to include params and functions for the filter tags
+interface Props {
+    name: string;
+    link: string;
+}
+
+type Tags = {
+    tags: Props[];
+};
+
+function FiltersPortal({ tags }: Tags) {
+    const [element, setElement] = useState<HTMLElement | null>(null);
+
+    useEffect(() => {
+        const content = document.querySelector(ELEMENT_ID) as HTMLElement;
+        if (content) setElement(content);
+    }, []);
+
+    return (
+        <>
+            {element
+                ? ReactDOM.createPortal(
+                      <div className={st.filterTags}>
+                          {tags.map((tag) => (
+                              <NavLink
+                                  key={tag.link}
+                                  to={`/${tag.link}`}
+                                  end
+                                  className={activeTagsFilter}
+                                  title={tag.name}
+                              >
+                                  <span className={st.title}>{tag.name}</span>
+                              </NavLink>
+                          ))}
+                      </div>,
+                      element
+                  )
+                : null}
+        </>
+    );
+}
+
+export default memo(FiltersPortal);