Merge pull request #284 from consensusnetworks/feature/sync-app

Feature/sync app
consensusnetworks · Mar 13, 2023 · ed049b9 · ed049b9
2 parents 3e76b03 + 88f4332
commit ed049b9
Show file tree

Hide file tree

Showing 21 changed files with 950 additions and 830 deletions.
diff --git a/apps/web/index.html b/apps/web/index.html
@@ -17,9 +17,7 @@
     <title>Casimir</title>
   </head>
   <body>
-    <div style="background: #d9d9d9; min-width: 360px; overflow: auto;">
-      <div id="app"></div>
-    </div>
+    <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/apps/web/src/components/charts/LineChart.vue b/apps/web/src/components/charts/LineChart.vue
@@ -42,6 +42,11 @@ const props = defineProps({
 })
 
 onMounted(() => {
+    // const getTransition = () => {
+    //     return d3.transition()
+    //             .duration(500)
+    // }
+
     let WIDTH = 0
     let HEIGHT =  0
     const svg_line_chart_container_el = document.getElementById('line_chart_container' + props.chartId)
@@ -87,10 +92,11 @@ onMounted(() => {
             yAxisRange = [HEIGHT, 0]
         }
 
+
         x = d3.scaleTime().range(xAxisRange)
         y = d3.scaleLinear().range(yAxisRange)
 
-
+        // xAxisCall = d3.axisBottom()
         // dynamic x axis labeling based on width
         if(WIDTH <= width_breaking_point_medium){
             xAxisCall = d3.axisBottom()
@@ -139,7 +145,9 @@ onMounted(() => {
             const yValue = props.yAxisValue
 
             // 1.015 is just for adding a little bit of spacing for the y domain 
-            x.domain(d3.extent(data, d => d[props.xAxisValue]))
+            x.domain(d3.extent(data, d => {
+                return d[props.xAxisValue]
+            }))
             y.domain([
                 d3.min(data, d => d[yValue]) / 1.015, 
                 d3.max(data, d => d[yValue]) * 1.015
@@ -211,7 +219,7 @@ onMounted(() => {
                 .y(d => y(d[yValue]))
 
             g.select('.line')
-            .transition(d3.transition().duration(500))
+            // .transition(getTransition())
             .attr('d', line(data))
             .attr('stroke', props.lineColor)
         }

diff --git a/apps/web/src/components/navigation/TopNav.vue b/apps/web/src/components/navigation/TopNav.vue
@@ -1,18 +1,22 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import MultiwalletConnect from './components/MultiwalletConnect.vue'
 import StakingProtocols from './components/StakingProtocols.vue'
 import useUsers from '@/composables/users'
 
 const { user } = useUsers()
 
 // To Do: connect this to our Auth and see if an account exsists
-const account = ref(true)
+const account = ref(user.value? user.value.address? true: false : false)
+
+watch(user, ()=> {
+  account.value = user.value? user.value.address? true: false : false
+})
 </script>
 
 <template>
   <div 
-    class="w-full border-b border-b-grey_2 h-70 flex
+    class="w-full bg-white border-b border-b-grey_2 h-70 flex
     justify-center items-center"
   >
     <div 

diff --git a/apps/web/src/components/navigation/components/MultiwalletConnect.vue b/apps/web/src/components/navigation/components/MultiwalletConnect.vue
@@ -5,7 +5,7 @@ import { ref, watch, onMounted } from 'vue'
 import useWallet from '@/composables/wallet'
 import useUsers from '@/composables/users'
 
-const { user, createDemoUser } = useUsers()
+const { user } = useUsers()
 const {
   connectWallet,
 } = useWallet()
@@ -221,9 +221,8 @@ const copyWalletAddress = (text: string) => {
             </button>
             <button
               class="btn_primary font-bold px-10 py-6 whitespace-nowrap"
-              @click="createDemoUser(false)"
             >
-              Disconnect User
+              Disconnect Account
             </button>
           </div>
           <!-- <div
@@ -273,12 +272,6 @@ const copyWalletAddress = (text: string) => {
           <h6 class="text-grey_2 font-medium">
             No Wallets Connected
           </h6>
-          <button
-            class="btn_primary font-bold px-10 py-6"
-            @click="createDemoUser(true)"
-          >
-            Demo <i class="iconoir-play" />
-          </button>
         </div>
       </div>
     </div>

diff --git a/apps/web/src/composables/ethers.ts b/apps/web/src/composables/ethers.ts
@@ -136,6 +136,7 @@ export default function useEthers() {
     const browserProvider = availableProviders.value[providerString as keyof BrowserProviders]
     const web3Provider: ethers.providers.Web3Provider = new ethers.providers.Web3Provider(browserProvider as EthersProvider)
     const network = await web3Provider.getNetwork()
+    console.log('network.chainId :>> ', network.chainId)
     const { currency } = currenciesByChainId[network.chainId.toString() as keyof typeof currenciesByChainId]
     return currency
   }
@@ -242,6 +243,10 @@ const currenciesByChainId = {
     name: 'Polygon',
     currency: 'MATIC',
   },
+  '31337': {
+    name: 'Localhost Network',
+    currency: 'ETH',
+  },
   '80001': {
     name: 'Polygon Testnet',
     currency: 'MATIC',

diff --git a/apps/web/src/composables/exchanges.ts b/apps/web/src/composables/exchanges.ts
@@ -0,0 +1,39 @@
+
+import { Currency } from '@casimir/types'
+
+export default function useExchanges () {
+    async function getConversionRate (from: Currency, to: Currency, date: string) {
+        const timestamp = Math.floor(new Date(date).getTime() / 1000)
+        const options = {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                'authorization': `Apikey ${import.meta.env.PUBLIC_CRYPTO_COMPARE_API_KEY}`
+            }
+        }
+        const response = await fetch (`https://min-api.cryptocompare.com/data/pricehistorical?fsym=${from}&tsyms=${to}&ts=${timestamp}`, options)
+        const { [from]: data } = await response.json()
+        return data[to]
+    }
+
+    function convertToWholeUnits (currency: Currency, amount: number) {
+        switch (currency) {
+            case 'BTC':
+                return amount / 100000000
+                break
+
+            case 'ETH':
+                return amount / 1000000000000000000
+                break
+
+            default:
+                break
+        }
+    }
+
+
+    return { 
+        getConversionRate,
+        convertToWholeUnits
+    }
+}
diff --git a/apps/web/src/composables/users.ts b/apps/web/src/composables/users.ts
@@ -9,7 +9,7 @@ import { Currency } from '@casimir/types'
 import { ProviderString } from '@casimir/types'
 
 const { usersBaseURL, ethereumURL } = useEnvironment()
-import { dummy_user_account } from '@/pages/user-dash/composables/dummy_data.js'
+
 // 0xd557a5745d4560B24D36A68b52351ffF9c86A212
 const user = ref<User>()
 const { ssvManager } = useSSV()
@@ -136,22 +136,13 @@ export default function useUsers () {
         return await fetch(`${usersBaseURL}/users/update-primary-account`, requestOptions)
     }
 
-    const createDemoUser = (toggle: boolean) => {
-        if(toggle) {
-            user.value = dummy_user_account
-        }
-        else {user.value = null}
-        console.log('new user', user.value)
-    }
-
     return {
         user,
         getUser,
         setUser,
         addAccount,
         removeAccount,
         getMessage,
-        createDemoUser,
         updatePrimaryAddress
     }
 }
diff --git a/apps/web/src/composables/wallet.ts b/apps/web/src/composables/wallet.ts
@@ -18,6 +18,9 @@ import * as Session from 'supertokens-web-js/recipe/session'
 // Test solana address: 7aVow9eVQjwn7Y4y7tAbPM1pfrE1TzjmJhxcRt8QwX5F
 // Test iotex send to address: acc://06da5e904240736b1e21ca6dbbd5f619860803af04ff3d54/acme
 // Test bitcoin send to address : 2N3Petr4LMH9tRneZCYME9mu33gR5hExvds
+
+const loadingUserWallets = ref(false)
+
 const loggedIn = ref(false)
 const selectedProvider = ref<ProviderString>('')
 const selectedAddress = ref<string>('')
@@ -56,6 +59,12 @@ export default function useWallet() {
         console.log('No currency selected')
         resolve('No currency selected')
       }) as Promise<string>
+    },
+    'USD': () => {
+      return new Promise((resolve, reject) => {
+        console.log('USD is not yet supported on Ledger')
+        resolve('USD is not yet supported on Ledger')
+      }) as Promise<string>
     }
   }
 
@@ -80,12 +89,15 @@ export default function useWallet() {
   }
 
   async function connectWallet(provider: ProviderString, currency?: Currency) {
+    let response 
     try { // Sign Up or Login
       if (!loggedIn.value) {
+        loadingUserWallets.value = true
         const connectedAddress = await getConnectedAddress(provider, currency)
         const connectedCurrency = await detectCurrency(provider) as Currency
-        const response = await loginWithWallet(provider, connectedAddress, connectedCurrency)
-        if (!response?.error) { 
+        response = await loginWithWallet(provider, connectedAddress, connectedCurrency)
+        loadingUserWallets.value = false
+        if (!response?.error) {
           await getUserAccount()
           setSelectedProvider(provider)
           setSelectedAddress(connectedAddress)
@@ -97,7 +109,7 @@ export default function useWallet() {
         console.log('already logged in!')
         const connectedAddress = await getConnectedAddress(provider, currency) // TODO: Remove currency from here? Maybe not.
         const connectedCurrency = await detectCurrency(provider, currency) as Currency
-        const response = await addAccount(provider, connectedAddress, connectedCurrency)
+        response = await addAccount(provider, connectedAddress, connectedCurrency)
         if (!response?.error) {
           setSelectedProvider(provider)
           setSelectedAddress(connectedAddress)
@@ -109,6 +121,8 @@ export default function useWallet() {
     } catch (error) {
       console.error(error)
     }
+    console.log(response)
+    return response
   }
   async function getConnectedAddress(provider: ProviderString, currency?: Currency) {
     try {
@@ -151,6 +165,7 @@ export default function useWallet() {
   }
 
   async function logout() {
+    loadingUserWallets.value = true
     await Session.signOut()
     loggedIn.value = false
     setSelectedAddress('')
@@ -159,6 +174,7 @@ export default function useWallet() {
     setUser()
     primaryAddress.value = ''
     console.log('user.value on logout :>> ', user.value)
+    loadingUserWallets.value = false
   }
 
   async function setPrimaryWalletAccount() {
@@ -303,6 +319,7 @@ export default function useWallet() {
     toAddress,
     amount,
     amountToStake,
+    loadingUserWallets,
     connectWallet,
     logout,
     setPrimaryWalletAccount,

diff --git a/apps/web/src/index.css b/apps/web/src/index.css
@@ -9,6 +9,7 @@ text-rendering: optimizeLegibility;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 -webkit-text-size-adjust: 100%;
+overflow: hidden;
 }
 
 /* scrollbar stuff works for all browsers except firefox... */
@@ -34,14 +35,7 @@ border-radius: 5px;
 background: #555;
 }
 
-#app {
-/* max-width: 1280px;
-min-width: 360px;
-overflow: auto;
-margin: 0 auto; */
-height: 100vh;
-background: #fff;
-}
+#app {}
 
 
 @layer base {
@@ -187,9 +181,9 @@ background: #fff;
         @apply h-35 w-35;
     }
     .supported_wallet_box {
-        @apply border border-grey flex 
+        @apply border border-grey flex
         justify-between items-center px-15 py-10
-        w-[100%] mx-auto;       
+        w-[100%];       
     } 
     .supported_wallet_box:hover {
         @apply border-blue_3;