@ape.swap/bonds-sdk 5.1.48 → 5.1.49-test-.2

package/README.md

@@ -19,10 +19,13 @@ The `@ape.swap/bonds-sdk` package provides an embeddable set of tools and UI com
 To install the package via npm or yarn, run the following command:
 
 npm:
+
 ```bash
 npm install "@ape.swap/bonds-sdk@solana" @bigmi/react@^0.6.5 @lifi/widget@^3.40.6 @mysten/dapp-kit@^0.19.11 @solana/kit@2.3.0 @solana/spl-token@^0.4.14 @solana/wallet-adapter-react@^0.15.39 @solana/wallet-adapter-react-ui@^0.9.39 @solana/web3.js@^1.98.4 @tanstack/react-query@^5.90.2 axios@^1.8.2 wagmi@^2.14.16 swiper
 ```
+
 yarn:
+
 ```bash
 yarn add "@ape.swap/bonds-sdk@solana" @bigmi/react@^0.6.5 @lifi/widget@^3.40.6 @mysten/dapp-kit@^0.19.11 @solana/kit@2.3.0 @solana/spl-token@^0.4.14 @solana/wallet-adapter-react@^0.15.39 @solana/wallet-adapter-react-ui@^0.9.39 @solana/web3.js@^1.98.4 @tanstack/react-query@^5.90.2 axios@^1.8.2 wagmi@^2.14.16 swiper
 ```
@@ -47,8 +50,8 @@ The following are some key dependencies you must have for the SDK to work proper
 - **@tanstack/react-query** (^5.90.2): Powerful data synchronization and caching library for React applications.
 - **Axios** (^1.8.2): Promise-based HTTP client for making API requests.
 
-
 Optional:
+
 - **@rainbow-me/rainbowkit** (^2.1.7 - optional): Wallet connection UI library for EVM chains with beautiful pre-built components.
 
 ---
@@ -115,10 +118,10 @@ The core of the SDK lies in its config object params, passed as a prop to its co
 |------------------|-----------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `referenceId`    | `string`                          | A unique identifier for the bonds, shall be provided by ApeBond team.                                                                                                               |
 | `chains`         | `number[]`                        | An array of supported chain IDs (e.g., `56`, `1`, `137`, etc). It also determines the order of the chains on the bond list.                                                         |
-| `connector`      | `'rainbowkit' 'appkit' 'default'` | Determines your preferred wallet-connector. If your connector is not listed here get in contact with the dev team to request the integration.                                       | 
+| `connector`      | `'rainbowkit' 'appkit' 'default'` | Determines your preferred wallet-connector. If your connector is not listed here get in contact with the dev team to request the integration.                                       |
 | `useHotBonds`    | `boolean`                         | Whether to show the "hot bonds" component.                                                                                                                                          |
