Merge branch 'develop' into or/issue-760/build-advanced-wallet-setup

Author: Ovifer13

api/schema/resolvers/ContributorResolver.js

@@ -82,6 +82,13 @@ module.exports = {
                     contributor_id: contributor.id
                 }
             })
+        },
+        wallet: async (root, args, { cookies, models }) => {
+            return models.Wallet.findOne({
+                where: {
+                    contributor_id: cookies.userSession
+                }
+            })
         }
     },
     Query: {

api/schema/resolvers/WalletResolver.js

@@ -7,15 +7,16 @@ module.exports = {
     Query: {
     },
     Mutation: {
-        updateContributorOnChainAddress: async (root, { contributor_id, address }, { models }) => {
+        updateContributorOnChainAddress: async (root, { contributor_id, address }, { cookies, models }) => {
+            const contributorId = cookies.userSession ?? contributor_id
             const contributorWallet = await models.Wallet.findOne({
                 where: {        
-                    contributor_id: contributor_id
+                    contributor_id: contributorId
                 }
             })
             if (!contributorWallet) {
                 const createFields = {
-                    contributor_id: contributor_id,
+                    contributor_id: contributorId,
                     onchain_address: address
                 }
                 const wallet = await models.Wallet.create({
@@ -32,7 +33,7 @@ module.exports = {
             })
             return models.Wallet.findOne({
                 where: {        
-                    contributor_id: contributor_id
+                    contributor_id: contributorId
                 }
             })
         },

api/schema/types/ContributorType.js

@@ -19,6 +19,7 @@ module.exports = gql`
         "The following attributes are calculated and aren't on the database"
         totalPaid: Int!
         paidByCurrency: [TotalAllocatedByCurrency]
+        wallet: Wallet
     }
 
     input CreateContributorInput {

src/components/AllocationTile.js

@@ -19,7 +19,7 @@ import {
 } from '../scripts/selectors'
 import colors from '../styles/colors.module.scss'
 
-const { grey, orange, red, setlifeBlue } = colors
+const { gray, orange, red, setlifeBlue } = colors
 
 const AllocationTile = (props) => {
 
@@ -98,7 +98,7 @@ const AllocationTile = (props) => {
                     <Box
                         color={
                             `${!allocation.date_paid
-                                ? `${grey}`
+                                ? `${gray}`
                                 : futureAllocation
                                     ? `${orange}`
                                     : `${setlifeBlue}`
@@ -120,7 +120,7 @@ const AllocationTile = (props) => {
                     <Box
                         color={
                             `${!allocation.date_paid
-                                ? `${grey}`
+                                ? `${gray}`
                                 : weeksOfdDifference == 2
                                     ? `${red}`
                                     : futureAllocation

src/components/ProjectSummary.js

@@ -67,7 +67,7 @@ const ProjectSummary = (props) => {
                                 <Grid xs={10} align='left'>
                                     <Typography 
                                         variant='' 
-                                        className='grey-link'
+                                        className='gray-link'
                                         onClick={goToClientPage}
                                     >
                                         <span>

src/styles/App.scss

@@ -49,10 +49,10 @@ body {
     //color: $blue;
 }
 
-.grey-link {
+.gray-link {
     cursor: pointer;
     :hover {
-        color: $grey
+        color: $gray
     }
 }
 

src/styles/Navigation.scss

@@ -11,7 +11,7 @@
     }
     .icon-settings {
         cursor: pointer;
-        color: $grey;
+        color: $gray;
         opacity: 0.5;
         transition: opacity .5s;
     }

src/styles/RangeDatePicker.scss

@@ -32,7 +32,7 @@
 
     .date-picker {
         border: 1px solid $light_grey;
-        color: $grey;
+        color: $gray;
 
 
 

src/styles/colors.module.scss

@@ -3,7 +3,7 @@ $black: #000000;
 $blue: #2196f3;
 $dark-blue: #009BAD;
 $green: #4caf50;
-$grey: #828282;
+$gray: #828282;
 $light_blue: #d9f6f8;
 $light_grey: #F1F1F1;
 $orange: #ff9800;
@@ -16,7 +16,7 @@ $white: #FFFFFF;
     setlifeBlue: $setlife-blue;
     lightBlue: $light_blue;
     darkBlue: $dark-blue;
-    grey: $grey;
+    gray: $gray;
     lightGrey: $light_grey;
     white: $white;
     black: $black;

src/styles/theme.js

@@ -15,7 +15,7 @@ const {
     setlifeBlue,
     lightBlue,
     darkBlue,
-    grey,
+    gray,
     lightGrey,
     black,
     white
@@ -75,7 +75,7 @@ const theme = createMuiTheme({
             light: white
         },
         secondary: {
-            main: grey,
+            main: gray,
             light: lightGrey
         },
         action: {

srcv2/App.js

@@ -15,6 +15,7 @@ import OnboardingPage from './pages/OnboardingPage'
 import OnboardingContributorPage from './pages/OnboardingContributorPage'
 import ProjectDetailPage from './pages/ProjectDetailPage'
 import WalletSetupPage from './pages/WalletSetupPage'
+import WalletSimpleSetupPage from './pages/WalletSimpleSetupPage'
 import AdvancedWalletSetup from './components/AdvancedWalletSetup'
 
 class App extends React.Component {
@@ -74,7 +75,12 @@ class App extends React.Component {
                         exact
                         path='/wallet/setup'
                         component={WalletSetupPage}
-                    />  
+                    />   
+                    <PrivateRoute 
+                        exact
+                        path='/wallet/setup/simple'
+                        component={WalletSimpleSetupPage}
+                    />            
                     <PrivateRoute 
                         exact
                         path='/wallet/setup/advanced'

srcv2/components/AllocationTile.js

@@ -93,7 +93,7 @@ const AllocationTile = (props) => {
                         </p>
                         {allocation.status == 'pending' &&
                             <button type='button' onClick={() => setAllocationOptionsOpen(!allocationOptionsOpen)}>
-                                <Icon className='fas fa-chevron-down my-auto text-grey'/>
+                                <Icon className='fas fa-chevron-down my-auto text-gray'/>
                             </button>
                         }
                     </div>

srcv2/components/BudgetingOnboarding.js

@@ -26,10 +26,10 @@ const BudgetingOnboarding = (props) => {
                         <p className='text-3xl text-center font-bold'>
                             Budgeting
                         </p>
-                        <p className='text-grey text-xl text-center font-bold'>
+                        <p className='text-gray text-xl text-center font-bold'>
                             Allocate funds to your team
                         </p>
-                        <p className='text-grey text-xl text-center font-bold'>
+                        <p className='text-gray text-xl text-center font-bold'>
                             Negotiate compensation rates
                         </p>
                     </div>

srcv2/components/ProjectTile.js

@@ -21,7 +21,7 @@ const ProjectTile = (props) => {
                     <p>{project.expected_budget_currency}</p>
                 </div>
             </div>
-            <hr/>
+            <hr className='text-light'/>
         </div>
     )
 }

srcv2/components/WalletOption.js

@@ -28,13 +28,13 @@ const WalletOption = ({
                 <div className={`bg-white rounded-lg border-light border-2 !py-3 px-6`}>
                     <div className='flex'>
                         <div className='mr-4 self-center'>
-                            <Icon className={`icon fas fa-${icon} my-auto !w-8 ${disabled ? 'text-grey' : 'text-setlife'}`}/>
+                            <Icon className={`icon fas fa-${icon} my-auto !w-8 ${disabled ? 'text-gray' : 'text-setlife'}`}/>
                         </div>
                         <div>
-                            <p className={`text-base font-semibold ${disabled ? 'text-grey' : ''}`}>
+                            <p className={`text-base font-semibold ${disabled ? 'text-gray' : ''}`}>
                                 {`${count + 1}. ${title}`}
                             </p>
-                            <p className={`text-sm ${disabled ? 'text-grey' : ''}`}>
+                            <p className={`text-sm ${disabled ? 'text-gray' : ''}`}>
                                 {subtitle}
                             </p>
                         </div>

srcv2/operations/mutations/WalletMutations.js

@@ -1,5 +1,15 @@
 import { gql } from '@apollo/client';
 
+export const UPDATE_WALLET_ADDRESS = gql`
+    mutation updateContributorOnChainAddress(
+        $address: String!
+    ) {
+        updateContributorOnChainAddress(address: $address) {
+            id
+        }
+    }
+`
+
 export const UPDATE_NODE = gql`
     mutation updateContributorNode(
         $host: String,

srcv2/operations/queries/ContributorQueries.js

@@ -11,6 +11,9 @@ export const CHECK_SESSION = gql`
             toggl_id
             external_data_url
             totalPaid
+            wallet {
+                onchain_address
+            }
         }
     }
 `

srcv2/pages/LandingPage.js

@@ -34,7 +34,7 @@ const LandingPage = () => {
         return FEATURES.map((feature, idx) => {
             const goals = feature.goals.map(goal => {
                 return (
-                    <p className='goal text-center font-bold text-xl text-grey'>
+                    <p className='goal text-center font-bold text-xl text-gray'>
                         {goal}
                     </p>
                 )
@@ -66,7 +66,7 @@ const LandingPage = () => {
                         <p className='text-5xl text-center font-bold'>
                             Trinary
                         </p>
-                        <p className='text-grey text-2xl text-center font-bold'>
+                        <p className='text-gray text-2xl text-center font-bold'>
                             Build a “micro-economy” for your team to share knowledge, trade feedback, & hold each other accountable
                         </p>
                     </div>

srcv2/pages/LoginPage.js

@@ -15,7 +15,7 @@ const LoginPage = () => {
                         <p className='text-4xl font-bold'>
                             Log in
                         </p>
-                        <p className='font-bold text-xl text-grey'>
+                        <p className='font-bold text-xl text-gray'>
                             A budgeting tool for tracking workflows and cashflows while collaborating with others on projects
                         </p>
                     </div>

srcv2/pages/ProjectDetailPage.js

@@ -41,7 +41,7 @@ const ProjectDetailPage = (props) => {
             return (
                 <div className='contributor w-14'>
                     <div className='rounded-full h-14 w-14 bg-light text-4xl'>
-                        <Icon className='icon fas fa-user text-grey text-center w-full h-full mt-2.5' fontSize='inherit'/>
+                        <Icon className='icon fas fa-user text-gray text-center w-full h-full mt-2.5' fontSize='inherit'/>
                     </div>
                     <div className='w-full'>
                         <p className='text-center'>{contributor.name}</p>
@@ -75,7 +75,7 @@ const ProjectDetailPage = (props) => {
                         </div>
                     </div>
                     <button type='button' className='text-right w-fit ml-auto' onClick={() => history.push(`/payments/edit/${payment.id}`)}>
-                        <Icon className='fas fa-pen text-grey' fontSize='small'/>
+                        <Icon className='fas fa-pen text-gray' fontSize='small'/>
                     </button>
                 </div>
             )

srcv2/pages/WalletSetupPage.js

@@ -22,7 +22,7 @@ const WalletSetupPage = () => {
     }
 
     return (
-        <div className='WalletSetupPage bg-med-grey h-full min-h-screen'>
+        <div className='WalletSetupPage bg-med-gray h-full min-h-screen'>
             <Section>
                 <p className='text-3xl font-bold mb-2'>
                     {'Choose one option'}