add: Polygon support

package.json

@@ -97,6 +97,7 @@
         "postcss": "8.3.9",
         "postcss-loader": "6.2.0",
         "prettier": "2.4.1",
+        "prettier-plugin-tailwind": "2.2.12",
         "tailwindcss": "2.2.17",
         "terser-webpack-plugin": "5.2.4",
         "ts-loader": "9.2.6",

src/common/rss3.ts

@@ -36,15 +36,7 @@ const methodKey = 'RSS3BioConnectMethod';
 const addressKey = 'RSS3BioConnectAddress';
 
 async function walletConnect(skipSign?: boolean) {
-    walletConnectProvider = new WalletConnectProvider({
-        // We are not using WalletConnect for transactions now,
-        // so here's just something crashing our API limits.
-        // For infura, 403 requests are also seen as
-        // consumed (57.13% of all requests).
-        rpc: {
-            1: 'https://cloudflare-eth.com',
-        },
-    });
+    walletConnectProvider = new WalletConnectProvider(config.walletConnectOptions);
 
     //  Enable session (triggers QR Code modal)
     let session;
@@ -188,11 +180,7 @@ export default {
                         agentSign: true,
                         sign: async (data: string) => {
                             if (!ethersProvider) {
-                                walletConnectProvider = new WalletConnectProvider({
-                                    rpc: {
-                                        1: 'https://cloudflare-eth.com',
-                                    },
-                                });
+                                walletConnectProvider = new WalletConnectProvider(config.walletConnectOptions);
                                 let session;
                                 try {
                                     session = await walletConnectProvider.enable();

src/components/AccountCard.vue

@@ -1,21 +1,21 @@
 <template>
     <div
         class="
-            box-border
-            rounded-xl
-            px-5
+            flex flex-row
+            items-center
             pb-1
             pt-2
+            px-5
             bg-account-bg
-            flex flex-row
-            items-center
             border-card border-account-border
+            rounded-xl
+            box-border
         "
     >
-        <div class="content flex flex-row items-center w-full overflow-y-auto pb-2 px-2">
+        <div class="content flex flex-row items-center pb-2 px-2 w-full overflow-y-auto">
             <slot name="content" />
         </div>
-        <div class="pb-2 ml-1">
+        <div class="ml-1 pb-2">
             <slot name="header-button" />
         </div>
     </div>

src/components/AccountItem.vue

@@ -19,7 +19,7 @@
         <Button
             v-show="deleteMode"
             size="sm"
-            class="w-6 h-6 bg-account-btn-m text-account-btn-m-text shadow-account absolute top-0 right-0 z-20"
+            class="absolute z-20 right-0 top-0 w-6 h-6 text-account-btn-m-text bg-account-btn-m shadow-account"
             @click="deleteAccount"
         >
             <i class="bx bx-minus bx-sm"></i>
@@ -58,7 +58,7 @@ export default class AccountItem extends Vue {
 <style scoped lang="postcss">
 @layer components {
     .account-item {
-        @apply rounded-full border border-item-border filter shadow-account bg-item-bg bg-85 bg-center bg-no-repeat;
+        @apply bg-item-bg bg-85 bg-center bg-no-repeat border border-item-border rounded-full shadow-account filter;
     }
 }
 </style>

src/components/AvatarEditor.vue

@@ -47,7 +47,7 @@ export default class Avatar extends Vue {
 <style scoped lang="postcss">
 @layer components {
     .avatar {
-        @apply flex justify-center items-center cursor-pointer rounded-full relative bg-input-bg;
+        @apply relative flex items-center justify-center bg-input-bg rounded-full cursor-pointer;
 
         &.sm {
             @apply w-14 h-14;
@@ -60,11 +60,11 @@ export default class Avatar extends Vue {
         }
 
         .image {
-            @apply object-contain object-center absolute left-0 top-0 w-full h-full rounded-full object-cover;
+            @apply absolute left-0 top-0 w-full h-full rounded-full object-contain object-cover object-center;
         }
 
         .plus {
-            @apply w-full h-full flex justify-center items-center rounded-full z-0;
+            @apply z-0 flex items-center justify-center w-full h-full rounded-full;
 
             &.fill {
                 @apply bg-black bg-opacity-40;

src/components/BarCard.vue

@@ -28,11 +28,11 @@ export default class BarCard extends Vue {}
 <style lang="postcss" scoped>
 @layer components {
     .card {
-        @apply box-border rounded-xl px-3 py-1 flex flex-row items-center border-card h-16;
+        @apply flex flex-row items-center px-3 py-1 h-16 border-card rounded-xl box-border;
 
         .card-body {
             scrollbar-width: thin;
-            @apply w-full overflow-y-auto p-2;
+            @apply p-2 w-full overflow-y-auto;
 
             .content-wrapper {
                 @apply flex items-center w-max;

src/components/Button.vue

@@ -29,13 +29,13 @@ export default class Button extends Vue {
 <style scoped lang="postcss">
 @layer components {
     .btn {
-        @apply focus:outline-none transform active:-translate-y-px flex flex-row gap-2 justify-center items-center text-center leading-none border-btn-border border-button;
+        @apply flex flex-row gap-2 items-center justify-center text-center leading-none border-button border-btn-border focus:outline-none transform active:-translate-y-px;
     }
     .btn-lg {
-        @apply rounded px-5 py-4;
+        @apply px-5 py-4 rounded;
     }
     .btn-sm {
-        @apply rounded-sm px-2 py-2;
+        @apply px-2 py-2 rounded-sm;
     }
     .circle {
         @apply rounded-full;

src/components/Card.vue

@@ -57,24 +57,24 @@ export default class Card extends Vue {}
 <style scoped lang="postcss">
 @layer components {
     .card {
-        @apply box-border rounded-xl pt-4 pb-4 pl-5 pr-5 flex flex-col items-start border-card;
+        @apply flex flex-col items-start pb-4 pl-5 pr-5 pt-4 border-card rounded-xl box-border;
 
         > * + * {
             @apply my-5;
         }
 
         .card-header {
-            @apply w-full flex justify-between items-center;
+            @apply flex items-center justify-between w-full;
             .card-title-wrapper {
-                @apply flex justify-start items-center gap-2;
+                @apply flex gap-2 items-center justify-start;
                 .card-title {
                     @apply mr-1 text-xl font-semibold;
                 }
             }
         }
 
         .card-content {
-            @apply break-all mx-auto w-full h-full scrollbar-hide;
+            @apply scrollbar-hide mx-auto w-full h-full break-all;
             > .content-wrapper {
                 @apply min-h-20;
 
@@ -85,26 +85,26 @@ export default class Card extends Vue {}
             &.single-line {
                 @apply overflow-y-auto;
                 > .content-wrapper {
-                    @apply w-max px-4 pb-4;
+                    @apply pb-4 px-4 w-max;
                 }
             }
             &.PC-layout {
-                @apply overflow-y-auto max-h-36;
+                @apply max-h-36 overflow-y-auto;
             }
             .body-tips {
-                @apply flex w-full justify-center items-center;
+                @apply flex items-center justify-center w-full;
             }
         }
 
         .card-footer {
-            @apply w-full flex flex-row justify-between font-normal mt-auto mb-0;
+            @apply flex flex-row justify-between mb-0 mt-auto w-full font-normal;
 
             > * {
                 @apply flex m-auto mr-0;
             }
 
             .footer-tips {
-                @apply text-left font-extralight ml-0 flex justify-start text-sm;
+                @apply flex justify-start ml-0 text-left text-sm font-extralight;
             }
         }
     }

src/components/ContentBadge.vue

@@ -28,7 +28,7 @@ export default class NFTBadges extends Vue {
 <style scoped lang="postcss">
 @layer components {
     .badge {
-        @apply rounded-full border-sm border-item-border shadow-content-item bg-cover bg-center bg-no-repeat bg-item-bg flex justify-center items-center p-1 w-6 h-6;
+        @apply flex items-center justify-center p-1 w-6 h-6 bg-item-bg bg-cover bg-center bg-no-repeat border-sm border-item-border rounded-full shadow-content-item;
     }
 }
 </style>

src/components/ContentCard.vue

@@ -1,10 +1,10 @@
 <template>
-    <div class="w-full p-2 bg-transparent border-card text-body-text rounded cursor-pointer">
-        <h2 class="content-header font-semibold text-lg truncate">
+    <div class="p-2 w-full text-body-text bg-transparent border-card rounded cursor-pointer">
+        <h2 class="content-header text-lg font-semibold truncate">
             {{ title }}
         </h2>
         <div class="content-body" v-html="renderedContent" />
-        <section class="flex flex-row justify-start items-center gap-2">
+        <section class="flex flex-row gap-2 items-center justify-start">
             <span class="timestamp font-light opacity-50">
                 {{ getDate(timestamp) + ', on' }}
             </span>

src/components/EVMpAccountItem.vue

@@ -18,7 +18,7 @@
         <Button
             v-show="deleteMode"
             size="sm"
-            class="w-6 h-6 bg-account-btn-m text-account-btn-m-text shadow-account absolute top-0 right-0 z-20"
+            class="absolute z-20 right-0 top-0 w-6 h-6 text-account-btn-m-text bg-account-btn-m shadow-account"
             @click="deleteAccount"
         >
             <i class="bx bx-minus bx-sm"></i>
@@ -85,7 +85,7 @@ export default class EVMpAccountItem extends Vue {
 <style scoped lang="postcss">
 @layer components {
     .account-item {
-        @apply rounded-full border border-item-border filter shadow-account overflow-hidden flex justify-center items-center;
+        @apply flex items-center justify-center border border-item-border rounded-full shadow-account overflow-hidden filter;
 
         .icon {
             @apply bg-EVM bg-85 bg-center bg-no-repeat;

src/components/FollowerCard.vue

@@ -58,22 +58,22 @@ export default class FollowerCard extends Vue {
 <style scoped lang="postcss">
 @layer components {
     .follower-container {
-        @apply px-8 md:px-10 py-4 flex flex-row items-center justify-start gap-6 md:gap-10 rounded bg-body-bg shadow-follow-card;
+        @apply flex flex-row gap-6 items-center justify-start px-8 py-4 bg-body-bg rounded shadow-follow-card md:gap-10 md:px-10;
 
         .avatar > img {
-            @apply flex-shrink h-16 w-16 flex-grow-0 rounded-full object-cover;
+            @apply flex-grow-0 flex-shrink w-16 h-16 rounded-full object-cover;
         }
 
         .info {
             @apply flex-1 w-0;
         }
 
         .username {
-            @apply font-bold text-2xl truncate;
+            @apply text-2xl font-bold truncate;
         }
 
         .address {
-            @apply font-medium text-lg truncate;
+            @apply text-lg font-medium truncate;
         }
     }
 }

src/components/FootprintCard.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="flex flex-row justify-start gap-2 p-4">
+    <div class="flex flex-row gap-2 justify-start p-4">
         <FootprintItem :imageUrl="imageUrl" :size="78" class="flex-shrink-0" />
-        <section class="flex-1 flex flex-col justify-around text-sm leading-normal text-body-text">
+        <section class="flex flex-1 flex-col justify-around text-body-text text-sm leading-normal">
             <div class="flex flex-row gap-2 items-center">
                 <CalendarIcon />
                 <span class="flex-1 w-0 text-body-text truncate">{{ getDate() }}</span>
@@ -10,7 +10,7 @@
                 <LocationIcon />
                 <span class="flex-1 w-0 text-body-text truncate">{{ location }}</span>
             </div>
-            <div class="font-medium flex flex-row gap-2">
+            <div class="flex flex-row gap-2 font-medium">
                 <div class="text-footprint-title">{{ username }} attended</div>
                 <div class="flex-1 w-0 truncate">{{ activity }}</div>
             </div>

src/components/FootprintItem.vue

@@ -27,7 +27,7 @@ export default class FootprintItem extends Vue {
 <style scoped lang="postcss">
 @layer components {
     .footprint-item {
-        @apply rounded-full border border-white filter shadow-footprint bg-white bg-cover bg-center bg-no-repeat;
+        @apply bg-white bg-cover bg-center bg-no-repeat border border-white rounded-full shadow-footprint filter;
     }
 }
 </style>

src/components/GitcoinCard.vue

@@ -1,25 +1,25 @@
 <template>
     <div
         class="
-            w-full
             flex flex-row
-            justify-start
             items-center
-            rounded rounded-2xl
-            bg-body-bg
+            justify-start
+            w-full
             text-body-text
+            bg-body-bg
             border-card
+            rounded rounded-2xl
             shadow-gitcoin
             cursor-pointer
         "
     >
         <div
-            class="w-32 h-32 bg-cover bg-center bg-no-repeat rounded rounded-2xl m-0.5 flex-shrink"
+            class="flex-shrink m-0.5 w-32 h-32 bg-cover bg-center bg-no-repeat rounded rounded-2xl"
             :style="{ backgroundImage: `url(${imageUrl})` }"
         ></div>
-        <div class="w-45 flex-1 px-8">
-            <p class="w-full mb-2 font-semibold text-lg truncate">{{ name }}</p>
-            <div class="w-full flex flex-row gap-x-6 overflow-y-auto">
+        <div class="flex-1 px-8 w-45">
+            <p class="mb-2 w-full text-lg font-semibold truncate">{{ name }}</p>
+            <div class="flex flex-row gap-x-6 w-full overflow-y-auto">
                 <div>
                     <div class="font-medium">
                         <vue3-autocounter

src/components/GitcoinItem.vue

@@ -27,7 +27,7 @@ export default class GitcoinItem extends Vue {
 <style scoped lang="postcss">
 @layer components {
     .gitcoin-item {
-        @apply rounded border border-white filter shadow-gitcoin bg-white bg-cover bg-center bg-no-repeat;
+        @apply bg-white bg-cover bg-center bg-no-repeat border border-white rounded shadow-gitcoin filter;
     }
 }
 </style>

src/components/GitcoinTitle.vue

@@ -1,9 +1,9 @@
 <template>
-    <div class="w-full flex flex-col gap-y-2 text-gitcoin-title">
-        <div class="font-bold text-2xl">Total</div>
-        <div class="w-full flex flex-row justify-start gap-x-12 text-lg font-normal">
+    <div class="flex flex-col gap-y-2 w-full text-gitcoin-title">
+        <div class="text-2xl font-bold">Total</div>
+        <div class="flex flex-row gap-x-12 justify-start w-full text-lg font-normal">
             <div>
-                <div class="font-medium text-xl">
+                <div class="text-xl font-medium">
                     <vue3-autocounter
                         ref="counter"
                         :startAmount="0"
@@ -16,7 +16,7 @@
                 <div>Grants</div>
             </div>
             <div>
-                <div class="font-medium text-xl">
+                <div class="text-xl font-medium">
                     <vue3-autocounter
                         ref="counter"
                         :startAmount="0"