Update demo for SubConnect

Koniverse · Feb 3, 2024 · 6851ab7 · 6851ab7
1 parent 95476ba
commit 6851ab7
Show file tree

Hide file tree

Showing 78 changed files with 6,794 additions and 1,111 deletions.
diff --git a/.github/workflows/sw-build.yml b/.github/workflows/sw-build.yml
@@ -30,13 +30,14 @@ jobs:
           yarn build
 
       # === Deploy static pages ===
-      # deploy app to vercel
-      - name: deploy site to vercel
-        uses: amondnet/vercel-action@v20
+      - name: Deploy to Cloudflare Pages
+        id: cloudflare_deployment
+        uses: cloudflare/pages-action@v1
         with:
-          vercel-token: ${{ secrets.VERCEL_TOKEN }} # Required
-          github-token: ${{ secrets.GITHUB_TOKEN }} #Optional
-          vercel-args: '--prod' #Optional
-          vercel-org-id: ${{ secrets.ORG_ID}}  #Required
-          vercel-project-id: ${{ secrets.PROJECT_ID}} #Required
-          directory: './packages/demo'
+            apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+            accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+            projectName: 'w3o'
+            gitHubToken: ${{ secrets.GH_AUTOMATION_TOKEN }}
+            branch: ${{ github.event_name == 'pull_request' && format('pr-{0}', github.event.number) || github.ref_name }}
+            directory: './packages/demo/build'
+            wranglerVersion: '3'
diff --git a/package.json b/package.json
@@ -4,11 +4,9 @@
   "private": true,
   "workspaces": {
     "packages": [
-      "./packages/*",
-      "./packages/react"
+      "./packages/*"
     ],
     "nohoist": [
-      "**/react",
       "**/react-dom",
       "**/csstype"
     ]

diff --git a/packages/core/src/i18n/en.json b/packages/core/src/i18n/en.json
@@ -72,13 +72,15 @@
     },
     "confirmTransactionProtection": {
       "heading": "Enable Transaction Protection",
+      "subHeading": "Protect your transaction",
       "description": "Protect RPC endpoints hide your transaction from front-running and sandwich bots.",
       "link": "Learn more",
       "enable": "Enable",
       "dismiss": "Dismiss"
     },
     "confirmSignMessage": {
       "heading": "Sign Message",
+      "subHeading": "Sign Message to check the connectivity between your dapp and wallet.",
       "evmWallet": {
         "content": "Type Method Message"
       },

diff --git a/packages/core/src/views/Index.svelte b/packages/core/src/views/Index.svelte
@@ -385,6 +385,17 @@
     line-height: var(--onboard-font-line-height-3, var(--font-line-height-3));
   }
 
+  :global(.button-neutral-success){
+    height: 52px;
+    width: 100%;
+    padding: var(--spacing-4);
+    margin-top: 0 !important;
+    border-radius: var(--border-radius-5);
+    background: var(--success-500);
+    color: var(--onboard-white, var(--white));
+    line-height: var(--onboard-font-line-height-3, var(--font-line-height-3));
+  }
+
 
   :global(button.rounded) {
     border-radius: 24px;

diff --git a/packages/core/src/views/account-center/AccountCenterPanel.svelte b/packages/core/src/views/account-center/AccountCenterPanel.svelte
@@ -239,9 +239,8 @@
   .protect-text {
     font-size: var(--onboard-font-size-6, var(--font-size-6));
     color: var(
-      --account-center-maximized-upper-action-color,
-      var(--action-color)
-    );
+            --account-center-maximized-upper-action-color,
+            var(--text-color));
     line-height: 1.75rem;
     display: flex;
     align-items: center;

diff --git a/packages/core/src/views/account-center/DisconnectAllConfirm.svelte b/packages/core/src/views/account-center/DisconnectAllConfirm.svelte
@@ -21,12 +21,17 @@
     max-width: 390px;
   }
 
+  .content-description, .content-subHeading {
+    padding: 0 var(--spacing-4);
+  }
+
   .content-subHeading {
     color: var(--danger-600);
     font-weight: 600;
   }
 
   .content-description {
+    font-size: var(--font-size-6);
     color: rgba(255, 255, 255, 0.45);
     font-weight: 500;
   }
@@ -55,11 +60,11 @@
 </style>
 
 <Modal close={onClose} maskClose={true}>
