feature/delegation

src/common/TableSortingHeaderColumn.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="table-sorting-header-column">
+    <span class="table-sorting-header-column__text">
+      {{ text }}
+    </span>
+    <div class="table-sorting-header-column__buttons">
+      <app-button
+        class="table-sorting-header-column__button"
+        size="none"
+        scheme="link"
+        @click="emit('sort', SORTING_ORDER.asc)"
+      >
+        <app-icon
+          class="table-sorting-header-column__button-icon"
+          :class="{
+            'table-sorting-header-column__button-icon--active':
+              sorting === SORTING_ORDER.asc,
+          }"
+          :name="$icons.triangleTop"
+        />
+      </app-button>
+      <app-button
+        class="table-sorting-header-column__button"
+        size="none"
+        scheme="link"
+        @click="emit('sort', SORTING_ORDER.desc)"
+      >
+        <app-icon
+          class="table-sorting-header-column__button-icon"
+          :class="{
+            'table-sorting-header-column__button-icon--active':
+              sorting === SORTING_ORDER.desc,
+          }"
+          :name="$icons.triangleTop"
+        />
+      </app-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SORTING_ORDER } from '@/enums'
+import { AppButton, AppIcon } from '@/common/index'
+
+const emit = defineEmits<{
+  (e: 'sort', value: SORTING_ORDER): void
+}>()
+
+defineProps<{
+  text: string
+  sorting: SORTING_ORDER
+}>()
+</script>
+
+<style scoped lang="scss">
+.table-sorting-header-column {
+  display: flex;
+  gap: toRem(12);
+  align-items: center;
+}
+
+.table-sorting-header-column__text {
+  font-size: toRem(16);
+  color: var(--text-tertiary-main);
+
+  @include respond-to(small) {
+    font-size: toRem(14);
+  }
+}
+
+.table-sorting-header-column__buttons {
+  display: flex;
+  flex-direction: column;
+  gap: toRem(4);
+}
+
+.table-sorting-header-column__button {
+  &:nth-child(2) {
+    transform: rotate(180deg);
+  }
+}
+
+.table-sorting-header-column__button-icon {
+  width: toRem(10);
+  height: toRem(5);
+  color: var(--background-tertiary-light);
+
+  &--active {
+    color: var(--primary-main);
+  }
+}
+</style>

src/common/index.ts

@@ -21,6 +21,7 @@ export { default as Loader } from './Loader.vue'
 export { default as RadioButton } from './RadioButton.vue'
 export { default as InfoIndicator } from './InfoIndicator.vue'
 export { default as Pagination } from './Pagination.vue'
+export { default as TableSortingHeaderColumn } from './TableSortingHeaderColumn.vue'
 
 export * from './modals'
 export * from './toasts'

src/enums/delegation.enum.ts

@@ -0,0 +1,14 @@
+export enum DELEGATION_RIGHTS {
+  fullRights,
+  providerRights,
+  modelRights,
+  sessionRights,
+  marketplaceRights,
+}
+
+export enum DELEGATES_SORTING_TYPES {
+  none,
+  delegated,
+  staked,
+  delegationRights,
+}

src/enums/index.ts

@@ -9,5 +9,6 @@ export * from './contract.enum'
 export * from './contract-inputs.enum'
 export * from './swap.enum'
 export * from './request.enum'
+export * from './delegation.enum'
 
 export { CONTRACT_IDS, NETWORK_IDS } from '@config'

src/enums/route-names.enum.ts

