@rango-dev/ui 0.1.10-next.102

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@rango-dev/ui",
+  "version": "0.1.10-next.102",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "dev": "tsdx watch",
+    "build": "tsdx build  --tsconfig ./tsconfig.json",
+    "test": "tsdx test --passWithNoTests",
+    "lint": "tsdx lint",
+    "prepare": "tsdx build  --tsconfig ./tsconfig.json",
+    "size": "size-limit",
+    "analyze": "size-limit --why",
+    "storybook": "start-storybook -p 3000",
+    "build-storybook": "build-storybook"
+  },
+  "peerDependencies": {
+    "@rango-dev/queue-manager-rango-preset": "*",
+    "react": ">=16"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "tsdx lint"
+    }
+  },
+  "prettier": {
+    "printWidth": 80,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "module": "dist/ui.esm.js",
+  "size-limit": [
+    {
+      "path": "dist/ui.cjs.production.min.js",
+      "limit": "10 KB"
+    },
+    {
+      "path": "dist/ui.esm.js",
+      "limit": "10 KB"
+    }
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.20.2",
+    "@size-limit/preset-small-lib": "^8.1.0",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-info": "^5.3.21",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/addons": "^6.5.13",
+    "@storybook/react": "^6.5.13",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
+    "@types/react-virtualized-auto-sizer": "^1.0.1",
+    "@types/react-window": "^1.8.5",
+    "@types/react-window-infinite-loader": "^1.0.6",
+    "babel-loader": "^9.1.0",
+    "husky": "^8.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "size-limit": "^8.1.0",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.4.1",
+    "typescript": "^4.8.4"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.0.1",
+    "@radix-ui/react-radio-group": "^1.1.1",
+    "@radix-ui/react-switch": "^1.0.1",
+    "@radix-ui/react-tooltip": "^1.0.2",
+    "@rango-dev/wallets-shared": "^0.1.11-next.78",
+    "@stitches/react": "^1.2.8",
+    "@types/react-color": "^3.0.6",
+    "rango-sdk": "^0.1.20",
+    "react-color": "^2.19.3",
+    "react-virtualized-auto-sizer": "^1.0.7",
+    "react-window": "^1.8.8",
+    "react-window-infinite-loader": "^1.0.8"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/Alert/Alert.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { Alert } from '.';
+import { PropTypes } from './Alert';
+
+export default {
+  title: 'Alert',
+  component: Alert,
+  argTypes: {
+    type: {
+      defaultValue: 'success',
+    },
+    title: {
+      defaultValue: 'Alert Title',
+    },
+    description: {
+      defaultValue: 'Alert description ...',
+    },
+  },
+} as ComponentMeta<typeof Alert>;
+
+export const Main = (args: PropTypes) => <Alert {...args} />;

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,102 @@
+import React, { PropsWithChildren, ReactNode } from 'react';
+import { CheckCircleIcon, InfoCircleIcon, WarningIcon } from '../Icon';
+import { Typography } from '../Typography';
+import { styled } from '../../theme';
+import { Spacer } from '../Spacer';
+
+const MainContainer = styled('div', {
+  width: '100%',
+  padding: '$16',
+  borderRadius: '$5',
+  backgroundColor: '$neutrals300',
+  color: '$neutrals800',
+
+  '.main': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+
+  '.footer': {
+    paddingTop: '$8',
+  },
+  '&.hasIcon .footer': {
+    paddingLeft: '$32',
+  },
+  variants: {
+    type: {
+      primary: {
+        color: '$primary200',
+      },
+      secondary: {
+        color: '$foreground',
+      },
+      success: {
+        color: '$success300',
+      },
+      warning: {
+        color: '$warning500',
+      },
+      error: {
+        color: '$error300',
+      },
+    },
+  },
+});
+
+export interface PropTypes {
+  type?: 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+  title?: string;
+  footer?: ReactNode;
+}
+
+export function Alert(props: PropsWithChildren<PropTypes>) {
+  const { type, children, title } = props;
+
+  const showIcon = (
+    ['error', 'success', 'warning'] as PropTypes['type'][]
+  ).includes(type);
+
+  return (
+    <MainContainer type={type} className={showIcon ? 'hasIcon' : ''}>
+      <div className="main">
+        {showIcon && (
+          <>
+            <div
+              style={{
+                width: '32px',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              {type === 'success' && <CheckCircleIcon color={type} size={24} />}
+              {type === 'warning' && <WarningIcon color={type} size={24} />}
+              {type === 'error' && <InfoCircleIcon color={type} size={24} />}
+              <Spacer size={8} />
+            </div>
+          </>
+        )}
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'start',
+            flexDirection: 'column',
+            width: '100%',
+          }}
+        >
+          {title && (
+            <>
+              <Typography className="title" variant="h6" color={type}>
+                {title}
+              </Typography>
+              {!!children && <Spacer size={8} direction="vertical" />}
+            </>
+          )}
+          {children}
+        </div>
+      </div>
+      {props.footer ? <div className="footer">{props.footer}</div> : null}
+    </MainContainer>
+  );
+}

package/src/components/Alert/LoadingFailedAlert.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Alert } from './Alert';
+
+export function LoadingFailedAlert() {
+  return (
+    <Alert
+      type="error"
+      title=" Error connecting server, please reload the app and try again."
+    />
+  );
+}

package/src/components/Alert/NotFoundAlert.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Alert } from './Alert';
+
+interface PropTypes {
+  catergory: string;
+  searchedFor?: string;
+}
+
+export function NotFoundAlert(props: PropTypes) {
+  const { catergory, searchedFor } = props;
+  return (
+    <Alert
+      type="secondary"
+      title={`${catergory} ${
+        searchedFor ? "'" + searchedFor + "'" : ''
+      } not found.`}
+    />
+  );
+}

