Merge branch 'master' of github.com:FuelLabs/swayswap into refac/swap

* 'master' of github.com:FuelLabs/swayswap: (21 commits) fix: change css to be compatible with safari on ios 14 (#345) feat: add tx links for add/remove liquidity (#338) feat: improve height controll to avoid content hidden and colissions (#339) fix: get current blockheight to add on deadline (#342) fix: increase deadline (#341) feat: avoid multiple error notifications (#336) feat: loading button size (#335) chore: Revert "chore: remove launch app button on home" (#330) feat: make logo clickable (#327) feat: add more contrast to home text (#329) chore: remove launch app button on home (#325) chore: remove redundant docs link in header (#324) refactor: share button link direct to twitter (#321) feat: update contract ids on gh release (#319) refactor: twitter share feature (#316) feat: add eth and token amount on init pool action (#318) chore: fix typo (#317) style: bump tx feedback 5s -> 8s (#313) feat: add block explorer links on swap feedback and wallet info (#308) feat: improve checkbox ui for legal disclaimer (#310) ...
FuelLabs · Jun 24, 2022 · 0107f73 · 0107f73
2 parents 536cf09 + 1d75126
commit 0107f73
Show file tree

Hide file tree

Showing 67 changed files with 1,428 additions and 898 deletions.
diff --git a/.github/workflows/deploy-contracts.yml b/.github/workflows/deploy-contracts.yml
@@ -17,6 +17,12 @@ on:
       gas_price:
         description: 'Min gas price required from the provider'
         type: number
+      token_amount:
+        description: 'Token amount to be used on pool initialization'
+        type: string
+      eth_amount:
+        description: 'Eth amount to be used on pool initialization'
+        type: string
       initiate_supply:
         description: 'Should initialize the pool?'
         required: true

diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
@@ -40,8 +40,8 @@ jobs:
           CI: false
           PUBLIC_URL: "/${{ github.event.repository.name }}"
           VITE_FUEL_PROVIDER_URL: "https://node.swayswap.io/graphql"
-          VITE_CONTRACT_ID: "0x4d7e56f79ad160ecd8f0da0833edd62044026bdab65275fa3a34e6a855b96ccc"
-          VITE_TOKEN_ID: "0xe3ee9322336a734296dd53afe9b90b1bfc7c716762844669b7895ca9ad438b88"
+          VITE_CONTRACT_ID: "0x859863e191275ed34940c1ee827c7531b387a775104afba350166ee90c30987c"
+          VITE_TOKEN_ID: "0x9a92f01a55c59e8a3a7860acac1264a1015470e6c868b2ad6e148f4ba7757f73"
         run: |
           pnpm build
 

diff --git a/package.json b/package.json
@@ -47,7 +47,7 @@
     "services:setup-test": "NODE_ENV=test run-s scripts:setup create:test-env services:run-test contracts contracts:init",
     "services:run-test": "make -C docker services-run-test",
     "services:reset-test": "NODE_ENV=test run-s services:clean-test services:setup-test",
-    "update-deps": "./scripts/update-deps.sh",
+    "deps:update": "./scripts/update-deps.sh",
     "test": "pnpm run --filter=swayswap-app test",
     "test:coverage": "pnpm run --filter=swayswap-app test --coverage",
     "test:clear": "pnpm -r exec jest --clearCache",
@@ -82,5 +82,17 @@
     "turbo": "^1.2.16",
     "typescript": "^4.7.3",
     "updates": "^13.1.0"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "allowAny": [
+        "react",
+        "react-dom"
+      ],
+      "ignoreMissing": [
+        "react",
+        "react-dom"
+      ]
+    }
   }
 }
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -23,7 +23,7 @@
     "@ethersproject/units": "^5.6.1",
     "@fontsource/inter": "^4.5.11",
     "@fontsource/raleway": "^4.5.9",
-    "@headlessui/react": "^1.6.4",
+    "@headlessui/react": "^1.6.5",
     "@radix-ui/react-accordion": "^0.1.6",
     "@radix-ui/react-alert-dialog": "^0.1.7",
     "@radix-ui/react-tooltip": "^0.1.7",
@@ -49,9 +49,9 @@
     "clipboard": "^2.0.11",
     "cross-fetch": "^3.1.5",
     "decimal.js": "^10.3.1",
-    "ethers": "^5.6.8",
-    "framer-motion": "^6.3.11",
-    "fuels": "0.0.0-master-3caba861",
+    "ethers": "^5.6.9",
+    "framer-motion": "^6.3.15",
+    "fuels": "0.0.0-master-b32f29b9",
     "graphql-request": "^4.3.0",
     "jotai": "^1.7.2",
     "mitt": "^3.0.0",
@@ -92,7 +92,7 @@
     "http-server": "^14.1.1",
     "postcss": "^8.4.14",
     "postcss-import": "^14.1.0",
-    "tailwindcss": "^3.1.3",
+    "tailwindcss": "^3.1.4",
     "ts-node": "^10.8.1",
     "typescript": "^4.7.4",
     "vite": "^2.9.12"

