added app pagelink (MystenLabs#4978)

* added app pagelink * rebase * rm size hight 90vh * comment update
dougEfresh · Oct 14, 2022 · 0cac217 · 0cac217
1 parent 0d7b189
commit 0cac217
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 4 deletions.
diff --git a/apps/wallet/src/background/Permissions.ts b/apps/wallet/src/background/Permissions.ts
@@ -169,6 +169,7 @@ class Permissions {
             permissionTypes,
             connection.originFavIcon,
             requestMsgID,
+            connection.pagelink,
             existingPermission
         );
         await new Window(Permissions.getUiUrl(pRequest.id)).show();
@@ -242,6 +243,7 @@ class Permissions {
         permissionTypes: readonly PermissionType[],
         favIcon: string | undefined,
         requestMsgID: string,
+        pagelink?: string | undefined,
         existingPermission?: Permission | null
     ): Promise<Permission> {
         let permissionToStore: Permission;
@@ -268,6 +270,7 @@ class Permissions {
                 createdDate: new Date().toISOString(),
                 origin,
                 favIcon,
+                pagelink,
                 permissions: permissionTypes as PermissionType[],
                 responseDate: null,
                 requestMsgID,

diff --git a/apps/wallet/src/background/connections/ContentScriptConnection.ts b/apps/wallet/src/background/connections/ContentScriptConnection.ts
@@ -29,11 +29,13 @@ export class ContentScriptConnection extends Connection {
     public static readonly CHANNEL: PortChannelName =
         'sui_content<->background';
     public readonly origin: string;
+    public readonly pagelink?: string | undefined;
     public readonly originFavIcon: string | undefined;
 
     constructor(port: Runtime.Port) {
         super(port);
         this.origin = this.getOrigin(port);
+        this.pagelink = this.getAppUrl(port);
         this.originFavIcon = port.sender?.tab?.favIconUrl;
     }
 
@@ -160,6 +162,14 @@ export class ContentScriptConnection extends Connection {
         );
     }
 
+    // optional field for the app link.
+    private getAppUrl(port: Runtime.Port) {
+        if (port.sender?.url) {
+            return new URL(port.sender.url).href;
+        }
+        return undefined;
+    }
+
     private sendError<Error extends ErrorPayload>(
         error: Error,
         responseForID?: string

diff --git a/apps/wallet/src/shared/messaging/messages/payloads/permissions/Permission.ts b/apps/wallet/src/shared/messaging/messages/payloads/permissions/Permission.ts
@@ -10,7 +10,7 @@ export interface Permission {
     name?: string;
     id: string;
     origin: string;
-    pagelink?: string;
+    pagelink?: string | undefined;
     favIcon: string | undefined;
     accounts: SuiAddress[];
     allowed: boolean | null;

diff --git a/apps/wallet/src/ui/app/components/sui-apps/ConnectedAppsCard.tsx b/apps/wallet/src/ui/app/components/sui-apps/ConnectedAppsCard.tsx
@@ -39,6 +39,7 @@ function ConnectedDapps() {
                         name: name,
                         icon: appData?.favIcon,
                         link: appData.origin,
+                        pagelink: appData.pagelink,
                         linkLabel: appData.origin.replace('https://', ''),
                         description: '',
                         id: appData.id,

diff --git a/apps/wallet/src/ui/app/components/sui-apps/DisconnectApp.tsx b/apps/wallet/src/ui/app/components/sui-apps/DisconnectApp.tsx
@@ -29,6 +29,7 @@ type DisconnectAppProps = {
     address?: SuiAddress;
     permissions: string[];
     disconnect?: boolean;
+    pageLink?: string;
     setShowDisconnectApp: (showModal: boolean) => void;
 };
 
@@ -41,6 +42,7 @@ function DisconnectApp({
     account,
     id,
     permissions,
+    pageLink,
     setShowDisconnectApp,
 }: DisconnectAppProps) {
     const [showModal] = useState(true);
@@ -76,7 +78,7 @@ function DisconnectApp({
                         <div className={st.info}>
                             <div className={st.name}>{name}</div>
                             <ExternalLink
-                                href={link}
+                                href={pageLink || link}
                                 title={name}
                                 className={st.appLink}
                                 showIcon={false}
@@ -131,7 +133,7 @@ function DisconnectApp({
                         <span>Disconnect</span>
                     </Button>
                     <ExternalLink
-                        href={link}
+                        href={pageLink || link}
                         title={name}
                         className={cl('btn', st.ctaBtn, st.view)}
                         showIcon={false}

diff --git a/apps/wallet/src/ui/app/components/sui-apps/SuiApp.tsx b/apps/wallet/src/ui/app/components/sui-apps/SuiApp.tsx
@@ -24,6 +24,7 @@ type SuiAppProps = {
     link: string;
     account?: string;
     id?: string;
+    pageLink?: string;
     permissions: string[];
     disconnect?: boolean;
 };
@@ -56,6 +57,7 @@ function SuiApp({
     tags,
     id,
     account,
+    pageLink,
     permissions,
     disconnect,
 }: SuiAppProps) {
@@ -66,6 +68,7 @@ function SuiApp({
         link,
         id,
         permissions,
+        pageLink,
     };
 
     const originLabel = useMiddleEllipsis(
@@ -135,7 +138,7 @@ function SuiApp({
                 </>
             ) : (
                 <ExternalLink
-                    href={link}
+                    href={pageLink || link}
                     title={name}
                     className={st.ecosystemApp}
                     showIcon={false}

diff --git a/apps/wallet/src/ui/app/components/sui-apps/index.tsx b/apps/wallet/src/ui/app/components/sui-apps/index.tsx
@@ -62,6 +62,7 @@ function AppsPlayGround() {
                       icon: isConnected.favIcon || app.icon,
                       // instance where the origin has a trailing slash and the app.link does not
                       link: isConnected.origin,
+                      pageLink: isConnected.pagelink,
                   }
                 : {}),
         };