package/src/components/Alert/index.ts

@@ -0,0 +1,2 @@
+export { Alert } from './Alert';
+export { LoadingFailedAlert } from './LoadingFailedAlert';

package/src/components/BestRoute/BestRoute.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { BestRoute, PropTypes } from './BestRoute';
+import { bestRoute, bestRouteExample2, bestRouteExample3 } from './mock';
+
+export default {
+  title: 'Components/Best Route',
+  component: BestRoute,
+} as ComponentMeta<typeof BestRoute>;
+
+export const Main = (props: PropTypes) => (
+  <div style={{ maxWidth: 512 }}>
+    <BestRoute {...props} data={bestRoute} />
+  </div>
+);
+export const With4Step = (props: PropTypes) => (
+  <div style={{ maxWidth: 512 }}>
+    <BestRoute {...props} data={bestRouteExample2} />
+  </div>
+);
+
+export const With2Step = (props: PropTypes) => (
+  <div style={{ maxWidth: 512 }}>
+    <BestRoute {...props} data={bestRouteExample3} />
+  </div>
+);
+export const WithError = (props: PropTypes) => (
+  <div style={{ maxWidth: 512 }}>
+    <BestRoute {...props} error="No Route Found" />
+  </div>
+);

package/src/components/BestRoute/BestRoute.tsx

