Use multiauth package in management app

apps/example/package.json

@@ -18,7 +18,7 @@
     "@portis/web3": "^2.0.0-beta.57",
     "@walletconnect/web3-provider": "^1.3.4",
     "authereum": "0.0.4-beta.186",
-    "dids": "^2.0.1",
+    "dids": "^2.1.0",
     "fortmatic": "^2.2.1",
     "web3modal": "^1.9.2"
   },

apps/iframe/package.json

@@ -38,6 +38,8 @@
     "babel-core": "7.0.0-bridge.0",
     "babel-loader": "^8.2.2",
     "css-loader": "^2.1.1",
+    "dids": "2.1.0",
+    "icss-replace-symbols": "^1.1.0",
     "node-sass": "^4.13.1",
     "sass-loader": "^8.0.2",
     "style-loader": "^0.23.1",

apps/iframe/src/connectService.ts

@@ -1,27 +1,23 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access */
 
 import { ThreeIDError, assert } from '@3id/common'
-import type {
-  DIDMethodName,
-  DIDProvider,
-  DIDProviderMethods,
-  DIDRequest,
-  DIDResponse,
-  UserAuthenticateRequest,
-  UserRequestHandler,
-  UserRequestErrorCallback,
-  UserRequestCancel,
-} from '@3id/common'
 import { DisplayManageClientRPC } from '@3id/connect-display'
 import { Manager } from '@3id/manager'
 import { AuthProviderClient } from '@3id/window-auth-provider'
 import CeramicClient from '@ceramicnetwork/http-client'
 import { IDX } from '@ceramicstudio/idx'
 import ThreeIdProvider from '3id-did-provider'
+import type { DIDMethodName, DIDProvider, DIDProviderMethods, DIDRequest, DIDResponse } from 'dids'
 import type { RPCErrorObject, RPCRequest, RPCResponse, RPCResultResponse } from 'rpc-utils'
 import Url from 'url-parse'
 
 import { IframeService } from './iframeService'
+import type {
+  UserAuthenticateRequest,
+  UserRequestHandler,
+  UserRequestErrorCallback,
+  UserRequestCancel,
+} from './types'
 import { rpcError } from './utils'
 
 const CERAMIC_API = process.env.CERAMIC_API || 'https://ceramic-clay.3boxlabs.com'

apps/iframe/src/types.ts

@@ -1,5 +1,3 @@
-import type { JWE } from 'did-jwt'
-import type { RPCConnection, RPCRequest, RPCResponse } from 'rpc-utils'
 export interface ProviderConnectInfo {
   readonly chainId: string
 }
@@ -36,51 +34,6 @@ export interface EOSIOProvider {
   signArbitrary(publicKey: string, data: string): Promise<string>
 }
 
