) => {\n state.vp = action.payload;\n }\n }\n});\n\nexport const { setHolderPrivateKey, setCredentials, setInputComponentList, setVP, setMasks } =\n presentSlice.actions;\n\nexport const _holderPrivateKey = (state: RootState) => state.present.holderPrivateKey;\nexport const _credentials = (state: RootState) => state.present.credentials;\nexport const _masks = (state: RootState) => state.present.masks;\nexport const _inputComponentList = (state: RootState) => state.present.inputComponentList;\nexport const _vp = (state: RootState) => state.present.vp;\n\nexport default presentSlice.reducer;\n","import {\n Checkbox,\n FormControlLabel,\n FormGroup,\n List,\n ListItem,\n Typography\n} from '@material-ui/core';\nimport React from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { setMasks, _credentials, _masks } from '../redux/presentSlice';\n\nexport default function Masker(props: any) {\n const masks = useSelector(_masks);\n const credentials = useSelector(_credentials);\n const dispatch = useDispatch();\n let claims = {};\n\n try {\n claims = JSON.parse(btoa(credentials[props.index])).claims;\n } catch (error) {}\n\n const handleCheckboxInput = (checked: boolean, key: string) => {\n let newMasks: any = [...masks];\n if (newMasks[props.index]) {\n newMasks = [\n ...masks.slice(0, props.index),\n { ...masks[props.index], [key]: checked },\n ...masks.slice(props.index + 1)\n ];\n // newMasks[props.index][key] = checked\n } else {\n newMasks = [\n ...masks.slice(0, props.index),\n { [key]: checked },\n ...masks.slice(props.index + 1)\n ];\n // newMasks[props.index] = {[key]: checked}\n }\n\n dispatch(setMasks(newMasks));\n };\n\n return (\n \n \n \n Select to mask claims\n {Object.keys(claims).map((key: string) => {\n return (\n \n \n handleCheckboxInput(e.target.checked, key)\n }\n name=\"checkedB\"\n color=\"primary\"\n />\n }\n label={`Claim \"${key}\" ${\n masks[props.index][key] ? 'Masked' : 'Exposed'\n }`}\n labelPlacement=\"start\"\n />\n \n );\n })}\n
\n \n
\n );\n}\n","import { IconButton, makeStyles, TextField, Typography } from '@material-ui/core';\nimport MinimizeIcon from '@material-ui/icons/Minimize';\nimport React from 'react';\n\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n setCredentials,\n _credentials,\n _inputComponentList,\n _masks,\n setInputComponentList\n} from '../redux/presentSlice';\n\nimport Masker from './Masker';\n\nconst useStyles = makeStyles({\n elements: {\n marginLeft: 3,\n marginRight: 3\n },\n secondaryWrapper: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'stretch'\n }\n});\n\nexport default function MaskingComponent(props: { index: number }) {\n const masks = useSelector(_masks);\n const credentials = useSelector(_credentials);\n const inputComponentList = useSelector(_inputComponentList);\n const dispatch = useDispatch();\n\n const classes = useStyles();\n\n const handeleSignedCredntialInput = (credential: string, index: number) => {\n const newCredentialArray = [...credentials];\n newCredentialArray[index] = credential;\n dispatch(setCredentials(newCredentialArray));\n };\n\n const removeInput = (index: number) => {\n const newInputComponentList = [...inputComponentList];\n const newMaskArray = [...masks];\n const newCredentialArray = [...credentials];\n newInputComponentList.pop();\n newMaskArray.splice(index, 1);\n newCredentialArray.splice(index, 1);\n dispatch(setInputComponentList(newInputComponentList));\n dispatch(setCredentials(newCredentialArray));\n };\n\n return (\n \n
\n handeleSignedCredntialInput(e.target.value, props.index)}\n label=\"Signed Credentials\"\n variant=\"outlined\"\n multiline\n fullWidth\n />\n removeInput(props.index)}\n disabled={inputComponentList.length < 2}>\n \n \n
\n
\n
\n \n \n Mask and present credentials\n \n\n \n \n {inputComponentList.map((i: number) => {\n return ;\n })}\n
\n \n\n \n \n Add more credentials\n \n \n\n \n handlePrivateKeyInput(e.target.value)}\n label=\"Holder's Private Key\"\n variant=\"outlined\"\n multiline\n fullWidth\n />\n \n\n \n \n Mask & Present\n \n \n\n \n copyToClipboard(vp)}\n />\n \n \n\n \n
\n );\n}\n","import { createSlice, PayloadAction } from '@reduxjs/toolkit';\nimport { RootState } from '../app/store';\n\ninterface offResolverState {\n did: string;\n didDoc: string;\n}\n\nconst initialState: offResolverState = {\n did: '',\n didDoc: ''\n};\n\nexport const offResolverSlice = createSlice({\n name: 'off-resolve',\n initialState,\n reducers: {\n setDID: (state, action: PayloadAction) => {\n state.did = action.payload;\n },\n setDIDDocument: (state, action: PayloadAction) => {\n state.didDoc = action.payload;\n }\n }\n});\n\nexport const { setDID, setDIDDocument } = offResolverSlice.actions;\n\nexport const _did = (state: RootState) => state.offResolve.did;\nexport const _didDoc = (state: RootState) => state.offResolve.didDoc;\n\nexport default offResolverSlice.reducer;\n","import React, { useState } from 'react';\nimport { Grid, TextField, Button } from '@material-ui/core';\nimport { makeStyles, Theme, createStyles } from '@material-ui/core/styles';\nimport Title from './Title';\nimport axios from 'axios';\nimport { isAddress } from '../utils';\n\nimport { useDispatch, useSelector } from 'react-redux';\nimport { setDID, setDIDDocument, _did, _didDoc } from '../redux/offResolverSlice';\nimport Spinner from './Spinner';\n\nconst useStyles = makeStyles((theme: Theme) =>\n createStyles({\n root: {\n width: '100%',\n '& > * + *': {\n marginTop: theme.spacing(2)\n }\n },\n btn: {\n marginBottom: 10\n }\n })\n);\n\nexport default function OCDIDResolver() {\n const did = useSelector(_did);\n const didDoc = useSelector(_didDoc);\n const [isValidDID, setIsValidDID] = useState(true);\n const classes = useStyles();\n\n const [snackBarState, setState] = React.useState<{ open: boolean; text: string }>({\n open: false,\n text: ''\n });\n const [isResolving, setIsResolving] = useState(false);\n\n const dispatch = useDispatch();\n\n function getDID() {\n setIsResolving(true);\n axios\n .get(`${process.env.REACT_APP_BACKEND}/did/${did}`)\n .then((res: any) => {\n setIsValidDID(true);\n dispatch(setDIDDocument(JSON.stringify(res.data.didDocument, null, 4)));\n setIsResolving(false);\n })\n .catch((err) => {\n if (err.response && err.response.data.error) {\n dispatch(setDIDDocument(err.response.data.error));\n } else {\n dispatch(setDIDDocument('Error'));\n }\n setIsResolving(false);\n });\n }\n\n function handleDidInput(did: string): void {\n dispatch(setDID(did));\n }\n\n function copyToClipboard(text: string) {\n if (text !== '') {\n if (window.isSecureContext) {\n navigator.clipboard.writeText(text);\n setState({\n open: true,\n text: 'Copied to clipboard'\n });\n } else {\n setState({\n open: true,\n text: 'Clould not copied'\n });\n }\n }\n }\n\n return (\n \n \n {'Resolve Offchain DID'}\n \n\n \n handleDidInput(e.target.value)}\n error={!isValidDID}\n helperText={isValidDID ? '' : 'Invalid DID'}\n />\n \n\n \n \n Resolve DID\n \n \n\n \n {\n copyToClipboard(didDoc);\n }}\n />\n \n {isResolving && }\n \n );\n}\n","import React from 'react';\nimport { createStyles, Theme, makeStyles, createMuiTheme } from '@material-ui/core/styles';\nimport { ThemeProvider } from '@material-ui/styles';\nimport Container from '@material-ui/core/Container';\nimport AppBar from '@material-ui/core/AppBar';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport Typography from '@material-ui/core/Typography';\nimport Drawer from '@material-ui/core/Drawer';\nimport MenuIcon from '@material-ui/icons/Menu';\nimport Hidden from '@material-ui/core/Hidden';\nimport IconButton from '@material-ui/core/IconButton';\nimport { _view } from './redux/appSlice';\nimport { useSelector } from 'react-redux';\n\nimport Home from './components/Home';\nimport DrawerItems from './components/DrawerItems';\nimport NormalDID from './components/NormalDID';\nimport HDDID from './components/HDDID';\nimport ResolveDID from './components/ResolveDID';\nimport SDCredentialCreator from './components/SDCredentialCreator';\nimport SDCredentialMasker from './components/SDCredentialMasker';\nimport SDCredentialVerifier from './components/SDCredentialVerifier';\nimport OCDIDCreator from './components/OffChainDIDCreator';\nimport OCDIDResolver from './components/OffChainDIDResolver';\nimport OCDIDUpdater from './components/OffchainDIDUpdater';\nimport OCDIDRevoker from './components/OffchainDIDRevoker';\n\nconst drawerWidth = 200;\n\nconst theme = createMuiTheme({\n palette: {\n primary: {\n main: '#24C3B5'\n },\n secondary: {\n main: '#24C3B5',\n contrastText: '#ffcc00'\n },\n text: {\n primary: '#5F6F81',\n secondary: '#303030'\n },\n contrastThreshold: 1,\n tonalOffset: 0.2\n }\n});\n\nconst useStyles = makeStyles((theme: Theme) =>\n createStyles({\n root: {\n display: 'flex'\n },\n appBar: {\n zIndex: theme.zIndex.drawer + 1\n },\n drawer: {\n width: drawerWidth,\n flexShrink: 0\n },\n drawerPaper: {\n width: drawerWidth\n },\n content: {\n flexGrow: 1,\n padding: theme.spacing(3)\n },\n menuButton: {\n marginRight: theme.spacing(2),\n [theme.breakpoints.up('sm')]: {\n display: 'none'\n }\n }\n })\n);\n\n/**\n * Main app component\n * @return {React.ReactElement}\n */\nfunction App() {\n const view = useSelector(_view);\n const [mobileOpen, setMobileOpen] = React.useState(false);\n const classes = useStyles();\n\n const handleDrawerToggle = () => {\n setMobileOpen(!mobileOpen);\n };\n\n let currentView = ;\n\n switch (view) {\n case 0:\n currentView = ;\n break;\n case 1:\n currentView = ;\n break;\n case 2:\n currentView = ;\n break;\n case 3:\n currentView = ;\n break;\n case 4:\n currentView = ;\n break;\n case 5:\n currentView = ;\n break;\n case 6:\n currentView = ;\n break;\n case 7:\n currentView = ;\n break;\n case 8:\n currentView = ;\n break;\n case 9:\n currentView = ;\n break;\n case 10:\n currentView = ;\n break;\n default:\n currentView = ;\n }\n\n return (\n \n \n
\n \n \n \n \n \n SIOP-DID Tools\n \n \n \n
\n \n \n \n \n
\n \n \n \n \n\n
\n \n \n {currentView}\n \n \n