Repository: CryptoBlades/cryptoblades
File: frontend/src/views/Bridge.vue (Vue)

Code before:
      </b-tab>
      <b-tab :title="$t('bridge.incomingNfts')" @click="getIncoming(); selectedNftId = ''">
        <div v-if="incomingNftIds.length === 0">
          <h3 class="text-center p-4">{{$t('bridge.noIncomingNfts')}}</h3>
        </div>
        <div v-else>
          <div class="d-flex flex-row flex-wrap bd-highlight mb-3 justify-content-center">
            <div v-if="incomingWeapons.length !== 0" class="p-4 w-20">
              <h4 class="text-center withdrawText">{{$t('bridge.selectWeaponToWithdraw')}}</h4>
              <select class="form-control withdrawSelect" v-model="weaponIdToWithdraw">
                <option value="" disabled selected>{{$t('bridge.selectYourWeapon')}}</option>
                <option v-for="weapon in incomingWeapons"
                :value="weapon['7']"
                :key="weapon['3']">
                  {{$t('bridge.weaponId')}}: {{ weapon['3'] }}
                  {{$t('bridge.fromChain')}}: {{supportedChains[supportedChainIds.indexOf(weapon['2'])]}}
                </option>
              </select>
              <div class="mt-2 text-center">
                <b-button :disabled="!weaponIdToWithdraw" variant="primary" @click="withdrawBridge(weaponIdToWithdraw)"
                          class="gtag-link-others withdrawBtn" tagname="click_transfer_bridge"> {{ $t('bridge.withdrawWeapon') }}
                </b-button>
              </div>
            </div>
            <div v-if="incomingChars.length !== 0" class="p-4 w-20">
              <h4 class="text-center withdrawText">{{$t('bridge.selectCharacterToWithdraw')}}</h4>
              <select class="form-control withdrawSelect" v-model="characterIdToWithdraw">
                <option value="" disabled selected>{{$t('bridge.selectYourCharacter')}}</option>
                <option v-for="character in incomingChars"
                :value="character['7']"
                :key="character['3']">
                  {{$t('bridge.characterId')}}: {{ character['3'] }} {{$t('bridge.fromChain')}}:
                  {{supportedChains[supportedChainIds.indexOf(character['2'])]}}
                </option>
              </select>
              <div class="mt-2 text-center">
                <b-button :disabled="!characterIdToWithdraw" variant="primary"
                  @click="withdrawBridge(characterIdToWithdraw)" class="gtag-link-others withdrawBtn"
                  tagname="click_transfer_bridge">{{$t('bridge.withdrawCharacter')}}</b-button>
              </div>
            </div>
            <div v-if="incomingShields.length !== 0" class="p-4 w-20">
              <h4 class="text-center withdrawText">Select shield to withdraw</h4>
              <select class="form-control withdrawSelect" v-model="shieldIdToWithdraw">
                <option value="" disabled selected>Select your Shield</option>
                <option v-for="shield in incomingShields"
                :value="shield['7']"
                :key="shield['3']">
                  Shield id: {{ shield['3'] }}
                  {{$t('bridge.fromChain')}}: {{supportedChains[supportedChainIds.indexOf(shield['2'])]}}
                </option>

Review comment (refactor):
If there was enough time for that, I would refactor the way we are handling types in a bridge, character should be a type here, we should access a particular attribute, not access it via '7', similar in other places in code here

Code after:
        </div>
        <div v-else>
          <div class="d-flex flex-row flex-wrap bd-highlight mb-3 justify-content-center">
            <div v-if="incomingWeapons.length !== 0" class="p-4 w-20">
              <h4 class="text-center withdrawText">{{$t('bridge.selectWeaponToWithdraw')}}</h4>
              <select class="form-control withdrawSelect" v-model="weaponIdToWithdraw">
                <option value="" disabled selected>{{$t('bridge.selectYourWeapon')}}</option>
                <option v-for="weapon in incomingWeapons"
                :value="weapon['7']"
                :key="weapon['3']">
                  {{$t('bridge.weaponId')}}: {{ weapon['3'] }}
                  {{$t('bridge.fromChain')}}: {{supportedChains[supportedChainIds.indexOf(weapon['2'])]}}
                </option>
              </select>
              <div class="mt-2 text-center">
                <b-button :disabled="!weaponIdToWithdraw" variant="primary" @click="withdrawBridge(weaponIdToWithdraw)"
                          class="gtag-link-others withdrawBtn" tagname="click_transfer_bridge"> {{ $t('bridge.withdrawWeapon') }}
                </b-button>
              </div>
            </div>
            <div v-if="incomingChars.length !== 0" class="p-4 w-20">
              <h4 class="text-center withdrawText">{{$t('bridge.selectCharacterToWithdraw')}}</h4>
              <select class="form-control withdrawSelect" v-model="characterIdToWithdraw">
                <option value="" disabled selected>{{$t('bridge.selectYourCharacter')}}</option>
                <option v-for="character in incomingChars"
                :value="character['7']"
                :key="character['3']">
                  {{$t('bridge.characterId')}}: {{ character['3'] }} {{$t('bridge.fromChain')}}:
                  {{supportedChains[supportedChainIds.indexOf(character['2'])]}}
                </option>
              </select>
              <div class="mt-2 text-center">
                <b-button :disabled="!characterIdToWithdraw" variant="primary"
                  @click="withdrawBridge(characterIdToWithdraw)" class="gtag-link-others withdrawBtn"
                  tagname="click_transfer_bridge">{{$t('bridge.withdrawCharacter')}}</b-button>
              </div>
            </div>
            <div v-if="incomingShields.length !== 0" class="p-4 w-20">
              <h4 class="text-center withdrawText">{{$t('bridge.selectYourShieldToWithdraw')}}</h4>
              <select class="form-control withdrawSelect" v-model="shieldIdToWithdraw">
                <option value="" disabled selected>{{$t('bridge.selectYourShield')}}</option>
                <option v-for="shield in incomingShields"
                :value="shield['7']"
                :key="shield['3']">
                  {{$t('bridge.shieldId')}}: {{ shield['3'] }}
                  {{$t('bridge.fromChain')}}: {{supportedChains[supportedChainIds.indexOf(shield['2'])]}}
                </option>
              </select>
              <div class="mt-2 text-center">
                <b-button :disabled="!shieldIdToWithdraw" variant="primary" @click="withdrawBridge(shieldIdToWithdraw)"
                          class="gtag-link-others withdrawBtn" tagname="click_transfer_bridge"> {{$t('bridge.withdrawShield')}}