@rango-dev/ui 0.1.10-next.102

package/src/containers/SwapHistory/mock.ts

@@ -0,0 +1,276 @@
+// @ts-nocheck
+import { RoutingResultType, TransactionType } from 'rango-sdk';
+import { PendingSwap } from '../History/types';
+
+export const pendingSwap: PendingSwap = {
+  creationTime: '1673164511955',
+  finishTime: '1673164550137',
+  requestId: '51e211d9-d61c-45d2-a4d4-1f9f7f90ee85',
+  inputAmount: '1',
+  wallets: {
+    OSMOSIS: {
+      walletType: 'keplr',
+      address: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl',
+    },
+  },
+  status: 'running',
+  isPaused: false,
+  extraMessage: null,
+  extraMessageSeverity: 'info',
+  extraMessageDetail: '',
+  extraMessageErrorCode: null,
+  networkStatusExtraMessage: null,
+  networkStatusExtraMessageDetail: null,
+  lastNotificationTime: null,
+  settings: {
+    slippage: '1.0',
+    disabledSwappersIds: [],
+    disabledSwappersGroups: [],
+  },
+  simulationResult: {
+    resultType: RoutingResultType.OK,
+    outputAmount: '1.540670',
+    swaps: [
+      {
+        swapperId: 'Osmosis',
+        swapperType: 'DEX',
+        swapperLogo: '',
+        from: {
+          symbol: 'JUNO',
+          logo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
+          address:
+            'ibc/46b44899322f3cd854d2d46deef881958467cdd4b3b10086da49296bbed94bed',
+          blockchain: 'OSMOSIS',
+          blockchainLogo: '',
+          decimals: 6,
+          usdPrice: 1.1091996179668873,
+        },
+        to: {
+          symbol: 'OSMO',
+          logo: 'https://api.rango.exchange/i/mJQPS2',
+          address: null,
+          blockchain: 'OSMOSIS',
+          decimals: 6,
+          blockchainLogo: '',
+          usdPrice: 0.7192435454440882,
+        },
+        fromAmount: '1.000000',
+        fromAmountPrecision: null,
+        fromAmountMinValue: null,
+        fromAmountMaxValue: null,
+        fromAmountRestrictionType: 'EXCLUSIVE',
+        toAmount: '1.540670',
+        fee: [
+          {
+            asset: {
+              blockchain: 'OSMOSIS',
+              symbol: 'OSMO',
+              address: null,
+            },
+            expenseType: 'FROM_SOURCE_WALLET',
+            amount: '0',
+            name: 'Network Fee',
+          },
+        ],
+        estimatedTimeInSeconds: 45,
+        swapChainType: 'INTRA_CHAIN',
+        routes: [
+          {
+            nodes: [
+              {
+                nodes: [
+                  {
+                    marketName: 'pool#498',
+                    marketId: null,
+                    percent: 1,
+                  },
+                ],
+                from: 'JUNO',
+                fromLogo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
+                fromAddress:
+                  'ibc/46b44899322f3cd854d2d46deef881958467cdd4b3b10086da49296bbed94bed',
+                fromBlockchain: 'OSMOSIS',
+                to: 'ATOM',
+                toLogo: 'https://api.rango.exchange/tokens/COSMOS/ATOM.png',
+                toAddress:
+                  'ibc/27394fb092d2eccd56123c74f36e4c1f926001ceada9ca97ea622b25f41e5eb2',
+                toBlockchain: 'OSMOSIS',
+              },
+              {
+                nodes: [
+                  {
+                    marketName: 'pool#8',
+                    marketId: null,
+                    percent: 1,
+                  },
+                ],
+                from: 'ATOM',
+                fromLogo: 'https://api.rango.exchange/tokens/COSMOS/ATOM.png',
+                fromAddress:
+                  'ibc/27394fb092d2eccd56123c74f36e4c1f926001ceada9ca97ea622b25f41e5eb2',
+                fromBlockchain: 'OSMOSIS',
+                to: 'IRIS',
+                toLogo: 'https://api.rango.exchange/tokens/COSMOS/IRIS.png',
+                toAddress:
+                  'ibc/7c4d60aa95e5a7558b0a364860979ca34b7ff8aaf255b87af9e879374470cec0',
+                toBlockchain: 'OSMOSIS',
+              },
+              {
+                nodes: [
+                  {
+                    marketName: 'pool#7',
+                    marketId: null,
+                    percent: 1,
+                  },
+                ],
+                from: 'IRIS',
+                fromLogo: 'https://api.rango.exchange/tokens/COSMOS/IRIS.png',
+                fromAddress:
+                  'ibc/7c4d60aa95e5a7558b0a364860979ca34b7ff8aaf255b87af9e879374470cec0',
+                fromBlockchain: 'OSMOSIS',
+                to: 'OSMO',
+                toLogo: 'https://api.rango.exchange/tokens/COSMOS/OSMO.png',
+                toAddress: null,
+                toBlockchain: 'OSMOSIS',
+              },
+            ],
+          },
+        ],
+        recommendedSlippage: null,
+        timeStat: {
+          min: 6,
+          avg: 40,
+          max: 241,
+        },
+        includesDestinationTx: false,
+        maxRequiredSign: 1,
+        warnings: [],
+      },
+    ],
+  },
+  validateBalanceOrFee: true,
+  steps: [
+    {
+      id: 1,
+      fromBlockchain: 'OSMOSIS',
+      fromSymbol: 'JUNO',
+      fromSymbolAddress:
+        'ibc/46b44899322f3cd854d2d46deef881958467cdd4b3b10086da49296bbed94bed',
+      fromDecimals: 6,
+      fromAmountPrecision: null,
+      fromAmountMinValue: null,
+      fromAmountMaxValue: null,
+      toBlockchainLogo: 'https://api.rango.exchange/swappers/osmosis.png',
+      fromBlockchainLogo: 'https://api.rango.exchange/swappers/osmosis.png',
+      toBlockchain: 'OSMOSIS',
+      fromLogo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
+      toSymbol: 'OSMO',
+      toSymbolAddress: null,
+      swapperType: 'DEX',
+      toDecimals: 6,
+      toLogo: 'https://api.rango.exchange/i/mJQPS2',
+      startTransactionTime: 1673164519916,
+      swapperId: 'Osmosis',
+      swapperLogo: '',
+      expectedOutputAmountHumanReadable: '1.540670',
+      outputAmount: '1.540658',
+      status: 'running',
+      networkStatus: null,
+      executedTransactionId:
+        '0f8f17eecc863c2d6be65ef52cfe3128ff3cd7baeddf133160bea8ccdfbf876b',
+      explorerUrl: [
+        {
+          url: 'https://www.mintscan.io/osmosis/txs/0f8f17eecc863c2d6be65ef52cfe3128ff3cd7baeddf133160bea8ccdfbf876b',
+          description: null,
+        },
+      ],
+      cosmosTransaction: {
+        type: TransactionType.COSMOS,
+        fromWalletAddress: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl',
+        blockChain: 'OSMOSIS',
+        data: {
+          chainId: 'osmosis-1',
+          account_number: 102721,
+          sequence: '308',
+          msgs: [
+            {
+              __type: 'OsmosisSwapMessage',
+              type: 'osmosis/gamm/swap-exact-amount-in',
+              value: {
+                sender: 'osmo1unf2rcytjxfpz8x8ar63h4qeftadptg5t0nqcl',
+                routes: [
+                  {
+                    pool_id: '498',
+                    token_out_denom:
+                      'ibc/27394FB092D2ECCD56123C74F36E4C1F926001CEADA9CA97EA622B25F41E5EB2',
+                  },
+                  {
+                    pool_id: '8',
+                    token_out_denom:
+                      'ibc/7C4D60AA95E5A7558B0A364860979CA34B7FF8AAF255B87AF9E879374470CEC0',
+                  },
+                  {
+                    pool_id: '7',
+                    token_out_denom: 'uosmo',
+                  },
+                ],
+                token_in: {
+                  denom:
+                    'ibc/46B44899322F3CD854D2D46DEEF881958467CDD4B3B10086DA49296BBED94BED',
+                  amount: '1000000',
+                },
+                token_out_min_amount: '1525264',
+              },
+            },
+          ],
+          protoMsgs: [
+            {
+              type_url: '/osmosis.gamm.v1beta1.MsgSwapExactAmountIn',
+              value: [
+                10, 43, 111, 115, 109, 111, 49, 117, 110, 102, 50, 114, 99, 121,
+                116, 106, 120, 102, 112, 122, 56, 120, 56, 97, 114, 54, 51, 104,
+                52, 113, 101, 102, 116, 97, 100, 112, 116, 103, 53, 116, 48,
+                110, 113, 99, 108, 18, 73, 8, -14, 3, 18, 68, 105, 98, 99, 47,
+                50, 55, 51, 57, 52, 70, 66, 48, 57, 50, 68, 50, 69, 67, 67, 68,
+                53, 54, 49, 50, 51, 67, 55, 52, 70, 51, 54, 69, 52, 67, 49, 70,
+                57, 50, 54, 48, 48, 49, 67, 69, 65, 68, 65, 57, 67, 65, 57, 55,
+                69, 65, 54, 50, 50, 66, 50, 53, 70, 52, 49, 69, 53, 69, 66, 50,
+                18, 72, 8, 8, 18, 68, 105, 98, 99, 47, 55, 67, 52, 68, 54, 48,
+                65, 65, 57, 53, 69, 53, 65, 55, 53, 53, 56, 66, 48, 65, 51, 54,
+                52, 56, 54, 48, 57, 55, 57, 67, 65, 51, 52, 66, 55, 70, 70, 56,
+                65, 65, 70, 50, 53, 53, 66, 56, 55, 65, 70, 57, 69, 56, 55, 57,
+                51, 55, 52, 52, 55, 48, 67, 69, 67, 48, 18, 9, 8, 7, 18, 5, 117,
+                111, 115, 109, 111, 26, 79, 10, 68, 105, 98, 99, 47, 52, 54, 66,
+                52, 52, 56, 57, 57, 51, 50, 50, 70, 51, 67, 68, 56, 53, 52, 68,
+                50, 68, 52, 54, 68, 69, 69, 70, 56, 56, 49, 57, 53, 56, 52, 54,
+                55, 67, 68, 68, 52, 66, 51, 66, 49, 48, 48, 56, 54, 68, 65, 52,
+                57, 50, 57, 54, 66, 66, 69, 68, 57, 52, 66, 69, 68, 18, 7, 49,
+                48, 48, 48, 48, 48, 48, 34, 7, 49, 53, 50, 53, 50, 54, 52,
+              ],
+            },
+          ],
+          memo: '',
+          source: null,
+          fee: {
+            gas: '900000',
+            amount: [
+              {
+                denom: 'uosmo',
+                amount: '0',
+              },
+            ],
+          },
+          signType: 'AMINO',
+          rpcUrl: 'sample_rpc',
+        },
+        rawTransfer: null,
+      },
+      solanaTransaction: null,
+      evmTransaction: null,
+      evmApprovalTransaction: null,
+      transferTransaction: null,
+      diagnosisUrl: null,
+      internalSteps: null,
+    },
+  ],
+};

