1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-06-28 00:27:49 +02:00
market/src/components/organisms/Permission.tsx
Jamie Hewitt e26ed0e81a
Issue 582 market rbac integration (#597)
* adding env for RBAC server url to app.config.js

* creating util function for requesting auth from the rbac server

* fixing typing error

* testing rbac request on homepage

* removing console logs

* importing RBAC url from config file

* creating develpment .env file

* return true if no rbac url env is set

* creating permissions parent component

* wrapping homepage content in permission element

* wrapping publish in permissions wrapper

* wrapping search results in permissions wrapper

* wrapping asset actions in permissions element

* creating an error alert for permission denied

* updating react hook dependency

* passing address to rbac component

* sedning address to RBAC server

* wrapping asset in permission component

* removing unused import of Permission component

* sending request based on address

* chaning default permission case to restrict access

* updating eventType as consume

* Adding loader icon while waiting form permission response

* only sending request to RBAC if address is defined

* adding wallet connection info message

* changing the env name and checking for undefined

* updating .env.development

* Check for undefined RBAC_URL in permissions component

* removing .env.development and updating .env.example

* updating .env.example comment

* switching alert messages and reducing return statements

* removing console.log message

* fixing linting issue

* Revert "fixing linting issue"

This reverts commit 8bcb80be3d.

* Fixing linting errors

* pull from origin main

* Revert "pull from origin main"

This reverts commit 9535e41a5f.
2021-06-10 12:06:26 +03:00

63 lines
1.9 KiB
TypeScript

import React, { ReactElement, useEffect, useState } from 'react'
import { useWeb3 } from '../../providers/Web3'
import rbacRequest from '../../utils/rbac'
import Alert from '../atoms/Alert'
import Loader from '../atoms/Loader'
import appConfig from '../../../app.config'
export default function Permission({
eventType,
children
}: {
eventType: string
children: ReactElement
}): ReactElement {
const url = appConfig.rbacUrl
const [data, updateData] = useState<boolean | 'ERROR'>()
const [errorMessage, updateError] = useState<string>()
const [messageState, updateMessageState] =
useState<'error' | 'warning' | 'info' | 'success'>()
const { accountId } = useWeb3()
useEffect(() => {
if (url === undefined) return
const getData = async () => {
if (accountId === undefined) {
updateError('Please make sure your wallet is connected to proceed.')
updateMessageState('info')
} else {
const data = await rbacRequest(eventType, accountId)
updateData(data)
if (data === 'ERROR') {
updateError(
'There was an error verifying your permissions. Please refresh the page or conntact your network administrator'
)
updateMessageState('error')
} else if (data === false) {
updateError(
`Sorry, you don't have permission to ${eventType}. Please make sure you have connected your registered address.`
)
updateMessageState('warning')
} else if (data !== true) {
updateError(
'An unkown error occured. Please conntact your network administrator'
)
updateMessageState('error')
}
}
}
getData()
}, [eventType, accountId, url])
if (url === undefined || data === true) {
return <>{children}</>
}
return (
<>
<Alert text={errorMessage} state={messageState} />
<br />
<Loader />
</>
)
}