DAO-597: Implement loading spinner (#101)

* add loading spinner component

* add loading to protected content

* add loading button

* add alert message for canceling transaction

* loading request allowance

* add loading to confirm staking button

* add loading to unstaking button

* pending claiming nft

* fix build

package.json

@@ -26,6 +26,7 @@
     "clsx": "^2.1.1",
     "ethers": "^6.13.1",
     "jdenticon": "^3.3.0",
+    "lottie-react": "^2.4.0",
     "lucide-react": "^0.400.0",
     "moment": "^2.30.1",
     "next": "14.2.3",

public/loading.json

@@ -0,0 +1 @@
+{"nm":"final","ddd":0,"h":432,"w":768,"meta":{"g":"LottieFiles AE "},"layers":[{"ty":0,"nm":"applying r","sr":1,"st":0,"op":600.000024438501,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[160,160,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[384,216,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"w":320,"h":320,"refId":"comp_0","ind":1},{"ty":0,"nm":"applying r","sr":1,"st":0,"op":600.000024438501,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[160,160,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[384,239,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":38,"ix":11}},"ef":[{"ty":29,"mn":"ADBE Gaussian Blur 2","nm":"Gaussian Blur","ix":1,"en":1,"ef":[{"ty":0,"mn":"ADBE Gaussian Blur 2-0001","nm":"Blurriness","ix":1,"v":{"a":0,"k":65.3,"ix":1}},{"ty":7,"mn":"ADBE Gaussian Blur 2-0002","nm":"Blur Dimensions","ix":2,"v":{"a":0,"k":1,"ix":2}},{"ty":7,"mn":"ADBE Gaussian Blur 2-0003","nm":"Repeat Edge Pixels","ix":3,"v":{"a":0,"k":0,"ix":3}}]}],"w":320,"h":320,"refId":"comp_0","ind":2}],"v":"4.8.0","fr":60,"op":480,"ip":0,"assets":[{"nm":"","id":"comp_0","layers":[{"ty":0,"nm":"one seq","sr":1,"st":0,"op":600.000024438501,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[160,160,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[160,160,0],"ix":2},"r":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":0},{"s":[900],"t":481.000019591532}],"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"w":320,"h":320,"refId":"comp_1","ind":1}]},{"nm":"","id":"comp_1","layers":[{"ty":4,"nm":"04_dec","sr":1,"st":360.000014663101,"op":480.000019550801,"ip":420.000017106951,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[10.547,16.547,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[160,160,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":4,"it":[{"ty":"el","bm":0,"hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[177.094,177.094],"ix":2}},{"ty":"tm","bm":0,"hd":false,"mn":"ADBE Vector Filter - Trim","nm":"Trim Paths 1","ix":2,"e":{"a":1,"k":[{"o":{"x":0.85,"y":0},"i":{"x":0.15,"y":1},"s":[75],"t":420},{"s":[75],"t":480.000019550801}],"ix":2},"o":{"a":0,"k":-270,"ix":3},"s":{"a":1,"k":[{"o":{"x":0.85,"y":0},"i":{"x":0.15,"y":1},"s":[0],"t":420},{"s":[75],"t":480.000019550801}],"ix":1},"m":1},{"ty":"st","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":2,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":20,"ix":5},"c":{"a":0,"k":[0.4,0.3686,0.9647],"ix":3}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[10.547,16.547],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":1},{"ty":4,"nm":"04_inc","sr":1,"st":360.000014663101,"op":420.000017106951,"ip":356.000014500177,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[10.547,16.547,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[160,160,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":4,"it":[{"ty":"el","bm":0,"hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[177.094,177.094],"ix":2}},{"ty":"tm","bm":0,"hd":false,"mn":"ADBE Vector Filter - Trim","nm":"Trim Paths 1","ix":2,"e":{"a":1,"k":[{"o":{"x":0.85,"y":0},"i":{"x":0.15,"y":1},"s":[0],"t":360},{"s":[75],"t":420.000017106951}],"ix":2},"o":{"a":0,"k":-270,"ix":3},"s":{"a":1,"k":[{"o":{"x":0.85,"y":0},"i":{"x":0.15,"y":1},"s":[0],"t":360},{"s":[0],"t":420.000017106951}],"ix":1},"m":1},{"ty":"st","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":2,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":20,"ix":5},"c":{"a":0,"k":[0.4,0.3686,0.9647],"ix":3}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[10.547,16.547],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":2},{"ty":4,"nm":"03_dec","sr":1,"st":240.0000097754,"op":365.000014866755,"ip":300.00001221925,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[10.547,16.547,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[160,160,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":4,"it":[{"ty":"el","bm":0,"hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[177.094,177.094],"ix":2}},{"ty":"tm","bm":0,"hd":false,"mn":"ADBE Vector Filter - Trim","nm":"Trim Paths 1","ix":2,"e":{"a":1,"k":[{"o":{"x":0.85,"y":0},"i":{"x":0.15,"y":1},"s":[75],"t":300},{"s":[75],"t":360.000014663101}],"ix":2},"o":{"a":0,"k":-180,"ix":3},"s":{"a":1,"k":[{"o":{"x":0.85,"y":0},"i":{"x":0.15,"y":1},"s":[0],"t":300},{"s":[75],"t":360.000014663101}],"ix":1},"m":1},{"ty":"st","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":2,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":20,"ix":5},"c":{"a":0,"k":[0.4,0.3686,0.9647],"ix":3}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[10.547,16.547],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":3},{"ty":4,"nm":"03_inc","sr":1,"st":240.0000097754,"op":301.000012259981,"ip":236.000009612477,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[10.547,16.547,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[160,160,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":4,"it":[{"ty":"el","bm":0,"hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[177.094,177.094],"ix":2}},{"ty":"tm","bm":0,"hd":false,"mn":"ADBE Vector Filter - Trim","nm":"Trim Paths 1","ix":2,"e":{"a":1,"k":[{"o":{"x":0.85,"y":0},"i":{"x":0.15,"y":1},"s":[0],"t":240},{"s":[75],"t":300.00001221925}],"ix":2},"o":{"a":0,"k":-180,"ix":3},"s":{"a":1,"k":[{"o":{"x":0.85,"y":0},"i":{"x":0.15,"y":1},"s":[0],"t":240},{"s":[0],"t":300.00001221925}],"ix":1},"m":1},{"ty":"st","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":2,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":20,"ix":5},"c":{"a":0,"k":[0.4,0.3686,0.9647],"ix":3}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[10.547,16.547],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":4},{"ty":4,"nm":"02_dec","sr":1,"st":121.000004928431,"op":246.000010019785,"ip":180.00000733155,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[10.547,16.547,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[160,160,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":4,"it":[{"ty":"el","bm":0,"hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[177.094,177.094],"ix":2}},{"ty":"tm","bm":0,"hd":false,"mn":"ADBE Vector Filter - Trim","nm":"Trim Paths 1","ix":2,"e":{"a":1,"k":[{"o":{"x":0.85,"y":0},"i":{"x":0.15,"y":1},"s":[75],"t":180},{"s":[75],"t":240.0000097754}],"ix":2},"o":{"a":0,"k":-90,"ix":3},"s":{"a":1,"k":[{"o":{"x":0.85,"y":0},"i":{"x":0.15,"y":1},"s":[0],"t":180},{"s":[75],"t":240.0000097754}],"ix":1},"m":1},{"ty":"st","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":2,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":20,"ix":5},"c":{"a":0,"k":[0.4,0.3686,0.9647],"ix":3}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[10.547,16.547],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":5},{"ty":4,"nm":"02_inc","sr":1,"st":121.000004928431,"op":180.00000733155,"ip":116.000004724777,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[10.547,16.547,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[160,160,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":4,"it":[{"ty":"el","bm":0,"hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[177.094,177.094],"ix":2}},{"ty":"tm","bm":0,"hd":false,"mn":"ADBE Vector Filter - Trim","nm":"Trim Paths 1","ix":2,"e":{"a":1,"k":[{"o":{"x":0.85,"y":0},"i":{"x":0.15,"y":1},"s":[0],"t":120},{"s":[75],"t":180.00000733155}],"ix":2},"o":{"a":0,"k":-90,"ix":3},"s":{"a":1,"k":[{"o":{"x":0.85,"y":0},"i":{"x":0.15,"y":1},"s":[0],"t":120},{"s":[0],"t":180.00000733155}],"ix":1},"m":1},{"ty":"st","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":2,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":20,"ix":5},"c":{"a":0,"k":[0.4,0.3686,0.9647],"ix":3}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[10.547,16.547],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":6},{"ty":4,"nm":"01_dec","sr":1,"st":0,"op":125.000005091354,"ip":60.0000024438501,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[10.547,16.547,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[160,160,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":4,"it":[{"ty":"el","bm":0,"hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[177.094,177.094],"ix":2}},{"ty":"tm","bm":0,"hd":false,"mn":"ADBE Vector Filter - Trim","nm":"Trim Paths 1","ix":2,"e":{"a":1,"k":[{"o":{"x":0.85,"y":0},"i":{"x":0.15,"y":1},"s":[75],"t":60},{"s":[75],"t":120.0000048877}],"ix":2},"o":{"a":0,"k":0,"ix":3},"s":{"a":1,"k":[{"o":{"x":0.85,"y":0},"i":{"x":0.15,"y":1},"s":[0],"t":60},{"s":[75],"t":120.0000048877}],"ix":1},"m":1},{"ty":"st","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":2,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":20,"ix":5},"c":{"a":0,"k":[0.4,0.3686,0.9647],"ix":3}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[10.547,16.547],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":7},{"ty":4,"nm":"01_inc","sr":1,"st":0,"op":60.0000024438501,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[10.547,16.547,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[160,160,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":4,"it":[{"ty":"el","bm":0,"hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[177.094,177.094],"ix":2}},{"ty":"tm","bm":0,"hd":false,"mn":"ADBE Vector Filter - Trim","nm":"Trim Paths 1","ix":2,"e":{"a":1,"k":[{"o":{"x":0.85,"y":0},"i":{"x":0.15,"y":1},"s":[0],"t":0},{"s":[75],"t":60.0000024438501}],"ix":2},"o":{"a":0,"k":0,"ix":3},"s":{"a":1,"k":[{"o":{"x":0.85,"y":0},"i":{"x":0.15,"y":1},"s":[0],"t":0},{"s":[0],"t":60.0000024438501}],"ix":1},"m":1},{"ty":"st","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":2,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":20,"ix":5},"c":{"a":0,"k":[0.4,0.3686,0.9647],"ix":3}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[10.547,16.547],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":8},{"ty":4,"nm":"01_inc 2","sr":1,"st":0,"op":486.000019795186,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[10.547,16.547,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[160,160,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":15,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":4,"it":[{"ty":"el","bm":0,"hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[177.094,177.094],"ix":2}},{"ty":"tm","bm":0,"hd":false,"mn":"ADBE Vector Filter - Trim","nm":"Trim Paths 1","ix":2,"e":{"a":0,"k":100,"ix":2},"o":{"a":0,"k":0,"ix":3},"s":{"a":0,"k":0,"ix":1},"m":1},{"ty":"st","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":2,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":20,"ix":5},"c":{"a":0,"k":[0.4,0.3686,0.9647],"ix":3}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[10.547,16.547],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":9}]}]}

src/app/proposals/hooks/useCreateProposal.ts

@@ -34,7 +34,7 @@ const createProposalForRIFTransfer = (
 export const useCreateProposal = () => {
   const { canCreateProposal } = useVotingPower()
 
-  const { writeContractAsync: propose } = useWriteContract()
+  const { writeContractAsync: propose, isPending: isPublishing } = useWriteContract()
 
   const onCreateProposal = async (address: Address, amount: string, description: string) => {
     if (!canCreateProposal) {
@@ -49,5 +49,5 @@ export const useCreateProposal = () => {
       args: proposal,
     })
   }
-  return { onCreateProposal }
+  return { onCreateProposal, isPublishing }
 }

src/app/proposals/shared/utils.ts

@@ -65,4 +65,9 @@ export const TRANSACTION_SENT_MESSAGES = {
       'Proposal successfully created. Your proposal has been published successfully! It is now visible to the community for review and feedback. Thank you for your contribution.',
     severity: 'success',
   },
+  canceled: {
+    title: 'Transaction canceled',
+    content: 'Proposal creation canceled. Your proposal has been canceled.',
+    severity: 'warning',
+  },
 } as const

src/app/user/Stake/StakePreview.tsx

@@ -15,6 +15,7 @@ interface StakePreviewProps {
   confirmButtonText?: string
   customComponentBeforeFooter?: ReactNode
   disableConfirm?: boolean
+  loading?: boolean
 }
 
 export const StakePreview = ({
@@ -27,6 +28,7 @@ export const StakePreview = ({
   actionName,
   actionText,
   confirmButtonText = 'Confirm',
+  loading = false,
 }: StakePreviewProps) => {
   return (
     <div className="px-[50px] py-[20px] flex justify-center flex-col">
@@ -58,8 +60,9 @@ export const StakePreview = ({
           Cancel
         </Button>
         <Button
-          onClick={!disableConfirm ? onConfirm : undefined}
-          disabled={disableConfirm}
+          onClick={onConfirm}
+          disabled={disableConfirm || loading}
+          loading={loading}
           buttonProps={{ 'data-testid': 'Confirm' }}
         >
           {confirmButtonText}

src/app/user/Stake/StakingContext.tsx

@@ -14,6 +14,7 @@ export type ActionHookToUse = (
   shouldEnableConfirm: boolean
   onConfirm: () => Promise<Hash>
   customFooter: ReactNode
+  isPending: boolean
 }
 
 type StakePreviewToken = {
@@ -61,7 +62,12 @@ const StakingContext = createContext<StakingContextProps>({
     amountToReceive: '',
     amountToReceiveConvertedToCurrency: '',
   },
-  actionToUse: () => ({ shouldEnableConfirm: false, onConfirm: async () => '0x0', customFooter: null }),
+  actionToUse: () => ({
+    shouldEnableConfirm: false,
+    onConfirm: async () => '0x0',
+    customFooter: null,
+    isPending: false,
+  }),
   actionName: 'STAKE',
   stakePreviewFrom: { ...DEFAULT_STAKE_PREVIEW_TOKEN },
   stakePreviewTo: { ...DEFAULT_STAKE_PREVIEW_TOKEN },

src/app/user/Stake/Steps/StepTwo.tsx

@@ -15,7 +15,11 @@ export const StepTwo = ({ onGoNext, onCloseModal = () => {} }: StepProps) => {
     stakePreviewTo: to,
   } = useStakingContext()
 
-  const { onConfirm: onConfirmAction } = actionToUse(amount, tokenToSend.contract, tokenToReceive.contract)
+  const { onConfirm: onConfirmAction, isPending } = actionToUse(
+    amount,
+    tokenToSend.contract,
+    tokenToReceive.contract,
+  )
 
   const onConfirm = async () => {
     try {
@@ -36,6 +40,7 @@ export const StepTwo = ({ onGoNext, onCloseModal = () => {} }: StepProps) => {
       to={to}
       actionName={textsDependingOnAction[actionName].preview}
       actionText={textsDependingOnAction[actionName].previewText}
+      loading={isPending}
     />
   )
 }