-// Eventually these types should be exported by 3ID DID Provider
-
-type CreateJWSParams = {
-  payload: Record<string, any>
-  protected?: Record<string, any>
-  revocable?: boolean
-  did: string
-}
-
-type DecryptJWEParams = {
-  jwe: JWE
-  did?: string
-}
-
-type AuthParams = {
-  paths: Array<string>
-  nonce: string
-  aud?: string
-}
-
-type JWSSignature = {
-  protected: string
-  signature: string
-}
-
-type GeneralJWS = {
-  payload: string
-  signatures: Array<JWSSignature>
-}
-
-export type DIDProviderMethods = {
-  did_authenticate: { params: AuthParams; result: GeneralJWS }
-  did_createJWS: { params: CreateJWSParams; result: { jws: GeneralJWS } }
-  did_decryptJWE: { params: DecryptJWEParams; result: { cleartext: string } }
-}
-export type DIDMethodName = keyof DIDProviderMethods
-
-export type DIDRequest<K extends DIDMethodName = DIDMethodName> = RPCRequest<DIDProviderMethods, K>
-export type DIDResponse<K extends DIDMethodName = DIDMethodName> = RPCResponse<
-  DIDProviderMethods,
-  K
->
-
-export type DIDProvider = RPCConnection<DIDProviderMethods, [string | null | undefined]>
-
 export type UserAuthenticateRequest = {
   type: 'authenticate'
   paths: Array<string>

apps/integration/test/browsers.test.ts

@@ -10,11 +10,12 @@ beforeAll(async () => {
 })
 
 describe('connect flow', () => {
-  jest.setTimeout(60000)
+  jest.setTimeout(120000)
 
   beforeEach(async () => {
     await jestPlaywright.resetContext()
     await page.goto('http://localhost:30000/app.html')
+    page.setDefaultTimeout(120000)
     // page.on('console', (consoleObj) => console.log(consoleObj.text()))
   })
 
@@ -43,7 +44,7 @@ describe('connect flow', () => {
         }, providerType)
 
         // Continue button
-        const button = await frame.waitForSelector('#accept', { timeout: 60000 })
+        const button = await frame.waitForSelector('#accept')
         await button.click()
         await new Promise((res) =>
           setTimeout(() => {
@@ -52,14 +53,17 @@ describe('connect flow', () => {
         )
 
         // Continue create account
-        const buttontwo = await frame.waitForSelector('#accept', { timeout: 60000 })
+        const buttontwo = await frame.waitForSelector('#accept')
         await buttontwo.click()
         await page.waitForSelector('.threeid-connect', { state: 'hidden' })
 
         const [did, account] = await didAccountPromise
 
         // Check localStorage contents
-        const linksState = await frame.evaluate((key) => localStorage.getItem(key), `LINK_${account}`)
+        const linksState = await frame.evaluate(
+          (key) => localStorage.getItem(key),
+          `LINK_${account}`
+        )
         expect(JSON.parse(linksState)).toBe(did)
 
         const accountsState = await frame.evaluate((key) => localStorage.getItem(key), `ACC_${did}`)
@@ -120,7 +124,10 @@ describe('connect flow', () => {
         expect(aka.accounts[1].claim).toMatchSnapshot()
 
         // Check localStorage contents
-        const linksState = await frame.evaluate((key) => localStorage.getItem(key), `LINK_${account}`)
+        const linksState = await frame.evaluate(
+          (key) => localStorage.getItem(key),
+          `LINK_${account}`
+        )
         expect(JSON.parse(linksState)).toBe(did)
       })
     }

apps/management/LICENSE

@@ -618,57 +618,4 @@ an absolute waiver of all civil liability in connection with the
 Program, unless a warranty or assumption of liability accompanies a
 copy of the Program in return for a fee.
 
-                     END OF TERMS AND CONDITIONS
-
-            How to Apply These Terms to Your New Programs
-
-  If you develop a new program, and you want it to be of the greatest
-possible use to the public, the best way to achieve this is to make it
-free software which everyone can redistribute and change under these terms.
-
-  To do so, attach the following notices to the program.  It is safest
-to attach them to the start of each source file to most effectively
-state the exclusion of warranty; and each file should have at least
-the "copyright" line and a pointer to where the full notice is found.
-
-    <one line to give the program's name and a brief idea of what it does.>
-    Copyright (C) <year>  <name of author>
-
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
-
-    You should have received a copy of the GNU General Public License
-    along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-Also add information on how to contact you by electronic and paper mail.
-
-  If the program does terminal interaction, make it output a short
-notice like this when it starts in an interactive mode:
-
-    3ID Connect Management Copyright (C) 2021 3Box Labs
-    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
-    This is free software, and you are welcome to redistribute it
-    under certain conditions; type `show c' for details.
-
-The hypothetical commands `show w' and `show c' should show the appropriate
-parts of the General Public License.  Of course, your program's commands
-might be different; for a GUI interface, you would use an "about box".
-
-  You should also get your employer (if you work as a programmer) or school,
-if any, to sign a "copyright disclaimer" for the program, if necessary.
-For more information on this, and how to apply and follow the GNU GPL, see
-<http://www.gnu.org/licenses/>.
-
-  The GNU General Public License does not permit incorporating your program
-into proprietary programs.  If your program is a subroutine library, you
-may consider it more useful to permit linking proprietary applications with
-the library.  If this is what you want to do, use the GNU Lesser General
-Public License instead of this License.  But first, please read
-<http://www.gnu.org/philosophy/why-not-lgpl.html>.
+                     END OF TERMS AND CONDITIONS

apps/management/package.json

@@ -14,17 +14,17 @@
   },
   "homepage": "./",
   "dependencies": {
+    "3id-did-provider": "^0.7.0",
     "@3id/manager": "^0.1.1",
     "@3id/window-auth-provider": "^0.1.1",
     "@ceramicnetwork/blockchain-utils-linking": "^0.3.1",
     "@ceramicnetwork/http-client": "^0.10.2",
     "@ceramicnetwork/transport-postmessage": "^0.3.0",
     "@ceramicstudio/idx": "^0.10.0",
-    "@web3-react/core": "^6.1.1",
-    "@web3-react/injected-connector": "^6.0.7",
+    "@ceramicstudio/multiauth": "^0.1.2",
     "caip": "^0.9.2",
     "grommet": "^2.16.3",
-    "jotai": "^0.15.2",
+    "jotai": "^0.16.3",
     "polished": "^4.1.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

apps/management/src/components/App.tsx

@@ -1,4 +1,4 @@
-import { Web3ReactProvider } from '@web3-react/core'
+import { Provider } from '@ceramicstudio/multiauth'
 import { Box, Grommet, Text } from 'grommet'
 
 import { useRemoteProxy, useDIDsData } from '../hooks'
@@ -7,30 +7,22 @@ import { theme } from '../theme'
 
 import IdentitySelect from './IdentitySelect'
 
-function getLibrary(provider: any): any {
-  return provider
-}
-
 export default function App() {
   const proxy = useRemoteProxy()
   const data = useDIDsData()
 
   const contents =
-    data && proxy ? (
-      <IdentitySelect dids={data} manager={proxy.manager} />
-    ) : (
-      <Text>Loading...</Text>
-    )
+    data && proxy ? <IdentitySelect dids={data} manager={proxy.manager} /> : <Text>Loading...</Text>
 
   return (
     <Grommet full theme={theme}>
-      <Web3ReactProvider getLibrary={getLibrary}>
+      <Provider>
         <Box>
           <Box alignSelf="center" margin="large" width="large">
             {contents}
           </Box>
         </Box>
-      </Web3ReactProvider>
+      </Provider>
     </Grommet>
   )
 }

apps/management/src/components/IdentitySelect.tsx

@@ -13,13 +13,21 @@ export type Props = {
 }
 
 export default function IdentitySelect({ dids, manager }: Props) {
-  return (
+  const options = Object.keys(dids).length ? (
     <>
       <Heading textAlign="center">Choose an identity</Heading>
       <IdentitiesList dids={dids} manager={manager} />
       <Box margin={{ top: 'medium' }}>
         <Text color="neutral-4">Don’t see an identity on this list?</Text>
       </Box>
+    </>
+  ) : (
+    <Heading textAlign="center">Add an identity</Heading>
+  )
+
+  return (
+    <>
+      {options}
       <LinkExistingDID />
       <LinkNewDID manager={manager} />
     </>