Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature/latest_updates #101

Merged
merged 34 commits into from
Feb 21, 2024
Merged
Changes from 1 commit
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
db75fcd
add new sdk types
simke9445 Nov 2, 2023
2c12c15
add job fee estimate logic in create tz
simke9445 Nov 3, 2023
1f25c9e
add new sdk changes
simke9445 Nov 11, 2023
3612fa7
new sdk estimate logic
simke9445 Nov 30, 2023
f5bc48d
port msg and variable usage to new contracts (WIP)
simke9445 Dec 4, 2023
2cdd6d8
placeholder account impl
simke9445 Dec 11, 2023
08ae727
placeholders
simke9445 Dec 11, 2023
50c2ea1
update editor input
simke9445 Dec 11, 2023
3578827
minor
simke9445 Dec 12, 2023
ac66e9d
add funding accounts query
simke9445 Dec 20, 2023
306dd01
add create funding account tx
simke9445 Dec 20, 2023
d46149f
fix
simke9445 Dec 20, 2023
46a591d
add funding accounts UI - wip
simke9445 Dec 20, 2023
1e34152
finish balances per funding account logic
simke9445 Jan 9, 2024
2fb2846
improve funding accounts empty view ux
simke9445 Jan 9, 2024
baf1d54
add last_used_by_job id for taken and free funding account and taken …
simke9445 Jan 9, 2024
b6e81d3
add duration days to job creation
simke9445 Jan 12, 2024
30dc6a6
job new flow improvements
simke9445 Jan 17, 2024
08c8faf
refactor useCreateJobTx
simke9445 Jan 17, 2024
f96140d
create summary form WIP
simke9445 Jan 17, 2024
2d59e06
summary form
simke9445 Jan 17, 2024
cc16e31
finish summary form
simke9445 Jan 18, 2024
3f2938b
add funding account input to details form
simke9445 Jan 23, 2024
1317a6a
add funding account support in job create flow
simke9445 Jan 24, 2024
966769c
fix details form validation
simke9445 Jan 24, 2024
69f989b
add staging sdk version
simke9445 Jan 29, 2024
3f3a68e
new sdk v
simke9445 Feb 2, 2024
33d89ef
new skd v
simke9445 Feb 5, 2024
f2b9b2d
change editor input + new version
simke9445 Feb 13, 2024
f149697
landing page updates
simke9445 Feb 19, 2024
d227d2e
Merge remote-tracking branch 'origin' into feature/latest_updates
simke9445 Feb 21, 2024
5c4d373
temporarily disable injective
simke9445 Feb 21, 2024
44a75d3
reeneable injective
simke9445 Feb 21, 2024
2c701c5
feature/latest_updates
simke9445 Feb 21, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
add funding account input to details form
simke9445 committed Jan 23, 2024
commit 3f2938be0f9bdd1143cba401432d8ffa81d0135f
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.switch
margin-top: 4px
margin-left: -6px
// margin-left: -6px
margin-top: 8px

.inner
Original file line number Diff line number Diff line change
@@ -9,7 +9,7 @@
height: auto
display: grid
width: 1000px
grid-template-columns: 1fr 1fr
grid-template-columns: 1fr 1fr 1fr 1fr
grid-template-rows: repeat(3, min-content)
row-gap: 24px !important
column-gap: 24px !important
@@ -25,6 +25,7 @@
.template_msg_input
height: 166px

.recurring,
.name_input,
.amount_input,
.tabs,
@@ -37,15 +38,15 @@

.name_input
grid-row: 1
grid-column: 1
grid-column: 1 / span 2

.amount_input
grid-row: 2
grid-column: 1
grid-column: 1 / span 2

.description_input
grid-row: 1 / span 2
grid-column: 2
grid-column: 3 / span 2

.textarea_label
margin-top: 40px
@@ -59,25 +60,33 @@
align-items: flex-start !important
padding: 0 !important

.tabs
.recurring
grid-row: 3
grid-column: 1

.msg_input
.funding_account
grid-row: 4
grid-column: 1 / span 2

.tabs
grid-row: 3
grid-column: 3

.msg_input
grid-row: 4
grid-column: 3 / span 2

.template_input
grid-row: 4
grid-column: 1
grid-column: 3 / span 2

.template_vars
grid-row: 5
grid-column: 1
grid-column: 1 / span 2

.template_msg_input
grid-row: 4 / span 2
grid-column: 2
grid-column: 2 / span 4

.title_container
position: relative
13 changes: 10 additions & 3 deletions apps/warp-protocol/src/pages/job-new/details-form/DetailsForm.tsx
Original file line number Diff line number Diff line change
@@ -19,6 +19,7 @@ import { useCallback, useEffect } from 'react';
import { useJobStorage } from '../useJobStorage';
import { ToggleInput } from 'pages/dashboard/jobs-widget/inputs/ToggleInput';
import { NumericInput } from 'components/primitives/numeric-input';
import { FundingAccountInput } from './funding-account-input/FundingAccountInput';

