@rango-dev/widget-embedded 0.30.1-next.14 → 0.30.1-next.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.30.1-next.14",
+  "version": "0.30.1-next.16",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -26,11 +26,11 @@
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.5.1-next.1",
     "@rango-dev/provider-all": "^0.35.2-next.4",
-    "@rango-dev/queue-manager-core": "^0.26.1-next.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.35.2-next.2",
-    "@rango-dev/queue-manager-react": "^0.26.1-next.0",
+    "@rango-dev/queue-manager-core": "^0.26.1-next.1",
+    "@rango-dev/queue-manager-rango-preset": "^0.35.2-next.3",
+    "@rango-dev/queue-manager-react": "^0.26.1-next.1",
     "@rango-dev/signer-solana": "^0.30.1-next.1",
-    "@rango-dev/ui": "^0.36.1-next.5",
+    "@rango-dev/ui": "^0.36.1-next.7",
     "@rango-dev/wallets-react": "^0.21.2-next.3",
     "@rango-dev/wallets-shared": "^0.35.2-next.1",
     "bignumber.js": "^9.1.1",
@@ -53,4 +53,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/FilterSelector/FilterSelector.style.ts

@@ -0,0 +1,95 @@
+import { css, darkTheme, IconButton, styled } from '@rango-dev/ui';
+
+export const IconContainer = styled('div', {
+  position: 'relative',
+  '&::before': {
+    position: 'absolute',
+    right: '1px',
+    top: '-1px',
+    width: '$8',
+    height: '$8',
+    borderRadius: '100%',
+    backgroundColor: '$neutral300',
+    [`.${darkTheme} &`]: {
+      backgroundColor: '$neutral400',
+    },
+    padding: '$2',
+  },
+  variants: {
+    isSelect: {
+      true: {
+        '&::before': {
+          content: '',
+        },
+      },
+    },
+  },
+});
+
+export const FilterButton = styled(IconButton, {
+  width: '$36',
+  height: '$36',
+  position: 'relative',
+  padding: '0',
+  overflow: 'unset',
+  backgroundColor: '$neutral300',
+  [`.${darkTheme} &`]: {
+    backgroundColor: '$neutral400',
+  },
+  '&:hover': {
+    backgroundColor: '$secondary100',
+    [`.${darkTheme} &`]: {
+      backgroundColor: '$neutral',
+    },
+    [`& ${IconContainer}::before`]: {
+      backgroundColor: '$secondary100',
+      [`.${darkTheme} &`]: {
+        backgroundColor: '$neutral',
+      },
+    },
+  },
+  variants: {
+    isSelect: {
+      true: {
+        border: '1px solid $secondary',
+      },
+    },
+  },
+});
+
+export const Badge = styled('div', {
+  position: 'absolute',
+  width: '$6',
+  height: '$6',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '3px',
+  top: '$0',
+  right: '1px',
+  backgroundColor: '$secondary500',
+});
+
+export const FilterContainer = styled('div', {
+  padding: '$15',
+  borderRadius: '$sm',
+  width: '248px',
+  backgroundColor: '$background',
+  zIndex: 10,
+});
+
+export const centeredFlexContainer = css({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const FilterList = styled('ul', {
+  margin: 0,
+  listStyle: 'none',
+  height: '100%',
+  padding: 0,
+  '.item-start-container': {
+    paddingRight: '0 !important',
+  },
+});

package/src/components/FilterSelector/FilterSelector.tsx

@@ -0,0 +1,42 @@
+import type { FilterSelectorPropTypes } from './FilterSelector.type';
+
+import { FilterIcon, Popover } from '@rango-dev/ui';
+import React from 'react';
+
+import { getContainer } from '../../utils/common';
+
+import { Badge, FilterButton, IconContainer } from './FilterSelector.style';
+import { FilterSelectorContent } from './FilterSelectorContent';
+
+export function FilterSelector(props: FilterSelectorPropTypes) {
+  const { onClickItem, onOpenChange, filterBy, list, open } = props;
+  return (
+    <div>
+      <Popover
+        open={open}
+        align="end"
+        onOpenChange={onOpenChange}
+        container={getContainer()}
+        content={
+          <FilterSelectorContent
+            list={list}
+            filterBy={filterBy}
+            onClickItem={(id) => {
+              onClickItem(id);
+              onOpenChange(false);
+            }}
+          />
+        }>
+        <FilterButton
+          variant="default"
+          isSelect={!!filterBy}
+          onClick={() => onOpenChange(!props.open)}>
+          <IconContainer isSelect={!!filterBy}>
+            <FilterIcon size={16} color="black" />
+            {!!filterBy && <Badge />}
+          </IconContainer>
+        </FilterButton>
+      </Popover>
+    </div>
+  );
+}

package/src/components/FilterSelector/FilterSelector.type.ts

@@ -0,0 +1,15 @@
+export type PropTypes = {
+  filterBy: string;
+  onClickItem: (id: string) => void;
+  list: Array<FilterItem>;
+};
+
+export type FilterItem = {
+  id: string;
+  title: string;
+};
+
+export type FilterSelectorPropTypes = PropTypes & {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};

package/src/components/FilterSelector/FilterSelectorContent.tsx

@@ -0,0 +1,60 @@
+import type { PropTypes } from './FilterSelector.type';
+
+import { i18n } from '@lingui/core';
+import {
+  Button,
+  Divider,
+  ListItemButton,
+  Radio,
+  RadioRoot,
+  Typography,
+} from '@rango-dev/ui';
+import React from 'react';
+
+import {
+  centeredFlexContainer,
+  FilterContainer,
+  FilterList,
+} from './FilterSelector.style';
+
+export function FilterSelectorContent(props: PropTypes) {
+  const { filterBy: value, onClickItem } = props;
+  return (
+    <FilterContainer>
+      <div className={centeredFlexContainer()}>
+        <Typography size="small" variant="body">
+          {i18n.t('Status')}
+        </Typography>
+        <Button variant="ghost" size="xxsmall" onClick={() => onClickItem('')}>
+          {i18n.t('Reset')}
+        </Button>
+      </div>
+      <Divider size={10} />
+      <RadioRoot value={value}>
+        <FilterList>
+          {props.list.map((item, index) => {
+            return (
+              <ListItemButton
+                key={item.id}
+                style={{ height: '40px', width: '100%' }}
+                selected={false}
+                hasDivider={props.list.length - 1 != index}
+                id={item.id}
+                title={
+                  <>
+                    <Divider direction="horizontal" size={4} />
+                    <Typography size="medium" variant="body">
+                      {item.title}
+                    </Typography>
+                  </>
+                }
+                start={<Radio value={item.id} />}
+                onClick={onClickItem}
+              />
+            );
+          })}
+        </FilterList>
+      </RadioRoot>
+    </FilterContainer>
+  );
+}

package/src/components/FilterSelector/index.ts

@@ -0,0 +1 @@
+export { FilterSelector } from './FilterSelector';

package/src/components/SearchInput/SearchInput.tsx

@@ -13,6 +13,7 @@ export function SearchInput(props: PropTypes) {
     size,
     onChange,
     value,
+    style,
     setValue,
     ...inputAttributes
   } = props;
@@ -41,6 +42,7 @@ export function SearchInput(props: PropTypes) {
         padding: 10,
         borderRadius: 25,
         alignItems: 'center',
+        ...style,
       }}
       size={size}
       value={value}

package/src/pages/HistoryPage.tsx

@@ -1,15 +1,30 @@
-import type { PendingSwap, PendingSwapStep } from 'rango-types';
-
 import { i18n } from '@lingui/core';
 import { useManager } from '@rango-dev/queue-manager-react';
-import { Divider, NotFound, styled } from '@rango-dev/ui';
-import React, { useState } from 'react';
+import {
+  Button,
+  darkTheme,
+  Divider,
+  MessageBox,
+  NotFound,
+  styled,
+  Typography,
+} from '@rango-dev/ui';
+import {
+  type PendingSwap,
+  type PendingSwapStep,
+  TransactionStatus,
+} from 'rango-types';
+import React, { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { WatermarkedModal } from '../components/common/WatermarkedModal';
+import { FilterSelector } from '../components/FilterSelector';
+import { SuffixContainer } from '../components/HeaderButtons/HeaderButtons.styles';
 import { HistoryGroupedList } from '../components/HistoryGroupedList';
 import { NotFoundContainer } from '../components/HistoryGroupedList/HistoryGroupedList.styles';
 import { Layout, PageContainer } from '../components/Layout';
 import { SearchInput } from '../components/SearchInput';
+import { getContainer } from '../utils/common';
 import { groupSwapsByDate } from '../utils/date';
 import { containsText } from '../utils/numbers';
 import { getPendingSwaps } from '../utils/queue';
@@ -23,6 +38,33 @@ const HistoryGroupedListContainer = styled('div', {
   height: '100%',
 });
 
+const SearchAndFilterBar = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+const Description = styled('div', {
+  '._typography': {
+    color: '$neutral700',
+    [`.${darkTheme}&`]: {
+      color: '$neutral900',
+    },
+  },
+});
+
+const transactionStatusFilters = [
+  {
+    id: TransactionStatus.SUCCESS,
+    title: i18n.t('Complete'),
+  },
+  {
+    id: TransactionStatus.RUNNING,
+    title: i18n.t('Running'),
+  },
+  { id: TransactionStatus.FAILED, title: i18n.t('Failed') },
+];
+
 const isStepContainsText = (steps: PendingSwapStep[], value: string) => {
   if (!steps?.length) {
     return false;
@@ -41,50 +83,116 @@ export function HistoryPage() {
   const { manager, state } = useManager();
   const list: PendingSwap[] = getPendingSwaps(manager).map(({ swap }) => swap);
   const [searchedFor, setSearchedFor] = useState<string>('');
+  const [openFilterSelector, setOpenFilterSelector] = useState(false);
   const loading = !state.loadedFromPersistor;
-
+  const [filterBy, setFilterBy] = useState('');
+  const [openClearModal, setOpenClearModal] = useState(false);
   const searchHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
     setSearchedFor(value);
   };
 
-  let filteredList = list;
-  if (searchedFor) {
-    filteredList = list.filter(
-      (swap) =>
-        containsText(swap.inputAmount, searchedFor) ||
-        containsText(swap.status, searchedFor) ||
-        isStepContainsText(swap.steps, searchedFor) ||
-        containsText(swap.requestId, searchedFor)
-    );
-  }
+  const filteredList = useMemo(() => {
+    if (!searchedFor && !filterBy) {
+      return list;
+    }
+
+    return list.filter((swap) => {
+      const { inputAmount, status, steps, requestId } = swap;
+
+      const matchesSearch =
+        !searchedFor ||
+        containsText(inputAmount, searchedFor) ||
+        containsText(status, searchedFor) ||
+        isStepContainsText(steps, searchedFor) ||
+        containsText(requestId, searchedFor);
+
+      const matchesFilter = !filterBy || filterBy === status;
+
+      return matchesSearch && matchesFilter;
+    });
+  }, [list, searchedFor, filterBy]);
 
   const isEmpty = !filteredList?.length && !loading;
 
+  const onCloseModal = () => setOpenClearModal(false);
+  const onClear = async () => {
+    try {
+      await manager?.clearQueue();
+
+      setOpenClearModal(false);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+  const isClearButtonDisabled = useMemo(() => {
+    return !list.some(
+      (swap) =>
+        swap.status === TransactionStatus.SUCCESS ||
+        swap.status === TransactionStatus.FAILED
+    );
+  }, [list]);
+
   return (
     <Layout
       header={{
         title: i18n.t('History'),
+        suffix: (
+          <SuffixContainer>
+            <Button
+              disabled={isClearButtonDisabled}
+              variant="ghost"
+              size="xsmall"
+              onClick={() => setOpenClearModal(true)}>
+              <Typography size="medium" variant="label" color="error">
+                {i18n.t('Clear all Txs')}
+              </Typography>
+            </Button>
+          </SuffixContainer>
+        ),
       }}>
       <PageContainer>
-        <SearchInput
-          setValue={setSearchedFor}
-          fullWidth
-          variant="contained"
-          placeholder={i18n.t('Search Transaction')}
-          autoFocus
-          onChange={searchHandler}
-          value={searchedFor}
-        />
+        <SearchAndFilterBar>
+          <SearchInput
+            setValue={setSearchedFor}
+            fullWidth
+            variant="contained"
+            placeholder={i18n.t('Search Transaction')}
+            autoFocus
+            onChange={searchHandler}
+            style={{ height: 36 }}
+            value={searchedFor}
+          />
+          <Divider size={10} direction="horizontal" />
+
+          <FilterSelector
+            filterBy={filterBy}
+            open={openFilterSelector}
+            onOpenChange={(open) => setOpenFilterSelector(open)}
+            onClickItem={(id) => setFilterBy(id)}
+            list={transactionStatusFilters}
+          />
+        </SearchAndFilterBar>
+
         <Divider size="16" />
         <HistoryGroupedListContainer>
           {isEmpty && (
             <NotFoundContainer>
               <Divider size={32} />
               <NotFound
-                title={i18n.t('No results found')}
+                title={
+                  searchedFor
+                    ? i18n.t('No results found')
+                    : i18n.t('No transactions')
+                }
+                titleColor={!searchedFor ? '$info' : undefined}
+                hasIcon={!!searchedFor}
                 description={
-                  searchedFor ? i18n.t('Try using different keywords') : ''
+                  searchedFor
+                    ? i18n.t('Try using different keywords')
+                    : i18n.t(
+                        'Your transaction history is stored locally and will appear here after you start a swap'
+                      )
                 }
               />
             </NotFoundContainer>
@@ -99,6 +207,52 @@ export function HistoryPage() {
           )}
         </HistoryGroupedListContainer>
       </PageContainer>
+      <WatermarkedModal
+        open={openClearModal}
+        onClose={onCloseModal}
+        container={getContainer()}>
+        <Divider size={20} />
+        <MessageBox
+          type="warning"
+          title={i18n.t('Clear History')}
+          description={
+            <Description>
+              <Typography variant="body" size="medium">
+                {i18n.t(
+                  'This would clear all succeeded/failed transactions from widget. Do you wish to proceed?'
+                )}
+              </Typography>
+              <Divider size={'24'} />
+
+              <Typography variant="body" size="small">
+                {i18n.t(
+                  'Hint: This does not clear your transaction history on blockchain. Only hides them in this page.'
+                )}
+              </Typography>
+            </Description>
+          }
+        />
+        <Divider size={40} />
+
+        <Divider size={10} />
+        <Button
+          variant="contained"
+          type="primary"
+          size="large"
+          onClick={onClear}>
+          {i18n.t('Yes, Clear history')}
+        </Button>
+        <Divider size={10} />
+        <Button
+          variant="outlined"
+          type="primary"
+          size="large"
+          onClick={onCloseModal}>
+          <Typography variant="title" size="medium" color="primary">
+            {i18n.t('No, Cancel')}
+          </Typography>
+        </Button>
+      </WatermarkedModal>
     </Layout>
   );
 }

package/src/store/quote.ts

@@ -224,7 +224,7 @@ export const useQuoteStore = createSelectors(
         set((state) => ({
           inputAmount: amount,
           ...(!amount && {
-            outputAmount: new BigNumber(0),
+            outputAmount: null,
             outputUsdValue: new BigNumber(0),
             selectedQuote: null,
           }),