@ozdao/prometheus-framework 0.2.320 → 0.2.322

package/src/modules/wallet/views/components/elements/ConnectMetamask.vue

@@ -4,38 +4,35 @@
     <button 
       v-if="!isMetaMaskInstalled"
       @click="connectMetaMask" 
-      class="transition-ease-in-out cursor-pointer  bg-black radius-big flex-v-center flex-nowrap flex t-left uppercase w-100 pd-small t-white"
+      class="transition-ease-in-out cursor-pointer bg-black radius-big flex-v-center flex-nowrap flex t-left uppercase w-100 pd-small t-white"
     >
-      <img loading="lazy" :src="'/icons/metamask.svg'" class="mn-r-small i-big" >
-      <span class="h4 uppercase w-100">{{ t('wallet.connectMetaMask') }}</span>
-      <IconAdd  class="t-transp"   fill="rgb(var(--white))"/>
+      <img loading="lazy" :src="metamaskIcon" class="mn-r-small i-big">
+      <span class="h4 uppercase w-100">{{ t('connectMetaMask') }}</span>
+      <IconAdd class="t-transp" fill="rgb(var(--white))"/>
     </button>
-
     <template v-else>
       <!-- Switch to Polygon -->
       <button 
         v-if="!isPolygon"
         @click="switchToPolygon" 
-        class="transition-ease-in-out cursor-pointer hover-bg-white hover-t-black bg-black t-white radius-big flex-v-center flex-nowrap flex t-left uppercase w-100 pd-small "
+        class="transition-ease-in-out cursor-pointer hover-bg-white hover-t-black bg-black t-white radius-big flex-v-center flex-nowrap flex t-left uppercase w-100 pd-small"
       >
-        <img loading="lazy" :src="'/icons/metamask.svg'" class="mn-r-small i-big" >
-        <span class="h4 uppercase w-100">{{ t('wallet.switchToPolygon') }}</span>
-        <IconAdd  class="t-transp"  fill="rgb(var(--white))" />
+        <img loading="lazy" :src="metamaskIcon" class="mn-r-small i-big">
+        <span class="h4 uppercase w-100">{{ t('switchToPolygon') }}</span>
+        <IconAdd class="t-transp" fill="rgb(var(--white))"/>
       </button>
-      <!-- Add WDT to metamask -->
+      <!-- Add Token to metamask -->
       <button 
         v-if="isPolygon"
-        @click="addWDT" 
-        class="transition-ease-in-out cursor-pointer hover-bg-white hover-t-black  bg-black radius-big flex-v-center flex-nowrap flex t-left uppercase w-100 pd-small t-white"
+        @click="addToken" 
+        class="transition-ease-in-out cursor-pointer hover-bg-white hover-t-black bg-black radius-big flex-v-center flex-nowrap flex t-left uppercase w-100 pd-small t-white"
       >
-        <img loading="lazy" :src="'/icons/metamask.svg'" class="mn-r-small i-big" >
-        <span class="h4 uppercase w-100">{{ t('wallet.addToken') }}</span>
-        <IconAdd  class="hover-fill-black fill-white t-transp"/>
+        <img loading="lazy" :src="metamaskIcon" class="mn-r-small i-big">
+        <span class="h4 uppercase w-100">{{ t('addToken') }}</span>
+        <IconAdd class="hover-fill-black fill-white t-transp"/>
       </button>
     </template>
-
-    <!-- <p class="mn-t-small" v-if="error">{{ error }}</p> -->
-
+    <p class="mn-t-small" v-if="error">{{ error }}</p>
   </div>
 </template>
 
