@kimafinance/kima-transaction-widget 1.0.0

package/README.md

@@ -0,0 +1,74 @@
+# kima-transaction-widget
+
+[![NPM](https://img.shields.io/npm/v/kima-transfer-widget.svg)](https://www.npmjs.com/package/kima-transfer-widget) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+
+## Install
+
+```bash
+npm install --save kima-transaction-widget
+```
+
+## Usage
+
+```tsx
+import React from 'react'
+
+import {
+  KimaTransactionWidget,
+  KimaProvider,
+  ThemeOptions,
+  FontSizeOptions,
+  ModeOptions
+  SupportNetworks
+} from 'kima-transfer-widget'
+import 'kima-transfer-widget/dist/index.css'
+
+const App = () => {
+  return (
+    <KimaProvider>
+      <div className='container'>
+        <KimaTransactionWidget
+          theme={ThemeOptions.dark}
+          fontSize={FontSizeOptions.medium}
+          mode={ModeOptions.payment}
+          transactionOption={{
+            targetChain: SupportNetworks.Avalanche,
+            targetAddress: '0x67cc400c434F691Ed45e452dC8F2Baf0101a9B63',
+            amount: 100
+          }}
+          errorHandler={(e: any) => {
+            console.log('error:', e)
+          }}
+          successHandler={() => {
+            console.log('success')
+          }}
+        />
+      </div>
+    </KimaProvider>
+  )
+}
+
+export default App
+
+
+
+```
+
+## Props
+
+| Prop Name                      | Type               | Description              | Values          | Default Value |
+| ------------------------------ | ------------------ | ------------------------ | ----------------| ------------- |
+| theme `(optional)`             | ThemeOptions       | color theme of widget    | `light`, `dark` |  `light` |
+| fontSize `(optional)`          | FontSizeOptions    | font size of widget      | `small`, `medium`, `large` | `medium` |
+| mode `(required)`          | ModeOptions    | scenario of the widget      | `payment`, `bridge` | |
+| transactionOption `(optional)` | TransactionOption  | target chain, address and currency | | |
+| errorHandler `(optional)`      | Function           | callback function to handle errors | | |
+
+
+## Note
+
+[How to fix Polyfill node core module error](https://www.alchemy.com/blog/how-to-polyfill-node-core-modules-in-webpack-5)
+
+## License
+
+kima-transaction-widget is licensed under MIT license.

package/dist/assets/icons/Arrow.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const Arrow: ({ width, height, fill, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+    fill?: string | undefined;
+}) => JSX.Element;
+export default Arrow;

package/dist/assets/icons/ArrowRight.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const ArrowRight: ({ width, height, fill, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+    fill?: string | undefined;
+}) => JSX.Element;
+export default ArrowRight;

package/dist/assets/icons/Avalanche.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const Avalanche: ({ width, height, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+}) => JSX.Element;
+export default Avalanche;

package/dist/assets/icons/Check.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const Check: ({ width, height, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+}) => JSX.Element;
+export default Check;

package/dist/assets/icons/Cross.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const Cross: ({ width, height, fill, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+    fill?: string | undefined;
+}) => JSX.Element;
+export default Cross;

package/dist/assets/icons/Ethereum.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const Ethereum: ({ width, height, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+}) => JSX.Element;
+export default Ethereum;

package/dist/assets/icons/FooterLogo.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const Cross: ({ width, height, fill, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+    fill?: string | undefined;
+}) => JSX.Element;
+export default Cross;

package/dist/assets/icons/Minimize.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const Minimize: ({ width, height, fill, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+    fill?: string | undefined;
+}) => JSX.Element;
+export default Minimize;

package/dist/assets/icons/Polygon.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const Ethereum: ({ width, height, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+}) => JSX.Element;
+export default Ethereum;

package/dist/assets/icons/Solana.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const Solana: ({ width, height, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+}) => JSX.Element;
+export default Solana;

package/dist/assets/icons/USDC.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const USDC: ({ width, height, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+}) => JSX.Element;
+export default USDC;

package/dist/assets/icons/USDT.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const USDT: ({ width, height, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+}) => JSX.Element;
+export default USDT;

package/dist/assets/icons/Warning.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const Warning: ({ width, height, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+}) => JSX.Element;
+export default Warning;

package/dist/assets/icons/index.d.ts

@@ -0,0 +1,13 @@
+export { default as CrossIcon } from './Cross';
+export { default as MinimizeIcon } from './Minimize';
+export { default as FooterLogo } from './FooterLogo';
+export { default as CheckIcon } from './Check';
+export { default as WarningIcon } from './Warning';
+export { default as ArrowRightIcon } from './ArrowRight';
+export { default as ArrowIcon } from './Arrow';
+export { default as EthereumIcon } from './Ethereum';
+export { default as SolanaIcon } from './Solana';
+export { default as PolygonIcon } from './Polygon';
+export { default as AvalancheIcon } from './Avalanche';
+export { default as USDCIcon } from './USDC';
+export { default as USDTIcon } from './USDT';

package/dist/assets/loading/180-ring.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Loading180Ring: ({ width, height, fill }: any) => JSX.Element;
+export default Loading180Ring;

package/dist/assets/loading/index.d.ts

@@ -0,0 +1 @@
+export { default as Loading180Ring } from './180-ring';

package/dist/components/KimaTransactionWidget.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { DefaultProps, TransactionOption, ModeOptions } from '../interface';
+import '../index.css';
+interface Props extends DefaultProps {
+    transactionOption?: TransactionOption;
+    mode: ModeOptions;
+    errorHandler?: (e: any) => void;
+    closeHandler?: (e: any) => void;
+    successHandler?: (e: any) => void;
+}
+export declare const KimaTransactionWidget: ({ theme, fontSize, mode, transactionOption, errorHandler, closeHandler, successHandler }: Props) => JSX.Element;
+export {};

package/dist/components/TransactionWidget.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import '../index.css';
+import { DefaultProps } from '../interface';
+export declare const TransactionWidget: ({ theme, fontSize }: DefaultProps) => JSX.Element;

package/dist/components/TransferWidget.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DefaultProps } from '../interface';
+import '../index.css';
+export declare const TransferWidget: ({ theme, fontSize }: DefaultProps) => JSX.Element;

package/dist/components/reusable/AddressInput.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const AddressInput: () => JSX.Element;
+export default AddressInput;

package/dist/components/reusable/CoinDropdown.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const CoinDropdown: () => JSX.Element;
+export default CoinDropdown;

package/dist/components/reusable/CoinSelect.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const CoinSelect: () => JSX.Element;
+export default CoinSelect;

package/dist/components/reusable/ConfirmDetails.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const ConfirmDetails: () => JSX.Element;
+export default ConfirmDetails;

package/dist/components/reusable/CustomCheckbox.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface Props {
+    text: string;
+    checked: boolean;
+    setCheck: (e: any) => void;
+}
+declare const CustomCheckbox: ({ text, checked, setCheck }: Props) => JSX.Element;
+export default CustomCheckbox;

package/dist/components/reusable/Dropdown.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface Props {
+    open: boolean;
+    isWizard: boolean;
+    toggleWizard: any;
+}
+declare const Dropdown: ({ open, isWizard, toggleWizard }: Props) => JSX.Element;
+export default Dropdown;

package/dist/components/reusable/ExternalLink.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface Props {
+    to: string;
+    children?: any;
+    className?: string;
+    rest?: any;
+}
+declare const ExternalLink: ({ to, children, className, rest }: Props) => JSX.Element;
+export default ExternalLink;

package/dist/components/reusable/NetworkLabel.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface Props {
+    hasError: boolean;
+    sourceChain: string;
+    targetChain: string;
+}
+declare const NetworkLabel: ({ sourceChain, targetChain, hasError }: Props) => JSX.Element;
+export default NetworkLabel;

package/dist/components/reusable/NetworkSelect.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface Props {
+    type?: string;
+}
+declare const Network: ({ type }: Props) => JSX.Element;
+export default Network;

package/dist/components/reusable/PrimaryButton.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface Props {
+    clickHandler?: any;
+    children?: any;
+    className?: string;
+    isLoading?: boolean;
+}
+declare const PrimaryButton: ({ className, clickHandler, children, isLoading }: Props) => JSX.Element;
+export default PrimaryButton;

package/dist/components/reusable/Progressbar.d.ts

@@ -0,0 +1,9 @@
+import { Dispatch, SetStateAction } from 'react';
+interface Props {
+    step: number;
+    focus: number;
+    setFocus: Dispatch<SetStateAction<number>>;
+    errorStep: number;
+}
+declare const Progressbar: ({ step, errorStep, setFocus }: Props) => JSX.Element;
+export default Progressbar;

package/dist/components/reusable/SecondaryButton.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface Props {
+    clickHandler?: any;
+    children?: any;
+    className?: string;
+    theme?: string;
+}
+declare const SecondaryButton: ({ className, clickHandler, children, theme }: Props) => JSX.Element;
+export default SecondaryButton;

package/dist/components/reusable/SingleForm.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const SingleForm: () => JSX.Element;
+export default SingleForm;

package/dist/components/reusable/Tooltip.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface Props {
+    step: number;
+    focus: number;
+    errorStep: number;
+}
+declare const Tooltip: ({ step, focus, errorStep }: Props) => JSX.Element;
+export default Tooltip;

package/dist/components/reusable/WalletButton.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const WalletButton: ({ errorBelow }: {
+    errorBelow?: boolean | undefined;
+}) => JSX.Element;
+export default WalletButton;

package/dist/components/reusable/WalletConnectModal.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const WalletConnectModal: () => JSX.Element;
+export default WalletConnectModal;

package/dist/components/reusable/WalletSelect.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const WalletSelect: () => JSX.Element;
+export default WalletSelect;

package/dist/components/reusable/index.d.ts

@@ -0,0 +1,13 @@
+export { default as ExternalLink } from './ExternalLink';
+export { default as NetworkLabel } from './NetworkLabel';
+export { default as PrimaryButton } from './PrimaryButton';
+export { default as SecondaryButton } from './SecondaryButton';
+export { default as NetworkSelect } from './NetworkSelect';
+export { default as WalletSelect } from './WalletSelect';
+export { default as Dropdown } from './Dropdown';
+export { default as WalletButton } from './WalletButton';
+export { default as CoinDropdown } from './CoinDropdown';
+export { default as ConfirmDetails } from './ConfirmDetails';
+export { default as WalletConnectModal } from './WalletConnectModal';
+export { default as AddressInput } from './AddressInput';
+export { default as CustomCheckbox } from './CustomCheckbox';

package/dist/contexts/EthereumProviderContext.d.ts

@@ -0,0 +1,18 @@
+import { ethers } from 'ethers';
+import { ReactNode } from 'react';
+export declare type Provider = ethers.providers.Web3Provider | undefined;
+export declare type Signer = ethers.Signer | undefined;
+interface IEthereumProviderContext {
+    connect(): void;
+    disconnect(): void;
+    provider: Provider;
+    chainId: number | undefined;
+    signer: Signer;
+    signerAddress: string | undefined;
+    providerError: string | null;
+}
+export declare const EthereumProvider: ({ children }: {
+    children: ReactNode;
+}) => JSX.Element;
+export declare const useEthereumProvider: () => IEthereumProviderContext;
+export {};

package/dist/helpers/fetch-wrapper.d.ts

@@ -0,0 +1,7 @@
+export declare const fetchWrapper: {
+    get: typeof get;
+    post: typeof post;
+};
+declare function get(url: string): Promise<string>;
+declare function post(url: string, body: any): Promise<string>;
+export {};

package/dist/helpers/functions.d.ts

@@ -0,0 +1,2 @@
+export declare const formatterInt: Intl.NumberFormat;
+export declare const formatterFloat: Intl.NumberFormat;

package/dist/hooks/useAllowance.d.ts

@@ -0,0 +1,4 @@
+export default function useAllowance(): {
+    isApproved: boolean;
+    approve: () => Promise<void>;
+};

package/dist/hooks/useIsWalletReady.d.ts

@@ -0,0 +1,7 @@
+declare function useIsWalletReady(enableNetworkAutoswitch?: boolean): {
+    isReady: boolean;
+    statusMessage: string;
+    walletAddress?: string;
+    forceNetworkSwitch: () => void;
+};
+export default useIsWalletReady;

package/dist/hooks/useServiceFee.d.ts

@@ -0,0 +1,3 @@
+export default function useServiceFee(): {
+    serviceFee: number;
+};