@rango-dev/ui 0.1.10 → 0.1.11-next.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.1.10",
+  "version": "0.1.11-next.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Modal/Modal.tsx

@@ -12,7 +12,6 @@ export interface PropTypes {
   content: React.ReactNode;
   action?: React.ReactNode;
   containerStyle?: CSSProperties;
-  contentStyle?: CSSProperties;
 }
 
 const BackDrop = styled('div', {
@@ -48,7 +47,6 @@ const ModalHeader = styled('div', {
   marginBottom: '$16',
 });
 
-const ContentContainer = styled('div', {});
 
 export function Modal(props: PropTypes) {
   const {
@@ -58,7 +56,6 @@ export function Modal(props: PropTypes) {
     onClose,
     containerStyle,
     action,
-    contentStyle,
   } = props;
 
   const handleBackDropClick = (event: React.MouseEvent<HTMLDivElement>) => {
@@ -81,9 +78,7 @@ export function Modal(props: PropTypes) {
                   <CloseIcon size={24} onClick={onClose} />
                 </Row>
               </ModalHeader>
-              <ContentContainer style={contentStyle}>
-                {content}
-              </ContentContainer>
+              {content}
             </ModalContainer>
           </BackDrop>,
           document.body

package/src/components/SwapDetail/SwapDetail.tsx

@@ -72,7 +72,7 @@ export function SwapDetail({
               },
               blockchain: {
                 // @ts-ignore
-                logo: firstStep.fromBlockchainLogo,
+                logo: firstStep.fromBlockchainLogo || '',
                 name: firstStep.fromBlockchain,
               },
               amount: swap.inputAmount,

package/src/components/TokenList/TokenList.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useEffect, useState } from 'react';
 import { CommonProps } from 'react-window';
-import { Token } from 'rango-sdk';
+import { Asset, Token } from 'rango-sdk';
 import { VirtualizedList } from '../VirtualizedList/VirtualizedList';
 import { TokenItem } from './TokenItem';
 
@@ -18,7 +18,7 @@ export interface PropTypes {
   searchedText: string;
   onChange: (token: TokenWithAmount) => void;
   multiSelect?: boolean;
-  selectedList?: TokenWithAmount[] | 'all';
+  selectedList?: Asset[];
 }
 
 export function TokenList(props: PropTypes) {
@@ -33,7 +33,6 @@ export function TokenList(props: PropTypes) {
   const isSelected = (token: Token) => {
     if (multiSelect && selectedList) {
       return (
-        selectedList === 'all' ||
         selectedList
           .map((item) => item.symbol + item.address)
           .indexOf(token.symbol + token.address) > -1

package/src/components/TokenSelector/TokenSelector.tsx

@@ -9,27 +9,21 @@ import { LoadingFailedAlert } from '../Alert/LoadingFailedAlert';
 import { NotFoundAlert } from '../Alert/NotFoundAlert';
 import { styled } from '../../theme';
 
-const Container = styled('div', {
-  flex: '1',
-});
-
 export const LoaderContainer = styled('div', {
   display: 'flex',
   justifyContent: 'center',
   width: '100%',
-  position: 'absolute',
-  top: '50%',
+  paddingTop: '5%',
+  flex: 1,
 });
 export interface PropTypes {
   list: TokenWithAmount[];
   type?: 'Source' | 'Destination';
   selected: TokenWithAmount | null;
   onChange: (token: TokenWithAmount) => void;
-  hasHeader?: boolean;
-  multiSelect?: boolean;
   onBack?: () => void;
-  selectedList?: TokenWithAmount[] | 'all';
   loadingStatus: LoadingStatus;
+  hasHeader?: boolean;
 }
 
 const filterTokens = (list: TokenWithAmount[], searchedFor: string) =>
@@ -41,53 +35,35 @@ const filterTokens = (list: TokenWithAmount[], searchedFor: string) =>
   );
 
 export function TokenSelector(props: PropTypes) {
-  const {
-    list,
-    type,
-    selected,
-    onChange,
-    hasHeader,
-    multiSelect,
-    selectedList,
-    onBack,
-    loadingStatus,
-  } = props;
+  const { list, type, selected, hasHeader, onChange, onBack, loadingStatus } =
+    props;
 
   return (
     <SecondaryPage
       textField={true}
-      textFieldPlaceholder="Search Blockchain By Name"
-      title={`Select ${type} Token`}
       hasHeader={hasHeader}
+      title={`Select ${type} Token`}
       onBack={onBack}
+      textFieldPlaceholder="Search Token By Name"
     >
       {(searchedFor) => {
         const filteredTokens = filterTokens(list, searchedFor);
-        return (
-          <Container>
-            {loadingStatus === 'loading' && (
-              <LoaderContainer>
-                <Spinner size={24} />
-              </LoaderContainer>
-            )}
-            {loadingStatus === 'failed' && <LoadingFailedAlert />}
-            {loadingStatus === 'success' && (
-              <>
-                {filteredTokens.length ? (
-                  <TokenList
-                    searchedText={searchedFor}
-                    list={filteredTokens}
-                    selected={selected}
-                    selectedList={selectedList}
-                    multiSelect={multiSelect}
-                    onChange={onChange}
-                  />
-                ) : (
-                  <NotFoundAlert catergory="Token" searchedFor={searchedFor} />
-                )}
-              </>
-            )}
-          </Container>
+
+        return loadingStatus === 'loading' ? (
+          <LoaderContainer>
+            <Spinner size={24} />
+          </LoaderContainer>
+        ) : loadingStatus === 'failed' ? (
+          <LoadingFailedAlert />
+        ) : filteredTokens.length ? (
+          <TokenList
+            searchedText={searchedFor}
+            list={filteredTokens}
+            selected={selected}
+            onChange={onChange}
+          />
+        ) : (
+          <NotFoundAlert catergory="Token" searchedFor={searchedFor} />
         );
       }}
     </SecondaryPage>

package/src/containers/SwapHistory/SwapHistory.tsx

@@ -290,7 +290,7 @@ export function SwapHistory(props: PropTypes) {
                   logo={step.fromLogo}
                   symbol={step.fromSymbol}
                   // @ts-ignore
-                  chainLogo={step.fromBlockchainLogo}
+                  chainLogo={step.fromBlockchainLogo || ''}
                   blockchain={step.fromBlockchain}
                   amount={pendingSwap.inputAmount}
                 />
@@ -300,8 +300,10 @@ export function SwapHistory(props: PropTypes) {
             <Line />
             <SwapperContainer>
               <SwapperLogo
-                // @ts-ignore
-                src={step.swapperLogo}
+                src={
+                  // @ts-ignore
+                  step.swapperLogo || ''
+                }
                 alt={step.swapperId}
               />
               <div>
@@ -319,6 +321,7 @@ export function SwapHistory(props: PropTypes) {
                     $
                     {
                       // @ts-ignore
+
                       step.feeInUsd
                     }{' '}
                     estimated gas fee
@@ -377,7 +380,8 @@ export function SwapHistory(props: PropTypes) {
               logo={step.toLogo}
               symbol={step.toSymbol}
               // @ts-ignore
-              chainLogo={step.toBlockchainLogo}
+
+              chainLogo={step.toBlockchainLogo || ''}
               blockchain={step.toBlockchain}
               amount={step.outputAmount || ''}
             />