-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(rwa): start with gaspayable status bar (#2792)
- Loading branch information
1 parent
ec2d7d9
commit 337ea28
Showing
9 changed files
with
410 additions
and
2 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
62 changes: 62 additions & 0 deletions
62
packages/apps/rwa-demo/src/components/GasPayableBanner/GasPayableBanner.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,62 @@ | ||
| import { useFaucet } from '@/hooks/faucet'; | ||
| import { env } from '@/utils/env'; | ||
| import { MonoMonetizationOn } from '@kadena/kode-icons'; | ||
| import { | ||
| Button, | ||
| Notification, | ||
| NotificationFooter, | ||
| NotificationHeading, | ||
| } from '@kadena/kode-ui'; | ||
| import { useNotifications } from '@kadena/kode-ui/patterns'; | ||
| import type { FC } from 'react'; | ||
| import { useState } from 'react'; | ||
| import { TransactionTypeSpinner } from '../TransactionTypeSpinner/TransactionTypeSpinner'; | ||
| import { TXTYPES } from '../TransactionsProvider/TransactionsProvider'; | ||
|
|
||
| export const GasPayableBanner: FC = () => { | ||
| const { submit, isAllowed } = useFaucet(); | ||
| const [isDone, setIsDone] = useState(false); | ||
| const { addNotification } = useNotifications(); | ||
|
|
||
| const handleAddKda = async () => { | ||
| const tx = await submit(); | ||
| tx?.listener.subscribe( | ||
| () => {}, | ||
| () => {}, | ||
| () => { | ||
| addNotification({ | ||
| intent: 'positive', | ||
| label: 'KDA added to account', | ||
| message: `We added ${env.FAUCETAMOUNT} KDA to the account`, | ||
| }); | ||
|
|
||
| setIsDone(true); | ||
| }, | ||
| ); | ||
| }; | ||
|
|
||
| if (!isAllowed || isDone) return null; | ||
|
|
||
| return ( | ||
| <Notification intent="warning" role="status" type="stacked"> | ||
| <NotificationHeading> | ||
| The account has no balance to pay the gas | ||
| </NotificationHeading> | ||
| <NotificationFooter> | ||
| <Button | ||
| isDisabled={!isAllowed} | ||
| onPress={handleAddKda} | ||
| variant="warning" | ||
| endVisual={ | ||
| <TransactionTypeSpinner | ||
| type={TXTYPES.FAUCET} | ||
| fallbackIcon={<MonoMonetizationOn />} | ||
| /> | ||
| } | ||
| > | ||
| Add 5 KDA for Gas | ||
| </Button> | ||
| </NotificationFooter> | ||
| </Notification> | ||
| ); | ||
| }; |
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
189 changes: 189 additions & 0 deletions
189
packages/apps/rwa-demo/src/hooks/__tests__/faucet.test.ts
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,189 @@ | ||
| import { renderHook } from '@testing-library/react-hooks'; | ||
| import { useFaucet } from '../faucet'; | ||
|
|
||
| describe('faucet hook', () => { | ||
| const mocksHook = vi.hoisted(() => { | ||
| return { | ||
| useAccount: vi.fn().mockReturnValue({ | ||
| account: { | ||
| address: 'k:1', | ||
| }, | ||
| sign: vi.fn(), | ||
| isMounted: true, | ||
| isAgent: true, | ||
| isOwner: true, | ||
| isInvestor: true, | ||
| isGasPayable: true, | ||
| }), | ||
| useNetwork: vi.fn().mockReturnValue({ | ||
| activeNetwork: { | ||
| networkId: 'development', | ||
| }, | ||
| }), | ||
| useTransactions: vi.fn().mockReturnValue({ | ||
| addTransaction: vi.fn(), | ||
| isActiveAccountChangeTx: false, | ||
| }), | ||
| useNotifications: vi.fn().mockReturnValue({ | ||
| addNotification: vi.fn(), | ||
| }), | ||
| }; | ||
| }); | ||
|
|
||
| beforeEach(async () => { | ||
| vi.mock('./../account', async () => { | ||
| const actual = await vi.importActual('./../account'); | ||
| return { | ||
| ...actual, | ||
| useAccount: mocksHook.useAccount, | ||
| }; | ||
| }); | ||
|
|
||
| vi.mock('./../networks', async () => { | ||
| const actual = await vi.importActual('./../networks'); | ||
|
|
||
| return { | ||
| ...actual, | ||
| useNetwork: mocksHook.useNetwork, | ||
| }; | ||
| }); | ||
|
|
||
| vi.mock('./../transactions', async () => { | ||
| const actual = await vi.importActual('./../transactions'); | ||
| return { | ||
| ...actual, | ||
| useTransactions: mocksHook.useTransactions, | ||
| }; | ||
| }); | ||
|
|
||
| vi.mock('@kadena/kode-ui/patterns', async () => { | ||
| const actual = await vi.importActual('@kadena/kode-ui/patterns'); | ||
| return { | ||
| ...actual, | ||
| useNotifications: mocksHook.useNotifications, | ||
| }; | ||
| }); | ||
| }); | ||
|
|
||
| afterEach(() => { | ||
| vi.clearAllMocks(); | ||
| }); | ||
|
|
||
| it('should return the correct properties', async () => { | ||
| const { result } = renderHook(() => useFaucet()); | ||
| expect(result.current.hasOwnProperty('isAllowed')).toBe(true); | ||
| expect(result.current.hasOwnProperty('submit')).toBe(true); | ||
| }); | ||
|
|
||
| describe('isAllowed', () => { | ||
| it('should return true, when account is mounted, when it is owner, when gas is NOT payable, when network is development', () => { | ||
| mocksHook.useAccount.mockImplementation(() => ({ | ||
| account: { | ||
| address: 'k:he-man', | ||
| }, | ||
| isMounted: true, | ||
| isAgent: false, | ||
| isOwner: true, | ||
| isInvestor: false, | ||
| isGasPayable: false, | ||
| })); | ||
|
|
||
| mocksHook.useNetwork.mockImplementation(() => ({ | ||
| ...mocksHook.useNetwork.getMockImplementation(), | ||
| activeNetwork: { networkId: 'development' }, | ||
| })); | ||
|
|
||
| const { result } = renderHook(() => useFaucet()); | ||
|
|
||
| expect(result.current.isAllowed).toBe(true); | ||
| }); | ||
| }); | ||
|
|
||
| it('should return false, when account is NOT mounted, when it is owner, when gas is NOT payable, when network is development', () => { | ||
| mocksHook.useAccount.mockImplementation(() => ({ | ||
| account: { | ||
| address: 'k:he-man', | ||
| }, | ||
| isMounted: false, | ||
| isAgent: false, | ||
| isOwner: true, | ||
| isInvestor: false, | ||
| isGasPayable: false, | ||
| })); | ||
|
|
||
| mocksHook.useNetwork.mockImplementation(() => ({ | ||
| ...mocksHook.useNetwork.getMockImplementation(), | ||
| activeNetwork: { networkId: 'development' }, | ||
| })); | ||
|
|
||
| const { result } = renderHook(() => useFaucet()); | ||
|
|
||
| expect(result.current.isAllowed).toBe(false); | ||
| }); | ||
|
|
||
| it('should return false, when account is mounted, when account has no role, when gas is NOT payable, when network is development', () => { | ||
| mocksHook.useAccount.mockImplementation(() => ({ | ||
| account: { | ||
| address: 'k:he-man', | ||
| }, | ||
| isMounted: true, | ||
| isAgent: false, | ||
| isOwner: false, | ||
| isInvestor: false, | ||
| isGasPayable: false, | ||
| })); | ||
|
|
||
| mocksHook.useNetwork.mockImplementation(() => ({ | ||
| ...mocksHook.useNetwork.getMockImplementation(), | ||
| activeNetwork: { networkId: 'development' }, | ||
| })); | ||
|
|
||
| const { result } = renderHook(() => useFaucet()); | ||
|
|
||
| expect(result.current.isAllowed).toBe(false); | ||
| }); | ||
|
|
||
| it('should return false, when account is mounted, when account isinvestor, when gas is payable, when network is development', () => { | ||
| mocksHook.useAccount.mockImplementation(() => ({ | ||
| account: { | ||
| address: 'k:he-man', | ||
| }, | ||
| isMounted: true, | ||
| isAgent: false, | ||
| isOwner: false, | ||
| isInvestor: true, | ||
| isGasPayable: true, | ||
| })); | ||
|
|
||
| mocksHook.useNetwork.mockImplementation(() => ({ | ||
| ...mocksHook.useNetwork.getMockImplementation(), | ||
| activeNetwork: { networkId: 'development' }, | ||
| })); | ||
|
|
||
| const { result } = renderHook(() => useFaucet()); | ||
|
|
||
| expect(result.current.isAllowed).toBe(false); | ||
| }); | ||
|
|
||
| it('should return false, when account is mounted, when account isagent, when gas is NOT payable, when network is mainnet', () => { | ||
| mocksHook.useAccount.mockImplementation(() => ({ | ||
| account: { | ||
| address: 'k:he-man', | ||
| }, | ||
| isMounted: false, | ||
| isAgent: true, | ||
| isOwner: false, | ||
| isInvestor: true, | ||
| isGasPayable: false, | ||
| })); | ||
|
|
||
| mocksHook.useNetwork.mockImplementation(() => ({ | ||
| ...mocksHook.useNetwork.getMockImplementation(), | ||
| activeNetwork: { networkId: 'mainnet01' }, | ||
| })); | ||
|
|
||
| const { result } = renderHook(() => useFaucet()); | ||
|
|
||
| expect(result.current.isAllowed).toBe(false); | ||
| }); | ||
| }); |
Oops, something went wrong.