-| `theme`          | `Object (optional)`               | This is how you can customize the styles of the SDK. Override styles like colors, typography, and layout settings to match your project's branding.                                 |      
-| `hotBondsChains` | `number[]`                        | Determines the position of the hotbonds section. The component will be placed bellow the indicated chains.                                                                          |      
+| `theme`          | `Object (optional)`               | This is how you can customize the styles of the SDK. Override styles like colors, typography, and layout settings to match your project's branding.                                 |
+| `hotBondsChains` | `number[]`                        | Determines the position of the hotbonds section. The component will be placed bellow the indicated chains.                                                                          |
 | `tokenSymbol`    | `string[]`                        | This parameter is specific to the `<SingleBond />` component. It defines the token(s) to display in the UI. Currently, only a single token (one element in the array) is supported. |
 | `customRPCS`     | `Partial<Record<ChainId, string[]>>` (optional) | Override the default public RPC URLs for any supported chain. Useful when you have a private or dedicated RPC endpoint. **Required for Solana** — no public RPC is available. See [Custom RPCs](#custom-rpcs) for usage. |
 
@@ -149,6 +152,7 @@ import { ChainId } from '@ape.swap/apeswap-lists';
 The SDK currently supports the following chains:
 
 EVM:
+
 - Ethereum
 - BNB Chain (BSC)
 - Polygon
@@ -168,6 +172,7 @@ EVM:
 - Avalanche
 
 Non-EVM:
+
 - SOLANA
 
 The list get updated constantly, so make sure to use latest version of the SDK.
@@ -185,10 +190,9 @@ import 'swiper/css' // only if useHotBonds is true
 
 These styles ensure that the components render correctly and include all necessary design details. You can customize or override styles using your own branding.
 
-
 You can test and visualize the different customization options on the SDK styling playground (beta):
 
-https://sdk.ape.bond/
+<https://sdk.ape.bond/>
 
 Once you are happy with the styles, make sure to copy the output styles object and paste it under the `theme` param on the SDK component you will be using.
 
@@ -198,7 +202,6 @@ Bear in mind, that the components of the SDK will use the width and height provi
 
 ---
 
-
 ## 🦍 Built and Maintained by ApeSwap | ApeBond
 
 For questions, issues, or contributions, reach out to [ApeBond](https://ape.bond/) or contact us on  [Telegram](https://t.me/ape_bond) .
@@ -207,4 +210,8 @@ For questions, issues, or contributions, reach out to [ApeBond](https://ape.bond
 
 ## License
 
+<<<<<<< Updated upstream
+This package is licensed under the MIT License
+=======
 This package is licensed under the MIT License.
+>>>>>>> Stashed changes

package/dist/components/ConnectAptosWalletButton/ConnectAptosWalletButton.d.ts

@@ -0,0 +1,4 @@
+declare const ConnectAptosWalletButton: ({ navBarFlag }: {
+    navBarFlag?: boolean;
+}) => import("react").JSX.Element;
+export default ConnectAptosWalletButton;

package/dist/components/ConnectAptosWalletButton/ConnectAptosWalletButton.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { useState } from 'react';
+import { WalletSelector } from '@aptos-labs/wallet-adapter-ant-design';
+import useAPTAccount from '../../hooks/accounts/useAPTAccount.js';
+import Flex from '../uikit-sdk/Flex/index.js';
+import Button from '../uikit-sdk/Button/Button.js';
+import Text from '../uikit-sdk/Text/index.js';
+
+// Minimal wrapper around `@aptos-labs/wallet-adapter-ant-design::WalletSelector`,
+// structured identically to `ConnectSolanaWalletButton`. The ant-design
+// component ships a prebuilt modal that auto-detects every AIP-62 wallet
+// (Petra, Pontem, Martian, Nightly, OKX, …) — we just control its visibility
+// from our button.
+//
+// Note: `WalletSelector` renders two things — a `.wallet-button` trigger and
+// the modal itself (the modal is a portal into document.body). We only want
+// the modal here; the trigger would double up with our themed Connect button.
+// Wrapping the `WalletSelector` in a `display: none` div hides the trigger
+// while leaving the portal-mounted modal fully functional. This is the
+// lightest-touch workaround that avoids forking or css-overriding the
+// ant-design component.
+const ConnectAptosWalletButton = ({ navBarFlag }) => {
+    const [isModalOpen, setModalOpen] = useState(false);
+    const { address, disconnect, isLoading } = useAPTAccount();
+    return (jsxs(Flex, { sx: { height: '100%', width: navBarFlag ? 'auto' : '100%', alignItems: 'center' }, children: [!address ? (jsx(Button, { fullWidth: true, onClick: () => setModalOpen(true), sx: {
+                    height: navBarFlag ? '32.5px' : '45px',
+                    padding: '10px 10px',
+                    alignItems: 'center',
+                    backgroundColor: navBarFlag ? '#00c59a' : '',
+                }, children: jsx(Text, { color: "primaryBright", size: navBarFlag ? '14px' : '16px', weight: navBarFlag ? 600 : 700, sx: { mt: '1px' }, children: isLoading ? 'Connecting...' : 'Connect to Aptos' }) })) : (jsx(Button, { fullWidth: true, onClick: () => disconnect?.(), sx: {
+                    height: navBarFlag ? '32.5px' : '45px',
+                    padding: '10px 10px',
+                    alignItems: 'center',
+                    backgroundColor: navBarFlag ? '#00c59a' : '',
+                }, children: jsx(Text, { color: "primaryBright", size: navBarFlag ? '14px' : '16px', weight: navBarFlag ? 600 : 700, sx: { mt: '1px' }, children: "Disconnect from Aptos" }) })), jsx("div", { style: { display: 'none' }, children: jsx(WalletSelector, { isModalOpen: isModalOpen, setModalOpen: setModalOpen }) })] }));
+};
+
+export { ConnectAptosWalletButton as default };
+//# sourceMappingURL=ConnectAptosWalletButton.js.map

package/dist/components/ConnectAptosWalletButton/ConnectAptosWalletButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectAptosWalletButton.js","sources":["../../../src/components/ConnectAptosWalletButton/ConnectAptosWalletButton.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { WalletSelector } from '@aptos-labs/wallet-adapter-ant-design'\nimport useAPTAccount from '../../hooks/accounts/useAPTAccount'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\nimport Text from '../uikit-sdk/Text'\n\n// Minimal wrapper around `@aptos-labs/wallet-adapter-ant-design::WalletSelector`,\n// structured identically to `ConnectSolanaWalletButton`. The ant-design\n// component ships a prebuilt modal that auto-detects every AIP-62 wallet\n// (Petra, Pontem, Martian, Nightly, OKX, …) — we just control its visibility\n// from our button.\n//\n// Note: `WalletSelector` renders two things — a `.wallet-button` trigger and\n// the modal itself (the modal is a portal into document.body). We only want\n// the modal here; the trigger would double up with our themed Connect button.\n// Wrapping the `WalletSelector` in a `display: none` div hides the trigger\n// while leaving the portal-mounted modal fully functional. This is the\n// lightest-touch workaround that avoids forking or css-overriding the\n// ant-design component.\nconst ConnectAptosWalletButton = ({ navBarFlag }: { navBarFlag?: boolean }) => {\n  const [isModalOpen, setModalOpen] = useState(false)\n  const { address, disconnect, isLoading } = useAPTAccount()\n\n  return (\n    <Flex sx={{ height: '100%', width: navBarFlag ? 'auto' : '100%', alignItems: 'center' }}>\n      {!address ? (\n        <Button\n          fullWidth\n          onClick={() => setModalOpen(true)}\n          sx={{\n            height: navBarFlag ? '32.5px' : '45px',\n            padding: '10px 10px',\n            alignItems: 'center',\n            backgroundColor: navBarFlag ? '#00c59a' : '',\n          }}\n        >\n          <Text\n            color=\"primaryBright\"\n            size={navBarFlag ? '14px' : '16px'}\n            weight={navBarFlag ? 600 : 700}\n            sx={{ mt: '1px' }}\n          >\n            {isLoading ? 'Connecting...' : 'Connect to Aptos'}\n          </Text>\n        </Button>\n      ) : (\n        <Button\n          fullWidth\n          onClick={() => disconnect?.()}\n          sx={{\n            height: navBarFlag ? '32.5px' : '45px',\n            padding: '10px 10px',\n            alignItems: 'center',\n            backgroundColor: navBarFlag ? '#00c59a' : '',\n          }}\n        >\n          <Text\n            color=\"primaryBright\"\n            size={navBarFlag ? '14px' : '16px'}\n            weight={navBarFlag ? 600 : 700}\n            sx={{ mt: '1px' }}\n          >\n            Disconnect from Aptos\n          </Text>\n        </Button>\n      )}\n      <div style={{ display: 'none' }}>\n        <WalletSelector isModalOpen={isModalOpen} setModalOpen={setModalOpen} />\n      </div>\n    </Flex>\n  )\n}\n\nexport default ConnectAptosWalletButton\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,wBAAwB,GAAG,CAAC,EAAE,UAAU,EAA4B,KAAI;IAC5E,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IACnD,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,aAAa,EAAE;IAE1D,QACEA,KAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CACpF,CAAC,OAAO,IACPC,GAAA,CAAC,MAAM,EAAA,EACL,SAAS,QACT,OAAO,EAAE,MAAM,YAAY,CAAC,IAAI,CAAC,EACjC,EAAE,EAAE;oBACF,MAAM,EAAE,UAAU,GAAG,QAAQ,GAAG,MAAM;AACtC,oBAAA,OAAO,EAAE,WAAW;AACpB,oBAAA,UAAU,EAAE,QAAQ;oBACpB,eAAe,EAAE,UAAU,GAAG,SAAS,GAAG,EAAE;AAC7C,iBAAA,EAAA,QAAA,EAEDA,GAAA,CAAC,IAAI,EAAA,EACH,KAAK,EAAC,eAAe,EACrB,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,EAClC,MAAM,EAAE,UAAU,GAAG,GAAG,GAAG,GAAG,EAC9B,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAA,QAAA,EAEhB,SAAS,GAAG,eAAe,GAAG,kBAAkB,EAAA,CAC5C,EAAA,CACA,KAETA,GAAA,CAAC,MAAM,EAAA,EACL,SAAS,QACT,OAAO,EAAE,MAAM,UAAU,IAAI,EAC7B,EAAE,EAAE;oBACF,MAAM,EAAE,UAAU,GAAG,QAAQ,GAAG,MAAM;AACtC,oBAAA,OAAO,EAAE,WAAW;AACpB,oBAAA,UAAU,EAAE,QAAQ;oBACpB,eAAe,EAAE,UAAU,GAAG,SAAS,GAAG,EAAE;AAC7C,iBAAA,EAAA,QAAA,EAEDA,GAAA,CAAC,IAAI,EAAA,EACH,KAAK,EAAC,eAAe,EACrB,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,EAClC,MAAM,EAAE,UAAU,GAAG,GAAG,GAAG,GAAG,EAC9B,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAA,QAAA,EAAA,uBAAA,EAAA,CAGZ,EAAA,CACA,CACV,EACDA,GAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAA,QAAA,EAC7BA,GAAA,CAAC,cAAc,EAAA,EAAC,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAA,CAAI,EAAA,CACpE,CAAA,EAAA,CACD;AAEX;;;;"}

package/dist/components/ConnectSuiWalletButton/ConnectSuiWalletButton.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const ConnectSuiWalletButton: ({ navBarFlag }: {
+    navBarFlag?: boolean;
+}) => React.JSX.Element;
+export default ConnectSuiWalletButton;

package/dist/components/ConnectoToVmBanners/ConnectToAptosBanner.d.ts

@@ -0,0 +1 @@
+export default function ConnectToAptosBanner(): import("react").JSX.Element;

package/dist/components/ConnectoToVmBanners/ConnectToAptosBanner.js

@@ -0,0 +1,49 @@
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { useState } from 'react';
+import { WalletSelector } from '@aptos-labs/wallet-adapter-ant-design';
+import Flex from '../uikit-sdk/Flex/index.js';
+import Button from '../uikit-sdk/Button/Button.js';
+import Text from '../uikit-sdk/Text/index.js';
+import Svg from '../uikit-sdk/Svg/index.js';
+
+// Banner rendered in Your Bonds when the user has not connected an Aptos
+// wallet. Uses the same visual language as `ConnectToSolanaBanner` (see the
+// sibling file) but hosts the Ant Design `WalletSelector` modal internally
+// — Aptos does not expose a global `useWalletModal` hook like Solana does,
+// so each entry point controls its own modal visibility.
+function ConnectToAptosBanner() {
+    const [isModalOpen, setModalOpen] = useState(false);
+    return (jsxs(Flex, { sx: {
+            width: '100%',
+            height: '75px',
+            background: 'linear-gradient(135deg, #2B2B2B 0%, #1A1A2E 100%)',
+            p: '10px',
+            borderRadius: '10px',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            border: 'none',
+            cursor: 'pointer',
+        }, children: [jsxs(Flex, { sx: { width: '100%', maxWidth: '300px', gap: '10px', alignItems: 'center' }, children: [jsx(Flex, { sx: { minWidth: '30px', minHeight: '30px', borderRadius: '50%', overflow: 'hidden' }, children: jsx(Svg, { icon: "aptos", width: "30" }) }), jsxs(Flex, { sx: { flexDirection: 'column' }, children: [jsxs(Text, { sx: { fontSize: '18px', fontWeight: '700', lineHeight: '18.5px', display: 'flex', alignItems: 'center' }, children: ["Aptos", jsx(Text, { sx: {
+                                            fontSize: '10px',
+                                            fontWeight: '600',
+                                            lineHeight: '8px',
+                                            color: '#FAFAFA',
+                                            padding: '4px 6px',
+                                            background: 'rgba(250, 250, 250, 0.3)',
+                                            borderRadius: '4px',
+                                            marginLeft: '6px',
+                                            marginRight: '6px',
+                                        }, children: "NEW" })] }), jsx(Text, { sx: { fontSize: '11px', fontWeight: '400', lineHeight: '16px', color: 'white' }, children: "Connect your Aptos wallet to view your Aptos Bonds!" })] })] }), jsx(Flex, { sx: { minWidth: '100px' }, children: jsx(Button, { onClick: () => setModalOpen(true), sx: {
+                        background: 'text',
+                        color: 'primaryButton',
+                        border: 'none',
+                        height: '31px',
+                        width: ['210px', '210px', '210px', '210px', '210px', '100px'],
+                        fontSize: '14px',
+                        fontWeight: '700',
+                        '&:hover': { color: 'text' },
+                    }, children: "Connect" }) }), jsx("div", { style: { display: 'none' }, children: jsx(WalletSelector, { isModalOpen: isModalOpen, setModalOpen: setModalOpen }) })] }));
+}
+
+export { ConnectToAptosBanner as default };
+//# sourceMappingURL=ConnectToAptosBanner.js.map

package/dist/components/ConnectoToVmBanners/ConnectToAptosBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectToAptosBanner.js","sources":["../../../src/components/ConnectoToVmBanners/ConnectToAptosBanner.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { WalletSelector } from '@aptos-labs/wallet-adapter-ant-design'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\nimport Text from '../uikit-sdk/Text'\nimport Svg from '../uikit-sdk/Svg'\n\n// Banner rendered in Your Bonds when the user has not connected an Aptos\n// wallet. Uses the same visual language as `ConnectToSolanaBanner` (see the\n// sibling file) but hosts the Ant Design `WalletSelector` modal internally\n// — Aptos does not expose a global `useWalletModal` hook like Solana does,\n// so each entry point controls its own modal visibility.\nexport default function ConnectToAptosBanner() {\n  const [isModalOpen, setModalOpen] = useState(false)\n  return (\n    <Flex\n      sx={{\n        width: '100%',\n        height: '75px',\n        background: 'linear-gradient(135deg, #2B2B2B 0%, #1A1A2E 100%)',\n        p: '10px',\n        borderRadius: '10px',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        border: 'none',\n        cursor: 'pointer',\n      }}\n    >\n      <Flex sx={{ width: '100%', maxWidth: '300px', gap: '10px', alignItems: 'center' }}>\n        <Flex sx={{ minWidth: '30px', minHeight: '30px', borderRadius: '50%', overflow: 'hidden' }}>\n          <Svg icon=\"aptos\" width=\"30\" />\n        </Flex>\n        <Flex sx={{ flexDirection: 'column' }}>\n          <Text\n            sx={{ fontSize: '18px', fontWeight: '700', lineHeight: '18.5px', display: 'flex', alignItems: 'center' }}\n          >\n            Aptos\n            <Text\n              sx={{\n                fontSize: '10px',\n                fontWeight: '600',\n                lineHeight: '8px',\n                color: '#FAFAFA',\n                padding: '4px 6px',\n                background: 'rgba(250, 250, 250, 0.3)',\n                borderRadius: '4px',\n                marginLeft: '6px',\n                marginRight: '6px',\n              }}\n            >\n              NEW\n            </Text>\n          </Text>\n          <Text sx={{ fontSize: '11px', fontWeight: '400', lineHeight: '16px', color: 'white' }}>\n            Connect your Aptos wallet to view your Aptos Bonds!\n          </Text>\n        </Flex>\n      </Flex>\n      <Flex sx={{ minWidth: '100px' }}>\n        <Button\n          onClick={() => setModalOpen(true)}\n          sx={{\n            background: 'text',\n            color: 'primaryButton',\n            border: 'none',\n            height: '31px',\n            width: ['210px', '210px', '210px', '210px', '210px', '100px'],\n            fontSize: '14px',\n            fontWeight: '700',\n            '&:hover': { color: 'text' },\n          }}\n        >\n          Connect\n        </Button>\n      </Flex>\n      {/* WalletSelector renders its own \"Connect Wallet\" trigger alongside\n          the modal. We only want the modal (which is a portal into\n          document.body), so we hide the wrapper with display: none. */}\n      <div style={{ display: 'none' }}>\n        <WalletSelector isModalOpen={isModalOpen} setModalOpen={setModalOpen} />\n      </div>\n    </Flex>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/ConnectoToVmBanners/ConnectToEvmBanner.js

@@ -8,7 +8,7 @@ function ConnectToEVMBanner() {
             width: '100%',
             height: '75px',
             backgroundColor: 'white2',
-            p: ['10px', '10px', '10px', '20px'],
+            p: '10px',
             borderRadius: '10px',
             justifyContent: 'space-between',
             alignItems: 'center',
@@ -20,18 +20,14 @@ function ConnectToEVMBanner() {
                     alignItems: 'center',
                 }, children: [jsx("img", { src: "https://ape.bond/images/connect-to-vm/ethereum-icon.png", alt: "ethereum icon", width: 30, height: 30, style: { borderRadius: '50px' } }), jsxs(Flex, { sx: {
                             flexDirection: 'column',
-                        }, children: [jsxs(Text, { sx: { fontSize: '15px', fontWeight: '600', lineHeight: '18.5px', display: 'flex', alignItems: 'center' }, children: ["Ethereum", jsx(Text, { sx: {
-                                            display: ['none', 'none', 'none', 'flex'],
-                                            fontSize: '10px',
-                                            fontWeight: '600',
-                                            lineHeight: '8px',
-                                            color: '#FAFAFA',
-                                            padding: '4px 6px',
-                                            background: 'rgba(250, 250, 250, 0.3)',
-                                            borderRadius: '4px',
-                                            marginLeft: '6px',
-                                            marginRight: '6px',
-                                        }, children: "Popular" }), jsx("img", { src: "https://ape.bond/images/connect-to-vm/evm-compatible-wallets.png", alt: "solana compatible wallets", width: 55, height: 17, style: { marginLeft: '10px' } })] }), jsx(Text, { sx: {
+                        }, children: [jsxs(Text, { sx: {
+                                    fontSize: '15px',
+                                    fontWeight: '600',
+                                    lineHeight: '18.5px',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '5px',
+                                }, children: ["Ethereum", jsx("img", { src: "https://ape.bond/images/connect-to-vm/evm-compatible-wallets.png", alt: "solana compatible wallets", width: 55, height: 17 })] }), jsx(Text, { sx: {
                                     fontSize: '10px',
                                     fontWeight: '400',
                                     lineHeight: '16px',
@@ -41,9 +37,9 @@ function ConnectToEVMBanner() {
                                     gap: '4px',
                                 }, children: "Connect your EVM wallet to view your EVM Bonds!" })] })] }), jsx(Flex, { sx: {
                     minWidth: '100px',
-                    width: '210px',
+                    width: ['210px', '210px', '210px', '210px', '210px', '100px'],
                     '& > *': {
-                        width: '210px',
+                        width: ['210px', '210px', '210px', '210px', '210px', '100px'],
                         height: '31px !important',
                         fontSize: '14px !important',
                     },

package/dist/components/ConnectoToVmBanners/ConnectToEvmBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectToEvmBanner.js","sources":["../../../src/components/ConnectoToVmBanners/ConnectToEvmBanner.tsx"],"sourcesContent":["import ConnectButton from '../ConnectButton'\nimport Flex from '../uikit-sdk/Flex'\nimport Text from '../uikit-sdk/Text'\n\nexport default function ConnectToEVMBanner() {\n  return (\n    <Flex\n      sx={{\n        width: '100%',\n        height: '75px',\n        backgroundColor: 'white2',\n        p: ['10px', '10px', '10px', '20px'],\n        borderRadius: '10px',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        cursor: 'pointer',\n      }}\n    >\n      <Flex\n        sx={{\n          width: '100%',\n          maxWidth: '300px',\n          gap: '10px',\n          alignItems: 'center',\n        }}\n      >\n        <img\n          src=\"https://ape.bond/images/connect-to-vm/ethereum-icon.png\"\n          alt=\"ethereum icon\"\n          width={30}\n          height={30}\n          style={{ borderRadius: '50px' }}\n        />\n        <Flex\n          sx={{\n            flexDirection: 'column',\n          }}\n        >\n          <Text\n            sx={{ fontSize: '15px', fontWeight: '600', lineHeight: '18.5px', display: 'flex', alignItems: 'center' }}\n          >\n            Ethereum\n            <Text\n              sx={{\n                display: ['none', 'none', 'none', 'flex'],\n                fontSize: '10px',\n                fontWeight: '600',\n                lineHeight: '8px',\n                color: '#FAFAFA',\n                padding: '4px 6px',\n                background: 'rgba(250, 250, 250, 0.3)',\n                borderRadius: '4px',\n                marginLeft: '6px',\n                marginRight: '6px',\n              }}\n            >\n              Popular\n            </Text>\n            <img\n              src=\"https://ape.bond/images/connect-to-vm/evm-compatible-wallets.png\"\n              alt=\"solana compatible wallets\"\n              width={55}\n              height={17}\n              style={{ marginLeft: '10px' }}\n            />\n          </Text>\n          <Text\n            sx={{\n              fontSize: '10px',\n              fontWeight: '400',\n              lineHeight: '16px',\n              color: 'rgba(255, 255, 255, 0.65)',\n              display: 'flex',\n              alignItems: 'center',\n              gap: '4px',\n            }}\n          >\n            Connect your EVM wallet to view your EVM Bonds!\n          </Text>\n        </Flex>\n      </Flex>\n      <Flex\n        sx={{\n          minWidth: '100px',\n          width: '210px',\n          '& > *': {\n            width: '210px',\n            height: '31px !important',\n            fontSize: '14px !important',\n          },\n        }}\n      >\n        <ConnectButton />\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"ConnectToEvmBanner.js","sources":["../../../src/components/ConnectoToVmBanners/ConnectToEvmBanner.tsx"],"sourcesContent":["import ConnectButton from '../ConnectButton'\nimport Flex from '../uikit-sdk/Flex'\nimport Text from '../uikit-sdk/Text'\n\nexport default function ConnectToEVMBanner() {\n  return (\n    <Flex\n      sx={{\n        width: '100%',\n        height: '75px',\n        backgroundColor: 'white2',\n        p: '10px',\n        borderRadius: '10px',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        cursor: 'pointer',\n      }}\n    >\n      <Flex\n        sx={{\n          width: '100%',\n          maxWidth: '300px',\n          gap: '10px',\n          alignItems: 'center',\n        }}\n      >\n        <img\n          src=\"https://ape.bond/images/connect-to-vm/ethereum-icon.png\"\n          alt=\"ethereum icon\"\n          width={30}\n          height={30}\n          style={{ borderRadius: '50px' }}\n        />\n        <Flex\n          sx={{\n            flexDirection: 'column',\n          }}\n        >\n          <Text\n            sx={{\n              fontSize: '15px',\n              fontWeight: '600',\n              lineHeight: '18.5px',\n              display: 'flex',\n              alignItems: 'center',\n              gap: '5px',\n            }}\n          >\n            Ethereum\n            <img\n              src=\"https://ape.bond/images/connect-to-vm/evm-compatible-wallets.png\"\n              alt=\"solana compatible wallets\"\n              width={55}\n              height={17}\n            />\n          </Text>\n          <Text\n            sx={{\n              fontSize: '10px',\n              fontWeight: '400',\n              lineHeight: '16px',\n              color: 'rgba(255, 255, 255, 0.65)',\n              display: 'flex',\n              alignItems: 'center',\n              gap: '4px',\n            }}\n          >\n            Connect your EVM wallet to view your EVM Bonds!\n          </Text>\n        </Flex>\n      </Flex>\n      <Flex\n        sx={{\n          minWidth: '100px',\n          width: ['210px', '210px', '210px', '210px', '210px', '100px'],\n          '& > *': {\n            width: ['210px', '210px', '210px', '210px', '210px', '100px'],\n            height: '31px !important',\n            fontSize: '14px !important',\n          },\n        }}\n      >\n        <ConnectButton />\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAIc,SAAU,kBAAkB,GAAA;AACxC,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,eAAe,EAAE,QAAQ;AACzB,YAAA,CAAC,EAAE,MAAM;AACT,YAAA,YAAY,EAAE,MAAM;AACpB,YAAA,cAAc,EAAE,eAAe;AAC/B,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,MAAM,EAAE,SAAS;AAClB,SAAA,EAAA,QAAA,EAAA,CAEDA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,QAAQ,EAAE,OAAO;AACjB,oBAAA,GAAG,EAAE,MAAM;AACX,oBAAA,UAAU,EAAE,QAAQ;AACrB,iBAAA,EAAA,QAAA,EAAA,CAEDC,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAC,yDAAyD,EAC7D,GAAG,EAAC,eAAe,EACnB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,EAAA,CAC/B,EACFD,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,4BAAA,aAAa,EAAE,QAAQ;AACxB,yBAAA,EAAA,QAAA,EAAA,CAEDA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oCAAA,QAAQ,EAAE,MAAM;AAChB,oCAAA,UAAU,EAAE,KAAK;AACjB,oCAAA,UAAU,EAAE,QAAQ;AACpB,oCAAA,OAAO,EAAE,MAAM;AACf,oCAAA,UAAU,EAAE,QAAQ;AACpB,oCAAA,GAAG,EAAE,KAAK;iCACX,EAAA,QAAA,EAAA,CAAA,UAAA,EAGDC,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAC,kEAAkE,EACtE,GAAG,EAAC,2BAA2B,EAC/B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EAAA,CACV,CAAA,EAAA,CACG,EACPA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oCAAA,QAAQ,EAAE,MAAM;AAChB,oCAAA,UAAU,EAAE,KAAK;AACjB,oCAAA,UAAU,EAAE,MAAM;AAClB,oCAAA,KAAK,EAAE,2BAA2B;AAClC,oCAAA,OAAO,EAAE,MAAM;AACf,oCAAA,UAAU,EAAE,QAAQ;AACpB,oCAAA,GAAG,EAAE,KAAK;AACX,iCAAA,EAAA,QAAA,EAAA,iDAAA,EAAA,CAGI,IACF,CAAA,EAAA,CACF,EACPA,IAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oBAAA,QAAQ,EAAE,OAAO;AACjB,oBAAA,KAAK,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC;AAC7D,oBAAA,OAAO,EAAE;AACP,wBAAA,KAAK,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC;AAC7D,wBAAA,MAAM,EAAE,iBAAiB;AACzB,wBAAA,QAAQ,EAAE,iBAAiB;AAC5B,qBAAA;AACF,iBAAA,EAAA,QAAA,EAEDA,IAAC,aAAa,EAAA,EAAA,CAAG,EAAA,CACZ,CAAA,EAAA,CACF;AAEX;;;;"}

package/dist/components/ConnectoToVmBanners/ConnectToSolanaBanner.js

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import { useWalletModal } from '@solana/wallet-adapter-react-ui';
-import colors from '../../theme/colors.js';
 import Flex from '../uikit-sdk/Flex/index.js';
 import Button from '../uikit-sdk/Button/Button.js';
 import Text from '../uikit-sdk/Text/index.js';
@@ -12,7 +11,7 @@ function ConnectToSolanaCard() {
             height: '75px',
             background: `url('https://ape.bond/images/connect-to-vm/solana-card-background.png') no-repeat center center`,
             backgroundSize: 'cover',
-            p: ['10px', '10px', '10px', '20px'],
+            p: '10px',
             borderRadius: '10px',
             justifyContent: 'space-between',
             alignItems: 'center',
@@ -25,25 +24,22 @@ function ConnectToSolanaCard() {
                     alignItems: 'center',
                 }, children: [jsx("img", { src: "https://ape.bond/images/connect-to-vm/solana-icon.png", alt: "solana icon", width: 30, height: 30, style: { borderRadius: '50px' } }), jsxs(Flex, { sx: {
                             flexDirection: 'column',
-                        }, children: [jsxs(Text, { sx: { fontSize: '18px', fontWeight: '700', lineHeight: '18.5px', display: 'flex', alignItems: 'center' }, children: ["Solana", jsx(Text, { sx: {
-                                            fontSize: '10px',
-                                            fontWeight: '600',
-                                            lineHeight: '8px',
-                                            color: '#FAFAFA',
-                                            padding: '4px 6px',
-                                            background: 'rgba(250, 250, 250, 0.3)',
-                                            borderRadius: '4px',
-                                            marginLeft: '6px',
-                                            marginRight: '6px',
-                                        }, children: "NEW" }), jsx("img", { src: "https://ape.bond/images/connect-to-vm/svm-compatible-wallets.png", alt: "solana compatible wallets", width: 43, height: 17 })] }), jsx(Text, { sx: { fontSize: '11px', fontWeight: '400', lineHeight: '16px', color: 'white' }, children: "Connect your Solana wallet to view your Solana Bonds!" })] })] }), jsx(Flex, { sx: { minWidth: '100px' }, children: jsx(Button, { onClick: () => setVisible(true), sx: {
-                        background: colors.text,
-                        color: colors.primaryButton,
+                        }, children: [jsxs(Text, { sx: {
+                                    fontSize: '18px',
+                                    fontWeight: '700',
+                                    lineHeight: '18.5px',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '5px',
+                                }, children: ["Solana", jsx("img", { src: "https://ape.bond/images/connect-to-vm/svm-compatible-wallets.png", alt: "solana compatible wallets", width: 43, height: 17 })] }), jsx(Text, { sx: { fontSize: '11px', fontWeight: '400', lineHeight: '16px', color: 'white' }, children: "Connect your Solana wallet to view your Solana Bonds!" })] })] }), jsx(Flex, { sx: { minWidth: '100px' }, children: jsx(Button, { onClick: () => setVisible(true), sx: {
+                        background: 'text',
+                        color: 'primaryButton',
                         border: 'none',
                         height: '31px',
-                        width: '210px',
+                        width: ['210px', '210px', '210px', '210px', '210px', '100px'],
                         fontSize: '14px',
                         fontWeight: '700',
-                        '&:hover': { color: colors.text },
+                        '&:hover': { color: 'text' },
                     }, children: "Connect" }) })] }));
 }
 

package/dist/components/ConnectoToVmBanners/ConnectToSolanaBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectToSolanaBanner.js","sources":["../../../src/components/ConnectoToVmBanners/ConnectToSolanaBanner.tsx"],"sourcesContent":["import { useWalletModal } from '@solana/wallet-adapter-react-ui'\nimport colors from '../../theme/colors'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\nimport Text from '../uikit-sdk/Text'\n\nexport default function ConnectToSolanaCard() {\n  const { setVisible } = useWalletModal()\n  return (\n    <Flex\n      sx={{\n        width: '100%',\n        height: '75px',\n        background: `url('https://ape.bond/images/connect-to-vm/solana-card-background.png') no-repeat center center`,\n        backgroundSize: 'cover',\n        p: ['10px', '10px', '10px', '20px'],\n        borderRadius: '10px',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        border: 'none',\n        cursor: 'pointer',\n      }}\n    >\n      <Flex\n        sx={{\n          width: '100%',\n          maxWidth: '300px',\n          gap: '10px',\n          alignItems: 'center',\n        }}\n      >\n        <img\n          src=\"https://ape.bond/images/connect-to-vm/solana-icon.png\"\n          alt=\"solana icon\"\n          width={30}\n          height={30}\n          style={{ borderRadius: '50px' }}\n        />\n        <Flex\n          sx={{\n            flexDirection: 'column',\n          }}\n        >\n          <Text\n            sx={{ fontSize: '18px', fontWeight: '700', lineHeight: '18.5px', display: 'flex', alignItems: 'center' }}\n          >\n            Solana\n            <Text\n              sx={{\n                fontSize: '10px',\n                fontWeight: '600',\n                lineHeight: '8px',\n                color: '#FAFAFA',\n                padding: '4px 6px',\n                background: 'rgba(250, 250, 250, 0.3)',\n                borderRadius: '4px',\n                marginLeft: '6px',\n                marginRight: '6px',\n              }}\n            >\n              NEW\n            </Text>\n            <img\n              src=\"https://ape.bond/images/connect-to-vm/svm-compatible-wallets.png\"\n              alt=\"solana compatible wallets\"\n              width={43}\n              height={17}\n            />\n          </Text>\n\n          <Text sx={{ fontSize: '11px', fontWeight: '400', lineHeight: '16px', color: 'white' }}>\n            Connect your Solana wallet to view your Solana Bonds!\n          </Text>\n        </Flex>\n      </Flex>\n      <Flex sx={{ minWidth: '100px' }}>\n        <Button\n          onClick={() => setVisible(true)}\n          sx={{\n            background: colors.text,\n            color: colors.primaryButton,\n            border: 'none',\n            height: '31px',\n            width: '210px',\n            fontSize: '14px',\n            fontWeight: '700',\n            '&:hover': { color: colors.text },\n          }}\n        >\n          Connect\n        </Button>\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"ConnectToSolanaBanner.js","sources":["../../../src/components/ConnectoToVmBanners/ConnectToSolanaBanner.tsx"],"sourcesContent":["import { useWalletModal } from '@solana/wallet-adapter-react-ui'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\nimport Text from '../uikit-sdk/Text'\n\nexport default function ConnectToSolanaCard() {\n  const { setVisible } = useWalletModal()\n  return (\n    <Flex\n      sx={{\n        width: '100%',\n        height: '75px',\n        background: `url('https://ape.bond/images/connect-to-vm/solana-card-background.png') no-repeat center center`,\n        backgroundSize: 'cover',\n        p: '10px',\n        borderRadius: '10px',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        border: 'none',\n        cursor: 'pointer',\n      }}\n    >\n      <Flex\n        sx={{\n          width: '100%',\n          maxWidth: '300px',\n          gap: '10px',\n          alignItems: 'center',\n        }}\n      >\n        <img\n          src=\"https://ape.bond/images/connect-to-vm/solana-icon.png\"\n          alt=\"solana icon\"\n          width={30}\n          height={30}\n          style={{ borderRadius: '50px' }}\n        />\n        <Flex\n          sx={{\n            flexDirection: 'column',\n          }}\n        >\n          <Text\n            sx={{\n              fontSize: '18px',\n              fontWeight: '700',\n              lineHeight: '18.5px',\n              display: 'flex',\n              alignItems: 'center',\n              gap: '5px',\n            }}\n          >\n            Solana\n            <img\n              src=\"https://ape.bond/images/connect-to-vm/svm-compatible-wallets.png\"\n              alt=\"solana compatible wallets\"\n              width={43}\n              height={17}\n            />\n          </Text>\n          <Text sx={{ fontSize: '11px', fontWeight: '400', lineHeight: '16px', color: 'white' }}>\n            Connect your Solana wallet to view your Solana Bonds!\n          </Text>\n        </Flex>\n      </Flex>\n      <Flex sx={{ minWidth: '100px' }}>\n        <Button\n          onClick={() => setVisible(true)}\n          sx={{\n            background: 'text',\n            color: 'primaryButton',\n            border: 'none',\n            height: '31px',\n            width: ['210px', '210px', '210px', '210px', '210px', '100px'],\n            fontSize: '14px',\n            fontWeight: '700',\n            '&:hover': { color: 'text' },\n          }}\n        >\n          Connect\n        </Button>\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAKc,SAAU,mBAAmB,GAAA;AACzC,IAAA,MAAM,EAAE,UAAU,EAAE,GAAG,cAAc,EAAE;AACvC,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,UAAU,EAAE,CAAA,+FAAA,CAAiG;AAC7G,YAAA,cAAc,EAAE,OAAO;AACvB,YAAA,CAAC,EAAE,MAAM;AACT,YAAA,YAAY,EAAE,MAAM;AACpB,YAAA,cAAc,EAAE,eAAe;AAC/B,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,MAAM,EAAE,SAAS;AAClB,SAAA,EAAA,QAAA,EAAA,CAEDA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,QAAQ,EAAE,OAAO;AACjB,oBAAA,GAAG,EAAE,MAAM;AACX,oBAAA,UAAU,EAAE,QAAQ;AACrB,iBAAA,EAAA,QAAA,EAAA,CAEDC,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAC,uDAAuD,EAC3D,GAAG,EAAC,aAAa,EACjB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,EAAA,CAC/B,EACFD,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,4BAAA,aAAa,EAAE,QAAQ;AACxB,yBAAA,EAAA,QAAA,EAAA,CAEDA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oCAAA,QAAQ,EAAE,MAAM;AAChB,oCAAA,UAAU,EAAE,KAAK;AACjB,oCAAA,UAAU,EAAE,QAAQ;AACpB,oCAAA,OAAO,EAAE,MAAM;AACf,oCAAA,UAAU,EAAE,QAAQ;AACpB,oCAAA,GAAG,EAAE,KAAK;AACX,iCAAA,EAAA,QAAA,EAAA,CAAA,QAAA,EAGDC,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAC,kEAAkE,EACtE,GAAG,EAAC,2BAA2B,EAC/B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EAAA,CACV,CAAA,EAAA,CACG,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,sEAE9E,CAAA,EAAA,CACF,CAAA,EAAA,CACF,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAA,QAAA,EAC7BA,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,MAAM,UAAU,CAAC,IAAI,CAAC,EAC/B,EAAE,EAAE;AACF,wBAAA,UAAU,EAAE,MAAM;AAClB,wBAAA,KAAK,EAAE,eAAe;AACtB,wBAAA,MAAM,EAAE,MAAM;AACd,wBAAA,MAAM,EAAE,MAAM;AACd,wBAAA,KAAK,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC;AAC7D,wBAAA,QAAQ,EAAE,MAAM;AAChB,wBAAA,UAAU,EAAE,KAAK;AACjB,wBAAA,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;qBAC7B,EAAA,QAAA,EAAA,SAAA,EAAA,CAGM,EAAA,CACJ,CAAA,EAAA,CACF;AAEX;;;;"}

package/dist/components/ConnectoToVmBanners/ConnectToSuiBanner.d.ts

@@ -0,0 +1 @@
+export default function ConnectToSuiBanner(): import("react").JSX.Element;

package/dist/components/ConnectoToVmBanners/ConnectToSuiBanner.js

@@ -0,0 +1,44 @@
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { useState } from 'react';
+import { ConnectModal } from '@mysten/dapp-kit';
+import Flex from '../uikit-sdk/Flex/index.js';
+import Button from '../uikit-sdk/Button/Button.js';
+import Text from '../uikit-sdk/Text/index.js';
+import Svg from '../uikit-sdk/Svg/index.js';
+
+function ConnectToSuiBanner() {
+    const [modalOpen, setModalOpen] = useState(false);
+    return (jsxs(Flex, { sx: {
+            width: '100%',
+            height: '75px',
+            background: 'linear-gradient(135deg, #2B2B2B 0%, #1A1A2E 100%)',
+            p: '10px',
+            borderRadius: '10px',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            border: 'none',
+            cursor: 'pointer',
+        }, children: [jsxs(Flex, { sx: { width: '100%', maxWidth: '300px', gap: '10px', alignItems: 'center' }, children: [jsx(Flex, { sx: { minWidth: '30px', minHeight: '30px', borderRadius: '50%', overflow: 'hidden' }, children: jsx(Svg, { icon: "sui", width: "30" }) }), jsxs(Flex, { sx: { flexDirection: 'column' }, children: [jsxs(Text, { sx: { fontSize: '18px', fontWeight: '700', lineHeight: '18.5px', display: 'flex', alignItems: 'center' }, children: ["Sui", jsx(Text, { sx: {
+                                            fontSize: '10px',
+                                            fontWeight: '600',
+                                            lineHeight: '8px',
+                                            color: '#FAFAFA',
+                                            padding: '4px 6px',
+                                            background: 'rgba(250, 250, 250, 0.3)',
+                                            borderRadius: '4px',
+                                            marginLeft: '6px',
+                                            marginRight: '6px',
+                                        }, children: "NEW" })] }), jsx(Text, { sx: { fontSize: '11px', fontWeight: '400', lineHeight: '16px', color: 'white' }, children: "Connect your Sui wallet to view your Sui Bonds!" })] })] }), jsx(Flex, { sx: { minWidth: '100px' }, children: jsx(Button, { onClick: () => setModalOpen(true), sx: {
+                        background: 'text',
+                        color: 'primaryButton',
+                        border: 'none',
+                        height: '31px',
+                        width: ['210px', '210px', '210px', '210px', '210px', '100px'],
+                        fontSize: '14px',
+                        fontWeight: '700',
+                        '&:hover': { color: 'text' },
+                    }, children: "Connect" }) }), jsx(ConnectModal, { open: modalOpen, onOpenChange: setModalOpen })] }));
+}
+
+export { ConnectToSuiBanner as default };
+//# sourceMappingURL=ConnectToSuiBanner.js.map

package/dist/components/ConnectoToVmBanners/ConnectToSuiBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectToSuiBanner.js","sources":["../../../src/components/ConnectoToVmBanners/ConnectToSuiBanner.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { ConnectModal } from '@mysten/dapp-kit'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\nimport Text from '../uikit-sdk/Text'\nimport Svg from '../uikit-sdk/Svg'\n\nexport default function ConnectToSuiBanner() {\n  const [modalOpen, setModalOpen] = useState(false)\n  return (\n    <Flex\n      sx={{\n        width: '100%',\n        height: '75px',\n        background: 'linear-gradient(135deg, #2B2B2B 0%, #1A1A2E 100%)',\n        p: '10px',\n        borderRadius: '10px',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        border: 'none',\n        cursor: 'pointer',\n      }}\n    >\n      <Flex sx={{ width: '100%', maxWidth: '300px', gap: '10px', alignItems: 'center' }}>\n        <Flex sx={{ minWidth: '30px', minHeight: '30px', borderRadius: '50%', overflow: 'hidden' }}>\n          <Svg icon=\"sui\" width=\"30\" />\n        </Flex>\n        <Flex sx={{ flexDirection: 'column' }}>\n          <Text\n            sx={{ fontSize: '18px', fontWeight: '700', lineHeight: '18.5px', display: 'flex', alignItems: 'center' }}\n          >\n            Sui\n            <Text\n              sx={{\n                fontSize: '10px',\n                fontWeight: '600',\n                lineHeight: '8px',\n                color: '#FAFAFA',\n                padding: '4px 6px',\n                background: 'rgba(250, 250, 250, 0.3)',\n                borderRadius: '4px',\n                marginLeft: '6px',\n                marginRight: '6px',\n              }}\n            >\n              NEW\n            </Text>\n          </Text>\n          <Text sx={{ fontSize: '11px', fontWeight: '400', lineHeight: '16px', color: 'white' }}>\n            Connect your Sui wallet to view your Sui Bonds!\n          </Text>\n        </Flex>\n      </Flex>\n      <Flex sx={{ minWidth: '100px' }}>\n        <Button\n          onClick={() => setModalOpen(true)}\n          sx={{\n            background: 'text',\n            color: 'primaryButton',\n            border: 'none',\n            height: '31px',\n            width: ['210px', '210px', '210px', '210px', '210px', '100px'],\n            fontSize: '14px',\n            fontWeight: '700',\n            '&:hover': { color: 'text' },\n          }}\n        >\n          Connect\n        </Button>\n      </Flex>\n      {/* @ts-ignore */}\n      <ConnectModal open={modalOpen} onOpenChange={setModalOpen} />\n    </Flex>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/TokenInfoAndName/index.js

@@ -31,6 +31,8 @@ const NETWORK_COLORS = {
     [ChainId.UNICHAIN]: '#f50db44d',
     [ChainId.MEGAETH_TESTNET]: '#DFD9D94d',
     [ChainId.HYPEREVM]: '#ffffff4d',
+    [ChainId.APTOS]: 'rgb(240 111 126 / 0.3)',
+    [ChainId.SUI]: '#6fbcf04d',
 };
 const TokenInfoAndName = ({ tokenSymbol, chain, tag, vestEnds, isHotBond, marketingCampaign, }) => {
     return (jsxs(Flex, { className: "tokeninfoname container", children: [jsx(Flex, { sx: {

package/dist/components/TokenInfoAndName/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/TokenInfoAndName/index.tsx"],"sourcesContent":["import React from 'react'\nimport { NETWORK_ICONS } from '../../config/constants/chains'\nimport TokenImage from '../uikit-sdk/TokenImage'\nimport AddFavToken from '../FavIcons/AddFavToken'\nimport { ChainId, MarketingCampaign } from '@ape.swap/apeswap-lists'\nimport { MCTagNameMapping, MCTokenIconStyles } from '../../utils/campaignStyles'\nimport Flex from '../uikit-sdk/Flex'\nimport Svg from '../uikit-sdk/Svg'\nimport Text from '../uikit-sdk/Text'\nimport ListTag from '../uikit-sdk/Tag/ListTag'\n\nexport const NETWORK_COLORS: Partial<Record<number, string>> = {\n  [ChainId.BSC]: '#F3BA2F4d',\n  [ChainId.MAINNET]: '#627eea4d',\n  [ChainId.MATIC]: '#8247e54d',\n  [ChainId.LIGHTLINK]: '#6087ff4d',\n  [ChainId.BASE]: '#0052ff4d',\n  [ChainId.ARBITRUM]: '#289fef4d',\n  [ChainId.LINEA]: '#ffffff4d',\n  [ChainId.IOTA]: '#ffffff4d',\n  [ChainId.GRAPHLINQ]: '#ded2ff4d',\n  [ChainId.AVAX]: '#e743444d',\n  [ChainId.BLAST]: '#fcfc034d',\n  [ChainId.CROSSFI]: '#7c80844d',\n  [ChainId.MONAD_TESTNET]: '#836EF94d',\n  [ChainId.MONAD]: '#836EF94d',\n  [ChainId.SOL]: '#836EF94d',\n  [ChainId.SONIC]: '#fb9a4c4d',\n  [ChainId.BERACHAIN]: '#783e244d',\n  [ChainId.KATANA]: '#068be34d',\n  [ChainId.UNICHAIN]: '#f50db44d',\n  [ChainId.MEGAETH_TESTNET]: '#DFD9D94d',\n  [ChainId.HYPEREVM]: '#ffffff4d',\n}\n\nconst TokenInfoAndName = ({\n  tokenSymbol,\n  chain,\n  tag,\n  vestEnds,\n  isHotBond,\n  marketingCampaign,\n}: {\n  tokenSymbol?: string\n  chain?: number\n  tag?: string\n  vestEnds?: string\n  isHotBond?: boolean\n  marketingCampaign?: MarketingCampaign\n}) => {\n  return (\n    <Flex className=\"tokeninfoname container\">\n      <Flex\n        sx={{\n          width: '125px',\n          height: '100%',\n          position: 'absolute',\n          left: 0,\n          top: 0,\n          borderRadius: 'normal',\n          background: isHotBond\n            ? 'transparent'\n            : `linear-gradient(90deg, ${chain ? NETWORK_COLORS[chain] : '#FFFFFF33'} 0%, rgba(0,0,0,0) 75%)`,\n        }}\n      />\n      <Flex className=\"tokeninfoname chain\">\n        <Svg width={20} height={20} icon={chain ? NETWORK_ICONS[chain] : 'question'} />\n      </Flex>\n      <Flex\n        className=\"tokeninfoname tokencontainer\"\n        sx={{\n          marginTop: vestEnds ? ['10px', '10px', '10px', '0px'] : 0,\n          maxWidth: ['175px', '175px', '140px', '190px', '190px'],\n        }}\n      >\n        <Flex sx={{ position: 'relative', minWidth: '33px' }}>\n          <Flex sx={MCTokenIconStyles[marketingCampaign!]} />\n          <TokenImage symbol={tokenSymbol === 'AIX' && chain === ChainId.SOL ? 'SOLAIX' : tokenSymbol} size={33} />\n        </Flex>\n        <Flex className=\"tokeninfoname tokentext\">\n          <Flex sx={{ justifyContent: 'space-between', width: '100%', alignItems: 'center' }}>\n            <Text sx={{ fontSize: ['12px', '12px', '14px', '16px'] }}>{tokenSymbol}</Text>\n          </Flex>\n          {vestEnds && (\n            <Flex sx={{ fontSize: '12px', fontWeight: 400, opacity: 0.6, lineHeight: '14px' }}>{vestEnds}</Flex>\n          )}\n        </Flex>\n        <Flex\n          className=\"tokeninfofav\"\n          sx={{\n            minWidth: '25px',\n            p: '5px',\n          }}\n        >\n          <AddFavToken tokenSymbol={tokenSymbol} hotBond={!vestEnds && isHotBond} />\n        </Flex>\n      </Flex>\n      <Flex\n        sx={{\n          justifyContent: isHotBond ? 'center' : 'flex-start',\n          alignItems: 'center',\n        }}\n      >\n        <Flex sx={{ display: isHotBond ? 'flex' : ['none', 'none', 'none', 'none', 'flex'] }}>\n          {(tag || marketingCampaign) && (\n            <ListTag text={MCTagNameMapping[marketingCampaign!] || tag} marketingCampaign={marketingCampaign} />\n          )}\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default TokenInfoAndName\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;AAWO,MAAM,cAAc,GAAoC;AAC7D,IAAA,CAAC,OAAO,CAAC,GAAG,GAAG,WAAW;AAC1B,IAAA,CAAC,OAAO,CAAC,OAAO,GAAG,WAAW;AAC9B,IAAA,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW;AAC5B,IAAA,CAAC,OAAO,CAAC,SAAS,GAAG,WAAW;AAChC,IAAA,CAAC,OAAO,CAAC,IAAI,GAAG,WAAW;AAC3B,IAAA,CAAC,OAAO,CAAC,QAAQ,GAAG,WAAW;AAC/B,IAAA,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW;AAC5B,IAAA,CAAC,OAAO,CAAC,IAAI,GAAG,WAAW;AAC3B,IAAA,CAAC,OAAO,CAAC,SAAS,GAAG,WAAW;AAChC,IAAA,CAAC,OAAO,CAAC,IAAI,GAAG,WAAW;AAC3B,IAAA,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW;AAC5B,IAAA,CAAC,OAAO,CAAC,OAAO,GAAG,WAAW;AAC9B,IAAA,CAAC,OAAO,CAAC,aAAa,GAAG,WAAW;AACpC,IAAA,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW;AAC5B,IAAA,CAAC,OAAO,CAAC,GAAG,GAAG,WAAW;AAC1B,IAAA,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW;AAC5B,IAAA,CAAC,OAAO,CAAC,SAAS,GAAG,WAAW;AAChC,IAAA,CAAC,OAAO,CAAC,MAAM,GAAG,WAAW;AAC7B,IAAA,CAAC,OAAO,CAAC,QAAQ,GAAG,WAAW;AAC/B,IAAA,CAAC,OAAO,CAAC,eAAe,GAAG,WAAW;AACtC,IAAA,CAAC,OAAO,CAAC,QAAQ,GAAG,WAAW;;AAGjC,MAAM,gBAAgB,GAAG,CAAC,EACxB,WAAW,EACX,KAAK,EACL,GAAG,EACH,QAAQ,EACR,SAAS,EACT,iBAAiB,GAQlB,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,CACvCC,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oBAAA,KAAK,EAAE,OAAO;AACd,oBAAA,MAAM,EAAE,MAAM;AACd,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,IAAI,EAAE,CAAC;AACP,oBAAA,GAAG,EAAE,CAAC;AACN,oBAAA,YAAY,EAAE,QAAQ;AACtB,oBAAA,UAAU,EAAE;AACV,0BAAE;AACF,0BAAE,CAAA,uBAAA,EAA0B,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,WAAW,CAAA,uBAAA,CAAyB;iBACnG,EAAA,CACD,EACFA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,qBAAqB,YACnCA,GAAA,CAAC,GAAG,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,GAAG,aAAa,CAAC,KAAK,CAAC,GAAG,UAAU,EAAA,CAAI,GAC1E,EACPD,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,8BAA8B,EACxC,EAAE,EAAE;AACF,oBAAA,SAAS,EAAE,QAAQ,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC;oBACzD,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC;AACxD,iBAAA,EAAA,QAAA,EAAA,CAEDA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,CAClDC,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,iBAAiB,CAAC,iBAAkB,CAAC,EAAA,CAAI,EACnDA,GAAA,CAAC,UAAU,EAAA,EAAC,MAAM,EAAE,WAAW,KAAK,KAAK,IAAI,KAAK,KAAK,OAAO,CAAC,GAAG,GAAG,QAAQ,GAAG,WAAW,EAAE,IAAI,EAAE,EAAE,EAAA,CAAI,CAAA,EAAA,CACpG,EACPD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,CACvCC,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,cAAc,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EAChFA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,EAAA,QAAA,EAAG,WAAW,EAAA,CAAQ,EAAA,CACzE,EACN,QAAQ,KACPA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAQ,CACrG,CAAA,EAAA,CACI,EACPA,GAAA,CAAC,IAAI,IACH,SAAS,EAAC,cAAc,EACxB,EAAE,EAAE;AACF,4BAAA,QAAQ,EAAE,MAAM;AAChB,4BAAA,CAAC,EAAE,KAAK;yBACT,EAAA,QAAA,EAEDA,GAAA,CAAC,WAAW,EAAA,EAAC,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,CAAC,QAAQ,IAAI,SAAS,GAAI,EAAA,CACrE,CAAA,EAAA,CACF,EACPA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;oBACF,cAAc,EAAE,SAAS,GAAG,QAAQ,GAAG,YAAY;AACnD,oBAAA,UAAU,EAAE,QAAQ;iBACrB,EAAA,QAAA,EAEDA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,OAAO,EAAE,SAAS,GAAG,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,YACjF,CAAC,GAAG,IAAI,iBAAiB,MACxBA,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,gBAAgB,CAAC,iBAAkB,CAAC,IAAI,GAAG,EAAE,iBAAiB,EAAE,iBAAiB,EAAA,CAAI,CACrG,EAAA,CACI,EAAA,CACF,CAAA,EAAA,CACF;AAEX;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/TokenInfoAndName/index.tsx"],"sourcesContent":["import React from 'react'\nimport { NETWORK_ICONS } from '../../config/constants/chains'\nimport TokenImage from '../uikit-sdk/TokenImage'\nimport AddFavToken from '../FavIcons/AddFavToken'\nimport { ChainId, MarketingCampaign } from '@ape.swap/apeswap-lists'\nimport { MCTagNameMapping, MCTokenIconStyles } from '../../utils/campaignStyles'\nimport Flex from '../uikit-sdk/Flex'\nimport Svg from '../uikit-sdk/Svg'\nimport Text from '../uikit-sdk/Text'\nimport ListTag from '../uikit-sdk/Tag/ListTag'\n\nexport const NETWORK_COLORS: Partial<Record<number, string>> = {\n  [ChainId.BSC]: '#F3BA2F4d',\n  [ChainId.MAINNET]: '#627eea4d',\n  [ChainId.MATIC]: '#8247e54d',\n  [ChainId.LIGHTLINK]: '#6087ff4d',\n  [ChainId.BASE]: '#0052ff4d',\n  [ChainId.ARBITRUM]: '#289fef4d',\n  [ChainId.LINEA]: '#ffffff4d',\n  [ChainId.IOTA]: '#ffffff4d',\n  [ChainId.GRAPHLINQ]: '#ded2ff4d',\n  [ChainId.AVAX]: '#e743444d',\n  [ChainId.BLAST]: '#fcfc034d',\n  [ChainId.CROSSFI]: '#7c80844d',\n  [ChainId.MONAD_TESTNET]: '#836EF94d',\n  [ChainId.MONAD]: '#836EF94d',\n  [ChainId.SOL]: '#836EF94d',\n  [ChainId.SONIC]: '#fb9a4c4d',\n  [ChainId.BERACHAIN]: '#783e244d',\n  [ChainId.KATANA]: '#068be34d',\n  [ChainId.UNICHAIN]: '#f50db44d',\n  [ChainId.MEGAETH_TESTNET]: '#DFD9D94d',\n  [ChainId.HYPEREVM]: '#ffffff4d',\n  [ChainId.APTOS]: 'rgb(240 111 126 / 0.3)',\n  [ChainId.SUI]: '#6fbcf04d',\n}\n\nconst TokenInfoAndName = ({\n  tokenSymbol,\n  chain,\n  tag,\n  vestEnds,\n  isHotBond,\n  marketingCampaign,\n}: {\n  tokenSymbol?: string\n  chain?: number\n  tag?: string\n  vestEnds?: string\n  isHotBond?: boolean\n  marketingCampaign?: MarketingCampaign\n}) => {\n  return (\n    <Flex className=\"tokeninfoname container\">\n      <Flex\n        sx={{\n          width: '125px',\n          height: '100%',\n          position: 'absolute',\n          left: 0,\n          top: 0,\n          borderRadius: 'normal',\n          background: isHotBond\n            ? 'transparent'\n            : `linear-gradient(90deg, ${chain ? NETWORK_COLORS[chain] : '#FFFFFF33'} 0%, rgba(0,0,0,0) 75%)`,\n        }}\n      />\n      <Flex className=\"tokeninfoname chain\">\n        <Svg width={20} height={20} icon={chain ? NETWORK_ICONS[chain] : 'question'} />\n      </Flex>\n      <Flex\n        className=\"tokeninfoname tokencontainer\"\n        sx={{\n          marginTop: vestEnds ? ['10px', '10px', '10px', '0px'] : 0,\n          maxWidth: ['175px', '175px', '140px', '190px', '190px'],\n        }}\n      >\n        <Flex sx={{ position: 'relative', minWidth: '33px' }}>\n          <Flex sx={MCTokenIconStyles[marketingCampaign!]} />\n          <TokenImage symbol={tokenSymbol === 'AIX' && chain === ChainId.SOL ? 'SOLAIX' : tokenSymbol} size={33} />\n        </Flex>\n        <Flex className=\"tokeninfoname tokentext\">\n          <Flex sx={{ justifyContent: 'space-between', width: '100%', alignItems: 'center' }}>\n            <Text sx={{ fontSize: ['12px', '12px', '14px', '16px'] }}>{tokenSymbol}</Text>\n          </Flex>\n          {vestEnds && (\n            <Flex sx={{ fontSize: '12px', fontWeight: 400, opacity: 0.6, lineHeight: '14px' }}>{vestEnds}</Flex>\n          )}\n        </Flex>\n        <Flex\n          className=\"tokeninfofav\"\n          sx={{\n            minWidth: '25px',\n            p: '5px',\n          }}\n        >\n          <AddFavToken tokenSymbol={tokenSymbol} hotBond={!vestEnds && isHotBond} />\n        </Flex>\n      </Flex>\n      <Flex\n        sx={{\n          justifyContent: isHotBond ? 'center' : 'flex-start',\n          alignItems: 'center',\n        }}\n      >\n        <Flex sx={{ display: isHotBond ? 'flex' : ['none', 'none', 'none', 'none', 'flex'] }}>\n          {(tag || marketingCampaign) && (\n            <ListTag text={MCTagNameMapping[marketingCampaign!] || tag} marketingCampaign={marketingCampaign} />\n          )}\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default TokenInfoAndName\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;AAWO,MAAM,cAAc,GAAoC;AAC7D,IAAA,CAAC,OAAO,CAAC,GAAG,GAAG,WAAW;AAC1B,IAAA,CAAC,OAAO,CAAC,OAAO,GAAG,WAAW;AAC9B,IAAA,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW;AAC5B,IAAA,CAAC,OAAO,CAAC,SAAS,GAAG,WAAW;AAChC,IAAA,CAAC,OAAO,CAAC,IAAI,GAAG,WAAW;AAC3B,IAAA,CAAC,OAAO,CAAC,QAAQ,GAAG,WAAW;AAC/B,IAAA,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW;AAC5B,IAAA,CAAC,OAAO,CAAC,IAAI,GAAG,WAAW;AAC3B,IAAA,CAAC,OAAO,CAAC,SAAS,GAAG,WAAW;AAChC,IAAA,CAAC,OAAO,CAAC,IAAI,GAAG,WAAW;AAC3B,IAAA,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW;AAC5B,IAAA,CAAC,OAAO,CAAC,OAAO,GAAG,WAAW;AAC9B,IAAA,CAAC,OAAO,CAAC,aAAa,GAAG,WAAW;AACpC,IAAA,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW;AAC5B,IAAA,CAAC,OAAO,CAAC,GAAG,GAAG,WAAW;AAC1B,IAAA,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW;AAC5B,IAAA,CAAC,OAAO,CAAC,SAAS,GAAG,WAAW;AAChC,IAAA,CAAC,OAAO,CAAC,MAAM,GAAG,WAAW;AAC7B,IAAA,CAAC,OAAO,CAAC,QAAQ,GAAG,WAAW;AAC/B,IAAA,CAAC,OAAO,CAAC,eAAe,GAAG,WAAW;AACtC,IAAA,CAAC,OAAO,CAAC,QAAQ,GAAG,WAAW;AAC/B,IAAA,CAAC,OAAO,CAAC,KAAK,GAAG,wBAAwB;AACzC,IAAA,CAAC,OAAO,CAAC,GAAG,GAAG,WAAW;;AAG5B,MAAM,gBAAgB,GAAG,CAAC,EACxB,WAAW,EACX,KAAK,EACL,GAAG,EACH,QAAQ,EACR,SAAS,EACT,iBAAiB,GAQlB,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,CACvCC,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oBAAA,KAAK,EAAE,OAAO;AACd,oBAAA,MAAM,EAAE,MAAM;AACd,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,IAAI,EAAE,CAAC;AACP,oBAAA,GAAG,EAAE,CAAC;AACN,oBAAA,YAAY,EAAE,QAAQ;AACtB,oBAAA,UAAU,EAAE;AACV,0BAAE;AACF,0BAAE,CAAA,uBAAA,EAA0B,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,WAAW,CAAA,uBAAA,CAAyB;iBACnG,EAAA,CACD,EACFA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,qBAAqB,YACnCA,GAAA,CAAC,GAAG,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,GAAG,aAAa,CAAC,KAAK,CAAC,GAAG,UAAU,EAAA,CAAI,GAC1E,EACPD,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,8BAA8B,EACxC,EAAE,EAAE;AACF,oBAAA,SAAS,EAAE,QAAQ,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC;oBACzD,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC;AACxD,iBAAA,EAAA,QAAA,EAAA,CAEDA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,CAClDC,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,iBAAiB,CAAC,iBAAkB,CAAC,EAAA,CAAI,EACnDA,GAAA,CAAC,UAAU,EAAA,EAAC,MAAM,EAAE,WAAW,KAAK,KAAK,IAAI,KAAK,KAAK,OAAO,CAAC,GAAG,GAAG,QAAQ,GAAG,WAAW,EAAE,IAAI,EAAE,EAAE,EAAA,CAAI,CAAA,EAAA,CACpG,EACPD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,CACvCC,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,cAAc,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EAChFA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,EAAA,QAAA,EAAG,WAAW,EAAA,CAAQ,EAAA,CACzE,EACN,QAAQ,KACPA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAQ,CACrG,CAAA,EAAA,CACI,EACPA,GAAA,CAAC,IAAI,IACH,SAAS,EAAC,cAAc,EACxB,EAAE,EAAE;AACF,4BAAA,QAAQ,EAAE,MAAM;AAChB,4BAAA,CAAC,EAAE,KAAK;yBACT,EAAA,QAAA,EAEDA,GAAA,CAAC,WAAW,EAAA,EAAC,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,CAAC,QAAQ,IAAI,SAAS,GAAI,EAAA,CACrE,CAAA,EAAA,CACF,EACPA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;oBACF,cAAc,EAAE,SAAS,GAAG,QAAQ,GAAG,YAAY;AACnD,oBAAA,UAAU,EAAE,QAAQ;iBACrB,EAAA,QAAA,EAEDA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,OAAO,EAAE,SAAS,GAAG,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,YACjF,CAAC,GAAG,IAAI,iBAAiB,MACxBA,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,gBAAgB,CAAC,iBAAkB,CAAC,IAAI,GAAG,EAAE,iBAAiB,EAAE,iBAAiB,EAAA,CAAI,CACrG,EAAA,CACI,EAAA,CACF,CAAA,EAAA,CACF;AAEX;;;;"}

package/dist/components/TokenSelectorPanel/index.js

@@ -11,6 +11,8 @@ import { getSymbol } from '../../utils/getNativeTicker.js';
 import { formatUSDNumber } from '../../utils/displayHelpers.js';
 import useEVMAccount from '../../hooks/accounts/useEVMAccount.js';
 import useSOLAccount from '../../hooks/accounts/useSOLAccount.js';
+import useAPTAccount from '../../hooks/accounts/useAPTAccount.js';
+import useSUIAccount from '../../hooks/accounts/useSUIAccount.js';
 import { MCColorMapping } from '../../utils/campaignStyles.js';
 import Svg from '../uikit-sdk/Svg/index.js';
 import Button from '../uikit-sdk/Button/Button.js';
@@ -18,7 +20,15 @@ import Button from '../uikit-sdk/Button/Button.js';
 const TokenSelectorPanel = ({ typedValue, setTypedValue, selectedToken, bondChainId, handleValueBtn, handleCurrencySelect, enableZap, tokenBalance, selectedTokenPrice, bondPrincipalToken, inputDisabled = false, marketingCampaign, }) => {
     const { address: account } = useEVMAccount();
     const { publicKey: solanaAccount } = useSOLAccount();
-    const showBalance = bondChainId === ChainId.SOL ? !!solanaAccount : !!account;
+    const { address: aptosAccount } = useAPTAccount();
+    const { address: suiAccount } = useSUIAccount();
+    const showBalance = bondChainId === ChainId.SOL
+        ? !!solanaAccount
+        : bondChainId === ChainId.APTOS
+            ? !!aptosAccount
+            : bondChainId === ChainId.SUI
+                ? !!suiAccount
+                : !!account;
     const tokenBalanceString = tokenBalance ? new BigNumber(tokenBalance).toPrecision(5) : 'loading';
     const splited = typeof selectedToken !== 'string' ? selectedToken?.symbol?.split('-') : undefined;
     const handleInputChange = (event) => {

package/dist/components/TokenSelectorPanel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/TokenSelectorPanel/index.tsx"],"sourcesContent":["import React, { FormEvent } from 'react'\nimport { Flex, Input } from 'theme-ui'\nimport { isNumber } from '../../utils/numbers'\nimport TokenImage from '../uikit-sdk/TokenImage'\nimport { ChainId, MarketingCampaign, Token } from '@ape.swap/apeswap-lists'\nimport useModal from '../../hooks/useModal'\nimport TokenSelectorModal from '../TokenSelectorModal'\nimport BigNumber from 'bignumber.js'\nimport isArray from 'lodash-es/isArray.js'\nimport { getSymbol } from '../../utils/getNativeTicker'\nimport { formatUSDNumber } from '../../utils/displayHelpers'\nimport useEVMAccount from '../../hooks/accounts/useEVMAccount'\nimport useSOLAccount from '../../hooks/accounts/useSOLAccount'\nimport { MCColorMapping } from '../../utils/campaignStyles'\nimport Svg from '../uikit-sdk/Svg'\nimport Button from '../uikit-sdk/Button/Button'\n\nconst TokenSelectorPanel = ({\n  typedValue,\n  setTypedValue,\n  selectedToken,\n  bondChainId,\n  handleValueBtn,\n  handleCurrencySelect,\n  enableZap,\n  tokenBalance,\n  selectedTokenPrice,\n  bondPrincipalToken,\n  inputDisabled = false,\n  marketingCampaign,\n}: {\n  typedValue: string\n  setTypedValue: (value: React.SetStateAction<string>) => void\n  selectedToken?: 'NATIVE' | Token\n  bondChainId: ChainId\n  handleValueBtn?: (value: string) => void\n  handleCurrencySelect: (value: string) => void\n  enableZap?: boolean\n  tokenBalance?: string\n  selectedTokenPrice?: number\n  bondPrincipalToken?: Token // Used to ADD this token to the inputList\n  inputDisabled?: boolean\n  marketingCampaign?: MarketingCampaign\n}) => {\n  const { address: account } = useEVMAccount()\n  const { publicKey: solanaAccount } = useSOLAccount()\n\n  const showBalance = bondChainId === ChainId.SOL ? !!solanaAccount : !!account\n  const tokenBalanceString = tokenBalance ? new BigNumber(tokenBalance).toPrecision(5) : 'loading'\n\n  const splited = typeof selectedToken !== 'string' ? selectedToken?.symbol?.split('-') : undefined\n  const handleInputChange = (event: { target: { value: React.SetStateAction<string> } }) => {\n    setTypedValue(event.target.value)\n  }\n\n  const [onTokenSelectorModal] = useModal(\n    <TokenSelectorModal\n      bondPrincipalToken={bondPrincipalToken}\n      handleCurrencySelect={handleCurrencySelect}\n      chainId={bondChainId}\n    />,\n    true,\n    false,\n    `tokenSelectorOnLiquidityModal${bondPrincipalToken?.address?.[bondChainId]}-${bondPrincipalToken?.symbol}`,\n  )\n\n  return (\n    <Flex\n      className=\"token-selector-panel\"\n      sx={{ borderRadius: 'normal', background: MCColorMapping.white3[marketingCampaign!] }}\n    >\n      <Flex className=\"input-container inputrow\">\n        <Flex className=\"input-container input\">\n          <Input\n            placeholder=\"0.0\"\n            value={typedValue}\n            pattern=\"^[0-9]*[.,]?[0-9]*$\"\n            onChange={handleInputChange}\n            onInput={(v: FormEvent<HTMLInputElement>) => {\n              if (v.currentTarget.value.includes(',')) {\n                v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.')\n              }\n              if (v.currentTarget.value.includes('%')) {\n                v.currentTarget.value = v.currentTarget.value.replace(/[^0-9]/g, '')\n              }\n              if (v.currentTarget.value === '.') {\n                v.currentTarget.value = '0.'\n              }\n              v.currentTarget.value =\n                !!v.currentTarget.value && isNumber(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0\n                  ? v.currentTarget.value\n                  : v.currentTarget.value.slice(0, v.currentTarget.value.length - 1)\n            }}\n            disabled={inputDisabled}\n          />\n        </Flex>\n\n        {/* TOKEN SELECTOR PANEL */}\n\n        <Flex\n          className=\"input-container token\"\n          onClick={() => (enableZap ? onTokenSelectorModal() : null)}\n          sx={{\n            cursor: enableZap ? 'pointer' : 'default',\n            borderRadius: 'normal',\n            background: MCColorMapping.white4[marketingCampaign!],\n          }}\n        >\n          <Flex sx={{ alignItems: 'center', gap: '10px' }}>\n            <Flex className=\"input-container bondicon\">\n              {isArray(splited) ? (\n                <TokenImage symbol={splited[0]} symbol2={splited[1]} size={28} chain={bondChainId} />\n              ) : (\n                <TokenImage symbol={getSymbol(selectedToken, bondChainId)} size={28} chain={bondChainId} />\n              )}\n            </Flex>\n            <Flex className=\"title-container tokenname\">{getSymbol(selectedToken, bondChainId)}</Flex>\n          </Flex>\n          {enableZap && (\n            <Flex sx={{ mr: '8px' }}>\n              <Svg icon=\"caret\" />\n            </Flex>\n          )}\n        </Flex>\n      </Flex>\n      <Flex className=\"input-container balancerow\">\n        <Flex sx={{ opacity: 0.6 }}>\n          {selectedTokenPrice && typedValue\n            ? `$${formatUSDNumber((selectedTokenPrice * parseFloat(typedValue)).toFixed(2))}`\n            : ''}\n        </Flex>\n        <Flex>\n          {showBalance && <Flex className=\"balancerow text\">Balance: {tokenBalanceString}</Flex>}\n          <Flex className=\"balancerow max\">\n            {showBalance && tokenBalance && tokenBalance !== '0' && handleValueBtn && (\n              <Button\n                className=\"max-button\"\n                onClick={() => handleValueBtn(new BigNumber(tokenBalance ?? '0')?.toString())}\n              >\n                Max\n              </Button>\n            )}\n          </Flex>\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default TokenSelectorPanel\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/TokenSelectorPanel/index.tsx"],"sourcesContent":["import React, { FormEvent } from 'react'\nimport { Flex, Input } from 'theme-ui'\nimport { isNumber } from '../../utils/numbers'\nimport TokenImage from '../uikit-sdk/TokenImage'\nimport { ChainId, MarketingCampaign, Token } from '@ape.swap/apeswap-lists'\nimport useModal from '../../hooks/useModal'\nimport TokenSelectorModal from '../TokenSelectorModal'\nimport BigNumber from 'bignumber.js'\nimport isArray from 'lodash-es/isArray.js'\nimport { getSymbol } from '../../utils/getNativeTicker'\nimport { formatUSDNumber } from '../../utils/displayHelpers'\nimport useEVMAccount from '../../hooks/accounts/useEVMAccount'\nimport useSOLAccount from '../../hooks/accounts/useSOLAccount'\nimport useAPTAccount from '../../hooks/accounts/useAPTAccount'\nimport useSUIAccount from '../../hooks/accounts/useSUIAccount'\nimport { MCColorMapping } from '../../utils/campaignStyles'\nimport Svg from '../uikit-sdk/Svg'\nimport Button from '../uikit-sdk/Button/Button'\n\nconst TokenSelectorPanel = ({\n  typedValue,\n  setTypedValue,\n  selectedToken,\n  bondChainId,\n  handleValueBtn,\n  handleCurrencySelect,\n  enableZap,\n  tokenBalance,\n  selectedTokenPrice,\n  bondPrincipalToken,\n  inputDisabled = false,\n  marketingCampaign,\n}: {\n  typedValue: string\n  setTypedValue: (value: React.SetStateAction<string>) => void\n  selectedToken?: 'NATIVE' | Token\n  bondChainId: ChainId\n  handleValueBtn?: (value: string) => void\n  handleCurrencySelect: (value: string) => void\n  enableZap?: boolean\n  tokenBalance?: string\n  selectedTokenPrice?: number\n  bondPrincipalToken?: Token // Used to ADD this token to the inputList\n  inputDisabled?: boolean\n  marketingCampaign?: MarketingCampaign\n}) => {\n  const { address: account } = useEVMAccount()\n  const { publicKey: solanaAccount } = useSOLAccount()\n  const { address: aptosAccount } = useAPTAccount()\n  const { address: suiAccount } = useSUIAccount()\n\n  const showBalance =\n    bondChainId === ChainId.SOL\n      ? !!solanaAccount\n      : bondChainId === ChainId.APTOS\n        ? !!aptosAccount\n        : bondChainId === ChainId.SUI\n          ? !!suiAccount\n          : !!account\n  const tokenBalanceString = tokenBalance ? new BigNumber(tokenBalance).toPrecision(5) : 'loading'\n\n  const splited = typeof selectedToken !== 'string' ? selectedToken?.symbol?.split('-') : undefined\n  const handleInputChange = (event: { target: { value: React.SetStateAction<string> } }) => {\n    setTypedValue(event.target.value)\n  }\n\n  const [onTokenSelectorModal] = useModal(\n    <TokenSelectorModal\n      bondPrincipalToken={bondPrincipalToken}\n      handleCurrencySelect={handleCurrencySelect}\n      chainId={bondChainId}\n    />,\n    true,\n    false,\n    `tokenSelectorOnLiquidityModal${bondPrincipalToken?.address?.[bondChainId]}-${bondPrincipalToken?.symbol}`,\n  )\n\n  return (\n    <Flex\n      className=\"token-selector-panel\"\n      sx={{ borderRadius: 'normal', background: MCColorMapping.white3[marketingCampaign!] }}\n    >\n      <Flex className=\"input-container inputrow\">\n        <Flex className=\"input-container input\">\n          <Input\n            placeholder=\"0.0\"\n            value={typedValue}\n            pattern=\"^[0-9]*[.,]?[0-9]*$\"\n            onChange={handleInputChange}\n            onInput={(v: FormEvent<HTMLInputElement>) => {\n              if (v.currentTarget.value.includes(',')) {\n                v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.')\n              }\n              if (v.currentTarget.value.includes('%')) {\n                v.currentTarget.value = v.currentTarget.value.replace(/[^0-9]/g, '')\n              }\n              if (v.currentTarget.value === '.') {\n                v.currentTarget.value = '0.'\n              }\n              v.currentTarget.value =\n                !!v.currentTarget.value && isNumber(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0\n                  ? v.currentTarget.value\n                  : v.currentTarget.value.slice(0, v.currentTarget.value.length - 1)\n            }}\n            disabled={inputDisabled}\n          />\n        </Flex>\n\n        {/* TOKEN SELECTOR PANEL */}\n\n        <Flex\n          className=\"input-container token\"\n          onClick={() => (enableZap ? onTokenSelectorModal() : null)}\n          sx={{\n            cursor: enableZap ? 'pointer' : 'default',\n            borderRadius: 'normal',\n            background: MCColorMapping.white4[marketingCampaign!],\n          }}\n        >\n          <Flex sx={{ alignItems: 'center', gap: '10px' }}>\n            <Flex className=\"input-container bondicon\">\n              {isArray(splited) ? (\n                <TokenImage symbol={splited[0]} symbol2={splited[1]} size={28} chain={bondChainId} />\n              ) : (\n                <TokenImage symbol={getSymbol(selectedToken, bondChainId)} size={28} chain={bondChainId} />\n              )}\n            </Flex>\n            <Flex className=\"title-container tokenname\">{getSymbol(selectedToken, bondChainId)}</Flex>\n          </Flex>\n          {enableZap && (\n            <Flex sx={{ mr: '8px' }}>\n              <Svg icon=\"caret\" />\n            </Flex>\n          )}\n        </Flex>\n      </Flex>\n      <Flex className=\"input-container balancerow\">\n        <Flex sx={{ opacity: 0.6 }}>\n          {selectedTokenPrice && typedValue\n            ? `$${formatUSDNumber((selectedTokenPrice * parseFloat(typedValue)).toFixed(2))}`\n            : ''}\n        </Flex>\n        <Flex>\n          {showBalance && <Flex className=\"balancerow text\">Balance: {tokenBalanceString}</Flex>}\n          <Flex className=\"balancerow max\">\n            {showBalance && tokenBalance && tokenBalance !== '0' && handleValueBtn && (\n              <Button\n                className=\"max-button\"\n                onClick={() => handleValueBtn(new BigNumber(tokenBalance ?? '0')?.toString())}\n              >\n                Max\n              </Button>\n            )}\n          </Flex>\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default TokenSelectorPanel\n"],"names":["_jsx","_jsxs"],"mappings":"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"}