+
+ {t('INSCRIBE.ORDINAL')}
+
+ {header}
+ {inputs}
+
+ +
+
+ {t('FT_CONTRACT_PREFIX')}
Error processing connection request.
;
+ }
+
+ return
+
+ {label}
+ {repeat && {`x${repeat}`} }
+
+ {!!subLabel && {subLabel} }
+
+
-
- {label}
- {repeat && {`x${repeat}`} }
-
- {!!subLabel && {subLabel} }
-
-
-
- {t('SUMMARY.ORDINAL')}
- {t('NETWORK')}
@@ -595,10 +453,10 @@ function CreateInscription() {
fiatRate={btcFiatRate}
/>
+ {lowError && (
+
+
+ {t('LISTING_PRICE_TOO_LOW')}
+
+
+ )}
+ {highError && (
+
+
+ {t('LISTING_PRICE_TOO_HIGH')}
+
+
+ )}
+ {!lowError && !highError && (
+ <>
+ {priceSats === floorPriceSats && (
+
+ {t('AT_FLOOR_PRICE_LABEL')}
+
+ )}
+ {priceSats > floorPriceSats && (
+
+ {t('ABOVE_FLOOR_PRICE_LABEL', { percentage: percentageDifference })}
+
+ )}
+ {priceSats < floorPriceSats && (
+
+
+ {t('BELOW_FLOOR_PRICE_LABEL', { percentage: percentageDifference })}
+
+
+ )}
+
+ )}
+
+ );
+}
+
+export default FloorComparisonLabel;
diff --git a/src/app/screens/listRune/index.styled.ts b/src/app/screens/listRune/index.styled.ts
new file mode 100644
index 000000000..c873b996d
--- /dev/null
+++ b/src/app/screens/listRune/index.styled.ts
@@ -0,0 +1,154 @@
+import Button from '@ui-library/button';
+import { StyledP } from '@ui-library/common.styled';
+import styled from 'styled-components';
+
+export const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ overflow-y: auto;
+ &::-webkit-scrollbar {
+ display: none;
+ }
+`;
+
+export const LoaderContainer = styled.div`
+ display: flex;
+ flex: 1;
+ height: 100%;
+ min-height: 200px;
+ justify-content: center;
+ align-items: center;
+`;
+
+export const Header = styled.h1((props) => ({
+ ...props.theme.typography.headline_xs,
+ color: props.theme.colors.white_0,
+ marginBottom: props.theme.space.m,
+}));
+
+export const PaddingContainer = styled.div((props) => ({
+ padding: `0 ${props.theme.space.m}`,
+}));
+
+export const MockContainer = styled.div`
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+`;
+
+export const StyledSelectAllButton = styled(Button)((props) => ({
+ ...props.theme.typography.body_medium_m,
+ padding: `0 ${props.theme.space.m}`,
+ transition: 'opacity 0.1s ease',
+ width: 'fit-content',
+ div: {
+ width: 'parent',
+ textAlign: 'right',
+ color: props.theme.colors.tangerine_light,
+ },
+ ':hover:enabled': {
+ opacity: 0.8,
+ },
+}));
+
+export const TabButton = styled.button<{ isSelected: boolean }>((props) => ({
+ ...props.theme.typography.body_bold_s,
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ height: 32,
+ paddingLeft: props.theme.space.s,
+ paddingRight: props.theme.space.s,
+ marginRight: props.theme.space.xxs,
+ borderRadius: 44,
+ background: props.isSelected ? props.theme.colors.elevation2 : 'transparent',
+ color: props.theme.colors.white_0,
+ opacity: props.isSelected ? 1 : 0.6,
+ transition: 'opacity 0.1s ease',
+ '&:hover': {
+ opacity: 1,
+ },
+}));
+
+export const TabContainer = styled.div((props) => ({
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ marginTop: props.theme.space.xl,
+}));
+
+export const TabButtonsContainer = styled.div({
+ display: 'flex',
+ flexDirection: 'row',
+});
+
+export const ButtonImage = styled.button({
+ backgroundColor: 'transparent',
+});
+
+export const ListRunesContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: ${(props) => props.theme.space.s};
+`;
+
+export const ScrollContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ ${(props) => props.theme.scrollbar};
+`;
+
+export const SetRunePricesListContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: ${(props) => props.theme.space.s};
+`;
+
+export const SetRunePricesContainer = styled.div((props) => ({
+ display: 'flex',
+ flexDirection: 'column',
+ gap: props.theme.space.s,
+ marginBottom: props.theme.space.m,
+}));
+
+export const SetRunePricesButtonsContainer = styled.div((props) => ({
+ marginTop: props.theme.space.m,
+ width: '100%',
+ display: 'flex',
+ flexDirection: 'row',
+ gap: props.theme.space.xxs,
+}));
+
+export const StyledButton = styled(Button)((props) => ({
+ minHeight: 'initial',
+ padding: `${props.theme.space.xs} ${props.theme.space.s}`,
+ borderRadius: '40px',
+ div: {
+ ...props.theme.typography.body_m,
+ },
+}));
+
+export const ListingDescContainer = styled.div((props) => ({
+ display: 'flex',
+ flexDirection: 'column',
+ gap: props.theme.space.s,
+ marginTop: props.theme.space.m,
+ marginBottom: props.theme.space.m,
+}));
+
+export const ListingDescriptionRow = styled.div`
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ flex: 1;
+ justify-content: space-between;
+`;
+
+export const RightAlignStyledP = styled(StyledP)`
+ text-align: right;
+`;
+
+export const NoItemsContainer = styled.div((props) => ({
+ padding: `${props.theme.space.m} ${props.theme.space.s}`,
+}));
diff --git a/src/app/screens/listRune/index.tsx b/src/app/screens/listRune/index.tsx
new file mode 100644
index 000000000..c957e5229
--- /dev/null
+++ b/src/app/screens/listRune/index.tsx
@@ -0,0 +1,557 @@
+import BottomBar from '@components/tabBar';
+import TopRow from '@components/topRow';
+import useRuneFloorPriceQuery from '@hooks/queries/runes/useRuneFloorPriceQuery';
+import { useVisibleRuneFungibleTokens } from '@hooks/queries/runes/useRuneFungibleTokensQuery';
+import useRuneSellPsbt from '@hooks/queries/runes/useRuneSellPsbt';
+import useRuneUtxosQuery from '@hooks/queries/runes/useRuneUtxosQuery';
+import useCoinRates from '@hooks/queries/useCoinRates';
+import useHasFeature from '@hooks/useHasFeature';
+import useResetUserFlow from '@hooks/useResetUserFlow';
+import useTrackMixPanelPageViewed from '@hooks/useTrackMixPanelPageViewed';
+import useWalletSelector from '@hooks/useWalletSelector';
+import { ArrowClockwise } from '@phosphor-icons/react';
+import ListRuneItem from '@screens/listRune/listRuneItem';
+import { ListRunesReducer, initialListRunesState } from '@screens/listRune/reducer';
+import SetRunePriceItem from '@screens/listRune/setRunePriceItem';
+import {
+ FeatureId,
+ currencySymbolMap,
+ getBtcFiatEquivalent,
+ satsToBtc,
+} from '@secretkeylabs/xverse-core';
+import Button from '@ui-library/button';
+import { StickyButtonContainer, StyledP } from '@ui-library/common.styled';
+import Spinner from '@ui-library/spinner';
+import { formatToXDecimalPlaces, ftDecimals } from '@utils/helper';
+import { getFullTxId, getTxIdFromFullTxId, getVoutFromFullTxId } from '@utils/runes';
+import BigNumber from 'bignumber.js';
+import { useEffect, useReducer } from 'react';
+import { useTranslation } from 'react-i18next';
+import { NumericFormat } from 'react-number-format';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import theme from 'theme';
+import {
+ ButtonImage,
+ Container,
+ Header,
+ ListRunesContainer,
+ ListingDescContainer,
+ ListingDescriptionRow,
+ LoaderContainer,
+ MockContainer,
+ NoItemsContainer,
+ PaddingContainer,
+ RightAlignStyledP,
+ ScrollContainer,
+ SetRunePricesButtonsContainer,
+ SetRunePricesContainer,
+ SetRunePricesListContainer,
+ StyledButton,
+ StyledSelectAllButton,
+ TabButton,
+ TabButtonsContainer,
+ TabContainer,
+} from './index.styled';
+import WrapperComponent from './listRuneWrapper';
+import SetCustomPriceModal from './setCustomPriceModal';
+
+export default function ListRuneScreen() {
+ const { t } = useTranslation('translation', { keyPrefix: 'LIST_RUNE_SCREEN' });
+ const navigate = useNavigate();
+ const { runeId } = useParams();
+ const { visible: runesCoinsList } = useVisibleRuneFungibleTokens(false);
+ const selectedRune = runesCoinsList.find((ft) => ft.principal === runeId);
+ const { fiatCurrency } = useWalletSelector();
+ const { btcFiatRate } = useCoinRates();
+ const location = useLocation();
+ const showRunesListing =
+ useHasFeature(FeatureId.RUNES_LISTING) || process.env.NODE_ENV === 'development';
+
+ if (!showRunesListing) {
+ navigate(-1);
+ }
+
+ useTrackMixPanelPageViewed();
+
+ const {
+ data: listItemsResponse,
+ isInitialLoading: listItemsLoading,
+ isRefetching: listItemsRefetching,
+ refetch,
+ } = useRuneUtxosQuery(selectedRune?.name ?? '', 'unlisted', false);
+
+ const {
+ data: runeFloorPrice,
+ isInitialLoading: floorPriceLoading,
+ isRefetching: floorPriceRefetching,
+ } = useRuneFloorPriceQuery(selectedRune?.name ?? '', false);
+
+ const isLoading =
+ listItemsLoading || listItemsRefetching || floorPriceLoading || floorPriceRefetching;
+
+ useResetUserFlow('/list-rune');
+
+ const [listRunesState, dispatch] = useReducer(ListRunesReducer, initialListRunesState);
+
+ const {
+ listItemsMap,
+ section,
+ selectAllToggle,
+ runePriceOption,
+ customRunePrice,
+ individualCustomItem,
+ toggleCustomPriceModal,
+ } = listRunesState;
+
+ const {
+ getRuneSellPsbt,
+ signPsbtPayload,
+ loading: psbtLoading,
+ } = useRuneSellPsbt(selectedRune?.name ?? '', listItemsMap);
+
+ const selectedListItems = Object.values(listItemsMap).filter((item) => item.selected);
+
+ const totalListedRuneAmount = selectedListItems.reduce(
+ (acc, item) => acc + Number(item.amount),
+ 0,
+ );
+
+ const totalListedRuneAmountSats = selectedListItems.reduce(
+ (acc, item) => acc + item.amount * item.priceSats,
+ 0,
+ );
+
+ const totalListedRuneAmountFiat = getBtcFiatEquivalent(
+ BigNumber(totalListedRuneAmountSats),
+ BigNumber(btcFiatRate),
+ );
+
+ const lowestSelectedRuneAmount = selectedListItems.reduce((minAmount, currentItem) => {
+ const curAmount = currentItem.amount;
+ return curAmount < minAmount ? curAmount : minAmount;
+ }, Infinity);
+ const minGlobalPriceSats = 10000 / lowestSelectedRuneAmount;
+
+ const highestSelectedRuneAmount = selectedListItems.reduce((maxAmount, currentItem) => {
+ const curAmount = currentItem.amount;
+ return curAmount > maxAmount ? curAmount : maxAmount;
+ }, 0);
+ const maxGlobalPriceSats = 1_000_000_000 / highestSelectedRuneAmount;
+
+ const invalidListings: boolean = selectedListItems.some(
+ (item) => item.amount * item.priceSats < 10000 || item.amount * item.priceSats > 1000000000,
+ );
+
+ const individualCustomPriceUsed = selectedListItems.some((item) => item.useIndividualCustomPrice);
+
+ const handleGoBack = () => {
+ if (section === 'SELECT_RUNES') {
+ navigate(`/coinDashboard/FT?ftKey=${selectedRune?.principal}&protocol=runes`);
+ } else {
+ dispatch({ type: 'SET_SECTION', payload: 'SELECT_RUNES' });
+ }
+ };
+
+ const getDesc = () => {
+ switch (section) {
+ case 'SELECT_RUNES':
+ return t('SELECT_RUNES_SECTION');
+ case 'SET_PRICES':
+ return t('SET_PRICES_SECTION');
+ default:
+ return '';
+ }
+ };
+
+ const handleSelectedListItem = async (key: string) => {
+ const updatedSelectedListItem = {
+ ...listItemsMap[key],
+ selected: !listItemsMap[key].selected,
+ };
+ dispatch({ type: 'UPDATE_ONE_LIST_ITEM', key, payload: updatedSelectedListItem });
+ if (
+ Object.values(listItemsMap).filter((listItem) => listItem.selected).length ===
+ listItemsResponse?.length ??
+ 0
+ ) {
+ dispatch({ type: 'SET_SELECT_ALL_TOGGLE', payload: true });
+ }
+ if (
+ Object.values(listItemsMap).filter((listItem) => !listItem.selected).length ===
+ listItemsResponse?.length ??
+ 0
+ ) {
+ dispatch({ type: 'SET_SELECT_ALL_TOGGLE', payload: false });
+ }
+ };
+
+ useEffect(() => {
+ if (runePriceOption === 'custom') return;
+ dispatch({ type: 'SET_CUSTOM_RUNE_PRICE', payload: null });
+ dispatch({
+ type: 'SET_ALL_LIST_ITEMS_PRICES',
+ payload: (runeFloorPrice ?? 0) * runePriceOption,
+ });
+ }, [runeFloorPrice, runePriceOption]);
+
+ useEffect(() => {
+ if (customRunePrice) {
+ dispatch({ type: 'SET_ALL_LIST_ITEMS_PRICES', payload: customRunePrice });
+ }
+ }, [customRunePrice]);
+
+ useEffect(() => {
+ // if navigate back from psbt screen - repopulate screen state
+ if (location.state) {
+ dispatch({
+ type: 'RESTORE_STATE_FROM_PSBT',
+ payload: location.state,
+ });
+ } else if (listItemsResponse && runeFloorPrice) {
+ dispatch({
+ type: 'INITIATE_LIST_ITEMS',
+ payload: listItemsResponse.reduce(
+ (map, item) => ({
+ ...map,
+ [getFullTxId(item)]: {
+ selected: false,
+ useIndividualCustomPrice: false,
+ satAmount: BigNumber(item.value).toNumber(),
+ amount: Number(
+ ftDecimals(Number(item.runes?.[0][1].amount), selectedRune?.decimals ?? 0),
+ ),
+ priceSats: runeFloorPrice,
+ },
+ }),
+ {},
+ ),
+ });
+ }
+ }, [listItemsResponse, runeFloorPrice, location.state, selectedRune]);
+
+ useEffect(() => {
+ if (signPsbtPayload) {
+ navigate(`/psbt-signing-request?magicEdenPsbt=true&runeId=${runeId}`, {
+ state: {
+ payload: signPsbtPayload,
+ selectedRune,
+ listRunesState,
+ },
+ });
+ }
+ }, [listRunesState, signPsbtPayload, navigate, selectedRune, runeId]);
+
+ if (isLoading) {
+ return (
+ {t('SEND_BRC20.BRC20_TOKEN')}
-
{header}
+
props.theme.spacing(12)}px 0;
+ margin: ${(props) => props.theme.space.l} 0;
`;
type Props = {
recipientAddress: string;
setRecipientAddress: (address: string) => void;
onNext: () => void;
- isLoading: boolean;
header?: React.ReactNode;
};
// TODO: this could be extracted into a component for reuse
-function RecipientSelector({
- recipientAddress,
- setRecipientAddress,
- onNext,
- isLoading,
- header,
-}: Props) {
+function RecipientSelector({ recipientAddress, setRecipientAddress, onNext, header }: Props) {
const { t } = useTranslation('translation', { keyPrefix: 'SEND' });
const { network } = useWalletSelector();
const [addressIsValid, setAddressIsValid] = useState(true);
@@ -51,17 +45,20 @@ function RecipientSelector({
setAddressIsValid(true);
};
- const inputFeedback = useMemo(() => {
+ const inputFeedback: {
+ message: string;
+ variant?: FeedbackVariant;
+ }[] = useMemo(() => {
if (addressIsValid) {
return [];
}
return [
{
- variant: 'danger' as const,
message: t('ERRORS.ADDRESS_INVALID'),
+ variant: 'danger',
},
];
- }, [addressIsValid]);
+ }, [addressIsValid, t]);
return (
@@ -74,6 +71,7 @@ function RecipientSelector({
onChange={handleAddressChange}
variant={addressIsValid ? 'default' : 'danger'}
feedback={inputFeedback}
+ autoFocus
/>
+ {header}
+
+
+ )}
+ {sendMax && dustFiltered &&
+
+ {t('BALANCE')} {value} {useStxValue ? 'STX' : fiatCurrency}
+
+ )}
+ />
+ }
+ complications={
+ <>
+
+
+ {value} STX
+
+
+ )}
+ />
+ )}
+