Merge pull request #982 from oraichain/feat/multisend-cw20

add all multisend cw20 token

package.json

@@ -39,7 +39,7 @@
 		"@material-ui/lab": "^4.0.0-alpha.57",
 		"@material-ui/styles": "^4.9.0",
 		"@oraichain/cosmos-messages": "0.0.3",
-		"@oraichain/oraidex-common": "^1.0.43",
+		"@oraichain/oraidex-common": "1.0.72",
 		"@sentry/react": "^7.36.0",
 		"@sentry/tracing": "^7.36.0",
 		"@sentry/webpack-plugin": "^1.20.0",

src/components/Header/NavBar/Dialog/SendCw20.js

@@ -6,7 +6,7 @@ import { Input, Switch } from "antd";
 import Grid from "@material-ui/core/Grid";
 import { EditOutlined } from "@material-ui/icons";
 import "react-input-range/lib/css/index.css";
-import { AIRI_CONTRACT, ORAIX_CONTRACT, USDT_CONTRACT } from "@oraichain/oraidex-common";
+import { AIRI_CONTRACT, ORAIX_CONTRACT, USDT_CONTRACT, oraichainTokens } from "@oraichain/oraidex-common";
 import consts from "src/constants/consts";
 import { reduceString } from "src/lib/scripts";
 import { formatOrai } from "src/helpers/helper";