package/src/containers/index.ts

@@ -0,0 +1,3 @@
+export * from './ConfirmSwap';
+export * from './History';
+export * from './SwapHistory';

package/src/helper/index.ts

@@ -0,0 +1,16 @@
+export const containsText = (text: string, searchText: string) =>
+  text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
+
+export const getConciseAddress = (
+  address: string | null,
+  maxChars = 8,
+  ellipsisLength = 3
+): string | null => {
+  if (!address) return null;
+  if (address.length < 2 * maxChars + ellipsisLength) return address;
+  const start = Math.ceil((address.length - maxChars) / 2);
+  const end = address.length - maxChars;
+  return `${address.substr(start, maxChars)}${'.'.repeat(
+    ellipsisLength
+  )}${address.substr(end)}`;
+};

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './containers';
+export * from './theme';
+export * from './types';

package/src/theme.ts

@@ -0,0 +1,163 @@
+// 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',
+    // Only use this color when you are going to use white for both dark and light theme.
+    white: '#fff',
+  },
+  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: '8px',
+    10: '12px',
+  },
+  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,3 @@
+export * from './wallet';
+
+export { BestRouteWithFee } from './swaps';

package/src/types/meta.ts

@@ -0,0 +1,22 @@
+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;
+}
+
+export type LoadingStatus = 'loading' | 'success' | 'failed';

package/src/types/swaps.ts

@@ -0,0 +1,44 @@
+import {
+  BestRouteResponse,
+  BlockchainValidationStatus,
+  SimulationResult,
+  SwapResult,
+  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;
+
+export type BestRouteWithFee = Omit<BestRouteResponse, 'result'> & {
+  result: Omit<SimulationResult, 'swaps'> & {
+    swaps: (SwapResult & { feeInUsd?: string })[];
+  };
+};

package/src/types/wallet.ts

@@ -0,0 +1,30 @@
+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;
+  showOnMobile: boolean;
+};
+
+export interface SelectableWallet {
+  chain: string;
+  walletType: WalletType;
+  address: string;
+  image: string;
+  selected: boolean;
+  name: string;
+}