[create-daml-app] Incorporate hub-react library for new Hub API/domai…

…ns (digital-asset#12279) changelog_begin changelog_end
TuranDev · Jan 6, 2022 · 2b1db54 · 2b1db54
1 parent d4ebce6
commit 2b1db54
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 39 deletions.
diff --git a/templates/create-daml-app/ui/package.json.template b/templates/create-daml-app/ui/package.json.template
@@ -8,6 +8,7 @@
     "@daml/ledger": "__VERSION__",
     "@daml/react": "__VERSION__",
     "@daml/types": "__VERSION__",
+    "@daml/hub-react": "^1.0.0",
     "dotenv": "^8.2.0",
     "jwt-simple": "^0.5.6",
     "react": "^17.0.0",

diff --git a/templates/create-daml-app/ui/src/components/App.tsx b/templates/create-daml-app/ui/src/components/App.tsx
@@ -5,8 +5,9 @@ import React from 'react';
 import LoginScreen from './LoginScreen';
 import MainScreen from './MainScreen';
 import DamlLedger from '@daml/react';
+import { damlHubLogout } from '@daml/hub-react';
 import Credentials from '../Credentials';
-import { httpBaseUrl } from '../config';
+import { authConfig } from '../config';
 
 /**
  * React component for the entry point into the application.
@@ -19,9 +20,13 @@ const App: React.FC = () => {
     ? <DamlLedger
         token={credentials.token}
         party={credentials.party}
-        httpBaseUrl={httpBaseUrl}
       >
-        <MainScreen onLogout={() => setCredentials(undefined)}/>
+      <MainScreen onLogout={() => {
+        if (authConfig.provider === 'daml-hub') {
+          damlHubLogout();
+        }
+        setCredentials(undefined);
+      }} />
       </DamlLedger>
     : <LoginScreen onLogin={setCredentials} />
 }

diff --git a/templates/create-daml-app/ui/src/components/LoginScreen.tsx.template b/templates/create-daml-app/ui/src/components/LoginScreen.tsx.template
@@ -1,12 +1,13 @@
 // Copyright (c) 2022 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useCallback, useEffect } from 'react'
+import React, { useCallback } from 'react'
 import { Button, Form, Grid, Header, Image, Segment } from 'semantic-ui-react'
 import Credentials from '../Credentials';
 import Ledger from '@daml/ledger';
+import { DamlHubLogin as DamlHubLoginBtn } from '@daml/hub-react';
 import { User } from '@daml.js/__PROJECT_NAME__';
-import { authConfig, httpBaseUrl, Insecure, DamlHub } from '../config';
+import { authConfig, Insecure } from '../config';
 import { useAuth0 } from "@auth0/auth0-react";
 
 type Props = {
@@ -20,7 +21,7 @@ const LoginScreen: React.FC<Props> = ({onLogin}) => {
 
   const login = useCallback(async (credentials: Credentials) => {
     try {
-      const ledger = new Ledger({token: credentials.token, httpBaseUrl});
+      const ledger = new Ledger({token: credentials.token});
       let userContract = await ledger.fetchByKey(User.User, credentials.party);
       if (userContract === null) {
         const user = {username: credentials.party, following: []};
@@ -85,29 +86,24 @@ const LoginScreen: React.FC<Props> = ({onLogin}) => {
     </>);
   };
 
-  const DamlHubLogin: React.FC<{auth: DamlHub}> = ({auth}) => {
-    const handleDamlHubLogin = () => {
-      window.location.assign(`https://login.projectdabl.com/auth/login?ledgerId=${auth.ledgerId}`);
-    }
-    const getCookieValue = (name: string): string => (
-      document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)')?.pop() || ''
+  const DamlHubLogin: React.FC = () => (
+    wrap(
+      <DamlHubLoginBtn
+        onLogin={creds => {
+          if (creds) {
+            login(creds);
+          }
+        }}
+        options={{
+          method: {
+            button: {
+              render: () => <Button primary fluid/>,
+            },
+          },
+        }}
+        />
     )
-    useEffect(() => {
-      const url = new URL(window.location.toString());
-      const party = url.searchParams.get('party');
-      if (party === null) {
-        return;
-      }
-      url.search = '';
-      window.history.replaceState(window.history.state, '', url.toString());
-      const token = getCookieValue('DAMLHUB_LEDGER_ACCESS_TOKEN');
-      login({token, party});
-    }, []);
-
-    return wrap(<Button primary fluid onClick={handleDamlHubLogin}>
-                  Log in with Daml Hub
-                </Button>);
-  };
+  );
 
   const Auth0Login: React.FC = () => {
     const { user, isAuthenticated, isLoading, loginWithRedirect, getAccessTokenSilently } = useAuth0();
@@ -139,7 +135,7 @@ const LoginScreen: React.FC<Props> = ({onLogin}) => {
   return authConfig.provider === "none"
        ? <InsecureLogin auth={authConfig} />
        : authConfig.provider === "daml-hub"
-       ? <DamlHubLogin auth={authConfig} />
+       ? <DamlHubLogin />
        : authConfig.provider === "auth0"
        ? <Auth0Login />
        : <div>Invalid configuation.</div>;

diff --git a/templates/create-daml-app/ui/src/config.ts.template b/templates/create-daml-app/ui/src/config.ts.template
@@ -2,16 +2,15 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { encode } from 'jwt-simple';
+import { isRunningOnHub } from '@daml/hub-react';
 
 export type Insecure = {
   provider: "none",
   makeToken: (party: string) => string,
-  ledgerId: string
 };
 
 export type DamlHub = {
   provider: "daml-hub",
-  ledgerId: string
 };
 
 export type Auth0 =  {
@@ -23,10 +22,9 @@ export type Auth0 =  {
 export type Authentication = Insecure | DamlHub | Auth0;
 
 export const authConfig: Authentication = (() => {
-  if (window.location.hostname.endsWith('.projectdabl.com')) {
+  if (isRunningOnHub()) {
     const auth: DamlHub = {
       provider: "daml-hub",
-      ledgerId: process.env.REACT_APP_LEDGER_ID ?? window.location.hostname.split('.')[0]
     };
     return auth;
   } else if (process.env.REACT_APP_AUTH && process.env.REACT_APP_AUTH.toLowerCase() === "auth0") {
@@ -44,7 +42,6 @@ export const authConfig: Authentication = (() => {
     const ledgerId: string = process.env.REACT_APP_LEDGER_ID ?? "__PROJECT_NAME__-sandbox"
     const auth: Insecure = {
       provider: "none",
-      ledgerId: ledgerId,
       makeToken: (party) => {
         const payload = {
           "https://daml.com/ledger-api": {
@@ -59,8 +56,3 @@ export const authConfig: Authentication = (() => {
     return auth;
   }
 })();
-
-export const httpBaseUrl =
-  authConfig.provider === "daml-hub"
-  ? `https://api.projectdabl.com/data/${authConfig.ledgerId}/`
-  : undefined;