@@ -8,6 +8,8 @@ export enum ROUTE_NAMES {
   contractInfo = 'contract-info',
   appMor20EcosystemProtocolCreation = 'app-mor20-ecosystem-protocol-creation',
   appReferrals = 'app-referrals',
+  appDelegation = 'app-delegation',
+  appDelegatorInfo = 'app-delegator-info',
 }
 
 export enum CONTRACT_INFO_ACTIONS {

src/fields/SelectField.vue

@@ -328,7 +328,7 @@ $z-local-index: 2;
 .select-field__select-drop-menu-item {
   $shadow-hover: 0 toRem(4) toRem(24) rgba(#ffffff, 0.25);
 
-  text-align: right;
+  text-align: left;
   width: 100%;
   padding: toRem(8) toRem(16);
   color: var(--field-text);

src/localization/resources/en.json

@@ -707,5 +707,79 @@
     "claim-button": "Claim",
     "tx-sent-message": "The transaction was sent, you can view it in the explorer <a class=\"link\" href={explorerTxUrl} target=\"blank\" rel=\"noopener noreferrer\">here</a>",
     "success-message": "The transaction was confirmed, you can view it in the explorer <a class=\"link\" href={explorerTxUrl} target=\"blank\" rel=\"noopener noreferrer\">here</a>"
+  },
+  "delegation-description": {
+    "title": "Maximize Your\nToken Potential",
+    "subtitle-1": "Delegate your tokens to trusted providers and let them handle the work while your staked balance grows. Take full advantage of staking today!",
+    "bullet-text-1": "Discover detailed stats about providers to make the best choice.",
+    "bullet-text-2": "Delegate in seconds: just select a wallet, set an amount, and define permissions.",
+    "subtitle-2": "Click \"Delegate\" and put your tokens to work today!",
+    "delegate-button": "Delegate"
+  },
+  "delegate-tokens-modal": {
+    "title": "Delegate",
+    "delegate-text": "Available to Delegate",
+    "wallet-input-placeholder":  "Enter wallet address",
+    "mor-input-placeholder":  "Enter {asset} amount",
+    "rights-input-placeholder": "Delegation rights",
+    "full-rights-lbl": "Full Rights",
+    "provider-rights-lbl": "Provider Rights",
+    "model-rights-lbl": "Model Rights",
+    "session-rights-lbl": "Session Rights",
+    "marketplace-rights-lbl": "Marketplace Rights",
+    "confirm-button":  "Confirm",
+    "cancel-button": "Cancel",
+    "tx-sent-message": "The transaction was sent, you can view it in the explorer <a class=\"link\" href={explorerTxUrl} target=\"blank\" rel=\"noopener noreferrer\">here</a>",
+    "success-message": "The transaction was confirmed, you can view it in the explorer <a class=\"link\" href={explorerTxUrl} target=\"blank\" rel=\"noopener noreferrer\">here</a>"
+  },
+  "delegation-providers": {
+    "title": "Providers",
+    "table-header-1": "Providers",
+    "table-header-2": "{asset} Tokens Staked"
+  },
+  "delegation-providers-navigation": {
+    "address-text": "Name / Address",
+    "staked-text": "{asset} Tokens Staked"
+  },
+  "delegation-providers-item": {
+    "delegate-button": "Delegate",
+    "you-text": "you"
+  },
+  "delegator-info-page":  {
+    "back-button": "Providers"
+  },
+  "delegation-info-title": {
+    "you-text": "You",
+    "your-delegator-text": "Your delegator",
+    "your-provider-text": "Your provider",
+    "coppied-text": "Coppied!"
+  },
+  "delegator-info-cards": {
+    "number-of-delegates-text": "Number Of Delegates",
+    "total-staked-by-delegates": "Total {asset} tokens staked by Delegates",
+    "total-staked-by-provider": "Total {asset} tokens staked by the Provider",
+    "stake-button":  "Stake",
+    "delegate-button": "Delegate"
+  },
+  "delegation-providers-list": {
+    "error-message": "Something went wrong"
+  },
+  "delegates-list": {
+    "title": "Delegates",
+    "error-message": "Something went wrong"
+  },
+  "delegates-list-header": {
+    "address-text": "Name / Address",
+    "delegated-text": "{asset} Tokens Delegated",
+    "staked-text": "{asset} Tokens Staked",
+    "delegation-rights": "Delegation rights"
+  },
+  "delegates-list-item": {
+    "you-text": "You",
+    "full-rights-lbl": "Full Rights",
+    "provider-rights-lbl": "Provider Rights",
+    "model-rights-lbl": "Model Rights",
+    "session-rights-lbl": "Session Rights",
+    "marketplace-rights-lbl": "Marketplace Rights"
   }
 }

src/pages/DelegationPage/Index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="delegation">
+    <delegation-description />
+    <delegation-providers />
+  </div>
+</template>
+
+<script setup lang="ts">
+import DelegationDescription from './components/DelegationDescription.vue'
+import DelegationProviders from './components/DelegationProviders.vue'
+</script>
+
+<style scoped lang="scss"></style>