-    <span class="title" slot="title">
-      {$_('modals.confirmDisconnectAll.heading', {
-        default: en.modals.confirmDisconnectAll.heading
-      })}
-    </span>
+  <span class="title" slot="title">
+    {$_('modals.confirmDisconnectAll.heading', {
+      default: en.modals.confirmDisconnectAll.heading
+    })}
+  </span>
   <div class="content width-100" slot="content">
     <span class="content-subHeading width-100">
       {$_('modals.confirmDisconnectAll.subHeading', {

diff --git a/packages/core/src/views/account-center/EnableTransactionProtectionModal.svelte b/packages/core/src/views/account-center/EnableTransactionProtectionModal.svelte
@@ -11,79 +11,83 @@
 
 <style>
   .content {
-    --background-color: var(--w3o-background-color);
-    --text-color: var(--w3o-text-color);
-    --action-color: var(--w3o-action-color, var(--primary-500));
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+    font-family: var(--onboard-font-family-normal, var(--font-family-normal));
+    font-size: var(--onboard-font-size-5, var(--font-size-5));
+    line-height: 24px;
+    text-align: center;
+    max-width: 390px;
+  }
 
-    font-size: 1rem;
-    line-height: 1.5rem;
+  .content-description, .content-subHeading {
+    padding: 0 var(--spacing-4);
+  }
 
-    display: flex;
-    flex-flow: column;
-    gap: 1.5rem;
-    padding: 1rem;
-    max-width: 320px;
+  .content-subHeading {
+    color: var(--success-500);
+    font-weight: 600;
+  }
 
-    background: var(--background-color);
-    color: var(--text-color);
+  .content-description {
+    font-size: var(--font-size-6);
+    color: rgba(255, 255, 255, 0.45);
+    font-weight: 500;
   }
 
   .icon-container {
     position: relative;
     overflow: hidden;
-    width: 3rem;
-    height: 3rem;
+    width: 2.625rem;
+    height: 2.625rem;
     border-radius: 24px;
     padding: 0.75rem;
     background: none;
   }
   .icon-container::before {
     content: '';
-    position: absolute;
     height: 100%;
     width: 100%;
     opacity: 0.2;
     background: var(--action-color);
   }
 
-  .text-container {
+  .title {
+    width: 300px;
     display: flex;
-    flex-flow: column;
-    gap: 0.5rem;
-    padding: 0 0.5rem;
+    align-items: center;
+    justify-content: center;
   }
 
-  .actions-container {
-    display: flex;
-    flex-flow: row nowrap;
-    gap: 1rem;
-  }
-
-  .heading {
-    font-weight: 600;
+  .width-100 {
+    width: 100%;
   }
 
-  button {
-    font-weight: 600;
+  .right {
+    margin-left: 0.5rem;
   }
 
-  button.primary {
-    background: var(--action-color);
+  button{
+    display: flex;
+    justify-content: center;
   }
 </style>
 
-<Modal close={onDismiss}>
-  <div class="content">
-    <div class="icon-container flex justify-center items-center">
-      {@html shieldIcon}
-    </div>
-
-    <div class="text-container">
-      <div class="heading">
-        {$_('modals.confirmTransactionProtection.heading', {
-          default: en.modals.confirmTransactionProtection.heading
-        })}
-      </div>
+<Modal close={onDismiss} maskClose={true}>
+  <div class="title" slot="title">
+    {$_('modals.confirmTransactionProtection.heading', {
+      default: en.modals.confirmTransactionProtection.heading
+    })}
+  </div>
+  <div class="content width-100" slot="content">
+    <span class="content-subHeading width-100">
+      {$_('modals.confirmTransactionProtection.subHeading', {
+        default: en.modals.confirmTransactionProtection.subHeading
+      })}
+    </span>
+    <div class="content-description">
       <div>
         {$_('modals.confirmTransactionProtection.description')}
       </div>
@@ -97,18 +101,22 @@
         })}
       </a>
     </div>
+  </div>
 
-    <div class="actions-container">
-      <button class="button-neutral-solid-b" on:click={onDismiss}>
-        {$_('modals.confirmTransactionProtection.dismiss', {
-          default: en.modals.confirmTransactionProtection.dismiss
-        })}
-      </button>
-      <button class="button-neutral-solid rounded primary" on:click={onEnable}>
-        {$_('modals.confirmTransactionProtection.enable', {
-          default: en.modals.confirmTransactionProtection.enable
-        })}
-      </button>
-    </div>
+  <div class="flex justify-between items-center" slot="footer">
+    <button class="button-neutral-confirm" on:click={onEnable}>
+      <div class="content-subHeading icon-container">
+        {@html shieldIcon}
+      </div>
+      {$_('modals.confirmTransactionProtection.enable', {
+        default: en.modals.confirmTransactionProtection.enable
+      })}
+    </button>
+
+    <button class="right button-neutral-solid" on:click={onDismiss}>
+      {$_('modals.confirmTransactionProtection.dismiss', {
+        default: en.modals.confirmTransactionProtection.dismiss
+      })}
+    </button>
   </div>
 </Modal>