Merge branch 'develop' into fix/preprod-governance

Emurgo · Aug 30, 2024 · e0e5c99 · e0e5c99
2 parents e5f6594 + 3524160
commit e0e5c99
Show file tree

Hide file tree

Showing 13 changed files with 282 additions and 244 deletions.
diff --git a/apps/wallet-mobile/src/components/Icon/TotalAda.tsx b/apps/wallet-mobile/src/components/Icon/TotalAda.tsx
@@ -4,12 +4,14 @@ import Svg, {Circle, G, Path} from 'react-native-svg'
 type Props = {
   width: number
   height: number
+  backgroundColor?: string
+  color?: string
 }
 
-export const TotalAda = ({width, height}: Props) => (
+export const TotalAda = ({width, height, backgroundColor = '#F0F3F5', color = 'black'}: Props) => (
   <Svg viewBox="0 0 44 44" {...{width, height}}>
     <G id="icon/total-ada.inline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <G id="icon/bg-for-icon" fill="#F0F3F5">
+      <G id="icon/bg-for-icon" fill={backgroundColor}>
         <Circle id="Oval-Copy-4" cx="22" cy="22" r="22" />
       </G>
 
@@ -18,11 +20,11 @@ export const TotalAda = ({width, height}: Props) => (
           <Path
             d="M14.2222397,8.15833676 C14.4425853,8.16024176 14.6358078,8.27046334 14.7417486,8.44969929 L14.7816327,8.53062548 L16.5,12.7911667 L17.8433436,12.792075 C18.1532609,12.792075 18.407416,13.0229849 18.4400373,13.318596 L18.4430119,13.4090541 C18.4298482,13.697997 18.1922241,13.927633 17.9001348,13.9669971 L17.8110441,13.9729672 L16.97575,13.97275 L17.3341667,14.8591667 L18.8204047,14.8598666 C19.1216871,14.8598666 19.3855038,15.0632351 19.4418596,15.339007 L19.4516667,15.4229167 C19.4657165,15.7306862 19.240948,15.9894794 18.9438408,16.0339979 L18.8527042,16.0407588 L17.8099167,16.04075 L19.1861869,19.4497708 C19.2974267,19.7258598 19.1825586,20.034989 18.9293788,20.1787081 L18.8493633,20.2166631 C18.7777894,20.2445769 18.7038716,20.2583333 18.6284709,20.2583333 C18.4154055,20.2583333 18.2186455,20.1467721 18.1111581,19.9662598 L18.0707705,19.8848001 L16.51925,16.04075 L12.012,16.04075 L10.5215377,19.8510268 C10.4427204,20.0521686 10.2614308,20.1908048 10.052601,20.222321 L9.96163484,20.2291395 C9.88867238,20.2291395 9.81638108,20.2162304 9.74720883,20.1902904 C9.46534795,20.0836763 9.31176011,19.791749 9.37586326,19.5103222 L9.40171435,19.426405 L10.7259167,16.04075 L9.67466585,16.0407588 C9.36203064,16.0407588 9.10625159,15.8058248 9.07764956,15.5069547 L9.07560946,15.4239879 C9.08811154,15.135124 9.32651695,14.9052513 9.61900921,14.8658435 L9.70820768,14.8598666 L11.1879167,14.8591667 L11.5353333,13.97275 L10.6598018,13.9729672 C10.3470662,13.9729672 10.0913792,13.7379431 10.0627858,13.4386551 L10.0607458,13.355566 C10.0732633,13.0670053 10.3114151,12.8374054 10.6040799,12.7980447 L10.6933436,12.792075 L11.99825,12.7911667 L13.6646808,8.53575111 C13.7426337,8.33732064 13.9215848,8.19774311 14.1308866,8.16546141 L14.2222397,8.15833676 Z M15.6850833,13.97275 L12.8214167,13.97275 L12.4749167,14.8591667 L16.0435,14.8591667 L15.6850833,13.97275 Z M14.2321667,10.3684167 L13.2843333,12.7911667 L15.2093333,12.7911667 L14.2321667,10.3684167 Z"
             id="Fill-1"
-            fill="#3154CB"
+            fill={color}
             fill-rule="nonzero"
           />
 
-          <G id="continuous" transform="translate(2.750000, 3.666667)" fill="#F14D78">
+          <G id="continuous" transform="translate(2.750000, 3.666667)" fill={color}>
             <Path
               d="M23.0419276,11.0380723 L21.8689921,11.0380723 L21.8689373,10.8089605 C21.868887,10.5990276 21.8627484,10.3869693 21.8506799,10.1787811 C21.7547641,8.52736926 21.2705656,6.90085662 20.4508003,5.47604645 C19.6515239,4.08685672 18.5310453,2.88125067 17.2112698,1.99028629 C15.8699076,1.08471329 14.3165371,0.50224141 12.7200143,0.306125907 C10.945225,0.0880735674 9.14019254,0.335502989 7.50036923,1.02145822 C5.89201288,1.6942283 4.46083894,2.77963068 3.36214904,4.16010298 C3.17317892,4.39747486 3.20950439,4.74674639 3.44251255,4.93830911 C3.67345978,5.12808209 4.01093841,5.09183286 4.19817159,4.8566063 C4.25469831,4.78557111 4.31417744,4.71325807 4.37791097,4.63788232 C5.3380253,3.5031392 6.55334322,2.60939295 7.908347,2.04258199 C9.37906441,1.42740185 10.9984569,1.20570587 12.5915204,1.40139814 C14.0231818,1.57726556 15.4149876,2.0991849 16.617479,2.91103809 C17.8012849,3.71028656 18.805237,4.79043968 19.5216577,6.0356306 C20.2554809,7.31104657 20.6885512,8.76602034 20.774401,10.244233 C20.7798181,10.3375526 20.7839259,10.4322049 20.7867253,10.5277467 C20.7894126,10.6201798 20.7907637,10.7139806 20.7908169,10.8088291 L20.7909456,11.0381244 L19.617929,11.0381244 C19.4682422,11.0381244 19.3910582,11.2274882 19.5000411,11.3382162 L21.212066,13.0780112 C21.2776227,13.1446312 21.3823364,13.1446312 21.4478931,13.0780112 L23.1598687,11.3382663 C23.2687971,11.2275032 23.1915721,11.0380723 23.0419276,11.0380723 Z"
               id="Path"

diff --git a/apps/wallet-mobile/src/components/Icon/TotalDelegated.tsx b/apps/wallet-mobile/src/components/Icon/TotalDelegated.tsx
@@ -4,23 +4,25 @@ import Svg, {Circle, G, Path} from 'react-native-svg'
 type Props = {
   width: number
   height: number
+  backgroundColor?: string
+  color?: string
 }
 
-export const TotalDelegated = ({width, height}: Props) => (
+export const TotalDelegated = ({width, height, backgroundColor = '#F0F3F5', color = 'black'}: Props) => (
   <Svg viewBox="0 0 44 44" {...{width, height}}>
     <G id="icon/total-delegated.inline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <G id="icon/bg-for-icon" fill="#F0F3F5">
+      <G id="icon/bg-for-icon" fill={backgroundColor}>
         <Circle id="Oval-Copy-4" cx="22" cy="22" r="22" />
       </G>
 
       <G id="icon" transform="translate(10.000000, 9.000000)">
         <Path
           d="M5.08207106,19.3846409 C6.70608254,21.4105124 9.20155497,22.7076923 12,22.7076923 C14.798445,22.7076923 17.2939175,21.4105124 18.9179289,19.3846409 L20.5115262,19.3849683 C18.6997667,22.1634256 15.5643608,24 12,24 C8.43563919,24 5.30023332,22.1634256 3.48847384,19.3849683 L5.08207106,19.3846409 Z M21.0465496,9.23049463 L19.565786,9.23006169 C18.6495078,7.73148528 17.3004995,6.5262833 15.6925325,5.7882271 L15.6921488,4.38444316 C18.0142533,5.29124788 19.920671,7.02821588 21.0465496,9.23049463 Z M8.30785117,4.38444316 L8.30722368,5.788339 C6.69936415,6.52640513 5.35044594,7.73156102 4.43421403,9.23006169 L2.9534504,9.23049463 C4.07932898,7.02821588 5.98574675,5.29124788 8.30785117,4.38444316 Z"
           id="Combined-Shape"
-          fill="#F14D78"
+          fill={color}
         />
 
-        <G id="user" transform="translate(0.000000, 10.153846)" fill="#3154CB">
+        <G id="user" transform="translate(0.000000, 10.153846)" fill={color}>
           <Circle id="Oval" cx="3.52301752" cy="2.13840214" r="2.13840214" />
 
           <Path
@@ -29,7 +31,7 @@ export const TotalDelegated = ({width, height}: Props) => (
           />
         </G>
 
-        <G id="user-copy" transform="translate(16.615385, 10.153846)" fill="#3154CB">
+        <G id="user-copy" transform="translate(16.615385, 10.153846)" fill={color}>
           <Circle id="Oval" cx="3.52301752" cy="2.13840214" r="2.13840214" />
 
           <Path
@@ -38,7 +40,7 @@ export const TotalDelegated = ({width, height}: Props) => (
           />
         </G>
 
-        <G id="user-copy-2" transform="translate(8.307692, 0.000000)" fill="#3154CB">
+        <G id="user-copy-2" transform="translate(8.307692, 0.000000)" fill={color}>
           <Circle id="Oval" cx="3.52301752" cy="2.13840214" r="2.13840214" />
 
           <Path

diff --git a/apps/wallet-mobile/src/components/Icon/TotalReward.tsx b/apps/wallet-mobile/src/components/Icon/TotalReward.tsx
@@ -4,32 +4,34 @@ import Svg, {Circle, G, Path} from 'react-native-svg'
 type Props = {
   width: number
   height: number
+  backgroundColor?: string
+  color?: string
 }
 
-export const TotalReward = ({width, height}: Props) => (
+export const TotalReward = ({width, height, backgroundColor = '#F0F3F5', color = 'black'}: Props) => (
   <Svg viewBox="0 0 44 44" {...{width, height}}>
     <G id="icon/total-rewards.inline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <G id="icon/bg-for-icon" fill="#F0F3F5">
+      <G id="icon/bg-for-icon" fill={backgroundColor}>
         <Circle id="Oval-Copy-4" cx="22" cy="22" r="22" />
       </G>
 
       <G id="icon" transform="translate(7.333333, 7.333333)">
         <Path
           d="M16.2199168,13.8040549 L16.2536849,13.8102487 C16.2855509,13.8222842 16.3102378,13.8507879 16.314492,13.8862495 L16.3114445,13.9236783 L15.1137436,18.2634483 L15.0929851,18.3022733 C15.0561032,18.3436867 14.9876705,18.3436867 14.9508643,18.3022733 L14.9301768,18.2634483 L13.7323055,13.9236783 L13.7296391,13.8836577 C13.7371733,13.8333926 13.7858284,13.7978405 13.8367687,13.8049635 L13.8747956,13.8187443 L14.0216188,13.9007191 C14.2618923,14.0231833 14.5272277,14.1031841 14.8082825,14.1302858 L15.021875,14.1405305 L15.2002545,14.1333973 C15.5531901,14.1050531 15.8821724,13.9933747 16.1689544,13.8187443 C16.1856578,13.8085235 16.203043,13.8040549 16.2199168,13.8040549 Z M15.0218955,10.4729167 L15.1483901,10.4791574 C15.7700315,10.5408134 16.2650837,11.0522238 16.3283278,11.6964845 L16.3351596,11.8364583 L16.329149,11.9677691 C16.2697664,12.6130936 15.7772131,13.1272224 15.1567081,13.1929048 L15.0218955,13.2 L14.8954266,13.1937576 C14.229502,13.1276804 13.7086315,12.5451792 13.7086315,11.8364583 C13.7086315,11.083272 14.2966454,10.4729167 15.0218955,10.4729167 Z M13.067102,10.6411436 L13.1038326,10.6494544 C13.1372972,10.6654078 13.1594625,10.7022848 13.1568189,10.7420457 L13.1454053,10.7820997 L13.0693842,10.94251 C12.9761333,11.1611691 12.9158965,11.3983874 12.8955318,11.6474989 L12.8878414,11.8364583 L12.8951594,12.0211172 C12.9145452,12.2646735 12.9719306,12.497069 13.0611383,12.7118395 L13.1339143,12.8695116 L13.1446598,12.9069072 C13.1487911,12.9564776 13.1142906,13.0019953 13.0669857,13.0087656 L13.0295098,13.0060362 L9.23401249,11.9189526 L9.19659814,11.898146 C9.15668951,11.861242 9.15668951,11.792926 9.19659814,11.756022 L9.23401249,11.7352154 L13.0416575,10.6447229 C13.0503578,10.6423367 13.0588941,10.6411436 13.067102,10.6411436 Z M16.9766891,10.6411436 L16.9892266,10.6420384 L17.0021336,10.6447229 L20.8096144,11.7352154 L20.8470971,11.756022 C20.8870787,11.792926 20.8870787,11.861242 20.8470971,11.898146 L20.8096144,11.9189526 L17.0141171,13.0060362 L16.9766997,13.0087656 C16.9294465,13.0019953 16.8949125,12.9564776 16.8991685,12.9069072 L16.9100409,12.8695116 L16.9827477,12.7118395 C17.0718794,12.497069 17.1292496,12.2646735 17.1486324,12.0211172 L17.1559496,11.8364583 L17.1482593,11.6474989 C17.1228034,11.3361096 17.0350472,11.0433032 16.8983857,10.7820997 C16.8639125,10.715968 16.9108617,10.6411436 16.9766891,10.6411436 Z M15.021875,5.5 C15.0482368,5.5 15.0745229,5.51037226 15.0929559,5.53106632 L15.1137436,5.56984243 L16.3854167,10.1773986 L16.3780876,10.1773986 L16.2330848,10.073844 C15.934637,9.87807091 15.5867661,9.75169577 15.211619,9.71958396 L15.021875,9.71149845 L14.832124,9.71958396 C14.456951,9.75169577 14.1089942,9.87807091 13.8106162,10.073844 L13.6656624,10.1773986 L13.6583333,10.1773986 L14.9301768,5.56984243 L14.9508446,5.53106632 C14.9692271,5.51037226 14.9955132,5.5 15.021875,5.5 Z"
           id="Combined-Shape"
-          fill="#3154CB"
+          fill={color}
         />
 
         <Path
           d="M22.5396046,17.8093791 L24.6690125,22.0671727 C24.7566102,22.2421175 24.7472517,22.4496954 24.6443127,22.6160639 C24.5586252,22.7547488 24.4181171,22.8482525 24.2604324,22.8755681 L24.1640616,22.8838468 L21.0084306,22.8838468 L19.0466825,25.4409418 C18.9399208,25.5832062 18.7724238,25.6666667 18.5951218,25.6666667 C18.4065832,25.6666667 18.2385107,25.5742038 18.1357548,25.4305893 L18.0900275,25.3547107 L16.0708401,21.3191237 C16.4674064,21.2794901 16.8568133,21.2155538 17.2375495,21.1288259 L18.62972,23.9100139 L18.7741811,23.9230431 L20.2315766,21.9810571 C20.3169732,21.8673799 20.4411579,21.7911236 20.5784493,21.7650815 L20.6834741,21.7551651 L23.1123538,21.7551651 L23.1886157,21.631745 L21.7230195,18.7015267 C22.0135358,18.4217876 22.2863465,18.1237895 22.5396046,17.8093791 Z M7.68781923,17.8153098 C7.94089751,18.128986 8.21345108,18.4262934 8.50364241,18.7053944 L7.03994863,21.6319077 L7.11620729,21.7553342 L9.54525615,21.7553342 C9.68748847,21.7553342 9.82302716,21.8088486 9.92613112,21.9030067 L9.99697537,21.9810448 L11.4545521,23.9230469 L11.5990117,23.9100112 L12.9891055,21.129739 C13.3703062,21.2163985 13.7601905,21.2802127 14.1572426,21.3196658 L12.1387164,25.3546836 C12.0454141,25.5410187 11.853537,25.6666667 11.6336086,25.6666667 C11.4916917,25.6666667 11.3561831,25.6132883 11.2528815,25.519047 L11.1818472,25.4408999 L9.28850227,22.9179359 L6.0646688,22.8838468 C5.86902042,22.8838468 5.68722421,22.7824918 5.58424838,22.6160639 C5.49860018,22.4774425 5.47782509,22.310155 5.52389509,22.1569862 L5.55957429,22.0671215 Z M15.1143652,3.66666667 C19.6479825,3.66666667 23.336468,7.3529665 23.336468,11.8838468 C23.336468,13.4343561 22.9036004,14.9221464 22.1018412,16.2103678 L21.9244127,16.4833107 C20.4386929,18.6584395 17.9414249,20.0834776 15.1113214,20.0834776 C13.0738829,20.0834776 11.2089465,19.3449091 9.7696369,18.1208969 L9.81273191,18.1594292 C9.75218769,18.1082514 9.69233912,18.0561725 9.63320686,18.0032061 L9.63354012,18.0025852 C9.48213536,17.8678869 9.33573933,17.7267745 9.1943635,17.5800947 C8.86706763,17.2455642 8.56991221,16.88302 8.3047799,16.4967746 L8.30448558,16.483647 C7.38922908,15.1346156 6.8922623,13.5451955 6.8922623,11.8838468 C6.8922623,7.3529665 10.5807479,3.66666667 15.1143652,3.66666667 Z M15.1143652,4.79517926 C11.2033481,4.79517926 8.02154514,7.97509678 8.02154514,11.8838468 C8.02154514,15.7925968 11.2033481,18.9725143 15.1143652,18.9725143 C19.0253822,18.9725143 22.2071852,15.7925968 22.2071852,11.8838468 C22.2071852,7.97509678 19.0253822,4.79517926 15.1143652,4.79517926 Z"
           id="Combined-Shape"
-          fill="#3154CB"
+          fill={color}
         />
 
         <Path
           d="M17.6165588,14.2541311 L17.687398,14.296837 L18.9420316,15.2152832 C19.1462829,15.3648039 19.1906508,15.6515929 19.04113,15.8558442 C18.9082226,16.0374009 18.6668565,16.0926299 18.4714082,15.9976484 L18.400569,15.9549425 L17.1459353,15.0364963 C16.941684,14.8869755 16.8973162,14.6001866 17.046837,14.3959353 C17.1631309,14.2370732 17.3624636,14.1749307 17.5414148,14.2255075 L17.6165588,14.2541311 Z M12.8500418,14.3793578 C12.9829492,14.5609145 12.9626606,14.8076861 12.813059,14.9652961 L12.7509435,15.0199188 L11.4963099,15.938365 C11.2920586,16.0878858 11.0052696,16.0435179 10.8557488,15.8392666 C10.7228415,15.6577099 10.7431301,15.4109383 10.8927317,15.2533284 L10.9548472,15.1987056 L12.2094808,14.2802595 C12.4137321,14.1307387 12.700521,14.1751065 12.8500418,14.3793578 Z M19.04113,7.97926866 C19.1740373,8.16082536 19.1537488,8.40759699 19.0041471,8.56520692 L18.9420316,8.61982967 L17.687398,9.53827583 C17.4831467,9.68779662 17.1963578,9.64342879 17.046837,9.4391775 C16.9139296,9.2576208 16.9342182,9.01084917 17.0838198,8.85323924 L17.1459353,8.79861649 L18.400569,7.88017033 C18.6048202,7.73064954 18.8916092,7.77501737 19.04113,7.97926866 Z M11.4254707,7.82088696 L11.4963099,7.86359281 L12.7509435,8.78203897 C12.9551948,8.93155976 12.9995626,9.21834869 12.8500418,9.42259998 C12.7171345,9.60415668 12.4757683,9.65938572 12.28032,9.56440416 L12.2094808,9.52169831 L10.9548472,8.60325215 C10.7505959,8.45373136 10.7062281,8.16694243 10.8557488,7.96269114 C10.9720428,7.80382903 11.1713755,7.74168654 11.3503267,7.79226335 L11.4254707,7.82088696 Z"
           id="Combined-Shape"
-          fill="#F14D78"
+          fill={color}
           fill-rule="nonzero"
         />
       </G>

diff --git a/apps/wallet-mobile/src/components/ProgressCircle.tsx b/apps/wallet-mobile/src/components/ProgressCircle.tsx
@@ -11,18 +11,16 @@ type ExternalProps = {
 
 export const ProgressCircle = ({percentage}: ExternalProps) => {
   const styles = useStyles()
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const height = undefined as any
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const width = undefined as any
+  const {color} = useTheme()
+
   return (
     <View style={styles.wrapper}>
-      <Text style={styles.textWrapper}>{percentage}%</Text>
+      <Text style={styles.text}>{percentage}%</Text>
 
-      <Svg viewBox="0 0 36 36" height={height} width={width} style={styles.chart}>
+      <Svg width={56} height={56} viewBox="0 0 36 36" style={styles.chart}>
         <Path
           fill="none"
-          stroke="#B7C3ED"
+          stroke={color.gray_200}
           strokeWidth="4"
           d="M18 2.0845
             a 15.9155 15.9155 0 0 1 0 31.831
@@ -31,7 +29,7 @@ export const ProgressCircle = ({percentage}: ExternalProps) => {
 
         <Path
           fill="none"
-          stroke="#3154CB"
+          stroke={color.el_primary_medium}
           strokeWidth="4"
           strokeDasharray={`${percentage}, 100`}
           d="M18 2.0845
@@ -48,23 +46,23 @@ const useStyles = () => {
 
   const styles = StyleSheet.create({
     wrapper: {
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: 100,
+      ...atoms.align_center,
+      ...atoms.justify_center,
+      ...atoms.relative,
+      width: 56,
     },
-    textWrapper: {
-      ...atoms.heading_4_medium,
-      color: color.gray_700,
-      textAlign: 'center',
+    text: {
+      ...atoms.body_1_lg_medium,
+      ...atoms.text_center,
+      ...atoms.absolute,
+      color: color.text_gray_medium,
     },
     chart: {
-      position: 'absolute',
-      top: 0,
+      ...atoms.absolute,
+      top: -28,
       bottom: 0,
       left: 0,
       right: 0,
-      width: '100%',
-      height: '100%',
     },
   })
 

diff --git a/apps/wallet-mobile/src/components/TitledCard.tsx b/apps/wallet-mobile/src/components/TitledCard.tsx
@@ -2,6 +2,7 @@ import {useTheme} from '@yoroi/theme'
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
 
+import {Space} from './Space/Space'
 import {Text} from './Text'
 
 type ExternalProps = {
@@ -11,13 +12,17 @@ type ExternalProps = {
   testID?: string
 }
 
-export const TitledCard = ({title, children, variant, testID}: ExternalProps) => {
+export const TitledCard = ({title, children, testID}: ExternalProps) => {
   const styles = useStyles()
   return (
-    <View testID={testID}>
+    <View>
       {title !== undefined && <Text style={styles.title}>{title}</Text>}
 
-      <View style={[styles.content, variant === 'poolInfo' ? styles.poolInfoContent : undefined]}>{children}</View>
+      <Space height="sm" />
+
+      <View style={styles.content} testID={testID}>
+        {children}
+      </View>
     </View>
   )
 }
@@ -27,23 +32,14 @@ const useStyles = () => {
   const styles = StyleSheet.create({
     title: {
       ...atoms.body_1_lg_regular,
-      color: color.gray_900,
-      justifyContent: 'center',
+      ...atoms.justify_center,
+      color: color.text_gray_low,
     },
     content: {
-      ...atoms.p_md,
-      flexDirection: 'row',
+      ...atoms.p_lg,
+      borderColor: color.gray_200,
+      borderWidth: 1,
       borderRadius: 8,
-      elevation: 2,
-      shadowOpacity: 1,
-      shadowRadius: 12,
-      shadowOffset: {width: 0, height: 2},
-      shadowColor: 'rgba(0, 0, 0, 0.06)',
-      backgroundColor: color.bg_color_max,
-    },
-    poolInfoContent: {
-      ...atoms.p_0,
-      flexDirection: 'column',
     },
   })
   return styles