@@ -79,23 +79,20 @@ export default function FormDialog({ address, status, methods, handleInputMulti,
 	};
 
 	const [fieldValue, setFieldValue] = useState("ORAIX");
-	const fields = [
-		{
-			label: "ORAIX",
-			value: "ORAIX",
-			address: ORAIX_CONTRACT,
-		},
-		{
-			label: "OCH",
-			value: "OCH",
-			address: "orai1hn8w33cqvysun2aujk5sv33tku4pgcxhhnsxmvnkfvdxagcx0p8qa4l98q",
-		},
-		{
-			label: "USDT",
-			value: "USDT",
-			address: USDT_CONTRACT,
-		},
-	];
+	const fields = oraichainTokens.reduce(
+		(acc, cur) =>
+			cur.contractAddress
+				? [
+						...acc,
+						{
+							label: cur.name,
+							value: cur.name,
+							address: cur.contractAddress,
+						},
+				  ]
+				: acc,
+		[]
+	);
 
 	const cw20Token = fields.find(e => e.value == fieldValue);
 
@@ -203,15 +200,22 @@ export default function FormDialog({ address, status, methods, handleInputMulti,
 				<div className={cx("row-balance")}>
 					<div className={cx("left")}>
 						<div className={cx("title")}> Token CW20</div>
-						<SelectBox
-							value={fieldValue}
-							data={fields}
-							onChange={e => {
-								const token = fields.find(t => t.value == e);
-								setFieldValue(token.value);
-								setCw20TokenAddress(token.address);
-							}}
-						/>
+						<div>
+							<SelectBox
+								style={{
+									height: 260,
+									zIndex: 1,
+									overflow: "auto",
+								}}
+								value={fieldValue}
+								data={fields}
+								onChange={e => {
+									const token = fields.find(t => t.value == e);
+									setFieldValue(token.value);
+									setCw20TokenAddress(token.address);
+								}}
+							/>
+						</div>
 					</div>
 					<div className={cx("left")}>
 						<div className={cx("title")}>contractAddress</div>

src/components/common/SelectBox/SelectBox.js

@@ -1,4 +1,4 @@
-import React, {memo, useState} from "react";
+import React, { memo, useState } from "react";
 import PropTypes from "prop-types";
 import _ from "lodash";
 import OutsideClickHandler from "react-outside-click-handler";
@@ -8,7 +8,7 @@ import styles from "./SelectBox.module.scss";
 
 const cx = classNames.bind(styles);
 
-const SelectBox = ({value, data, onChange}) => {
+const SelectBox = ({ value, data, onChange, style }) => {
 	const [showDropdown, setShowDropdown] = useState(false);
 
 	const selectedItem = data.find(item => item.value.toString() === value.toString());
@@ -27,7 +27,7 @@ const SelectBox = ({value, data, onChange}) => {
 					<DownAngleIcon className={cx("arrow")} />
 				</div>
 				{showDropdown && (
-					<div className={cx("list")}>
+					<div style={style} className={cx("list")}>
 						{data.map((item, index) => (
 							<div
 								key={"list-item-" + index}

src/components/common/SelectBox/SelectBox.module.scss

@@ -25,7 +25,7 @@
 	background: var(--common-containerBackgroundColor);
 	color: var(--common-textColor);
 	border: none;
-	font-family: 'IBM Plex Sans';
+	font-family: "IBM Plex Sans";
 	font-style: normal;
 	font-weight: 500;
 	font-size: 18px;
@@ -53,6 +53,7 @@
 	top: 60px;
 	width: 200px;
 	border-radius: 8px;
+	border: 1px solid var(--common-borderColor);
 	background: var(--common-containerBackgroundColor);
 	z-index: 10;
 	box-shadow: 0px 2px 8px var(--common-boxShadowColor);
@@ -61,7 +62,7 @@
 		padding: 15px 20px;
 		border-bottom: 1px solid var(--common-borderColor);
 		color: var(--common-textColor);
-		font-family: 'IBM Plex Sans';
+		font-family: "IBM Plex Sans";
 		font-style: normal;
 		font-weight: 500;
 		font-size: 14px;

yarn.lock

@@ -3217,10 +3217,10 @@
     protobufjs "^6.10.2"
     secp256k1 "^4.0.2"
 
-"@oraichain/oraidex-common@^1.0.43":
-  version "1.0.70"
-  resolved "https://registry.yarnpkg.com/@oraichain/oraidex-common/-/oraidex-common-1.0.70.tgz#ec68f38b43b25affcec684183bc6514e86520aa1"
-  integrity sha512-DZY5M/4JGwhEZJULHE+rfoET7dAw8FpnS/M3404xZ/GV1q9t6935M0qSzNiy2yk4PHJaWq+DxN8hPAYiiSTe9Q==
+"@oraichain/[email protected].72":
+  version "1.0.72"
+  resolved "https://registry.yarnpkg.com/@oraichain/oraidex-common/-/oraidex-common-1.0.72.tgz#289a54139b30e575cb8688dac87a5370e058dad7"
+  integrity sha512-dgElO9TWCSFh4Z2yMWNAIX3NZR/zbikkFNXS+Y7dIn5T1KeMPp8JWBFol5L3BpJoFDd5cbG99Y6nv2P6pin/DQ==
   dependencies:
     "@cosmjs/amino" "^0.31.0"
     "@cosmjs/cosmwasm-stargate" "^0.31.0"
@@ -3236,9 +3236,9 @@
     ethers "^5.0.15"
 
 "@oraichain/oraidex-contracts-sdk@^1.0.30":
-  version "1.0.35"
-  resolved "https://registry.yarnpkg.com/@oraichain/oraidex-contracts-sdk/-/oraidex-contracts-sdk-1.0.35.tgz#d8231d3af62172bd488d364c7ced238393f26695"
-  integrity sha512-c4qyt6CUEdI4+NgX4vWmVVctcQqEle0S6ExKp+d94C5UsRBELxvmJWkCZczvtTtLEvSsydv+7PKwrPoROgV2BA==
+  version "1.0.44"
+  resolved "https://registry.yarnpkg.com/@oraichain/oraidex-contracts-sdk/-/oraidex-contracts-sdk-1.0.44.tgz#9ff41ec388dd92ba112c2eef545d11fd6e18c684"
+  integrity sha512-fMY/QOzO/afPlAVkLGH1bcpJTs6V/URrJju2r4UoE9f5HUWC/6OC6+H5dWuIgq26frp8wjH23mNCQAlmHzji8g==
 
 "@pmmmwh/react-refresh-webpack-plugin@^0.5.3":
   version "0.5.8"