diff --git a/packages/app/scripts/contracts-init/initializePool.ts b/packages/app/scripts/contracts-init/initializePool.ts
@@ -11,7 +11,7 @@ export async function initializePool(
   overrides: Overrides
 ) {
   const wallet = tokenContract.wallet!;
-  const tokenAmount = BigInt(TOKEN_AMOUNT || '2000000000000000');
+  const tokenAmount = BigInt(TOKEN_AMOUNT || '1200000000000000');
   const ethAmount = BigInt(ETH_AMOUNT || '1000500000000');
   const address = {
     value: wallet.address,

diff --git a/packages/app/src/config.ts b/packages/app/src/config.ts
@@ -18,10 +18,12 @@ export const SLIPPAGE_TOLERANCE = 0.005;
 /** Small network fee */
 export const NETWORK_FEE = 1;
 /** Default deadline */
-export const DEADLINE = 5000;
+export const DEADLINE = 1000;
 /** Max presentation units to avoid show 9 decimals on screen */
 export const FIXED_UNITS = 3;
 /** Min gas price required from the fuel-core */
 export const GAS_PRICE = 1;
 /** Min byte price required from the fuel-core */
 export const BYTE_PRICE = 1;
+/** Base block explorer url */
+export const BLOCK_EXPLORER_URL = 'https://fuellabs.github.io/block-explorer-v2';
diff --git a/packages/app/src/styles/base.css b/packages/app/src/styles/base.css
diff --git a/...p/src/styles/components/faucet-widget.css → .../src/styles/components/actions-widget.css b/...p/src/styles/components/faucet-widget.css → .../src/styles/components/actions-widget.css
@@ -1,17 +1,38 @@
 @layer components {
-  .faucetWidget {
-    @apply fixed bottom-0 p-4 pt-0;
+  .actionsWidget {
+    @apply flex gap-1 mt-6 self-start flex-1 items-end pb-0;
 
-    & > button {
-      @apply bg-gray-800 rounded-full;
+    @media (min-width: 834px) {
+      @apply p-6 fixed bottom-0 left-0;
     }
+
+    & a,
+    & a:hover {
+      @apply no-underline;
+    }
+  }
+
+  .actionsWidget--btn {
+    @apply px-4 bg-gray-800 rounded-full h-10;
   }
 
-  .faucetWidget--tour {
-    @apply fixed bottom-5 left-5 outline-none;
+  .actionsWidget--shareBtn {
+    @apply px-3 gap-0 transition-all ease-linear;
+
+    & .content {
+      @apply w-0 opacity-0;
+    }
+
+    &:hover {
+      @apply px-4 gap-2;
+    }
+
+    &:hover .content {
+      @apply w-[auto] opacity-100;
+    }
   }
 
-  .faucetWidget--dialog {
+  .faucetDialog {
     @apply min-w-[auto];
 
     & .card {
@@ -23,14 +44,6 @@
     }
   }
 
-  .faucetWidget--formRow {
-    @apply mt-3;
-  }
-
-  .faucetWidget--label {
-    @apply mb-2 flex text-sm;
-  }
-
   .faucetCaptcha {
     @apply mt-4 mx-6 flex items-center justify-center;
   }

diff --git a/packages/app/src/styles/components/button.css b/packages/app/src/styles/components/button.css
@@ -1,6 +1,6 @@
 @layer components {
   .button {
-    @apply appearance-none transition-main inline-flex items-center rounded-md gap-2;
+    @apply appearance-none transition-main grid grid-flow-col items-center rounded-xl gap-2;
     @apply border focus-ring btn-active cursor-pointer;
 
     &[aria-disabled="true"] {

diff --git a/packages/app/src/styles/components/card.css b/packages/app/src/styles/components/card.css
@@ -1,9 +1,9 @@
 @layer components {
   .card {
     @apply bg-gray-800 rounded-xl py-3;
-    min-width: calc(100vw - 40px);
+    min-width: 100%;
 
-    @media (min-width: 450px) {
+    @media (min-width: 640px) {
       min-width: 450px;
     }
   }

diff --git a/packages/app/src/styles/components/coin-input.css b/packages/app/src/styles/components/coin-input.css
@@ -1,6 +1,6 @@
 @layer components {
   .coinInput {
-    @apply bg-gray-700 rounded-2xl p-2 border border-gray-700;
+    @apply bg-gray-700 rounded-xl p-2 border border-gray-700;
   }
   .coinInput--input {
     @apply w-[100px] flex-1 ml-2 h-10 bg-transparent placeholder:text-gray-300;

diff --git a/packages/app/src/styles/components/header.css b/packages/app/src/styles/components/header.css
@@ -1,12 +1,12 @@
 @layer components {
   .header {
-    @apply sticky grid p-4 py-3 sm:py-4;
+    @apply sticky top-0 w-full grid p-4 pb-0;
   }
   .header--navContainer {
     @apply px-1 gap-1 flex bg-gray-800 rounded-xl sm:rounded-3xl;
   }
   .header--navItem {
-    @apply py-1 px-3 my-1 text-base rounded-lg sm:rounded-full border-transparent;
+    @apply py-1 px-3 my-1 text-base rounded-xl sm:rounded-full border-transparent;
     @apply text-gray-400 hover:bg-gray-500/20 hover:text-gray-200;
   }
   .header--navItemActive {
@@ -20,9 +20,12 @@
   }
   .header img {
     grid-area: 1 / 1 / 2 / 2;
+    height: 40px;
+    width: 40px;
   }
   .header--wallet {
-    place-self: end;
+    @apply flex items-center gap-1;
+    place-self: center end;
     grid-area: 1 / 1 / 2 / 3;
   }
   .header--nav {
@@ -36,9 +39,11 @@
     }
     .header img {
       grid-area: 1 / 1 / 2 / 2;
+      height: 46px;
+      width: 46px;
     }
     .header--wallet {
-      place-self: end;
+      place-self: center end;
       grid-area: 1 / 4 / 2 / 9;
     }
     .header--nav {
@@ -55,9 +60,11 @@
     }
     .header img {
       grid-area: 1 / 1 / 2 / 2;
+      height: 46px;
+      width: 46px;
     }
     .header--wallet {
-      place-self: end;
+      place-self: center end;
       grid-area: 1 / 4 / 2 / 9;
     }
     .header--nav {

diff --git a/packages/app/src/styles/components/home-page.css b/packages/app/src/styles/components/home-page.css
@@ -2,28 +2,42 @@
   .homePage {
     @apply p-6 flex flex-col h-[100vh] justify-between bg-cover;
     background-image: url("/lp-bg.jpg");
+
+    @media (max-width: 640px) {
+      @apply mobile-fit-screen;
+      height: auto;
+    }
   }
 
   .homePage--header {
     @apply flex justify-between font-semibold;
+
+    img {
+      height: 46px;
+      width: 46px;
+    }
   }
 
   .homePage--menu {
-    @apply flex items-center gap-4 lg:gap-6 text-lg;
+    @apply flex items-center text-lg;
+
+    > * {
+      @apply ml-4 lg:ml-6;
+    }
 
     & a {
       @apply text-gray-200;
     }
   }
 
   .homePage--hero {
-    @apply p-4 lg:p-10 text-gray-100 max-w-[500px] lg:max-w-[700px];
+    @apply p-4 lg:p-10 text-gray-50 max-w-[500px] lg:max-w-[700px];
 
     h1 {
       @apply text-3xl sm:text-4xl font-bold font-display;
     }
     p {
-      @apply text-gray-300 my-6;
+      @apply text-gray-100 my-6;
     }
   }
 }
diff --git a/packages/app/src/styles/components/input.css b/packages/app/src/styles/components/input.css
@@ -1,6 +1,6 @@
 @layer components {
   .input {
-    @apply appearance-none w-full rounded-md bg-gray-700 px-4 py-2 outline-none;
+    @apply appearance-none w-full rounded-xl bg-gray-700 px-4 py-2 outline-none;
 
     &:not(.input--readOnly) {
       @apply focus-ring text-gray-100;

diff --git a/packages/app/src/styles/components/main-layout.css b/packages/app/src/styles/components/main-layout.css
@@ -3,19 +3,20 @@
     @apply flex flex-col;
     @apply h-screen text-gray-100 overflow-hidden;
 
-    @media (min-width: 600px) {
-      @apply grid;
-      grid-template-rows: auto 1fr;
+    @media (max-width: 640px) {
+      @apply mobile-fit-screen;
+      height: auto;
     }
   }
   .mainLayout--wrapper {
-    @apply flex justify-center items-start p-4 pb-16 sm:pt-14 overflow-y-auto;
+    @apply flex flex-1 flex-col items-center p-4 pt-10 sm:pt-16 overflow-y-auto;
   }
+
   .mainLayout-errorContent {
-    @apply w-[30rem] flex-1 rounded-2xl p-4 m-2;
+    @apply w-[30rem] flex-1 rounded-xl p-4 m-2;
   }
   .mainLayout-confirmBtn {
-    @apply bg-primary-500 my-2 rounded-2xl py-2 px-8 text-l font-semibold;
+    @apply bg-primary-500 my-2 rounded-xl py-2 px-8 text-l font-semibold;
     @apply items-center justify-center cursor-pointer border;
     @apply border-primary-500 hover:border-primary-600 mt-8;
   }

diff --git a/packages/app/src/styles/components/toast.css b/packages/app/src/styles/components/toast.css
@@ -1,7 +1,7 @@
 @layer components {
   .toast {
     @apply px-4 py-3 flex items-center gap-2 bg-gray-800 text-gray-50;
-    @apply rounded-lg;
+    @apply rounded-xl;
 
     & div[role="status"] {
       display: -webkit-box;

diff --git a/packages/app/src/styles/components/tooltip.css b/packages/app/src/styles/components/tooltip.css
@@ -1,6 +1,6 @@
 @layer components {
   .tooltip {
-    @apply bg-gray-900 text-gray-900 text-xs text-center leading-relaxed rounded-lg py-2 px-3;
+    @apply bg-gray-900 text-gray-900 text-xs text-center leading-relaxed rounded-xl py-2 px-3;
   }
 
   .tooltip--content {