@rango-dev/ui 0.1.10-next.69

package/src/theme.ts

@@ -0,0 +1,161 @@
+// TSDX + stiches doesn't work with import statement and has a bug.
+
+import { PropertyValue, CreateStitches } from '@stitches/react';
+import { DefaultThemeMap } from '@stitches/react/types/config';
+
+// Solution: (https://github.com/stitchesjs/stitches/issues/833#issuecomment-950707025)
+const { createStitches } = require('@stitches/react');
+
+/* ----------------------- Values ----------------------- */
+const theme = {
+  colors: {
+    primary: '#5FA425',
+    primary100: '#9FC87C',
+    primary200: '#8FBF66',
+    primary300: '#7FB651',
+    primary400: '#6FAD3B',
+    primary500: '#5FA425',
+    primary600: '#4C831E',
+    primary700: '#396216',
+    primary800: '#26420F',
+    primary900: '#132107',
+    neutrals200: '#FAFAFA',
+    neutrals300: '#EAEAEA',
+    neutrals400: '#999999',
+    neutrals500: '#888888',
+    neutrals600: '#666666',
+    neutrals700: '#444444',
+    neutrals800: '#333333',
+    neutrals900: '#111111',
+    background: '#fff',
+    foreground: '#000',
+    success: '#0070F3',
+    success100: '#D3E5FF',
+    success300: '#3291FF',
+    success500: '#0070F3',
+    success700: '#0761D1',
+    warning: '#F5A623',
+    warning100: '#FFEFCF',
+    warning300: '#F7B955',
+    warning500: '#F5A623',
+    warning700: '#AB570A',
+    error: '#FF0000',
+    error100: '#F7D4D6',
+    error300: '#FF3333',
+    error500: '#FF0000',
+    error700: '#E60000',
+  },
+  space: {
+    2: '2px',
+    4: '4px',
+    6: '6px',
+    8: '8px',
+    10: '10px',
+    12: '12px',
+    16: '16px',
+    20: '20px',
+    24: '24px',
+    28: '28px',
+    30: '30px',
+    32: '32px',
+  },
+  fontSizes: {
+    10: '10px',
+    12: '12px',
+    14: '14px',
+    16: '16px',
+    18: '18px',
+    20: '20px',
+    24: '24px',
+    32: '32px',
+    36: '36px',
+    40: '40px',
+    48: '48px',
+  },
+  fonts: {},
+  fontWeights: {
+    400: '400',
+    500: '500',
+    600: '600',
+    700: '700',
+  },
+  lineHeights: {},
+  letterSpacings: {},
+  sizes: {
+    4: '4px',
+    6: '6px',
+    8: '8px',
+    12: '12px',
+    16: '16px',
+    20: '20px',
+    24: '24px',
+    28: '28px',
+    32: '32px',
+    36: '36px',
+    40: '40px',
+    48: '48px',
+  },
+  borderWidths: {},
+  borderStyles: {},
+  radii: {
+    5: '5px',
+    10: '10px',
+  },
+  shadows: {
+    s: '0px 3px 5px 3px #f0f2f5, 0px 6px 10px 3px #f0f2f5, 0px 1px 18px 3px #f0f2f5',
+  },
+  zIndices: {},
+  transitions: {},
+};
+const media = {
+  sm: '(min-width: 640px)',
+  md: '(min-width: 768px)',
+  lg: '(min-width: 1024px)',
+};
+const utils = {
+  bc: (value: PropertyValue<'backgroundColor'>) => ({
+    backgroundColor: value,
+  }),
+};
+
+/* ----------------------- End of Values ----------------------- */
+
+const typedCreateStiches = createStitches as CreateStitches;
+
+// Note: it seems there is a bug on tsdx and when it compiles the code, it goes through an error
+// We can directly check it with `tsc` to see if the error is correct or not.
+// We `ignore` it for now, to get safety check on VSCode.
+// @ts-ignore
+export const { styled, css, createTheme, keyframes, globalCss } =
+  typedCreateStiches<
+    '',
+    typeof media,
+    typeof theme,
+    DefaultThemeMap,
+    // TODO: Make `utils` typesafe as well.
+    {}
+  >({
+    media,
+    theme,
+    utils,
+  });
+
+export const lightTheme = createTheme({});
+
+export const darkTheme = createTheme({
+  colors: {
+    neutrals200: '#111111',
+    neutrals300: '#333333',
+    neutrals400: '#444444',
+    neutrals500: '#666666',
+    neutrals600: '#888888',
+    neutrals700: '#999999',
+    neutrals800: '#EAEAEA',
+    neutrals900: '#FAFAFA',
+    foreground: '#fff',
+    background: '#000',
+  },
+  shadows: {
+    s: '0px 3px 5px 3px #222, 0px 6px 10px 3px #222, 0px 1px 18px 3px #222',
+  },
+});

package/src/types/index.ts

@@ -0,0 +1 @@
+export * from './wallet';

package/src/types/meta.ts

@@ -0,0 +1,20 @@
+export type TokenMeta = {
+  blockchain: string;
+  symbol: string;
+  image: string;
+  address: string | null;
+  usdPrice: number | null;
+  isSecondaryCoin: boolean;
+  coinSource: string | null;
+  coinSourceUrl: string | null;
+  name: string | null;
+  decimals: number;
+  balance?: { amount: string; usdPrice: string };
+};
+
+export interface LiquiditySource {
+  title: string;
+  logo: string;
+  type: 'BRIDGE' | 'AGGREGATOR' | 'DEX';
+  selected: boolean;
+}

package/src/types/swaps.tsx

@@ -0,0 +1,36 @@
+import {
+  BestRouteResponse,
+  BlockchainValidationStatus,
+  WalletRequiredAssets,
+} from 'rango-sdk';
+export type SwapStatus = 'running' | 'failed' | 'success';
+export type MessageSeverity = 'error' | 'warning' | 'info' | 'success';
+
+export type StepStatus =
+  | 'created'
+  | 'running'
+  | 'failed'
+  | 'success'
+  | 'waitingForApproval'
+  | 'approved';
+
+export enum PendingSwapNetworkStatus {
+  WaitingForConnectingWallet = 'waitingForConnectingWallet',
+  WaitingForQueue = 'waitingForQueue',
+  WaitingForNetworkChange = 'waitingForNetworkChange',
+  NetworkChanged = 'networkChanged',
+}
+
+export type WalletTypeAndAddress = {
+  walletType: string;
+  address: string;
+};
+export type SwapSavedSettings = {
+  slippage: string;
+  disabledSwappersIds: string[];
+  disabledSwappersGroups: string[];
+};
+
+export type SimulationAssetAndAmount = WalletRequiredAssets;
+export type SimulationValidationStatus = BlockchainValidationStatus;
+export type BestRouteType = BestRouteResponse;

package/src/types/wallet.ts

@@ -0,0 +1,20 @@
+import { InstallObjects, WalletType } from '@rango-dev/wallets-shared';
+
+export enum WalletState {
+  NOT_INSTALLED = 'not installed',
+  DISCONNECTED = 'disconnected',
+  CONNECTING = 'connecting',
+  CONNECTED = 'connected',
+}
+
+export type WalletInfo = {
+  state:
+    | WalletState.CONNECTED
+    | WalletState.DISCONNECTED
+    | WalletState.CONNECTING
+    | WalletState.NOT_INSTALLED;
+  installLink: InstallObjects | string;
+  name: string;
+  image: string;
+  type: WalletType;
+};