integrate Ping Key Manager

src/libs/utils.js

@@ -205,6 +205,12 @@ export async function sign(device, chainId, signerAddress, messages, fee, memo,
       transport = await TransportWebUSB.create()
       signer = new LedgerSigner(transport, { hdPaths: [getHdPath(signerAddress)] })
       break
+    case 'pingKMS':
+      if (!window.PingSigner) {
+        throw new Error('Please install Ping KMS extension')
+      }
+      signer = window.PingSigner
+      break
     case 'keplr':
     default:
       if (!window.getOfflineSigner || !window.keplr) {
@@ -220,7 +226,7 @@ export async function sign(device, chainId, signerAddress, messages, fee, memo,
   // Ensure the address has some tokens to spend
   const client = await PingWalletClient.offline(signer)
   // const client = await SigningStargateClient.offline(signer)
-  return client.signAmino2(device === 'keplr' ? signerAddress : toSignAddress(signerAddress), messages, fee, memo, signerData)
+  return client.signAmino2(device.startsWith('ledger') ? toSignAddress(signerAddress) : signerAddress, messages, fee, memo, signerData)
   // return signDirect(signer, signerAddress, messages, fee, memo, signerData)
 }
 

src/views/OperationDelegateComponent.vue

@@ -224,47 +224,7 @@
 
             <b-row>
               <b-col>
-                <b-form-group
+                <wallet-input-vue v-model="wallet" />
-                  label="Wallet"
-                  label-for="wallet"
-                >
-                  <validation-provider
-                    v-slot="{ errors }"
-                    rules="required"
-                    name="wallet"
-                  >
-                    <b-form-radio-group
-                      v-model="wallet"
-                      stacked
-                      class="demo-inline-spacing"
-                    >
-                      <b-form-radio
-                        v-model="wallet"
-                        name="wallet"
-                        value="keplr"
-                        class="d-none d-md-block"
-                      >
-                        Keplr
-                      </b-form-radio>
-                      <b-form-radio
-                        v-model="wallet"
-                        name="wallet"
-                        value="ledgerUSB"
-                      >
-                        <small>Ledger(USB)</small>
-                      </b-form-radio>
-                      <b-form-radio
-                        v-model="wallet"
-                        name="wallet"
-                        value="ledgerBle"
-                        class="mr-0"
-                      >
-                        <small>Ledger(Bluetooth)</small>
-                      </b-form-radio>
-                    </b-form-radio-group>
-                    <small class="text-danger">{{ errors[0] }}</small>
-                  </validation-provider>
-                </b-form-group>
               </b-col>
             </b-row>
           </b-form>
@@ -278,7 +238,7 @@
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 import {
   BAvatar, BModal, BRow, BCol, BInputGroup, BFormInput, BFormGroup, BFormSelect, BFormSelectOption,
-  BForm, BFormRadioGroup, BFormRadio, BButton, BInputGroupAppend, BFormCheckbox, BOverlay,
+  BForm, BButton, BInputGroupAppend, BFormCheckbox, BOverlay,
 } from 'bootstrap-vue'
 import Ripple from 'vue-ripple-directive'
 import {
@@ -289,6 +249,7 @@ import {
 } from '@/libs/utils'
 import vSelect from 'vue-select'
 import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
+import WalletInputVue from './components/WalletInput.vue'
 
 export default {
   name: 'DelegateDialogue',
@@ -303,13 +264,12 @@ export default {
     BFormGroup,
     BFormSelect,
     BFormSelectOption,
-    BFormRadioGroup,
-    BFormRadio,
     BFormCheckbox,
     vSelect,
     BButton,
     BInputGroupAppend,
     BOverlay,
+    WalletInputVue,
 
     ValidationProvider,
     ValidationObserver,

src/views/OperationGovDepositComponent.vue

@@ -193,47 +193,7 @@
 
           <b-row>
             <b-col>
-              <b-form-group
+              <wallet-input-vue v-model="wallet" />
-                label="Wallet"
-                label-for="wallet"
-              >
-                <validation-provider
-                  v-slot="{ errors }"
-                  rules="required"
-                  name="wallet"
-                >
-                  <b-form-radio-group
-                    v-model="wallet"
-                    stacked
-                    class="demo-inline-spacing"
-                  >
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="keplr"
-                      class="d-none d-md-block"
-                    >
-                      Keplr
-                    </b-form-radio>
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="ledgerUSB"
-                    >
-                      <small>Ledger(USB)</small>
-                    </b-form-radio>
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="ledgerBle"
-                      class="mr-0"
-                    >
-                      <small>Ledger(Bluetooth)</small>
-                    </b-form-radio>
-                  </b-form-radio-group>
-                  <small class="text-danger">{{ errors[0] }}</small>
-                </validation-provider>
-              </b-form-group>
             </b-col>
           </b-row>
         </b-form>
@@ -247,7 +207,7 @@
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 import {
   BModal, BRow, BCol, BInputGroup, BFormInput, BFormGroup, BFormSelect, BFormCheckbox,
-  BForm, BFormRadioGroup, BFormRadio, BInputGroupAppend, BOverlay, BButton, BFormSelectOption,
+  BForm, BInputGroupAppend, BOverlay, BButton, BFormSelectOption,
 } from 'bootstrap-vue'
 import {
   required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
@@ -258,6 +218,7 @@ import {
   formatToken, formatTokenDenom, getLocalAccounts, getUnitAmount, setLocalTxHistory, sign, timeIn,
 } from '@/libs/utils'
 import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
+import WalletInputVue from './components/WalletInput.vue'
 
 export default {
   name: 'DepositDialogue',
@@ -270,8 +231,6 @@ export default {
     BFormInput,
     BFormGroup,
     BFormSelect,
-    BFormRadioGroup,
-    BFormRadio,
     BFormCheckbox,
     BInputGroupAppend,
     BOverlay,
@@ -280,6 +239,8 @@ export default {
 
     ValidationProvider,
     ValidationObserver,
+
+    WalletInputVue,
     // eslint-disable-next-line vue/no-unused-components
     ToastificationContent,
   },

src/views/OperationRedelegateComponent.vue

@@ -193,47 +193,7 @@
           </b-row>
           <b-row>
             <b-col>
-              <b-form-group
+              <wallet-input-vue v-model="wallet" />
-                label="Wallet"
-                label-for="wallet"
-              >
-                <validation-provider
-                  v-slot="{ errors }"
-                  rules="required"
-                  name="wallet"
-                >
-                  <b-form-radio-group
-                    v-model="wallet"
-                    stacked
-                    class="demo-inline-spacing"
-                  >
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="keplr"
-                      class="d-none d-md-block"
-                    >
-                      Keplr
-                    </b-form-radio>
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="ledgerUSB"
-                    >
-                      <small>Ledger(USB)</small>
-                    </b-form-radio>
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="ledgerBle"
-                      class="mr-0"
-                    >
-                      <small>Ledger(Bluetooth)</small>
-                    </b-form-radio>
-                  </b-form-radio-group>
-                  <small class="text-danger">{{ errors[0] }}</small>
-                </validation-provider>
-              </b-form-group>
             </b-col>
           </b-row>
         </b-form>
@@ -247,7 +207,7 @@
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 import {
   BModal, BRow, BCol, BInputGroup, BFormInput, BFormGroup, BFormSelect,
-  BForm, BFormRadioGroup, BFormRadio, BFormCheckbox, BInputGroupAppend,
+  BForm, BFormCheckbox, BInputGroupAppend,
 } from 'bootstrap-vue'
 import {
   required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
@@ -258,6 +218,7 @@ import {
 } from '@/libs/utils'
 import vSelect from 'vue-select'
 import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
+import WalletInputVue from './components/WalletInput.vue'
 
 export default {
   name: 'UnbondDialogue',
@@ -270,14 +231,14 @@ export default {
     BFormInput,
     BFormGroup,
     BFormSelect,
-    BFormRadioGroup,
-    BFormRadio,
     vSelect,
     BFormCheckbox,
     BInputGroupAppend,
 
     ValidationProvider,
     ValidationObserver,
+
+    WalletInputVue,
     // eslint-disable-next-line vue/no-unused-components
     ToastificationContent,
   },

src/views/OperationTransfer2Component.vue

@@ -241,47 +241,7 @@
 
           <b-row>
             <b-col>
-              <b-form-group
+              <wallet-input-vue v-model="wallet" />
-                label="Wallet"
-                label-for="wallet"
-              >
-                <validation-provider
-                  v-slot="{ errors }"
-                  rules="required"
-                  name="wallet"
-                >
-                  <b-form-radio-group
-                    v-model="wallet"
-                    stacked
-                    class="demo-inline-spacing"
-                  >
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="keplr"
-                      class="d-none d-md-block"
-                    >
-                      Keplr
-                    </b-form-radio>
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="ledgerUSB"
-                    >
-                      <small>Ledger(USB)</small>
-                    </b-form-radio>
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="ledgerBle"
-                      class="mr-0"
-                    >
-                      <small>Ledger(Bluetooth)</small>
-                    </b-form-radio>
-                  </b-form-radio-group>
-                  <small class="text-danger">{{ errors[0] }}</small>
-                </validation-provider>
-              </b-form-group>
             </b-col>
           </b-row>
         </b-form>
@@ -295,7 +255,7 @@
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 import {
   BModal, BRow, BCol, BInputGroup, BInputGroupAppend, BFormInput, BAvatar, BFormGroup, BFormSelect, BFormSelectOption,
-  BForm, BFormRadioGroup, BFormRadio, BInputGroupPrepend, BFormCheckbox, BOverlay, BSpinner,
+  BForm, BInputGroupPrepend, BFormCheckbox, BOverlay, BSpinner,
 } from 'bootstrap-vue'
 import {
   required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
@@ -310,6 +270,7 @@ import { coin } from '@cosmjs/amino'
 import dayjs from 'dayjs'
 import { toHex } from '@cosmjs/encoding'
 import { sha256 } from '@cosmjs/crypto'
+import WalletInputVue from './components/WalletInput.vue'
 
 export default {
   name: 'TransforDialogue',
@@ -326,8 +287,6 @@ export default {
     BFormGroup,
     BFormSelect,
     BFormSelectOption,
-    BFormRadioGroup,
-    BFormRadio,
     BFormCheckbox,
     BSpinner,
     vSelect,
@@ -335,6 +294,8 @@ export default {
 
     ValidationProvider,
     ValidationObserver,
+
+    WalletInputVue,
     // eslint-disable-next-line vue/no-unused-components
     ToastificationContent,
   },

src/views/OperationTransferComponent.vue

@@ -196,47 +196,7 @@
 
           <b-row>
             <b-col>
-              <b-form-group
+              <wallet-input-vue v-model="wallet" />
-                label="Wallet"
-                label-for="wallet"
-              >
-                <validation-provider
-                  v-slot="{ errors }"
-                  rules="required"
-                  name="wallet"
-                >
-                  <b-form-radio-group
-                    v-model="wallet"
-                    stacked
-                    class="demo-inline-spacing"
-                  >
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="keplr"
-                      class="d-none d-md-block"
-                    >
-                      Keplr
-                    </b-form-radio>
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="ledgerUSB"
-                    >
-                      <small>Ledger(USB)</small>
-                    </b-form-radio>
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="ledgerBle"
-                      class="mr-0"
-                    >
-                      <small>Ledger(Bluetooth)</small>
-                    </b-form-radio>
-                  </b-form-radio-group>
-                  <small class="text-danger">{{ errors[0] }}</small>
-                </validation-provider>
-              </b-form-group>
             </b-col>
           </b-row>
         </b-form>
@@ -250,7 +210,7 @@
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 import {
   BModal, BRow, BCol, BInputGroup, BInputGroupAppend, BFormInput, BAvatar, BFormGroup, BFormSelect, BFormSelectOption,
-  BForm, BFormRadioGroup, BFormRadio, BInputGroupPrepend, BFormCheckbox,
+  BForm, BInputGroupPrepend, BFormCheckbox,
 } from 'bootstrap-vue'
 import {
   required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
@@ -261,6 +221,7 @@ import {
 } from '@/libs/utils'
 import { Cosmos } from '@cosmostation/cosmosjs'
 import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
+import WalletInputVue from './components/WalletInput.vue'
 
 export default {
   name: 'TransforDialogue',
@@ -277,12 +238,12 @@ export default {
     BFormGroup,
     BFormSelect,
     BFormSelectOption,
-    BFormRadioGroup,
-    BFormRadio,
     BFormCheckbox,
 
     ValidationProvider,
     ValidationObserver,
+
+    WalletInputVue,
     // eslint-disable-next-line vue/no-unused-components
     ToastificationContent,
   },

src/views/OperationUnbondComponent.vue

@@ -171,47 +171,7 @@
           </b-row>
           <b-row>
             <b-col>
-              <b-form-group
+              <wallet-input-vue v-model="wallet" />
-                label="Wallet"
-                label-for="wallet"
-              >
-                <validation-provider
-                  v-slot="{ errors }"
-                  rules="required"
-                  name="wallet"
-                >
-                  <b-form-radio-group
-                    v-model="wallet"
-                    stacked
-                    class="demo-inline-spacing"
-                  >
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="keplr"
-                      class="d-none d-md-block"
-                    >
-                      Keplr
-                    </b-form-radio>
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="ledgerUSB"
-                    >
-                      <small>Ledger(USB)</small>
-                    </b-form-radio>
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="ledgerBle"
-                      class="mr-0"
-                    >
-                      <small>Ledger(Bluetooth)</small>
-                    </b-form-radio>
-                  </b-form-radio-group>
-                  <small class="text-danger">{{ errors[0] }}</small>
-                </validation-provider>
-              </b-form-group>
             </b-col>
           </b-row>
         </b-form>
@@ -225,7 +185,7 @@
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 import {
   BModal, BRow, BCol, BInputGroup, BFormInput, BFormGroup, BFormSelect, BInputGroupAppend,
-  BForm, BFormRadioGroup, BFormRadio, BFormCheckbox,
+  BForm, BFormCheckbox,
 } from 'bootstrap-vue'
 import {
   required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
@@ -236,6 +196,7 @@ import {
 } from '@/libs/utils'
 import vSelect from 'vue-select'
 import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
+import WalletInputVue from './components/WalletInput.vue'
 
 export default {
   name: 'UnbondDialogue',
@@ -248,14 +209,14 @@ export default {
     BFormInput,
     BFormGroup,
     BFormSelect,
-    BFormRadioGroup,
-    BFormRadio,
     vSelect,
     BInputGroupAppend,
     BFormCheckbox,
 
     ValidationProvider,
     ValidationObserver,
+
+    WalletInputVue,
     // eslint-disable-next-line vue/no-unused-components
     ToastificationContent,
   },

src/views/OperationVoteComponent.vue

@@ -182,47 +182,7 @@
 
           <b-row>
             <b-col>
-              <b-form-group
+              <wallet-input-vue v-model="wallet" />
-                label="Wallet"
-                label-for="wallet"
-              >
-                <validation-provider
-                  v-slot="{ errors }"
-                  rules="required"
-                  name="wallet"
-                >
-                  <b-form-radio-group
-                    v-model="wallet"
-                    stacked
-                    class="demo-inline-spacing"
-                  >
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="keplr"
-                      class="d-none d-md-block"
-                    >
-                      Keplr
-                    </b-form-radio>
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="ledgerUSB"
-                    >
-                      <small>Ledger(USB)</small>
-                    </b-form-radio>
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="ledgerBle"
-                      class="mr-0"
-                    >
-                      <small>Ledger(Bluetooth)</small>
-                    </b-form-radio>
-                  </b-form-radio-group>
-                  <small class="text-danger">{{ errors[0] }}</small>
-                </validation-provider>
-              </b-form-group>
             </b-col>
           </b-row>
         </b-form>
@@ -236,7 +196,7 @@
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 import {
   BModal, BRow, BCol, BInputGroup, BFormInput, BFormGroup, BFormSelect, BFormCheckbox,
-  BForm, BFormRadioGroup, BFormRadio, BInputGroupAppend, BOverlay, BButton,
+  BForm, BFormRadio, BInputGroupAppend, BOverlay, BButton,
 } from 'bootstrap-vue'
 import {
   required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
@@ -247,6 +207,7 @@ import {
   formatToken, getLocalAccounts, setLocalTxHistory, sign, timeIn,
 } from '@/libs/utils'
 import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
+import WalletInputVue from './components/WalletInput.vue'
 
 export default {
   name: 'VoteDialogue',
@@ -259,7 +220,6 @@ export default {
     BFormInput,
     BFormGroup,
     BFormSelect,
-    BFormRadioGroup,
     BFormRadio,
     BFormCheckbox,
     BInputGroupAppend,
@@ -268,6 +228,8 @@ export default {
 
     ValidationProvider,
     ValidationObserver,
+
+    WalletInputVue,
     // eslint-disable-next-line vue/no-unused-components
     ToastificationContent,
   },

src/views/OperationWithdrawCommissionComponent.vue

@@ -108,47 +108,7 @@
           </b-row>
           <b-row>
             <b-col>
-              <b-form-group
+              <wallet-input-vue v-model="wallet" />
-                label="Wallet"
-                label-for="wallet"
-              >
-                <validation-provider
-                  v-slot="{ errors }"
-                  rules="required"
-                  name="wallet"
-                >
-                  <b-form-radio-group
-                    v-model="wallet"
-                    stacked
-                    class="demo-inline-spacing"
-                  >
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="keplr"
-                      class="d-none d-md-block"
-                    >
-                      Keplr
-                    </b-form-radio>
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="ledgerUSB"
-                    >
-                      <small>Ledger(USB)</small>
-                    </b-form-radio>
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="ledgerBle"
-                      class="mr-0"
-                    >
-                      <small>Ledger(Bluetooth)</small>
-                    </b-form-radio>
-                  </b-form-radio-group>
-                  <small class="text-danger">{{ errors[0] }}</small>
-                </validation-provider>
-              </b-form-group>
             </b-col>
           </b-row>
         </b-form>
@@ -162,7 +122,7 @@
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 import {
   BModal, BRow, BCol, BInputGroup, BFormInput, BFormGroup, BFormSelect, BFormCheckbox,
-  BForm, BFormRadioGroup, BFormRadio, BInputGroupAppend,
+  BForm, BInputGroupAppend,
 } from 'bootstrap-vue'
 import {
   required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
@@ -172,6 +132,7 @@ import {
   formatToken, setLocalTxHistory, sign, timeIn,
 } from '@/libs/utils'
 import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
+import WalletInputVue from './components/WalletInput.vue'
 
 export default {
   name: 'WithdrawCommissionDialogue',
@@ -184,13 +145,13 @@ export default {
     BFormInput,
     BFormGroup,
     BFormSelect,
-    BFormRadioGroup,
-    BFormRadio,
     BFormCheckbox,
     BInputGroupAppend,
 
     ValidationProvider,
     ValidationObserver,
+
+    WalletInputVue,
     // eslint-disable-next-line vue/no-unused-components
     ToastificationContent,
   },

src/views/OperationWithdrawComponent.vue

@@ -116,47 +116,7 @@
           </b-row>
           <b-row>
             <b-col>
-              <b-form-group
+              <wallet-input-vue v-model="wallet" />
-                label="Wallet"
-                label-for="wallet"
-              >
-                <validation-provider
-                  v-slot="{ errors }"
-                  rules="required"
-                  name="wallet"
-                >
-                  <b-form-radio-group
-                    v-model="wallet"
-                    stacked
-                    class="demo-inline-spacing"
-                  >
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="keplr"
-                      class="d-none d-md-block"
-                    >
-                      Keplr
-                    </b-form-radio>
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="ledgerUSB"
-                    >
-                      <small>Ledger(USB)</small>
-                    </b-form-radio>
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="ledgerBle"
-                      class="mr-0"
-                    >
-                      <small>Ledger(Bluetooth)</small>
-                    </b-form-radio>
-                  </b-form-radio-group>
-                  <small class="text-danger">{{ errors[0] }}</small>
-                </validation-provider>
-              </b-form-group>
             </b-col>
           </b-row>
         </b-form>
@@ -170,7 +130,7 @@
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 import {
   BModal, BRow, BCol, BInputGroup, BFormInput, BAvatar, BFormGroup, BFormSelect,
-  BForm, BFormRadioGroup, BFormRadio, BInputGroupPrepend, BFormCheckbox, BInputGroupAppend,
+  BForm, BInputGroupPrepend, BFormCheckbox, BInputGroupAppend,
 } from 'bootstrap-vue'
 import {
   required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
@@ -179,6 +139,7 @@ import {
   formatToken, getLocalAccounts, getLocalChains, sign, timeIn, setLocalTxHistory, extractAccountNumberAndSequence,
 } from '@/libs/utils'
 import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
+import WalletInputVue from './components/WalletInput.vue'
 
 export default {
   name: 'WithdrawDialogue',
@@ -193,13 +154,13 @@ export default {
     BAvatar,
     BFormGroup,
     BFormSelect,
-    BFormRadioGroup,
-    BFormRadio,
     BFormCheckbox,
     BInputGroupAppend,
 
     ValidationProvider,
     ValidationObserver,
+
+    WalletInputVue,
     // eslint-disable-next-line vue/no-unused-components
     ToastificationContent,
   },

src/views/components/WalletInput.vue

@@ -0,0 +1,80 @@
+<template>
+  <b-form-group
+    label="Wallet"
+    label-for="wallet"
+  >
+    <validation-provider
+      v-slot="{ errors }"
+      rules="required"
+      name="wallet"
+    >
+      <b-form-radio-group
+        v-model="content"
+        stacked
+        @input="handleInput()"
+      >
+        <b-form-radio
+          name="wallet"
+          value="keplr"
+          class="d-none d-md-block"
+        >
+          Keplr
+        </b-form-radio>
+        <b-form-radio
+          name="wallet"
+          value="pingKMS"
+          class="d-none d-md-block"
+        >
+          Ping KMS
+        </b-form-radio>
+        <b-form-radio
+          name="wallet"
+          value="ledgerUSB"
+        >
+          <small>Ledger(USB)</small>
+        </b-form-radio>
+        <b-form-radio
+          name="wallet"
+          value="ledgerBle"
+          class="mr-0"
+        >
+          <small>Ledger(Bluetooth)</small>
+        </b-form-radio>
+      </b-form-radio-group>
+      <small class="text-danger">{{ errors[0] }}</small>
+    </validation-provider>
+  </b-form-group>
+</template>
+
+<script>
+import { ValidationProvider } from 'vee-validate'
+import {
+  BFormRadioGroup, BFormRadio, BFormGroup,
+} from 'bootstrap-vue'
+
+export default {
+  name: 'WalletInput',
+  components: {
+    BFormRadioGroup,
+    BFormRadio,
+    BFormGroup,
+    ValidationProvider,
+  },
+  props: {
+    value: {
+      type: String,
+      default: 'keplr',
+    },
+  },
+  data() {
+    return {
+      content: this.value,
+    }
+  },
+  methods: {
+    handleInput() {
+      this.$emit('input', this.content)
+    },
+  },
+}
+</script>