type DetailsFormProps = UIElementProps & {
onNext: (props: DetailsFormInput & { variables: warp_resolver.Variable[] }) => void;
@@ -80,9 +81,8 @@ export const DetailsForm = (props: DetailsFormProps) => {
Back
</Link>
<Text className={styles.description} variant="label">
Below you may enter job information including the Cosmos message payload, along with the reward provided to
the keeper for successfully executing the job. Any tokens sent as part of the job's message must be present in
your Warp account balance at the moment of execution.
Below you may enter job information including the Cosmos message payload, duration of stay in job queue and an
optional funding account (used for fees and keeper reward).
</Text>
</Container>
<Form className={styles.form}>
@@ -148,6 +148,13 @@ export const DetailsForm = (props: DetailsFormProps) => {
onChange={(value) => input({ recurring: value })}
/>

<FundingAccountInput
className={styles.funding_account}
label="Funding account"
value={undefined}
onChange={(token) => {}}
/>

<Container className={styles.tabs} direction="row">
{tabTypes.map((tabType) => (
<Button
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
.icon
width: 24px
height: 24px
margin-right: 16px

.container
cursor: pointer
font-family: PolySans
color: var(--input-color)
background-color: var(--input-background-color)
padding: 16px 14px
min-height: 24px
line-height: 24px
border-width: 1px
border-color: var(--input-background-color)
border-radius: 4px

.placeholder
flex-grow: 1
opacity: 1
color: var(--input-placeholder-color)

.icon
width: 24px
height: 24px
margin-right: 16px

.text
flex-grow: 1
color: var(--input-color)
overflow: hidden
text-overflow: ellipsis

.chevron
width: 24px
height: 24px
path
fill: var(--text-color-secondary) !important
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import { Container, UIElementProps } from '@terra-money/apps/components';
import classNames from 'classnames';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import { FormControl } from 'components/form-control/FormControl';
import { TokenIcon } from 'components/token-icon';
import { Token } from '@terra-money/apps/types';
import styles from './FundingAccountInput.module.sass';
import { useFundingAccountListDialog } from './funding-account-list';

interface FundingAccountInputProps extends UIElementProps {
label: string;
placeholder?: string;
value?: Token;
onChange: (value: string) => void;
}

const FundingAccountInput = (props: FundingAccountInputProps) => {
const { className, placeholder = 'Select a funding account', label, value, onChange } = props;

const openFundingAccountList = useFundingAccountListDialog();

const component =
value === undefined ? (
<span className={styles.placeholder}>{placeholder}</span>
) : typeof value === 'string' ? (
<span className={styles.text}>{value}</span>
) : (
<>
<TokenIcon className={styles.icon} symbol={value.icon} path={value.icon} />
<span className={styles.text}>{value.name ?? value.symbol}</span>
</>
);

return (
<FormControl className={classNames(className, styles.root)} label={label}>
<Container
className={styles.container}
direction="row"
onClick={() =>
openFundingAccountList().then((fundingAccount) => {
fundingAccount && onChange(fundingAccount);
})
}
>
{component}
<KeyboardArrowDownIcon className={styles.chevron} />
</Container>
</FormControl>
);
};

export { FundingAccountInput };
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
.searchTextInput
width: 100%
margin-top: 24px !important

.container
position: relative
display: grid
row-gap: 0 !important
padding: 0
grid-template-rows: 1fr 300px

.columns
background: var(--dialog-background-color)
width: 100%
grid-row: 1
display: flex
padding: 32px 32px 24px 32px
> *:first-child
flex-grow: 1
&.hide
opacity: 0

.list
width: 100%
grid-row: 2
background: var(--dialog-background-color)
&:hover
&::-webkit-scrollbar-thumb
visibility: visible
&::-webkit-scrollbar
width: 4px
&::-webkit-scrollbar-track
background-color: var(--scrollbar-track-background-color)
&::-webkit-scrollbar-thumb
background-color: var(--scrollbar-thumb-background-color)
border-radius: 24px
height: 4px
visibility: hidden
&::-webkit-scrollbar-thumb:hover
background-color: var(--scrollbar-thumb-background-color-hover)

.throbber
grid-row: 1 / span 2
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
import { useMemo, useState } from 'react';
import { Button, Text, Throbber } from 'components/primitives';
import { FixedSizeList } from 'react-window';
import { DialogProps, useDialog, useLocalWallet } from '@terra-money/apps/hooks';
import classNames from 'classnames';
import { Dialog, DialogBody, DialogHeader } from 'components/dialog';
import { ListData } from './ListData';
import { ListItem } from './ListItem';
import styles from './FundingAccountList.module.sass';
import { pluralize } from '@terra-money/apps/utils';
import { Container } from '@terra-money/apps/components';
import { warp_account_tracker } from '@terra-money/warp-sdk';
import { useFundingAccountsQuery } from 'queries';

const accountStatuses = ['taken', 'free'] as warp_account_tracker.AccountStatus[];

const FundingAccountListDialog = (props: DialogProps<void, string>) => {
const { closeDialog } = props;

const [selectedAccountStatus, setSelectedAccountStatus] = useState<warp_account_tracker.AccountStatus>('taken');

const { walletAddress } = useLocalWallet();

const { data: fundingAccounts = [], isLoading } = useFundingAccountsQuery({
account_owner_addr: walletAddress,
account_status: selectedAccountStatus,
});

const listData = useMemo<ListData>(() => {
const onSelectionChanged = (fundingAccount: warp_account_tracker.FundingAccount) => {
closeDialog(fundingAccount.account_addr);
};

return {
fundingAccounts,
onSelectionChanged,
};
}, [fundingAccounts, closeDialog]);

return (
<Dialog>
<DialogHeader title="Select fundingAccount" onClose={() => closeDialog(undefined)}>
<Container className={styles.tabs} direction="row">
{accountStatuses.map((curr) => (
<Button
key={curr}
className={classNames(styles.tab, curr === selectedAccountStatus && styles.selected_tab)}
onClick={() => setSelectedAccountStatus(curr)}
variant="secondary"
>
{curr}
</Button>
))}
</Container>
</DialogHeader>
<DialogBody className={styles.container}>
<Container
className={classNames(styles.columns, {
[styles.hide]: isLoading,
})}
direction="row"
>
<Text variant="label">{`Displaying ${listData.fundingAccounts.length} ${pluralize(
'funding accounts',
listData.fundingAccounts.length
)}`}</Text>
<Text variant="label">Balance</Text>
</Container>
{isLoading && <Throbber className={styles.throbber} />}
{isLoading === false && (
<FixedSizeList<ListData>
className={styles.list}
itemData={listData}
height={300}
width={520}
itemSize={60}
itemCount={listData.fundingAccounts.length}
overscanCount={5}
>
{ListItem}
</FixedSizeList>
)}
</DialogBody>
</Dialog>
);
};

export const useFundingAccountListDialog = () => {
return useDialog(FundingAccountListDialog);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { warp_account_tracker } from '@terra-money/warp-sdk';

export interface ListData {
fundingAccounts: warp_account_tracker.FundingAccount[];
onSelectionChanged: (fundingAccount: warp_account_tracker.FundingAccount) => void;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
.listItem
padding: 8px 32px
height: 60px
display: grid
grid-template-rows: 1fr 1fr
grid-template-columns: auto 1fr auto
align-items: center
&:hover
cursor: pointer
background-color: var(--list-item-hover)
.icon
width: 32px
height: 32px
grid-row: 1 / span 2
grid-column: 1
margin-right: 16px
.symbol
grid-row: 1
grid-column: 2
color: var(--text-color-title)
.name
grid-row: 2
grid-column: 2
.balance
grid-row: 1 / span 2
grid-column: 3
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { Text } from 'components/primitives';
import { ListChildComponentProps } from 'react-window';
import { TokenBalance } from './TokenBalance';
import { ListData } from './ListData';
import styles from './ListItem.module.sass';
import { useTokenBalanceQuery } from 'queries/useTokenBalanceQuery';
import { useNativeToken } from 'hooks/useNativeToken';

export const ListItem = (props: ListChildComponentProps<ListData>) => {
const {
index,
style,
data: { fundingAccounts, onSelectionChanged },
} = props;

const fundingAccount = fundingAccounts[index];

const token = useNativeToken();

const { data: balance } = useTokenBalanceQuery(fundingAccount.account_addr, token);

return (
<div
key={fundingAccount.account_addr}
className={styles.listItem}
style={style}
onClick={() => onSelectionChanged(fundingAccount)}
>
<Text className={styles.symbol} variant="text" weight="bold">
{fundingAccount.account_addr}
</Text>
{balance && <TokenBalance className={styles.balance} balance={balance} decimals={token.decimals} />}
</div>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { formatAmount, demicrofy } from '@terra-money/apps/libs/formatting';
import { u } from '@terra-money/apps/types';
import Big from 'big.js';
import classNames from 'classnames';
import { Text } from 'components/primitives';

interface TokenBalanceProps {
className: string;
balance: u<Big>;
decimals: number;
}

export const TokenBalance = (props: TokenBalanceProps) => {
const { className, balance, decimals } = props;

const formattedAmount =
balance === undefined || balance.lte(0)
? ''
: formatAmount(demicrofy(balance, decimals), {
decimals: 2,
});

return (
<Text className={classNames(className)} variant="text">
{formattedAmount}
</Text>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './FundingAccountList';