-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
916200a
commit fa43b93
Showing
16 changed files
with
7,606 additions
and
775 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,82 +1,110 @@ | ||
| import { TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Avatar, Typography, Card } from '@mui/material'; | ||
| import { | ||
| TableContainer, | ||
| Table, | ||
| TableHead, | ||
| TableRow, | ||
| TableCell, | ||
| TableBody, | ||
| Avatar, | ||
| Typography, | ||
| Card, | ||
| } from '@mui/material'; | ||
| import AccessControlButton from './AccessControlButton'; | ||
|
|
||
| export interface Platform { | ||
| name: string; | ||
| icon: React.ReactNode; | ||
| id: string; | ||
| provider: string; | ||
| uid: string; | ||
| } | ||
|
|
||
| export interface AccessData { | ||
| application: string; | ||
| [platform: string]: boolean | string; | ||
| } | ||
|
|
||
| export interface Column<T> { | ||
| field: keyof T; | ||
| headerName?: string; | ||
| headerComponent?: React.ReactNode; | ||
| renderCell?: (value: any, row: T) => React.ReactNode; | ||
| applicationName: string; | ||
| account: string; | ||
| hasPermission: boolean; | ||
| uid: string; | ||
| } | ||
|
|
||
| export interface CustomTableProps<T> { | ||
| xcolumns: Platform[]; | ||
| ycolumns: T[]; | ||
| data: T[]; | ||
| xcolumns: Platform[]; | ||
| ycolumns: T[]; | ||
| handleGrantOrRevokeAccess: (application: T, platform: Platform) => void; | ||
| } | ||
|
|
||
| const CustomTable: React.FC<CustomTableProps<AccessData>> = ({ xcolumns, ycolumns, data }) => { | ||
| const handleToggleAccess = (rowIndex: number, platform: string) => { | ||
| // Implement the logic to toggle access | ||
| console.log(`Toggle access for row ${rowIndex}, platform ${platform}`); | ||
| }; | ||
| const CustomTable: React.FC<CustomTableProps<AccessData>> = ({ | ||
| xcolumns, | ||
| ycolumns, | ||
| handleGrantOrRevokeAccess, | ||
| }) => { | ||
| console.log('xcolumns:', xcolumns); | ||
| console.log('ycolumns:', ycolumns); | ||
|
|
||
| const groupedApplications = ycolumns.reduce( | ||
| (acc, application) => { | ||
| if (!acc[application.applicationName]) { | ||
| acc[application.applicationName] = []; | ||
| } | ||
| acc[application.applicationName].push(application); | ||
| return acc; | ||
| }, | ||
| {} as Record<string, AccessData[]> | ||
| ); | ||
|
|
||
| const handleToggleAccess = (application: AccessData, platform: Platform) => { | ||
| handleGrantOrRevokeAccess(application, platform); | ||
| }; | ||
|
|
||
| return ( | ||
| <TableContainer> | ||
| <Table> | ||
| <TableHead> | ||
| <TableRow component={Card}> | ||
| <TableCell sx={{ padding: 1 }} align="center"> | ||
| <Typography fontWeight="bold"> | ||
| Applications \ Identifiers | ||
| </Typography> | ||
| </TableCell> | ||
| {xcolumns.map((platform, index) => ( | ||
| <TableCell key={index} align="center" sx={{ padding: 1 }}> | ||
| <div className="flex flex-row space-x-1.5 items-center justify-center"> | ||
| <Avatar> | ||
| {platform.icon} | ||
| </Avatar> | ||
| <Typography>{platform.name}</Typography> | ||
| </div> | ||
| </TableCell> | ||
| ))} | ||
| </TableRow> | ||
| </TableHead> | ||
| <TableBody> | ||
| {ycolumns.map((application, rowIndex) => ( | ||
| <TableRow component={Card} key={rowIndex}> | ||
| <TableCell align="center" sx={{ padding: 1 }}> | ||
| <div className='flex flex-col items-center justify-center text-center mx-auto space-y-2'> | ||
| <Avatar /> | ||
| <Typography> | ||
| {application.application} | ||
| </Typography> | ||
| </div> | ||
| </TableCell> | ||
| {xcolumns.map((platform, colIndex) => ( | ||
| <TableCell key={colIndex} align="center"> | ||
| <AccessControlButton | ||
| hasAccess={data[rowIndex][platform.name] as boolean} | ||
| onToggleAccess={() => handleToggleAccess(rowIndex, platform.name)} | ||
| /> | ||
| </TableCell> | ||
| ))} | ||
| </TableRow> | ||
| ))} | ||
| </TableBody> | ||
| </Table> | ||
| </TableContainer> | ||
| ); | ||
| return ( | ||
| <TableContainer> | ||
| <Table> | ||
| <TableHead> | ||
| <TableRow component={Card}> | ||
| <TableCell sx={{ padding: 1 }} align="center"> | ||
| <Typography fontWeight="bold"> | ||
| Applications \ Providers | ||
| </Typography> | ||
| </TableCell> | ||
| {xcolumns.map((platform, index) => ( | ||
| <TableCell key={index} align="center" sx={{ padding: 1 }}> | ||
| <div className="flex flex-row space-x-1.5 items-center justify-center"> | ||
| <Avatar>{platform.provider[0].toUpperCase()}</Avatar> | ||
| <Typography>{platform.provider}</Typography> | ||
| </div> | ||
| </TableCell> | ||
| ))} | ||
| </TableRow> | ||
| </TableHead> | ||
| <TableBody> | ||
| {Object.entries(groupedApplications).map( | ||
| ([applicationName, applications], rowIndex) => ( | ||
| <TableRow component={Card} key={rowIndex}> | ||
| <TableCell align="center" sx={{ padding: 1 }}> | ||
| <div className="flex flex-col items-center justify-center text-center mx-auto space-y-2"> | ||
| <Avatar /> | ||
| <Typography>{applicationName}</Typography> | ||
| </div> | ||
| </TableCell> | ||
| {xcolumns.map((platform, colIndex) => { | ||
| const application = applications.find( | ||
| (app) => app.uid === platform.uid | ||
| ); | ||
| return ( | ||
| <TableCell key={colIndex} align="center"> | ||
| <AccessControlButton | ||
| hasAccess={application?.hasPermission || false} | ||
| onToggleAccess={() => | ||
| handleToggleAccess(application!, platform) | ||
| } | ||
| /> | ||
| </TableCell> | ||
| ); | ||
| })} | ||
| </TableRow> | ||
| ) | ||
| )} | ||
| </TableBody> | ||
| </Table> | ||
| </TableContainer> | ||
| ); | ||
| }; | ||
|
|
||
| export default CustomTable; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import { | ||
| ReactElement, | ||
| createContext, | ||
| useContext, | ||
| useEffect, | ||
| useMemo, | ||
| useState, | ||
| } from 'react'; | ||
| import { LitNodeClient } from '@lit-protocol/lit-node-client'; | ||
| import { LitNetwork } from '@lit-protocol/constants'; | ||
|
|
||
| interface ILitProvider { | ||
| litNetwork: LitNetwork; | ||
| children: ReactElement; | ||
| } | ||
|
|
||
| const defaultLitNodeClient = new LitNodeClient({ | ||
| litNetwork: LitNetwork.DatilDev, | ||
| }); | ||
| const LitClientContext = createContext({ | ||
| litNodeClient: defaultLitNodeClient, | ||
| litConnected: false, | ||
| }); | ||
|
|
||
| export const LitProvider = ({ litNetwork, children }: ILitProvider) => { | ||
| const client = useMemo( | ||
| () => | ||
| new LitNodeClient({ | ||
| alertWhenUnauthorized: false, | ||
| litNetwork, | ||
| debug: true, | ||
| }), | ||
| [litNetwork] // Include litNetwork as a dependency | ||
| ); | ||
|
|
||
| const [connected, setConnected] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| const connect = async () => { | ||
| try { | ||
| await client.connect(); | ||
| setConnected(true); | ||
| console.log(`Connected to Lit Network: ${litNetwork}`); | ||
| } catch (error) { | ||
| console.error('Failed to connect to Lit Network:', error); | ||
| setConnected(false); | ||
| } | ||
| }; | ||
|
|
||
| connect(); | ||
|
|
||
| return () => { | ||
| // Add cleanup if necessary, e.g., disconnect the client | ||
| client.disconnect?.(); | ||
| }; | ||
| }, [client, litNetwork]); // Include client as a dependency | ||
|
|
||
| const contextValue = useMemo( | ||
| () => ({ litNodeClient: client, litConnected: connected }), | ||
| [client, connected] // Memoize the context value to avoid unnecessary re-renders | ||
| ); | ||
|
|
||
| return ( | ||
| <LitClientContext.Provider value={contextValue}> | ||
| {children} | ||
| </LitClientContext.Provider> | ||
| ); | ||
| }; | ||
|
|
||
| export default function useLit() { | ||
| return useContext(LitClientContext); | ||
| } |
Oops, something went wrong.