Merge pull request #3599 from Emurgo/sorin/YOEXT-1277/governance

feature: Governance api integration
Emurgo · Aug 22, 2024 · 79332a0 · 79332a0
2 parents 5f59cfa + c81f1ca
commit 79332a0
Show file tree

Hide file tree

Showing 37 changed files with 963 additions and 437 deletions.
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "scripts": {
     "eslint": "lerna run eslint --stream",
     "flow": "lerna run flow --stream",
+    "tsc": "lerna run tsc --stream",
     "test": "lerna run test --stream",
     "translations:purge": "lerna run translations:purge -- stream",
     "archive:src": "func() { git rev-parse HEAD > COMMIT && git rev-parse --abbrev-ref HEAD > BRANCH && git archive --format zip --add-file COMMIT --add-file BRANCH -o $1 HEAD && rm COMMIT BRANCH; }; func"

diff --git a/packages/yoroi-extension/app/Routes.js b/packages/yoroi-extension/app/Routes.js
@@ -49,6 +49,7 @@ import PortfolioDappsPage from './UI/pages/portfolio/PortfolioDappsPage';
 import PortfolioDetailPage from './UI/pages/portfolio/PortfolioDetailPage';
 // $FlowIgnore: suppressing this error
 import PortfolioPage from './UI/pages/portfolio/PortfolioPage';
+import BuySellDialog from './components/buySell/BuySellDialog';
 // $FlowIgnore: suppressing this error
 
 // PAGES
@@ -555,8 +556,21 @@ export function wrapReceive(receiveProps: StoresAndActionsProps, children: Node)
 // NEW UI - TODO: to be refactred
 export function wrapGovernance(governanceProps: StoresAndActionsProps, children: Node): Node {
   const currentWalletInfo = createCurrrentWalletInfo(governanceProps.stores);
+
+  const { delegationTransaction } = governanceProps.stores.substores.ada;
+  const delegationTxResult = delegationTransaction.createDelegationTx.result;
+  const delegationTxError = delegationTransaction.createDelegationTx.error;
+
   return (
-    <GovernanceContextProvider currentWallet={currentWalletInfo}>
+    <GovernanceContextProvider
+      currentWallet={currentWalletInfo}
+      createDrepDelegationTransaction={governanceProps.stores.delegation.createDrepDelegationTransaction}
+      signDelegationTransaction={governanceProps.actions.ada.delegationTransaction.signTransaction.trigger}
+      txDelegationResult={delegationTxResult}
+      txDelegationError={delegationTxError}
+      tokenInfo={governanceProps.stores.tokenInfoStore.tokenInfo}
+      triggerBuySellAdaDialog={() => governanceProps.actions.dialogs.open.trigger({ dialog: BuySellDialog })}
+    >
       <Suspense fallback={null}>{children}</Suspense>;
     </GovernanceContextProvider>
   );

diff --git a/packages/yoroi-extension/app/UI/components/Input/PasswordInput.tsx b/packages/yoroi-extension/app/UI/components/Input/PasswordInput.tsx
@@ -17,9 +17,10 @@ type StyledInputProps = {
   value?: string;
   error?: boolean;
   helperText?: string;
+  disabled?: boolean;
 };
 
-export const PasswordInput = ({ id, label, onChange, value, error, helperText }: StyledInputProps) => {
+export const PasswordInput = ({ id, label, onChange, value, error, disabled, helperText }: StyledInputProps) => {
   const [showPassword, setShowPassword] = React.useState(false);
 
   const handleClickShowPassword = () => setShowPassword(show => !show);
@@ -39,6 +40,7 @@ export const PasswordInput = ({ id, label, onChange, value, error, helperText }:
         type={showPassword ? 'text' : 'password'}
         onChange={onChange}
         value={value}
+        disabled={disabled}
         endAdornment={
           <InputAdornment position="end">
             <IconButton

diff --git a/packages/yoroi-extension/app/UI/components/TransactionFailed/TransactionFailed.tsx b/packages/yoroi-extension/app/UI/components/TransactionFailed/TransactionFailed.tsx
@@ -1,10 +1,12 @@
+import { Button, Stack, Typography } from '@mui/material';
 import React from 'react';
-import { Stack, Typography, Button } from '@mui/material';
-import { FailedIlustration } from './FailedIlustration';
 import { FormattedMessage } from 'react-intl';
 import globalMessages from '../../../i18n/global-messages';
+import { useNavigateTo } from '../../features/governace/common/useNavigateTo';
+import { FailedIlustration } from './FailedIlustration';
 
 export const TransactionFailed = () => {
+  const navigate = useNavigateTo();
   return (
     <Stack alignItems="center" mt="110px">
       <FailedIlustration />
@@ -15,7 +17,7 @@ export const TransactionFailed = () => {
         <FormattedMessage {...globalMessages.transactionFailedInfo} />
       </Typography>
       {/* @ts-ignore */}
-      <Button variant="primary">
+      <Button variant="primary" onClick={() => navigate.selectStatus()}>
         <FormattedMessage {...globalMessages.tryAgain} />
       </Button>
     </Stack>

diff --git a/packages/yoroi-extension/app/UI/components/icons/ChevronDown.tsx b/packages/yoroi-extension/app/UI/components/icons/ChevronDown.tsx
@@ -4,8 +4,8 @@ export const ChevronDown = () => {
   return (
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
         fill="black"
       />

diff --git a/packages/yoroi-extension/app/UI/components/ilustrations/NoTransactions.tsx b/packages/yoroi-extension/app/UI/components/ilustrations/NoTransactions.tsx
@@ -0,0 +1,100 @@
+import React from 'react';
+
+export const NoTransactions = () => {
+  return (
+    <svg width="128" height="168" viewBox="0 0 128 168" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M116.023 1.51257L123.573 5.61495L118.322 13.1162L118.571 82.0792C118.602 90.9652 112.961 101.31 105.948 105.183L59.1264 131.072C58.907 132.979 58.6219 135.06 58.2586 137.328C57.8532 139.833 57.1555 142.287 56.1781 144.644L58.3677 143L56.2794 151.886L46.7732 167.644L38.9111 163.201C38.7384 163.133 38.5759 163.043 38.428 162.935C37.5904 162.36 37.342 161.278 37.8514 160.424C39.0318 158.264 39.9444 155.98 40.5708 153.619C41.4809 150.489 39.5667 145.854 37.9716 142.77L20.9216 152.197L14.1348 161.891L5.49349 157.596C2.34552 156.389 0.257265 152.834 0.257265 147.503L0.000128529 75.9701C-0.0310395 67.084 5.61037 56.7392 12.6232 52.8664L105.582 1.46814C108.208 0.00934612 110.654 -0.32388 112.688 0.298142C113.836 0.606571 114.952 1.01303 116.023 1.51257Z"
+        fill="url(#paint0_linear_1736_20523)"
+      />
+      <path
+        opacity="0.8"
+        d="M127.743 15.1975C127.743 6.31151 122.008 2.23875 115.011 6.11158L22.052 57.5172C15.0392 61.3901 9.39784 71.7349 9.42901 80.6209L9.68614 152.146C9.68614 161.032 15.4211 165.105 22.4183 161.232L51.1318 145.356C51.9083 149.842 51.3524 154.445 49.5266 158.648C48.3656 161.114 47.189 163.276 46.1293 165.083C45.6798 165.873 45.8474 166.852 46.5375 167.466C47.2276 168.08 48.2666 168.175 49.0669 167.697C55.768 163.55 65.1029 155.545 67.2145 142.379C67.5885 140.046 67.8768 137.936 68.095 135.973L115.377 109.826C122.39 105.953 128.031 95.6087 128 86.7227L127.743 15.1975Z"
+        fill="#52FCFF"
+      />
+      <path
+        d="M94.4496 64.4973C94.4496 68.1102 97.5036 69.2342 101.271 67.0082C105.039 64.7822 108.092 60.0489 108.092 56.4361C108.092 52.8232 105.039 51.6991 101.271 53.9259C97.5036 56.1512 94.4496 60.8852 94.4496 64.4973Z"
+        fill="url(#paint1_linear_1736_20523)"
+      />
+      <path
+        d="M38.8984 97.3223C38.8984 100.935 41.9524 102.059 45.7192 99.8331C49.4867 97.6071 52.5407 92.8739 52.5407 89.261C52.5407 85.6481 49.4867 84.5241 45.7192 86.7501C41.9524 88.9761 38.8984 93.7101 38.8984 97.3223Z"
+        fill="url(#paint2_linear_1736_20523)"
+      />
+      <path
+        d="M89.2481 97.2321L61.655 113.537C59.9691 114.533 58.5895 114.026 58.5895 112.408C58.5895 110.792 59.9691 108.653 61.655 107.657L89.2481 91.3528C90.934 90.3558 92.3136 90.8639 92.3136 92.4813C92.3136 94.0979 90.934 96.2366 89.2481 97.2321Z"
+        fill="url(#paint3_linear_1736_20523)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_1736_20523"
+          x1="0.000128529"
+          y1="167.645"
+          x2="123.573"
+          y2="167.645"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#17D1AA" />
+          <stop offset="0.15" stopColor="#1ACBAF" />
+          <stop offset="0.37" stopColor="#21B8BC" />
+          <stop offset="0.62" stopColor="#2E9BD3" />
+          <stop offset="0.89" stopColor="#3F71F1" />
+          <stop offset="1" stopColor="#475FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_1736_20523"
+          x1="112.557"
+          y1="121.616"
+          x2="112.557"
+          y2="52.459"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#1D45BA" />
+          <stop offset="0.4204" stopColor="#1D47BA" />
+          <stop offset="0.5718" stopColor="#1D4EB9" />
+          <stop offset="0.6797" stopColor="#1C59B8" />
+          <stop offset="0.767" stopColor="#1B6AB6" />
+          <stop offset="0.8417" stopColor="#1A80B3" />
+          <stop offset="0.9079" stopColor="#199CB0" />
+          <stop offset="0.9663" stopColor="#18BBAD" />
+          <stop offset="1" stopColor="#17D1AA" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_1736_20523"
+          x1="112.557"
+          y1="121.616"
+          x2="112.557"
+          y2="52.459"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#1D45BA" />
+          <stop offset="0.4204" stopColor="#1D47BA" />
+          <stop offset="0.5718" stopColor="#1D4EB9" />
+          <stop offset="0.6797" stopColor="#1C59B8" />
+          <stop offset="0.767" stopColor="#1B6AB6" />
+          <stop offset="0.8417" stopColor="#1A80B3" />
+          <stop offset="0.9079" stopColor="#199CB0" />
+          <stop offset="0.9663" stopColor="#18BBAD" />
+          <stop offset="1" stopColor="#17D1AA" />
+        </linearGradient>
+        <linearGradient
+          id="paint3_linear_1736_20523"
+          x1="112.557"
+          y1="121.616"
+          x2="112.557"
+          y2="52.459"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#1D45BA" />
+          <stop offset="0.4204" stopColor="#1D47BA" />
+          <stop offset="0.5718" stopColor="#1D4EB9" />
+          <stop offset="0.6797" stopColor="#1C59B8" />
+          <stop offset="0.767" stopColor="#1B6AB6" />
+          <stop offset="0.8417" stopColor="#1A80B3" />
+          <stop offset="0.9079" stopColor="#199CB0" />
+          <stop offset="0.9663" stopColor="#18BBAD" />
+          <stop offset="1" stopColor="#17D1AA" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
diff --git a/...oroi-extension/app/UI/features/governace/api/useCreateAndSendDrepDelegationTransaction.ts b/...oroi-extension/app/UI/features/governace/api/useCreateAndSendDrepDelegationTransaction.ts
diff --git a/packages/yoroi-extension/app/UI/features/governace/api/useDrepDelegationState.ts b/packages/yoroi-extension/app/UI/features/governace/api/useDrepDelegationState.ts
diff --git a/packages/yoroi-extension/app/UI/features/governace/common/GovernanceVoteingCard.tsx b/packages/yoroi-extension/app/UI/features/governace/common/GovernanceVoteingCard.tsx
@@ -4,11 +4,12 @@ import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
-import LoadingSpinner from '../../../../components/widgets/LoadingSpinner';
 
 type Props = {
   title: string;
+  titleHover?: string;
   description: string;
+  descriptionHover?: string;
   icon: React.ReactNode;
   selected: boolean;
   onClick: () => void;
@@ -24,22 +25,22 @@ const StyledCard: any = styled(Stack)(({ theme, selected, pending }: any) => ({
   height: '362px',
   borderRadius: '8px',
   ...(!selected && {
-    backgroundImage: theme.palette.ds?.bg_gradient_1,
+    backgroundImage: !pending && theme.palette.ds?.bg_gradient_1,
     backgroundOrigin: 'border-box',
     boxShadow: 'inset 0 100vw white',
     border: '2px solid transparent',
   }),
   ...(selected && {
-    background: theme.palette.ds.bg_gradient_2,
+    background: !pending && theme.palette.ds.bg_gradient_2,
     border: 'none',
   }),
   cursor: 'pointer',
   ...(pending && {
-    opacity: selected ? 1 : 0.5,
+    opacity: 0.5,
     cursor: 'not-allowed',
   }),
   '&:hover': {
-    backgroundImage: theme.palette.ds.bg_gradient_1,
+    backgroundImage: !pending && theme.palette.ds.bg_gradient_1,
     backgroundOrigin: 'content-box',
     boxShadow: 'none',
     transition: 'all 250ms ease-in-out',
@@ -55,27 +56,42 @@ const Description = styled(Typography)(({ theme }) => ({
   marginTop: theme.spacing(1),
 }));
 
-const SpinnerBox = styled(Box)(() => ({
-  position: 'absolute',
-  right: 15,
-  top: 15,
-}));
+// const SpinnerBox = styled(Box)(() => ({
+//   position: 'absolute',
+//   right: 15,
+//   top: 15,
+// }));
+
+export const GovernanceVoteingCard = ({
+  title,
+  description,
+  descriptionHover,
+  titleHover,
+  icon,
+  selected,
+  onClick,
+  pending = false,
+}: Props) => {
+  const [hover, onHover] = React.useState(false);
 
-export const GovernanceVoteingCard = ({ title, description, icon, selected, onClick, pending }: Props) => (
-  <StyledCard onClick={pending ? undefined : onClick} pending={pending} selected={selected}>
-    {pending && selected && (
-      <SpinnerBox>
-        <LoadingSpinner />
-      </SpinnerBox>
-    )}
-    <CardContent>
-      <IconContainer>{icon}</IconContainer>
-      <Typography variant="h3" fontWeight="500" mt="16px">
-        {title}
-      </Typography>
-      <Description variant="body2" color={'ds.gray_c800'}>
-        {description}
-      </Description>
-    </CardContent>
-  </StyledCard>
-);
+  return (
+    <div onMouseOver={() => onHover(true)} onMouseLeave={() => onHover(false)}>
+      <StyledCard onClick={pending ? undefined : onClick} pending={pending === true ? 'true' : undefined} selected={selected}>
+        {/* {pending && selected && (
+          <SpinnerBox>
+            <LoadingSpinner />
+          </SpinnerBox>
+        )} */}
+        <CardContent>
+          <IconContainer>{icon}</IconContainer>
+          <Typography variant="h3" fontWeight="500" mt="16px">
+            {hover && titleHover ? titleHover : title}
+          </Typography>
+          <Description variant="body2" color={'ds.gray_c800'} style={{ wordWrap: 'break-word', maxWidth: '260px' }}>
+            {descriptionHover && hover ? descriptionHover : description}
+          </Description>
+        </CardContent>
+      </StyledCard>
+    </div>
+  );
+};
diff --git a/packages/yoroi-extension/app/UI/features/governace/common/constants.ts b/packages/yoroi-extension/app/UI/features/governace/common/constants.ts
@@ -1,2 +1,10 @@
+import {
+  DREP_ALWAYS_ABSTAIN as API_ABSTAIN,
+  DREP_ALWAYS_NO_CONFIDENCE as API_NO_CONFIDENCE,
+} from '../../../../api/ada/lib/storage/bridge/delegationUtils'
+
 export const BECOME_DREP_LINK = 'https://emurgohelpdesk.zendesk.com/hc/en-us/articles/8600742035855-Who-are-DReps-on-Cardano';
 export const LEARN_MORE_LINK = 'https://emurgohelpdesk.zendesk.com/hc/en-us/sections/8582793481231-Governance';
+
+export const DREP_ALWAYS_ABSTAIN = API_ABSTAIN;
+export const DREP_ALWAYS_NO_CONFIDENCE = API_NO_CONFIDENCE;