Merge pull request #670 from artizen-fund/lottie

added changes

package.json

@@ -62,6 +62,7 @@
     "got": "^13.0.0",
     "jsonwebtoken": "^8.5.1",
     "lodash": "^4.17.21",
+    "lottie-react": "^2.4.0",
     "md5": "^2.3.0",
     "moment-timezone": "^0.5.40",
     "moralis": "^2.18.1",

src/components/Layout/Modals/ProcessTransactionModal.tsx → src/components/Layout/Modals/ProcessTransactionModal/index.tsx

@@ -1,13 +1,18 @@
 import styled from 'styled-components'
 import { rgba } from '@lib'
 import { typography, breakpoint, palette } from '@theme'
+import confirmTxAni from './processTransactionAnimation.json'
+import Lottie from 'lottie-react'
 
 const ProcessTransactionModal = () => {
   // todo: it would be good if we could automatically detect when
   //   user turns down Metamask or WalletConnect
   return (
     <Wrapper>
-      <Image light="/assets/illustrations/guide/14.png" dark="/assets/illustrations/guide/14-dark.png" />
+      <div style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <Lottie animationData={confirmTxAni} style={{ width: '300px' }} />;
+      </div>
+      {/* <Image light="/assets/illustrations/guide/14.png" dark="/assets/illustrations/guide/14-dark.png" /> */}
       <h1>Processing the transaction</h1>
       <p>Hang tight, this should only take a few seconds!</p>
     </Wrapper>

src/components/index.ts

@@ -41,9 +41,9 @@ export * from './NoGrant'
 
 export * from './Layout/Modals/AlertModal'
 export { default as CreateSeasonModal } from './Layout/Modals/CreateSeasonModal'
-export { default as ConfirmTransactionModal } from './Layout/Modals/ConfirmTransactionModal'
+export { default as ConfirmTransactionModal } from './Layout/Modals/ConfirmTransactionModal/index'
 export { default as MediaModal } from './Layout/Modals/MediaModal'
-export { default as ProcessTransactionModal } from './Layout/Modals/ProcessTransactionModal'
+export { default as ProcessTransactionModal } from './Layout/Modals/ProcessTransactionModal/index'
 export { default as ShareTransactionModal } from './Layout/Modals/ShareTransactionModal'
 
 export { default as ErrorModal } from './Layout/Modals/ErrorModal'

yarn.lock

@@ -14297,6 +14297,18 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+lottie-react@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/lottie-react/-/lottie-react-2.4.0.tgz#f7249eee2b1deee70457a2d142194fdf2456e4bd"
+  integrity sha512-pDJGj+AQlnlyHvOHFK7vLdsDcvbuqvwPZdMlJ360wrzGFurXeKPr8SiRCjLf3LrNYKANQtSsh5dz9UYQHuqx4w==
+  dependencies:
+    lottie-web "^5.10.2"
+
+lottie-web@^5.10.2, lottie-web@^5.12.2:
+  version "5.12.2"
+  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.12.2.tgz#579ca9fe6d3fd9e352571edd3c0be162492f68e5"
+  integrity sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==
+
 lower-case-first@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/lower-case-first/-/lower-case-first-1.0.2.tgz#e5da7c26f29a7073be02d52bac9980e5922adfa1"