Skip to content
This repository was archived by the owner on Sep 17, 2024. It is now read-only.

Commit

Permalink
feat(InstanceDetailedPage): integrate debit wallet + get account
Browse files Browse the repository at this point in the history
Signed-off-by: reslene <[email protected]>
  • Loading branch information
reslene committed May 4, 2023
1 parent 0ac5825 commit d20b3fe
Show file tree
Hide file tree
Showing 14 changed files with 176 additions and 43 deletions.
3 changes: 2 additions & 1 deletion app/routes/instances/$instanceId.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ export default function Index() {
x = x + index === 0 ? 0 : x + 250;
const output = get(history, 'output', get(history, 'input'));
const item = output[Object.keys(output)[0]];
console.log(history, item);

return {
type: 'customNode',
Expand All @@ -106,7 +107,7 @@ export default function Index() {
data: {
isLowLevel: true,
label: history.name,
details: isArray(item.data) ? item.data[0] : item.data,
details: isArray(item.data) ? item.data[0] : get(item, 'data', item),
},
};
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,12 @@ import { CustomNodeProps } from './types';

import CreateTransaction from '~/src/components/Wrappers/Workflows/histories/activities/CreateTransaction';
import CreditWallet from '~/src/components/Wrappers/Workflows/histories/activities/CreditWallet';
import DebitWallet from '~/src/components/Wrappers/Workflows/histories/activities/DebitWallet';
import GetAccount from '~/src/components/Wrappers/Workflows/histories/activities/GetAccount';
import GetPayment from '~/src/components/Wrappers/Workflows/histories/activities/GetPayment';
import GetWallet from '~/src/components/Wrappers/Workflows/histories/activities/GetWallet';
import RevertTransaction from '~/src/components/Wrappers/Workflows/histories/activities/RevertTransaction';
import StripeTransfer from '~/src/components/Wrappers/Workflows/histories/activities/StripeTransfer';
import RunSend from '~/src/components/Wrappers/Workflows/histories/RunSend';
import DelayStage from '~/src/components/Wrappers/Workflows/stages/DelayStage';
import SendStage from '~/src/components/Wrappers/Workflows/stages/SendStage';
Expand Down Expand Up @@ -50,6 +52,10 @@ const CustomNode: FunctionComponent<CustomNodeProps> = ({
[OrchestrationStageSendHistory.CREDIT_WALLET]: (
<CreditWallet {...details} />
),
[OrchestrationStageSendHistory.DEBIT_WALLET]: <DebitWallet {...details} />,
[OrchestrationStageSendHistory.STRIPE_TRANSFER]: (
<StripeTransfer {...details} />
),
};

return (
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import React, { FunctionComponent } from 'react';

import { Wallet } from '@mui/icons-material';
import { Box, Typography, useTheme } from '@mui/material';
import { useTranslation } from 'react-i18next';

import { Chip } from '@numaryhq/storybook';

import NodeTitle from '~/src/components/Wrappers/Workflows/CustomNode/NodeTitle';
import { DebitWalletProps } from '~/src/components/Wrappers/Workflows/histories/activities/DebitWallet/types';
import {
chipContainer,
containerSx,
typoSx,
} from '~/src/components/Wrappers/Workflows/stages/utils';
import { useToggle } from '~/src/hooks/useToggle';

const DebitWallet: FunctionComponent<DebitWalletProps> = ({ amount }) => {
const { t } = useTranslation();
const { palette } = useTheme();
const [show, toggle] = useToggle(false);

return (
<Box
className="react-flow__node-default"
sx={{
borderRadius: '15px',
border: ({ palette }) => `1px dotted ${palette.blue.bright}`,
width: '100%',
}}
>
<NodeTitle
label={t('pages.flow.activities.debitWallet.title')}
color={palette.blue.light}
onToggle={toggle}
icon={<Wallet />}
/>
{show && (
<>
<Box component="span" display="block" sx={containerSx} mt={1}>
<Box sx={chipContainer}>
<Typography sx={typoSx} variant="bold">
{t('pages.flow.activities.debitWallet.amount')}
</Typography>
<Chip
label={`${amount.amount} ${amount.asset}`}
variant="square"
color="red"
/>
</Box>
</Box>
</>
)}
</Box>
);
};

export default DebitWallet;
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import DebitWallet from './DebitWallet';

export default DebitWallet;
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export type DebitWalletProps = {
amount: {
amount: number;
asset: string;
};
};
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,22 @@ import { Box, Typography, useTheme } from '@mui/material';
import { isEmpty } from 'lodash';
import { useTranslation } from 'react-i18next';

import { JsonViewer } from '@numaryhq/storybook';
import { Chip, JsonViewer } from '@numaryhq/storybook';

import NodeTitle from '~/src/components/Wrappers/Workflows/CustomNode/NodeTitle';
import { GetAccountProps } from '~/src/components/Wrappers/Workflows/histories/activities/GetAccount/types';
import {
chipContainer,
containerSx,
jsonContainer,
typoSx,
} from '~/src/components/Wrappers/Workflows/stages/utils';
import { useToggle } from '~/src/hooks/useToggle';

const GetAccount: FunctionComponent<GetAccountProps> = ({ metadata }) => {
const GetAccount: FunctionComponent<GetAccountProps> = ({
metadata,
address,
}) => {
const { t } = useTranslation();
const { palette } = useTheme();
const [show, toggle] = useToggle(false);
Expand All @@ -38,7 +42,13 @@ const GetAccount: FunctionComponent<GetAccountProps> = ({ metadata }) => {
/>
{show && (
<>
<Box component="span" display="block" sx={containerSx}>
<Box component="span" display="block" sx={containerSx} mt={1}>
<Box sx={chipContainer}>
<Typography sx={typoSx} variant="bold">
{t('pages.flow.activities.getAccount.address')}
</Typography>
<Chip label={address} variant="square" />
</Box>
{!isEmpty(metadata) && (
<Box sx={jsonContainer}>
<Typography sx={typoSx} variant="bold">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { ObjectOf } from '@numaryhq/storybook';
import { Account } from '~/src/types/ledger';

export type GetAccountProps = {
metadata: ObjectOf<any>;
};
export type GetAccountProps = Account;
Original file line number Diff line number Diff line change
@@ -1,27 +1,15 @@
import React, { FunctionComponent } from 'react';

import { SwapHoriz } from '@mui/icons-material';
import { Box, Typography, useTheme } from '@mui/material';
import { isEmpty } from 'lodash';
import { Box, useTheme } from '@mui/material';
import { useTranslation } from 'react-i18next';

import { JsonViewer } from '@numaryhq/storybook';

import NodeTitle from '~/src/components/Wrappers/Workflows/CustomNode/NodeTitle';
import { RevertTransactionProps } from '~/src/components/Wrappers/Workflows/histories/activities/RevertTransaction/types';
import {
containerSx,
jsonContainer,
typoSx,
} from '~/src/components/Wrappers/Workflows/stages/utils';
import { useToggle } from '~/src/hooks/useToggle';

const RevertTransaction: FunctionComponent<RevertTransactionProps> = ({
metadata,
}) => {
const RevertTransaction: FunctionComponent<RevertTransactionProps> = () => {
const { t } = useTranslation();
const { palette } = useTheme();
const [show, toggle] = useToggle(false);

return (
<Box
Expand All @@ -35,23 +23,8 @@ const RevertTransaction: FunctionComponent<RevertTransactionProps> = ({
<NodeTitle
label={t('pages.flow.activities.revertTransaction.title')}
color={palette.brown.light}
onToggle={toggle}
icon={<SwapHoriz />}
/>
{show && (
<>
<Box component="span" display="block" sx={containerSx}>
{!isEmpty(metadata) && (
<Box sx={jsonContainer}>
<Typography sx={typoSx} variant="bold">
{t('pages.flow.activities.revertTransaction.metadata')}
</Typography>
<JsonViewer jsonData={metadata} expanded />
</Box>
)}
</Box>
</>
)}
</Box>
);
};
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import React, { FunctionComponent } from 'react';

import { AccountTree } from '@mui/icons-material';
import { Box, Typography, useTheme } from '@mui/material';
import { useTranslation } from 'react-i18next';

import { Chip } from '@numaryhq/storybook';

import NodeTitle from '~/src/components/Wrappers/Workflows/CustomNode/NodeTitle';
import { StripeTransferProps } from '~/src/components/Wrappers/Workflows/histories/activities/StripeTransfer/types';
import {
chipContainer,
containerSx,
typoSx,
} from '~/src/components/Wrappers/Workflows/stages/utils';
import { useToggle } from '~/src/hooks/useToggle';

const StripeTransfer: FunctionComponent<StripeTransferProps> = ({
asset,
destination,
amount,
}) => {
const { t } = useTranslation();
const { palette } = useTheme();
const [show, toggle] = useToggle(false);

return (
<Box
className="react-flow__node-default"
sx={{
borderRadius: '15px',
border: ({ palette }) => `1px dotted ${palette.green.bright}`,
width: '100%',
}}
>
<NodeTitle
label={t('pages.flow.activities.stripeTransfer.title')}
color={palette.green.light}
onToggle={toggle}
icon={<AccountTree />}
/>
{show && (
<>
<Box component="span" display="block" sx={containerSx} mt={1}>
<Box sx={chipContainer}>
<Typography sx={typoSx} variant="bold">
{t('pages.flow.activities.stripeTransfer.destination')}
</Typography>
<Chip label={destination} variant="square" />
</Box>
<Box sx={chipContainer}>
<Typography sx={typoSx} variant="bold">
{t('pages.flow.activities.stripeTransfer.amount')}
</Typography>
<Chip label={`${amount} ${asset}`} variant="square" color="red" />
</Box>
</Box>
</>
)}
</Box>
);
};

export default StripeTransfer;
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import StripeTransfer from './StripeTransfer';

export default StripeTransfer;
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export type StripeTransferProps = {
amount: number;
asset: string;
destination: string;
};
11 changes: 10 additions & 1 deletion app/src/translations/en/translations.ts
Original file line number Diff line number Diff line change
Expand Up @@ -615,6 +615,16 @@ export default {
getAccount: {
title: 'Get account',
metadata: 'Metadata',
address: 'ID',
},
stripeTransfer: {
title: 'Stripe transfer',
destination: 'Destination',
amount: 'Amount',
},
debitWallet: {
title: 'Debit wallet',
amount: 'Amount',
},
getPayment: {
title: 'Get payment',
Expand All @@ -632,7 +642,6 @@ export default {
},
revertTransaction: {
title: 'Revert transaction',
metadata: 'Metadata',
},
},
waitEvent: {
Expand Down
2 changes: 2 additions & 0 deletions app/src/types/orchestration.ts
Original file line number Diff line number Diff line change
Expand Up @@ -84,4 +84,6 @@ export enum OrchestrationStageSendHistory {
GET_ACCOUNT = 'GetAccount',
GET_WALLET = 'GetWallet',
CREDIT_WALLET = 'CreditWallet',
DEBIT_WALLET = 'DebitWallet',
STRIPE_TRANSFER = 'StripeTransfer',
}

0 comments on commit d20b3fe

Please sign in to comment.