@@ -43,9 +40,47 @@
 import { ref, onMounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import text from '@pf/src/modules/wallet/views/localization/wallet.json'
-
-import IconAdd from '@pf/src/modules/icons/navigation/IconAdd.vue'
+import IconAdd from '@pf/src/modules/icons/navigation/IconAdd.vue';
+
+const props = defineProps({
+  // Token configuration
+  tokenAddress: {
+    type: String,
+    required: true
+  },
+  tokenSymbol: {
+    type: String,
+    required: true
+  },
+  tokenImage: {
+    type: String,
+    required: true
+  },
+  tokenDecimals: {
+    type: Number,
+    default: 18
+  },
+  // Chain configuration
+  targetChainId: {
+    type: String,
+    default: '0x89' // Polygon Mainnet by default
+  },
+  // UI configuration
+  metamaskIcon: {
+    type: String,
+    default: '/icons/metamask.svg'
+  },
+  content: {
+    type: Object,
+    default: () => ({
+      en: {
+        "connectMetaMask": "Connect MetaMask",
+        "switchToPolygon": "Switch to Polygon",
+        "addToken": `Add token to MetaMask`,
+      }
+    })
+  }
+});
 
 const isMetaMaskInstalled = ref(false);
 const isPolygon = ref(false);
@@ -53,18 +88,14 @@ const loading = ref(false);
 const error = ref(null);
 const buttonStyle = ref({});
 
-const tokenAddress = '0xE11702CF04621D395E75680C29d3dbF81484e875'; 
-const tokenSymbol = 'WDT';
-const tokenDecimals = 8;
-const tokenImage = 'https://weeder.delivery/logo-token.png';
-
 const connectMetaMask = async () => {
   if (typeof window.ethereum !== 'undefined') {
     try {
       await window.ethereum.request({ method: 'eth_requestAccounts' });
       checkMetaMask();
-    } catch (error) {
-      console.error('Ошибка при подключении MetaMask:', error);
+    } catch (err) {
+      error.value = err.message;
+      console.error('Error connecting to MetaMask:', err);
     }
   } else {
     window.open('https://metamask.io/', '_blank');
@@ -75,7 +106,7 @@ const checkMetaMask = async () => {
   if (typeof window.ethereum !== 'undefined') {
     isMetaMaskInstalled.value = true;
     const chainId = await window.ethereum.request({ method: 'eth_chainId' });
-    isPolygon.value = chainId === '0x89' || chainId === '0x13881';
+    isPolygon.value = chainId === props.targetChainId;
   } else {
     isMetaMaskInstalled.value = false;
   }
@@ -85,47 +116,46 @@ const switchToPolygon = async () => {
   try {
     await window.ethereum.request({
       method: 'wallet_switchEthereumChain',
-      params: [{ chainId: '0x89' }],
+      params: [{ chainId: props.targetChainId }],
     });
     checkMetaMask();
-  } catch (error) {
-    console.error('Ошибка при переключении на Polygon:', error);
+  } catch (err) {
+    error.value = err.message;
+    console.error('Error switching to Polygon:', err);
   }
 };
 
-const addWDT = async () => {
+const addToken = async () => {
   buttonStyle.value['pointer-events'] = 'none';
   error.value = null;
   loading.value = true;
-
+  
   try {
     await ethereum.request({
       method: 'wallet_watchAsset',
       params: {
         type: 'ERC20',
         options: {
-          address: tokenAddress,
-          symbol: tokenSymbol,
-          decimals: tokenDecimals,
-          image: tokenImage,
+          address: props.tokenAddress,
+          symbol: props.tokenSymbol,
+          decimals: props.tokenDecimals,
+          image: props.tokenImage,
         },
       },
     });
-
     buttonStyle.value['background-color'] = '#009911';
     loading.value = false;
   } catch (err) {
-    error.value = err.toString();
+    error.value = err.message;
+    loading.value = false;
   }
 };
 
 const { t } = useI18n({
-  useScope: 'global', 
-  ...text
-})
+  messages: props.content
+});
 
 onMounted(() => {
   checkMetaMask();
 });
-
 </script>

package/src/modules/wallet/views/localization/wallet.json

@@ -5,9 +5,6 @@
         "title": "Your Wallet",
         "subtitle": "Earn WDT by purchasing our weed or contributing to the community.",
         "token": "WDT",
-        "connectMetaMask": "Connect MetaMask",
-        "switchToPolygon": "Switch to Polygon",
-        "addToken": "Add WDT to MetaMask",
         "pay": "pay",
         "youReceived": "you received",
         "enterAmount": "enter amount to top up",
@@ -21,9 +18,6 @@
       "wallet": {
         "title": "Ваш Кошелек",
         "subtitle": "Зарабатывайте WDT, покупая товары или внося вклад в сообщество.",
-        "connectMetaMask": "Подключить MetaMask",
-        "switchToPolygon": "Переподключиться на Polygon",
-        "addToken": "Добавить WDT в Metamask",
         "pay": "купить",
         "youReceived": "вы пополнили на сумму",
         "enterAmount": "введите сумму для пополнения",

package/src/styles/base/all.scss

@@ -182,7 +182,12 @@ body {
 	}
 
 	.flex-child {	
+		&-none 				{ flex: none; }
 		&-noresize 		{ flex: 0 } 
+		&-1 					{ flex: 1; }
+		&-auto 				{ flex: auto; }
+		&-default 		{ flex: 1 0 auto } 
+		&-initial 		{ flex: initial; }
 		&-grow-0 			{ flex-grow: 0; }
 		&-grow-1 			{ flex-grow: 1; }
 		&-grow-2 			{ flex-grow: 2; }
@@ -191,10 +196,6 @@ body {
 		&-shrink-1 		{ flex-shrink: 1; }
 		&-basis-auto	{ flex-basis: auto; }
 		&-basis-0 		{ flex-basis: 0; }
-		&-1 					{ flex: 1; }
-		&-auto 				{ flex: auto; }
-		&-initial 		{ flex: initial; }
-		&-none 				{ flex: none; }
 		&-order-0     { order: 0; }
 		&-order-1     { order: 1; }
 		&-order-2     { order: 2; }

package/src/styles/typography.scss

@@ -12,11 +12,11 @@ body {
 }
 
 // Font Styles
-h1,.h1  { font-family: var(--font-main); font-weight: 500; font-size: 2.500rem; 	line-height: 1.000; letter-spacing: -0.05rem; 	text-transform: none; }
-h2,.h2  { font-family: var(--font-main); font-weight: 500; font-size: 1.750rem; 	line-height: 1.000; letter-spacing: -0.05rem;	text-transform: none; }
-h3,.h3  { font-family: var(--font-main); font-weight: 500; font-size: 1.500rem; 	line-height: 1.000; letter-spacing: -0.05rem;	text-transform: none; }
-h4,.h4  { font-family: var(--font-main); font-weight: 500; font-size: 1.375rem; 	line-height: 1.250; letter-spacing: +0.0rem; 	text-transform: none; }
-h5,.h5 	{ font-family: var(--font-main); font-weight: 500; font-size: 1.250rem; 	line-height: 1.250;	letter-spacing: -0.0rem; 	text-transform: none; }
+h1,.h1  { font-family: var(--font-main); font-weight: 500; font-size: 3.250rem; 	line-height: 1.000; letter-spacing: -0.05rem; 	text-transform: none; }
+h2,.h2  { font-family: var(--font-main); font-weight: 500; font-size: 2.500rem; 	line-height: 1.000; letter-spacing: -0.05rem;	text-transform: none; }
+h3,.h3  { font-family: var(--font-main); font-weight: 500; font-size: 1.750rem; 	line-height: 1.000; letter-spacing: -0.05rem;	text-transform: none; }
+h4,.h4  { font-family: var(--font-main); font-weight: 500; font-size: 1.500rem; 	line-height: 1.250; letter-spacing: +0.0rem; 	text-transform: none; }
+h5,.h5 	{ font-family: var(--font-main); font-weight: 500; font-size: 1.375rem; 	line-height: 1.250;	letter-spacing: -0.0rem; 	text-transform: none; }
 
 // Typogragy Styles
 		.p-small     	{ font-family: var(--font-second); font-weight: 400;				font-size: 0.75rem;		line-height: 1.250; }