From edadc230364ac0f1a5c16b62bbd6f4d3a28e2839 Mon Sep 17 00:00:00 2001 From: crypto-matto Date: Wed, 1 Dec 2021 19:44:55 +0800 Subject: [PATCH 01/17] Add Address Book auto-complete on Custom Address in Cronos Bridge --- .../AddressBookInput/AddressBookInput.tsx | 23 ++++++-- src/language/en-US.json | 4 ++ src/language/ko-KR.json | 3 + src/language/zh-CN.json | 4 ++ src/language/zh-HK.json | 4 ++ .../bridge/components/CronosBridgeForm.tsx | 55 +++++++++++++++---- 6 files changed, 75 insertions(+), 18 deletions(-) diff --git a/src/components/AddressBookInput/AddressBookInput.tsx b/src/components/AddressBookInput/AddressBookInput.tsx index 6caa2c12e..c1e386a68 100644 --- a/src/components/AddressBookInput/AddressBookInput.tsx +++ b/src/components/AddressBookInput/AddressBookInput.tsx @@ -15,16 +15,26 @@ interface IAddressBookInputProps { userAsset: UserAsset; currentSession: Session; onChange: (value: string, addressBookContact?: AddressBookContact) => void; + disabled?: boolean; + initialValue?: string; + isDefaultInput?: boolean; } const AddressBookInput = (props: IAddressBookInputProps) => { - const { userAsset, currentSession, onChange } = props; + const { + userAsset, + currentSession, + onChange, + initialValue, + disabled = false, + isDefaultInput = false, + } = props; const [, setNavbarSelectedKey] = useRecoilState(navbarMenuSelectedKeyState); const history = useHistory(); const [t] = useTranslation(); - const [value, setValue] = useState(); + const [value, setValue] = useState(initialValue ?? ''); const [contacts, setContacts] = useState([]); const walletId = currentSession.wallet.identifier; @@ -55,7 +65,8 @@ const AddressBookInput = (props: IAddressBookInputProps) => {
(
{menu} @@ -77,7 +88,7 @@ const AddressBookInput = (props: IAddressBookInputProps) => {
)} showArrow={false} - value={value} + value={initialValue ?? value} autoFocus options={contacts.map(contact => { return { @@ -119,7 +130,7 @@ const AddressBookInput = (props: IAddressBookInputProps) => { }); }} > - {currentContact ? ( + {currentContact && !isDefaultInput ? ( + )}
diff --git a/src/language/en-US.json b/src/language/en-US.json index 37ac5de95..5d6086b8b 100644 --- a/src/language/en-US.json +++ b/src/language/en-US.json @@ -211,6 +211,7 @@ "navbar.receive": "Receive", "navbar.assets": "Assets", "navbar.bridge": "Cronos Bridge", + "navbar.dapp": "DApp Browser", "navbar.governance": "Governance", "navbar.nft": "My NFT", "navbar.settings": "Settings", @@ -342,6 +343,7 @@ "bridge.form.fee": "Fee: ", "bridge.form.destination": "Destination: ", "bridge.form.toAddress": "To Address: ", + "bridge.form.toAddressLabel": "Destination Address", "bridge.form.customAddress.message": "I want to send funds to a custom destination address.", "bridge.form.transfer": "Transfer Asset", "bridge.form.receiving": "Receiving", @@ -384,6 +386,8 @@ "bridge.transactionHistory.table.toAddress": "To (Network)", "bridge.transactionHistory.table.time": "Time", "bridge.transactionHistory.table.status": "Status", + "dapp.title": "DApp Browser", + "dapp.description": "Connect and access DApps on Cronos Chain", "staking.title": "Staking", "staking.tab1": "Staking Rewards", "staking.tab2": "Delegate Funds", diff --git a/src/language/ko-KR.json b/src/language/ko-KR.json index 4e6b31450..224cda65f 100644 --- a/src/language/ko-KR.json +++ b/src/language/ko-KR.json @@ -211,6 +211,7 @@ "navbar.receive": "수신", "navbar.assets": "금액", "navbar.bridge": "Cronos 브릿지", + "navbar.dapp": "DApp 브라우저", "navbar.governance": "거버넌스", "navbar.nft": "나의 NFT", "navbar.settings": "설정", @@ -340,6 +341,7 @@ "bridge.form.fee": "수수료", "bridge.form.destination": "목적지", "bridge.form.toAddress": "수신인 주소", + "bridge.form.toAddressLabel": "수신인 주소", "bridge.form.customAddress.message": "지정된 주소로 송금하고 싶습니다", "bridge.form.transfer": "전송 자산", "bridge.form.receiving": "수신 중", @@ -382,6 +384,7 @@ "bridge.transactionHistory.table.toAddress": "수신인（네트워크）", "bridge.transactionHistory.table.time": "시간", "bridge.transactionHistory.table.status": "상태", + "dapp.title": "DApp 브라우저", "staking.title": "스테이킹", "staking.tab1": "스테이킹 보상", "staking.tab2": "금액 위임", diff --git a/src/language/zh-CN.json b/src/language/zh-CN.json index d97b4a172..bbbe603df 100644 --- a/src/language/zh-CN.json +++ b/src/language/zh-CN.json @@ -211,6 +211,7 @@ "navbar.receive": "接收", "navbar.assets": "资产", "navbar.bridge": "Cronos 跨链桥", + "navbar.dapp": "DApp 浏览器", "navbar.governance": "治理", "navbar.nft": "我的NFT", "navbar.settings": "设置", @@ -342,6 +343,7 @@ "bridge.form.fee": "费用：", "bridge.form.destination": "目标地址：", "bridge.form.toAddress": "收款人地址：", + "bridge.form.toAddressLabel": "收款人地址", "bridge.form.customAddress.message": "我想转移至另一自定收款人地址", "bridge.form.transfer": "转移资产", "bridge.form.receiving": "将会收到", @@ -384,6 +386,8 @@ "bridge.transactionHistory.table.toAddress": "到（网络）", "bridge.transactionHistory.table.time": "时间", "bridge.transactionHistory.table.status": "状态", + "dapp.title": "DApp 浏览器", + "dapp.description": "于 Cronos链 上连接和访问 DApp", "staking.title": "抵押", "staking.tab1": "抵押奖励", "staking.tab2": "委托资金", diff --git a/src/language/zh-HK.json b/src/language/zh-HK.json index 812a1f3cf..3cbe13f8c 100644 --- a/src/language/zh-HK.json +++ b/src/language/zh-HK.json @@ -211,6 +211,7 @@ "navbar.receive": "接收", "navbar.assets": "資產", "navbar.bridge": "Cronos 跨鏈橋", + "navbar.dapp": "DApp 瀏覽器", "navbar.governance": "治理", "navbar.nft": "我的NFT", "navbar.settings": "設置", @@ -342,6 +343,7 @@ "bridge.form.fee": "費用：", "bridge.form.destination": "目標地址：", "bridge.form.toAddress": "收款人地址：", + "bridge.form.toAddressLabel": "收款人地址", "bridge.form.customAddress.message": "我想轉移至另一自定收款人地址", "bridge.form.transfer": "轉移資產", "bridge.form.receiving": "將會收到", @@ -384,6 +386,8 @@ "bridge.transactionHistory.table.toAddress": "到（網絡）", "bridge.transactionHistory.table.time": "時間", "bridge.transactionHistory.table.status": "狀態", + "dapp.title": "DApp 瀏覽器", + "dapp.description": "於 Cronos鏈 上連接和訪問 DApp", "staking.title": "抵押", "staking.tab1": "抵押獎勵", "staking.tab2": "委託資金", diff --git a/src/pages/bridge/components/CronosBridgeForm.tsx b/src/pages/bridge/components/CronosBridgeForm.tsx index 52dd9677e..c86f01fc8 100644 --- a/src/pages/bridge/components/CronosBridgeForm.tsx +++ b/src/pages/bridge/components/CronosBridgeForm.tsx @@ -1,6 +1,6 @@ -import React, { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useMemo, useRef, useState } from 'react'; import './CronosBridgeForm.less'; -import { Button, Checkbox, Form, Input, InputNumber, Select } from 'antd'; +import { Button, Checkbox, Form, InputNumber, Select } from 'antd'; import { SwapOutlined } from '@ant-design/icons'; import { useRecoilState, useRecoilValue } from 'recoil'; import Big from 'big.js'; @@ -28,6 +28,9 @@ import { TransactionUtils } from '../../../utils/TransactionUtils'; import iconCronosSvg from '../../../assets/icon-cronos-blue.svg'; import iconCroSvg from '../../../assets/icon-cro.svg'; import RowAmountOption from '../../../components/RowAmountOption/RowAmountOption'; +import AddressBookInput from '../../../components/AddressBookInput/AddressBookInput'; +import { AddressBookContact } from '../../../models/AddressBook'; +import { AddressBookService } from '../../../service/AddressBookService'; const { Option } = Select; const tailLayout = { @@ -87,6 +90,7 @@ const CronosBridgeForm = props => { // eslint-disable-next-line @typescript-eslint/no-unused-vars const [isButtonLoading, setIsButtonLoading] = useState(false); const [isToAddressDisabled, setIsToAddressDisabled] = useState(true); + const [currentAddressBookContact, setCurrentAddressBookContact] = useState(); const didMountRef = useRef(false); const analyticsService = new AnalyticsService(session); @@ -99,6 +103,10 @@ const CronosBridgeForm = props => { const [t] = useTranslation(); + const addressBookService = useMemo(() => { + return new AddressBookService(walletService.storageService); + }, [walletService]); + const customAddressValidator = TransactionUtils.addressValidator( session, toAsset, @@ -243,7 +251,7 @@ const CronosBridgeForm = props => { form.validateFields(); }; - const onSwitchAsset = value => { + const onSwitchAsset = async value => { setCurrentAssetIdentifier(value); const selectedAsset = walletAllAssets.find(asset => asset.identifier === value); setSession({ @@ -256,6 +264,15 @@ const CronosBridgeForm = props => { }); setCurrentAsset(selectedAsset); setAvailableBalance(scaledBalance(selectedAsset!)); + + if (!currentAddressBookContact) { + await addressBookService.autoAddAddressBookContact( + session.wallet.identifier, + toAsset.name, + toAsset.symbol, + toAddress, + ); + } }; const currentMinAssetAmount = getCurrentMinAssetAmount(currentAsset!); @@ -570,6 +587,12 @@ const CronosBridgeForm = props => { } default: } + } else { + setToAddress(''); + form.setFieldsValue({ + toAddress: '', + }); + form.submit(); } }} className="disclaimer" @@ -587,20 +610,28 @@ const CronosBridgeForm = props => { rules={[ { required: true, - message: `${t('send.formSend.recipientAddress.label')} ${t('general.required')}`, + message: `${t('bridge.form.toAddressLabel')} ${t('general.required')}`, }, customAddressValidator, ]} initialValue={toAddress} > - { - setToAddress(event.target.value); - }} - /> + {toAsset && ( + { + form.setFieldsValue({ + toAddress: value, + }); + setToAddress(value); + setCurrentAddressBookContact(contact); + }} + initialValue={toAddress} + isDefaultInput + currentSession={session} + userAsset={toAsset} + /> + )} From 2efc183268ba08f4a1a69d7653b43062b6fcb49a Mon Sep 17 00:00:00 2001 From: XinyuCRO Date: Thu, 2 Dec 2021 11:16:32 +0800 Subject: [PATCH 02/17] feat: Add memo field to Address Book --- src/components/AddressBookModal/AddAddressModal.tsx | 12 ++++++++++++ src/models/AddressBook.ts | 2 ++ src/pages/assets/components/FormSend.tsx | 4 ++++ src/service/AddressBookService.ts | 8 ++++++++ src/storage/StorageService.ts | 2 ++ 5 files changed, 28 insertions(+) diff --git a/src/components/AddressBookModal/AddAddressModal.tsx b/src/components/AddressBookModal/AddAddressModal.tsx index 9a064fa9d..d3938c041 100644 --- a/src/components/AddressBookModal/AddAddressModal.tsx +++ b/src/components/AddressBookModal/AddAddressModal.tsx @@ -31,6 +31,7 @@ const FormKeys = { asset: 'asset', label: 'label', address: 'address', + memo: 'memo', }; const AddAddressModal = (props: IAddAddressModalProps) => { @@ -119,6 +120,7 @@ const AddAddressModal = (props: IAddAddressModalProps) => { const address: string = form.getFieldValue(FormKeys.address); const network: string = form.getFieldValue(FormKeys.network); const assetSymbol: string = form.getFieldValue(FormKeys.asset); + const memo: string = form.getFieldValue(FormKeys.memo); const validateFiles = [label, address, network, assetSymbol]; @@ -133,6 +135,7 @@ const AddAddressModal = (props: IAddAddressModalProps) => { assetSymbol, label, address, + memo, ); if (!success) { message.error(t('settings.addressBook.message.updateFailed')); @@ -146,6 +149,7 @@ const AddAddressModal = (props: IAddAddressModalProps) => { assetSymbol, label, address, + memo, }); if (!contactCreated) { @@ -248,6 +252,14 @@ const AddAddressModal = (props: IAddAddressModalProps) => { > + + +