feat: add recovery mode page to examples

examples/src/ManagedNotCCID.ts

@@ -88,8 +88,6 @@ export function useManagedNotCCID(backend: Backend | undefined): ManagedNotCCID
     },
     async enterRecoveryMode() {
       if (!notccid) throw new Error('Not connected')
-      if (!claimed) throw new Error('Not claimed')
-      if (atr === undefined) throw new Error('Card not powered')
       await notccid.enterRecoveryMode()
     },
   }

examples/src/components/RecoveryEntry.tsx

@@ -0,0 +1,66 @@
+import { Backend, ConsoleBackend } from '@estkme-group/notccid'
+import { FC, useCallback, useMemo, useState } from 'react'
+import { Button, Col, Container, Form, Row, Stack } from 'react-bootstrap'
+import { useManagedNotCCID } from 'src/ManagedNotCCID'
+import { MutexBackend } from 'src/MutexBackend'
+import { Connect } from './Connect'
+
+export const Entry: FC = () => {
+  const [backend, setBackend] = useState<Backend>()
+  const wrappedBackend = useMemo(() => {
+    if (!backend) return undefined
+    let _backend = backend
+    _backend = new ConsoleBackend(_backend, ConsoleBackend.buildOptions(printInfo, []))
+    _backend = new MutexBackend(_backend)
+    return _backend
+  }, [backend])
+  const managed = useManagedNotCCID(wrappedBackend)
+  const handleRecoveryMode = useCallback(async () => {
+    if (!managed) return
+    await managed.enterRecoveryMode()
+  }, [managed])
+  return (
+    <Container fluid>
+      <Form className='mt-3'>
+        <Form.Group as={Row} className='mt-3'>
+          <Form.Label column sm={1}>
+            Connect
+          </Form.Label>
+          <Col sm={11}>
+            <Connect backend={backend} onChange={setBackend} />
+          </Col>
+        </Form.Group>
+        <Form.Group as={Row} className='mt-3'>
+          <Form.Label column sm={1}>
+            Functionally
+          </Form.Label>
+          <Col sm={11}>
+            <Stack gap={3} direction='horizontal'>
+              <Button onClick={handleRecoveryMode}>Enter Recovery Mode</Button>
+            </Stack>
+          </Col>
+        </Form.Group>
+      </Form>
+    </Container>
+  )
+}
+
+function printInfo() {
+  const args: unknown[] = Array.from(arguments)
+  let argument: unknown
+  for (let index = 0; index < args.length; index++) {
+    argument = args[index]
+    if (argument instanceof Uint8Array) {
+      args[index] = toHexString(argument)
+    }
+  }
+  console.info.apply(console, args)
+}
+
+function toHexString(data: Uint8Array): string {
+  let result = ''
+  for (const b of data) {
+    result += b.toString(16).padStart(2, '0')
+  }
+  return result.toUpperCase()
+}

examples/src/recovery.tsx

@@ -0,0 +1,15 @@
+import 'bootstrap/dist/css/bootstrap.min.css'
+import ready from 'domready'
+import { createRoot } from 'react-dom/client'
+import { Entry } from './components/RecoveryEntry'
+
+document.documentElement.translate = false
+document.documentElement.classList.add('notranslate')
+
+const container = document.createElement('main')
+createRoot(container).render(<Entry />)
+
+ready(() => {
+  document.body = document.createElement('body')
+  document.body.appendChild(container)
+})

examples/webpack.config.ts

@@ -4,9 +4,16 @@ import HTMLPlugin from 'html-webpack-plugin'
 import CSSPlugin from 'mini-css-extract-plugin'
 import TSConfigPathsPlugin from 'tsconfig-paths-webpack-plugin'
 
+const MAIN_ENTRY = 'main'
+const RECOVERY_ENTRY = 'recovery'
+
 const configuration: Configuration = {
   context: __dirname,
   devtool: 'source-map',
+  entry: {
+    [MAIN_ENTRY]: require.resolve('./src/index.tsx'),
+    [RECOVERY_ENTRY]: require.resolve('./src/recovery.tsx'),
+  },
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.json'],
     plugins: [new TSConfigPathsPlugin()],
@@ -33,7 +40,14 @@ const configuration: Configuration = {
   plugins: [
     new CSSPlugin(),
     new HTMLPlugin({
+      filename: 'index.html',
       title: 'NotCCID Example',
+      chunks: [MAIN_ENTRY],
+    }),
+    new HTMLPlugin({
+      filename: 'recovery.html',
+      title: 'ESTKme-RED Recovery Tools',
+      chunks: [RECOVERY_ENTRY],
     }),
   ],
 }