@kimafinance/kima-transaction-widget 1.1.19 → 1.1.20-beta.1

package/README.md

@@ -18,12 +18,12 @@ import React from 'react'
 import {
   KimaTransactionWidget,
   KimaProvider,
-  ThemeOptions,
   FontSizeOptions,
   ModeOptions,
-  SupportNetworks
-} from 'kima-transfer-widget'
-import 'kima-transfer-widget/dist/index.css'
+  SupportNetworks,
+  ColorModeOptions
+} from 'kima-transaction-widget'
+import 'kima-transaction-widget/dist/index.css'
 
 const App = () => {
   return (
@@ -35,9 +35,11 @@ const App = () => {
       >
         <div className='container'>
           <KimaTransactionWidget
-            theme={ThemeOptions.light}
-            fontSize={FontSizeOptions.medium}
-            mode={ModeOptions.bridge}
+            theme={{
+              colorMode: ColorModeOptions.light,
+              fontSize: FontSizeOptions.medium
+            }}
+            mode={ModeOptions.payment}
             kimaBackendUrl='https://trasnaction_backend.kima.finance'
             kimaNodeProviderQuery='https://api_staging_testnet.kima.finance'
             titleOption={{
@@ -85,11 +87,11 @@ import React from 'react'
 import {
   KimaTransactionWidget,
   KimaProvider,
-  ThemeOptions,
   FontSizeOptions,
-  ModeOptions
-} from 'kima-transfer-widget'
-import 'kima-transfer-widget/dist/index.css'
+  ModeOptions,
+  ColorModeOptions
+} from 'kima-transaction-widget'
+import 'kima-transaction-widget/dist/index.css'
 
 const App = () => {
   return (
@@ -101,8 +103,10 @@ const App = () => {
       >
         <div className='container'>
           <KimaTransactionWidget
-            theme={ThemeOptions.light}
-            fontSize={FontSizeOptions.medium}
+            theme={{
+              colorMode: ColorModeOptions.light,
+              fontSize: FontSizeOptions.medium
+            }}
             mode={ModeOptions.bridge}
             kimaBackendUrl='https://trasnaction_backend.kima.finance'
             kimaNodeProviderQuery='https://api_staging_testnet.kima.finance'
@@ -130,8 +134,7 @@ export default App
 
 | 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` |
+| theme `(required)`             | ThemeOptions       | colorMode, fontSize, fontFamily, backgroundColor    |  | |
 | mode `(required)`              | ModeOptions        | scenario of the widget   | `payment`, `bridge` | |
 | transactionOption `(optional)` | TransactionOption  | target chain, address and currency | | |
 | titleOption `(optional)`       | TitleOption        | titles of widget for every steps | | |

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

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

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

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

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

@@ -9,6 +9,8 @@ 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 ArbitriumIcon } from './Arbitrium';
+export { default as OptimismIcon } from './Optimism';
 export { default as USDCIcon } from './USDC';
 export { default as USDTIcon } from './USDT';
 export { default as FuseIcon } from './Fuse';