Merge pull request #1945 from bigbigkent/bitToTorus

.bit to Torus

package.json

@@ -58,6 +58,7 @@
     "copy-to-clipboard": "^3.3.1",
     "core-js": "^3.23.3",
     "create-hash": "^1.2.0",
+    "das-sdk": "^1.8.0",
     "deepmerge": "^4.2.2",
     "eth-block-tracker": "^5.0.1",
     "eth-json-rpc-filters": "^4.2.2",

src/components/WalletTransfer/AddContact/AddContact.vue

@@ -40,6 +40,8 @@
 import log from 'loglevel'
 
 import {
+  BIT,
+  BIT_LABEL,
   DISCORD,
   DISCORD_LABEL,
   ENS,
@@ -66,6 +68,7 @@ const VERIFIER_LABELS = {
   [TWITTER]: TWITTER_LABEL,
   [GITHUB]: GITHUB_LABEL,
   [ENS]: ENS_LABEL,
+  [BIT]: BIT_LABEL,
   [UNSTOPPABLE_DOMAINS]: UNSTOPPABLE_DOMAINS_LABEL,
 }
 export default {

src/containers/WalletTransfer/WalletTransfer.scss

@@ -105,4 +105,25 @@
     top: 0;
     right: 0;
   }
-}
+}
+.address-chip {
+  position: relative;
+  top: -6px;
+  height: 29px;
+  .v-avatar {
+    left: -7px;
+    height: 19px !important;
+    width: 19px !important;
+  }
+}
+.bitAddress {
+  padding: 10px 5px 10px 0;
+}
+.bitLabelChip {
+  font-size: 12px;
+  display: block;
+  width: fit-content;
+  height: 19px;
+  line-height: 19px;
+  padding: 0 6px;
+}

src/containers/WalletTransfer/WalletTransfer.vue

@@ -134,25 +134,45 @@
                       class="recipient-address"
                       :class="{ hasQrError: qrErrorMsg !== '' }"
                       :value="contactSelected"
-                      :items="contactList"
+                      :items="getToAddressComboboxItems"
                       :placeholder="verifierPlaceholder"
                       required
-                      :rules="[contactRule, rules.contactRequired, ensRule, unstoppableDomainsRule]"
+                      :rules="[contactRule, rules.contactRequired, ensRule, unstoppableDomainsRule, bitRule]"
                       outlined
                       item-text="name"
                       item-value="value"
                       aria-label="Recipient Address"
-                      :return-object="false"
+                      :return-object="getReturnObject"
                       @input="contactChanged"
+                      @blur="checkContact"
+                      @update:search-input="listenInput"
                     >
                       <template v-if="apiStreamSupported" #append>
+                        <v-chip v-if="isBitMode && toAddress && selectedVerifier === bitVerifier" class="address-chip">
+                          <v-avatar class="accent white--text">
+                            <img
+                              class="address-logo"
+                              :src="addressLogoUrl"
+                              onerror="if (!this.src.includes('/images/logos/bitIcon.png'))
+                              this.src = '/images/logos/bitIcon.png';"
+                              alt=""
+                            />
+                          </v-avatar>
+                          {{ bitSelectedAddress }}
+                        </v-chip>
                         <v-btn icon small color="torusBrand1" title="Capture QR" tabindex="-1" aria-label="Capture QR" @click="startQrScanning">
                           <v-icon small>$vuetify.icons.scan</v-icon>
                         </v-btn>
                       </template>
                       <template #message="props">
                         {{ t(props.message) }}
                       </template>
+                      <template v-if="isBitMode" #item="{ item }">
+                        <v-list-content class="bitAddress">
+                          {{ item.value }}
+                          <v-chip v-if="item.label" label small class="bitLabelChip">{{ item.label }}</v-chip>
+                        </v-list-content>
+                      </template>
                     </v-combobox>
                     <v-dialog v-model="showQrScanner" width="600" @click:outside="closeQRScanner">
                       <div v-if="showQrScanner" class="qr-scan-container">
@@ -195,7 +215,7 @@
                     </v-select>
                   </v-flex>
                   <v-flex v-if="newContact && $refs.contactSelected && $refs.contactSelected.valid && selectedVerifier !== ''" xs12 mb-2>
-                    <AddContact :contact="contactSelected" :verifier="selectedVerifier"></AddContact>
+                    <AddContact :contact="getContactSelected" :verifier="selectedVerifier"></AddContact>
                   </v-flex>
                 </v-layout>
               </v-flex>
