-
Notifications
You must be signed in to change notification settings - Fork 9
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
2918955
commit 0977141
Showing
7 changed files
with
259 additions
and
11 deletions.
There are no files selected for viewing
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
14 changes: 14 additions & 0 deletions
14
src/components/Asset/AssetActions/Download/ContractingProvider/index.module.css
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,14 @@ | ||
| .container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| margin-top: calc(var(--spacer) / 1.5); | ||
| margin-bottom: -1rem; | ||
| margin-left: calc(var(--spacer) / -1.5); | ||
| margin-right: calc(var(--spacer) / -1.5); | ||
| padding: calc(var(--spacer) / 1.5); | ||
| border-top: 1px solid var(--border-color); | ||
| } | ||
|
|
||
| .help { | ||
| composes: help from '../../ButtonBuy/index.module.css'; | ||
| } |
124 changes: 124 additions & 0 deletions
124
src/components/Asset/AssetActions/Download/ContractingProvider/index.tsx
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,124 @@ | ||
| import { ReactElement, useCallback, useEffect, useState } from 'react' | ||
| import styles from './index.module.css' | ||
| import Button from '../../../../@shared/atoms/Button' | ||
| import { useAccount, useSignMessage } from 'wagmi' | ||
| import { getContractingProviderNonce, getPayPerUseCount } from '../../utils' | ||
| import Alert from '../../../../@shared/atoms/Alert' | ||
| import { useMarketMetadata } from '../../../../../@context/MarketMetadata' | ||
| import { useAutomation } from '../../../../../@context/Automation/AutomationProvider' | ||
|
|
||
| export enum PAYMENT_MODES { | ||
| SUBSCRIPTION = 'subscription', | ||
| PAYPERUSE = 'payperuse' | ||
| } | ||
|
|
||
| export type PaymentMode = `${PAYMENT_MODES}` | ||
|
|
||
| export default function ContractingProvider(props: { | ||
| did: string | ||
| }): ReactElement { | ||
| const { did } = props | ||
| const { address } = useAccount() | ||
| const [isRequesting, setIsRequesting] = useState(false) | ||
| const [accessCreditsCount, setAccessCreditsCount] = useState<number>() | ||
| const { | ||
| signMessage, | ||
| data: signMessageData, | ||
| isSuccess, | ||
| isError | ||
| } = useSignMessage() | ||
| const { | ||
| appConfig: { | ||
| contractingProvider: { endpoint: contractingProviderEndpoint } | ||
| } | ||
| } = useMarketMetadata() | ||
|
|
||
| const { autoWallet, isAutomationEnabled } = useAutomation() | ||
|
|
||
| const [activeAddress, setActiveAddress] = useState<string>() | ||
| const [signature, setSignature] = useState<string>() | ||
|
|
||
| useEffect(() => { | ||
| if (isAutomationEnabled) setActiveAddress(autoWallet.address) | ||
| else setActiveAddress(address) | ||
| }, [address, autoWallet?.address, isAutomationEnabled]) | ||
|
|
||
| const checkAccessCredits = async () => { | ||
| setIsRequesting(true) | ||
|
|
||
| const nonce = await getContractingProviderNonce( | ||
| contractingProviderEndpoint, | ||
| activeAddress | ||
| ) | ||
| if (isAutomationEnabled) { | ||
| try { | ||
| const autoWalletSignature = await autoWallet.signMessage(nonce) | ||
| setSignature(autoWalletSignature) | ||
| } catch (e) { | ||
| setIsRequesting(false) | ||
| console.error(e) | ||
| } | ||
| } else { | ||
| signMessage({ message: nonce }) | ||
| } | ||
| } | ||
|
|
||
| const updateCount = useCallback(async () => { | ||
| const count = await getPayPerUseCount( | ||
| contractingProviderEndpoint, | ||
| activeAddress, | ||
| signature, | ||
| did | ||
| ) | ||
| setAccessCreditsCount(count) | ||
| setIsRequesting(false) | ||
| }, [contractingProviderEndpoint, activeAddress, signature, did]) | ||
|
|
||
| useEffect(() => { | ||
| if (isError) setIsRequesting(false) | ||
| if (isSuccess) { | ||
| setSignature(signMessageData) | ||
| } | ||
| }, [isSuccess, isError]) | ||
|
|
||
| useEffect(() => { | ||
| if (!signature) return | ||
| updateCount() | ||
| }, [signature]) | ||
|
|
||
| return ( | ||
| <div className={styles.container}> | ||
| {accessCreditsCount ? ( | ||
| <Alert | ||
| state="info" | ||
| text={`You purchased access to this service **${accessCreditsCount} time${ | ||
| accessCreditsCount > 1 ? 's' : '' | ||
| }**`} | ||
| action={{ | ||
| name: 'Re-run', | ||
| handleAction: (e) => { | ||
| setAccessCreditsCount(undefined) // force visible re-render | ||
| e.preventDefault() | ||
| checkAccessCredits() | ||
| } | ||
| }} | ||
| /> | ||
| ) : ( | ||
| <Button | ||
| style="text" | ||
| onClick={(e) => { | ||
| e.preventDefault() | ||
| checkAccessCredits() | ||
| }} | ||
| disabled={isRequesting} | ||
| > | ||
| Check Access Credits | ||
| </Button> | ||
| )} | ||
| <div className={styles.help}> | ||
| You can validate your purchase count of this SaaS Offering against a | ||
| contracting provider instance. | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
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 |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import axios from 'axios' | ||
| import { toast } from 'react-toastify' | ||
|
|
||
| export async function getContractingProviderNonce( | ||
| contractingBaseUrl: string, | ||
| address: string | ||
| ) { | ||
| try { | ||
| const response = await axios.get( | ||
| `${contractingBaseUrl}/user/${address}/nonce` | ||
| ) | ||
| return response.data | ||
| } catch (e) { | ||
| console.error(e) | ||
| toast.error('Could not get nonce from contracting provider.') | ||
| } | ||
| } | ||
|
|
||
| export async function getPayPerUseCount( | ||
| contractingBaseUrl: string, | ||
| address: string, | ||
| signature: string, | ||
| did: string | ||
| ) { | ||
| try { | ||
| const response = await axios.post( | ||
| `${contractingBaseUrl}/contracting/validate`, | ||
| { address, signature, did }, | ||
| { | ||
| // throw only on status codes we dont expect | ||
| // 404 returned if no transaction was found for address & did combination | ||
| // 401 returned if 'hasAccess' for address on did is = false | ||
| validateStatus: (status) => status < 400 || [404, 401].includes(status) | ||
| } | ||
| ) | ||
|
|
||
| const { data } = response | ||
|
|
||
| return data?.orderCount | ||
| } catch (e) { | ||
| console.error(e) | ||
| toast.error('Could not retrieve information from contracting provider.') | ||
| } | ||
| } |