@@ -0,0 +1,232 @@
+import React, { Fragment, PropsWithChildren } from 'react';
+import { GasIcon, TimeIcon } from '../../components/Icon';
+import { StepDetail } from '../../components/StepDetail';
+import { Typography } from '../../components/Typography';
+import { keyframes, styled } from '../../theme';
+import { Skeleton } from '../Skeleton';
+import { Spinner } from '../Spinner';
+import { BestRouteResponse } from 'rango-sdk';
+import { Tooltip } from '../Tooltip';
+
+const Container = styled('div', {
+  borderRadius: '$5',
+  border: '1px solid $neutrals300',
+  display: 'flex',
+  alignItems: 'center',
+  minHeight: 126,
+  justifyContent: 'space-between',
+});
+
+const ErrorMsg = styled(Typography, {
+  color: '$error',
+});
+const BestRouteContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  margin: '0 auto',
+  overflowX: 'auto',
+  overflowY: 'hidden',
+  alignSelf: 'stretch',
+  padding: '$4',
+  '@md': {
+    padding: '$8',
+  },
+});
+const Line = styled('div', {
+  height: '0',
+  width: '$20',
+  border: '1px dashed $foreground',
+  borderRadius: 'inherit',
+  '@lg': {
+    width: '$32',
+  },
+});
+
+const HR = styled('hr', {
+  width: '100%',
+  border: '1px solid $neutrals400',
+  margin: '$8 0',
+});
+
+const SwapperLogo = styled('img', {
+  width: '$16',
+  height: '$16',
+});
+const RelativeContainer = styled('div', {
+  position: 'relative',
+});
+const Dot = styled('div', {
+  width: '$6',
+  height: '$6',
+  backgroundColor: '$foreground',
+  position: 'absolute',
+  top: '45%',
+  right: -5,
+  marginLeft: '$8',
+  borderRadius: '50%',
+  '@md': {
+    width: '$8',
+    height: '$8',
+    right: -8,
+    top: '45%',
+  },
+});
+const ArrowRight = styled('div', {
+  width: '0px',
+  height: '0px',
+  borderTop: '5px solid transparent',
+  borderBottom: '5px solid transparent',
+  borderLeft: '5px solid $foreground',
+});
+
+export const pulse = keyframes({
+  '0%': {
+    opacity: 1,
+  },
+  '50%': {
+    opacity: 0.3,
+  },
+  '100%': {
+    opacity: 1,
+  },
+});
+
+const GasContainer = styled('div', {
+  backgroundColor: '$neutrals300',
+  borderRadius: '5px',
+  margin: '$4',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: '$4',
+  '@md': {
+    padding: '$8',
+    margin: '$8',
+  },
+});
+
+const CostContainer = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  variants: {
+    warning: {
+      true: {
+        animation: `${pulse} 2s ease-in-out infinite`,
+      },
+    },
+  },
+});
+
+const TotalFee = styled(Typography, {
+  variants: {
+    warning: {
+      true: {
+        color: '$warning300',
+      },
+    },
+  },
+});
+
+const SkeletonContainer = styled('div', {
+  padding: '$4',
+  '@md': {
+    padding: '$8',
+  },
+});
+const SwapperContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export interface PropTypes {
+  data: BestRouteResponse | null;
+  totalFee: string;
+  feeWarning: boolean;
+  totalTime: string;
+  loading?: boolean;
+  error?: string;
+}
+export function BestRoute(props: PropsWithChildren<PropTypes>) {
+  const { data, loading, error, totalFee, feeWarning, totalTime } = props;
+  return (
+    <Container>
+      {loading ? (
+        <SkeletonContainer>
+          <Skeleton width={48} height={94} />
+        </SkeletonContainer>
+      ) : (
+        <GasContainer>
+          <Tooltip content="Transaction cost (fee)">
+            <CostContainer warning={feeWarning}>
+              <GasIcon size={20} color={feeWarning ? 'warning' : undefined} />
+              <TotalFee
+                mt={4}
+                align="center"
+                variant="caption"
+                warning={feeWarning}
+              >
+                {error && '-'}
+                {!!data && `$${totalFee}`}
+              </TotalFee>
+            </CostContainer>
+          </Tooltip>
+          <HR />
+          <Tooltip content="Time estimate">
+            <CostContainer warning={feeWarning}>
+              <TimeIcon size={20} />
+              <Typography mt={4} align="center" variant="caption">
+                {error && '-'}
+                {!!data && `~${totalTime}m`}
+              </Typography>
+            </CostContainer>
+          </Tooltip>
+        </GasContainer>
+      )}
+      <BestRouteContainer>
+        {loading && <Spinner color="primary" />}
+
+        {error && <ErrorMsg variant="caption">{error}</ErrorMsg>}
+
+        {!!data &&
+          data.result?.swaps.map((swap, index) => (
+            <Fragment key={index}>
+              {index === 0 && (
+                <RelativeContainer>
+                  <StepDetail
+                    direction="vertical"
+                    logo={swap.from.logo}
+                    symbol={swap.from.symbol}
+                    chainLogo={swap.from.blockchainLogo}
+                    blockchain={swap.from.blockchain}
+                    amount={swap.fromAmount}
+                  />
+                  <Dot />
+                </RelativeContainer>
+              )}
+              <SwapperContainer>
+                <Line />
+                <SwapperLogo src={swap.swapperLogo} alt={swap.swapperId} />
+                <Line />
+              </SwapperContainer>
+
+              {index + 1 === data.result?.swaps.length && <ArrowRight />}
+              <StepDetail
+                direction="vertical"
+                logo={swap.to.logo}
+                symbol={swap.to.symbol}
+                chainLogo={swap.to.blockchainLogo}
+                blockchain={swap.to.blockchain}
+                amount={swap.toAmount}
+              />
+            </Fragment>
+          ))}
+        {!!data && !data?.result && (
+          <Typography variant="body2">No routes found</Typography>
+        )}
+      </BestRouteContainer>
+    </Container>
+  );
+}

package/src/components/BestRoute/index.ts

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