@@ -382,7 +402,7 @@
                   <TransferConfirm
                     :converted-verifier-id="convertedVerifierId"
                     :to-address="toEthAddress"
-                    :to-verifier-id="toAddress"
+                    :to-verifier-id="getVerifierId"
                     :to-verifier="selectedVerifier"
                     :from-address="selectedAddress"
                     :from-verifier-id="userInfo.verifierId"
@@ -479,6 +499,7 @@
 import randomId from '@chaitanyapotti/random-id'
 import Resolution from '@unstoppabledomains/resolution'
 import BigNumber from 'bignumber.js'
+import Das from 'das-sdk'
 import erc721TransferABI from 'human-standard-collectible-abi'
 import erc20TransferABI from 'human-standard-token-abi'
 import { cloneDeep, isEqual } from 'lodash'
@@ -499,16 +520,21 @@ import MessageModal from '../../components/WalletTransfer/MessageModal'
 import config from '../../config'
 import torus from '../../torus'
 import {
+  BIT,
+  BIT_HOST_URL,
+  CHAIN_TO_BIT_NAMESPACE,
   CONTRACT_TYPE_ERC20,
   CONTRACT_TYPE_ERC721,
   CONTRACT_TYPE_ERC1155,
   CONTRACT_TYPE_ETH,
+  DOT_STRING,
   ENS,
   ETH,
   GAS_ESTIMATE_TYPES,
   GITHUB,
   GOOGLE,
   MAINNET,
+  MAINNET_CODE,
   MESSAGE_MODAL_TYPE_FAIL,
   MESSAGE_MODAL_TYPE_SUCCESS,
   OLD_ERC721_LIST,
@@ -558,9 +584,11 @@ export default {
       displayAmount: new BigNumber('0'),
       convertedAmount: '',
       contactSelected: '',
+      multipleAddress: [],
       toAddress: '',
       formValid: false,
       ensError: '',
+      bitError: '',
       unstoppableDomainsError: '',
       toggle_exclusive: 0,
       gas: new BigNumber('21000'),
@@ -606,6 +634,11 @@ export default {
       londonSpeedTiming: '',
       londonSpeedTimingModalDisplay: '',
       transactionWarning: '',
+      addressLogoUrl: '',
+      theBitAddress: '',
+      isBitMode: false,
+      bitTail: DOT_STRING + BIT,
+      bitVerifier: BIT,
     }
   },
   computed: {
@@ -747,6 +780,21 @@ export default {
       const estimatedTime = this.t('walletTransfer.transferApprox').replace(/{time}/gi, this.timeTaken)
       return this.t('walletTransfer.fee-edit-time-min').replace(/{time}/gi, estimatedTime)
     },
+    getToAddressComboboxItems() {
+      return this.isBitMode ? this.multipleAddress : this.contactList
+    },
+    getContactSelected() {
+      return this.isBitMode ? this.toAddress : this.contactSelected
+    },
+    getVerifierId() {
+      return this.isBitMode ? this.theBitAddress : this.toAddress
+    },
+    bitSelectedAddress() {
+      return `${this.toAddress.slice(0, 4)}...${this.toAddress.slice(-4)}`
+    },
+    getReturnObject() {
+      return this.isBitMode
+    },
   },
   watch: {
     selectedAddress(newValue, oldValue) {
@@ -801,6 +849,8 @@ export default {
         this.selectedVerifier = ENS
       } else if (/.crypto$/.test(toAddress)) {
         this.selectedVerifier = UNSTOPPABLE_DOMAINS
+      } else if (new RegExp(`${this.bitTail}$`).test(toAddress)) {
+        this.selectedVerifier = BIT
       }
     },
     async getIdFromNick(nick, typeOfLogin) {
@@ -906,6 +956,10 @@ export default {
     ensRule() {
       return this.selectedVerifier === ENS && this.ensError ? this.ensError : true
     },
+    bitRule() {
+      return this.selectedVerifier === BIT && this.bitError ? this.bitError : true
+    },
+
     unstoppableDomainsRule() {
       return this.selectedVerifier === UNSTOPPABLE_DOMAINS && this.unstoppableDomainsError ? this.unstoppableDomainsError : true
     },
@@ -917,7 +971,87 @@ export default {
         this.toEthAddress = await this.calculateEthAddress()
       }
     },
+    async listenInput(input) {
+      if (input == null) {
+        return
+      }
+      // check tail of .bit begin
+      if (new RegExp(`${this.bitTail}$`).test(input)) {
+        this.contactSelected = input
+        this.multipleAddress = []
+        this.toAddress = ''
+        this.bitError = ''
+        this.toEthAddress = ''
+        let addressCount = 0
+        const multipleAddress = []
+        this.theBitAddress = input
+        this.selectedVerifier = BIT
+        const das = new Das({
+          url: BIT_HOST_URL,
+        })
+        das
+          .getAvatar(input)
+          .then((res) => {
+            this.addressLogoUrl = res.url
+          })
+          .catch((error) => {
+            log.error(error)
+          })
+        // if multiple address then select
+        multipleAddress.push({
+          header: this.$t('walletTransfer.multipleAddressShouldBeSelect'),
+        })
+        await das
+          .records(input)
+          .then((records) => {
+            records.forEach((record) => {
+              if (record.key !== (CHAIN_TO_BIT_NAMESPACE[this.$store.state.networkId] ?? CHAIN_TO_BIT_NAMESPACE[MAINNET_CODE])) {
+                return
+              }
+              this.isBitMode = true
+              addressCount += 1
+              multipleAddress.push({
+                name: input,
+                value: record.value,
+                label: record.label,
+                verifier: BIT,
+              })
+            })
+          })
+          .catch((error) => {
+            log.error(error)
+          })
+        // if multiple address then select, or one auto select
+        if (addressCount === 1) {
+          this.$refs.contactSelected.setValue(this.theBitAddress)
+          this.contactSelected = this.theBitAddress
+          this.toAddress = multipleAddress.pop().value
+        } else if (addressCount > 1) {
+          this.multipleAddress = multipleAddress
+        } else {
+          this.bitError = 'walletTransfer.notAnyBitAddress'
+        }
+        this.$refs.form.validate()
+        // .bit end
+      } else {
+        this.isBitMode = false
+      }
+    },
+    async checkContact() {
+      this.toEthAddress = await this.calculateEthAddress()
+    },
     async contactChanged(contact) {
+      if (this.isBitMode) {
+        // .bit address is different from wallet rule, so set a new branch
+        if (contact.value) this.toAddress = contact.value
+        log.info(this.toAddress, 'contactChanged')
+        this.bitError = ''
+        this.selectedVerifier = BIT
+        if (this.selectedVerifier) {
+          this.toEthAddress = await this.calculateEthAddress()
+        }
+        return
+      }
       this.contactSelected = contact
       if (contact) this.toAddress = contact
       log.info(contact, 'contactChanged')
@@ -1087,7 +1221,15 @@ export default {
           toAddress = toChecksumAddress(ethAddr)
         } catch (error) {
           log.error(error)
-          this.unstoppableDomainsError = 'walletSettings.invalidUnstoppable'
+          this.unstoppableDomainsError = 'walletTransfer.invalidUnstoppable'
+          this.$refs.form.validate()
+        }
+      } else if (this.selectedVerifier === BIT) {
+        try {
+          toAddress = toChecksumAddress(this.toAddress)
+        } catch (error) {
+          log.error('invalidBit', this.toAddress, error)
+          this.bitError = 'walletTransfer.invalidBit'
           this.$refs.form.validate()
         }
       } else {

src/icons/VerifierBitIcon.vue

@@ -0,0 +1,23 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="635.37" height="699.36" viewBox="0 0 635.37 699.36">
+    <path
+      id="path_591"
+      data-name="path 591"
+      d="M600,774.6c138,0,250.32-112.3,250.32-250.33a249.06,249.06,
+    0,0,0-50.15-150.14,125,125,0,0,0,50.15-100.19H600c-138,0-250.34,112.3-250.34,250.33S462,774.6,600,
+    774.6Zm0-386.08c74.85,0,135.74,60.9,135.74,135.75S674.85,660,600,660,464.25,599.1,464.25,524.26,
+    525.15,388.52,600,388.52Z"
+      transform="translate(-282.33 -273.94)"
+      fill="#00df9b"
+    />
+    <path
+      id="path_592"
+      data-name="path 592"
+      d="M600,973.3c-115,0-230.07-43.79-317.67-131.36A128,128,0,0,1,367,
+    764.43c129.907,125.747,336.153,125.747,466.06,0a128,128,0,0,1,84.64,77.51C830.07,929.51,715.05,973.3,600,
+    973.3Z"
+      transform="translate(-282.33 -273.94)"
+      fill="#2471fe"
+    />
+  </svg>
+</template>