@rango-dev/ui 0.1.10-next.69

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@rango-dev/ui",
+  "version": "0.1.10-next.69",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "dev": "tsdx watch",
+    "build": "tsdx build",
+    "test": "tsdx test --passWithNoTests",
+    "lint": "tsdx lint",
+    "prepare": "tsdx build",
+    "size": "size-limit",
+    "analyze": "size-limit --why",
+    "storybook": "start-storybook -p 3000",
+    "build-storybook": "build-storybook"
+  },
+  "peerDependencies": {
+    "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.69",
+    "@stitches/react": "^1.2.8",
+    "rango-sdk": "^0.1.11",
+    "react-virtualized-auto-sizer": "^1.0.7",
+    "react-window": "^1.8.8",
+    "react-window-infinite-loader": "^1.0.8"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "35fad4db1d491a9589a8215b0c4a4e2f541d07f2"
+}

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,78 @@
+import React from 'react';
+import { CheckCircleIcon, InfoCircleIcon, WarningIcon } from '../Icon';
+import { Typography } from '../Typography';
+import { styled } from '../../theme';
+
+const MainContainer = styled('div', {
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center',
+  padding: '$16',
+  borderRadius: '$5',
+  variants: {
+    type: {
+      primary: {
+        backgroundColor: '$primary200',
+      },
+      secondary: {
+        backgroundColor: '$neutrals400',
+      },
+      success: {
+        backgroundColor: '$success300',
+      },
+      warning: {
+        backgroundColor: '$warning300',
+      },
+      error: {
+        backgroundColor: '$error300',
+      },
+    },
+  },
+});
+
+const ContentContainer = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+const TitleContainer = styled('div', {
+  marginBottom: '$8',
+});
+
+const IconContainer = styled('div', {
+  marginRight: '$24',
+});
+
+export interface PropTypes {
+  type: 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+  description: string;
+  title?: string;
+}
+
+export function Alert(props: PropTypes) {
+  const { type, description, title } = props;
+
+  const showIcon = (
+    ['error', 'success', 'warning'] as PropTypes['type'][]
+  ).includes(type);
+
+  return (
+    <MainContainer type={type}>
+      {showIcon && (
+        <IconContainer>
+          {type === 'success' && <CheckCircleIcon color="success" size={28} />}
+          {type === 'warning' && <WarningIcon size={28} />}
+          {type === 'error' && <InfoCircleIcon color="error" size={28} />}
+        </IconContainer>
+      )}
+      <ContentContainer>
+        {title && (
+          <TitleContainer>
+            <Typography variant="h6">{title}</Typography>
+          </TitleContainer>
+        )}
+        <Typography variant="body2">{description}</Typography>
+      </ContentContainer>
+    </MainContainer>
+  );
+}

package/src/components/Alert/index.ts

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

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,189 @@
+import React, { PropsWithChildren } from 'react';
+import { GasIcon, TimeIcon } from '../../components/Icon';
+import { StepDetail } from '../../components/StepDetail';
+import { Typography } from '../../components/Typography';
+import { rawFees, secondsToString, totalArrivalTime } from '../../helper';
+import { styled } from '../../theme';
+import { Skeleton } from '../Skeleton';
+import { Spinner } from '../Spinner';
+import { BestRouteResponse } from 'rango-sdk';
+
+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%',
+  background: '$neutrals200',
+  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',
+});
+
+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 SkeletonContainer = styled('div', {
+  padding: '$4',
+  '@md': {
+    padding: '$8',
+  },
+});
+const SwapperContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export interface PropTypes {
+  data: BestRouteResponse | null;
+  loading?: boolean;
+  error?: string;
+}
+export function BestRoute({
+  data,
+  loading,
+  error,
+}: PropsWithChildren<PropTypes>) {
+  let fee,
+    time: string = '';
+
+  if (!!data) {
+    fee = rawFees(data);
+    time = secondsToString(totalArrivalTime(data));
+  }
+
+  return (
+    <Container>
+      {loading ? (
+        <SkeletonContainer>
+          <Skeleton width={48} height={94} />
+        </SkeletonContainer>
+      ) : (
+        <GasContainer>
+          <GasIcon size={20} />
+          <Typography mt={4} align="center" variant="caption">
+            {error && '-'}
+            {!!data && `$${fee}`}
+          </Typography>
+          <HR />
+          <TimeIcon size={20} />
+          <Typography mt={4} align="center" variant="caption">
+            {error && '-'}
+            {!!data && `~${time}m`}
+          </Typography>
+        </GasContainer>
+      )}
+      <BestRouteContainer>
+        {loading && <Spinner color="primary" />}
+
+        {error && <ErrorMsg variant="caption">{error}</ErrorMsg>}
+
+        {!!data &&
+          data.result?.swaps.map((swap, 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}
+              />
+            </>
+          ))}
+        {!!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';