update UI

PolkaGate · Jan 1, 2024 · c093f05 · c093f05
1 parent b39b696
commit c093f05
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 31 deletions.
diff --git a/packages/dapp/src/App.tsx b/packages/dapp/src/App.tsx
@@ -94,6 +94,7 @@ export default function App() {
   useEffect(() => {
     /** To format account address based on the dApp chain */
     const chain = getChain(chainName);
+
     const maybeChainLatestGenesisHash = chain?.genesisHash?.[0];
     if (maybeChainLatestGenesisHash && account?.address) {
       const formatted = getFormatted(String(maybeChainLatestGenesisHash), account.address)
@@ -192,7 +193,7 @@ export default function App() {
               aria-label="Vertical tabs example"
               sx={{ borderRight: 1, borderColor: 'divider' }}
             >
-              <Tab label="Transfer Fund" {...a11yProps(0)} />
+              <Tab label="Sign Extrinsic" {...a11yProps(0)} />
               <Tab label="Sign Message" {...a11yProps(1)} />
               <Tab label="Switch chain" {...a11yProps(2)} />
             </Tabs>

diff --git a/packages/dapp/src/TransferFund.tsx b/packages/dapp/src/TransferFund.tsx
@@ -91,7 +91,7 @@ function TransferFund({ api, account, balances, currentChainName, formatted, isP
         && <>
           <Grid container item justifyContent="center" py='5px'>
             <Typography variant="h5" sx={{ fontWeight: '500' }}>
-              A Simple Fund Transfer
+              Transfer Fund and View the Result
             </Typography>
           </Grid>
           <Divider sx={{ width: '80%', mb: '35px' }} />
@@ -105,19 +105,31 @@ function TransferFund({ api, account, balances, currentChainName, formatted, isP
                 : <Skeleton animation="wave" sx={{ display: 'inline-block', fontWeight: 'bold', transform: 'none', width: '650px', height: '27px' }} />}
             </Typography>
           </Grid>
-          <Grid container item alignItems='center' justifyContent="center" pt="15px">
-            <Typography variant="body1">
-              Transferable Balance:
-            </Typography>
-            <Typography variant="h6" sx={{ fontWeight: 400, ml: '10px' }}>
-              {balances
-                ? balances.availableBalance.toHuman()
-                : <Skeleton animation="wave" sx={{ display: 'inline-block', fontWeight: 'bold', transform: 'none', width: '100px', height: '27px' }} />}
-            </Typography>
+          <Grid container item alignItems='center' justifyContent="space-around" pt="15px">
+            <Box display="flex" flexDirection="row" alignItems="center">
+              <Typography variant="body1">
+                Transferable Balance:
+              </Typography>
+              <Typography variant="h6" sx={{ fontWeight: 400, ml: '10px' }}>
+                {balances
+                  ? balances.availableBalance.toHuman()
+                  : <Skeleton animation="wave" sx={{ display: 'inline-block', fontWeight: 'bold', transform: 'none', width: '100px', height: '27px' }} />}
+              </Typography>
+            </Box>
+            <Box display="flex" flexDirection="row" alignItems="center">
+              <Typography variant="body1">
+                Chain:
+              </Typography>
+              <Typography variant="h6" sx={{ fontWeight: 400, ml: '10px' }}>
+                {currentChainName
+                  ? currentChainName
+                  : <Skeleton animation="wave" sx={{ display: 'inline-block', fontWeight: 'bold', transform: 'none', width: '100px', height: '27px' }} />}
+              </Typography>
+            </Box>
           </Grid>
           <Grid container item justifyContent="center" py="35px">
             {balances?.availableBalance?.isZero() && currentChainName as string === 'westend' && (
-              <Typography variant="body1" color='success' sx={{textAlign:'center'}}>
+              <Typography variant="body1" color='success' sx={{ textAlign: 'center' }}>
                 {` You can top up your address by sending `}
                 <code>{`!drip ${formatted}`}</code>
                 {` to the `}
@@ -168,7 +180,7 @@ function TransferFund({ api, account, balances, currentChainName, formatted, isP
               <LoadingButton
                 loading={waitingForUserApproval}
                 loadingPosition="start"
-                startIcon={<SendIcon />}
+                startIcon={<SendIcon sx={{ transform: 'rotate(-25deg)' }} />}
                 variant="contained"
                 onClick={handleSendClick}
                 disabled={
@@ -182,7 +194,7 @@ function TransferFund({ api, account, balances, currentChainName, formatted, isP
               >
                 {waitingForUserApproval
                   ? 'Approve transaction in Metamask'
-                  : 'Transfer Fund'}
+                  : 'Transfer'}
               </LoadingButton>
             </Grid>
           </Grid>
@@ -248,7 +260,7 @@ function TransferFund({ api, account, balances, currentChainName, formatted, isP
           )}
         </Grid>
       </Grid>
-    </Grid>
+    </Grid >
   );
 }
 

diff --git a/packages/dapp/src/util/getChain.ts b/packages/dapp/src/util/getChain.ts
@@ -29,7 +29,7 @@ export const getChain = (genesisOrChainName: string): Network => {
   );
 
   if (chain) {
-    console.info(`The chain for ${genesisOrChainName} is: `,chain )
+    // console.info(`The chain for ${genesisOrChainName} is: `,chain )
     return chain;
   }
   throw new Error(`Chain '${genesisOrChainName}' is not recognized.`);

diff --git a/packages/dapp/src/util/installPolkaMask.ts b/packages/dapp/src/util/installPolkaMask.ts
@@ -21,8 +21,6 @@ export const installPolkaMask = async (): Promise<SnapsConfigurations | undefine
       },
     });
 
-    console.log('connectSnap:', result);
-
     return result;
   } catch (e) {
     console.log('user rejects installation:', e);

diff --git a/packages/snap/package.json b/packages/snap/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@polkagate/snap",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "PolkaMask: a MetaMask Snap to interact with Polkadot ecosystem, a platform for cross-chain communication and scalability. Use your MetaMask wallet to access Polkadot dApps and tokens. No extra extension needed.",
   "repository": {
     "type": "git",

diff --git a/packages/snap/snap.manifest.json b/packages/snap/snap.manifest.json
@@ -1,13 +1,13 @@
 {
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "Explore Polkadot decentralized applications and manage your tokens using your MetaMask wallet. Start your journey at apps.polkagate.xyz.",
   "proposedName": "PolkaMask",
   "repository": {
     "type": "git",
     "url": "https://github.com/polkagate/polkamask.git"
   },
   "source": {
-    "shasum": "Wt8XPRkmPgb2b8/kuwyj6asMVRxqUpobzVIuSP44lvo=",
+    "shasum": "ruND8KmlTTkAHT/nvhQsnv9uNdqvfxmKCGRoIxVvCJg=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/yarn.lock b/yarn.lock
@@ -6218,7 +6218,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/types@npm:10.11.2, @polkadot/types@npm:^10.11.1, @polkadot/types@npm:^10.7.3":
+"@polkadot/types@npm:10.11.2, @polkadot/types@npm:^10.11.1, @polkadot/types@npm:^10.11.2, @polkadot/types@npm:^10.7.3":
   version: 10.11.2
   resolution: "@polkadot/types@npm:10.11.2"
   dependencies:
@@ -7069,20 +7069,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkagate/extension-dapp@npm:^0.46.6-17":
-  version: 0.46.6-18
-  resolution: "@polkagate/extension-dapp@npm:0.46.6-18"
+"@polkagate/extension-dapp@file:../../../polkadot-js-extension/packages/extension-dapp/build::locator=dapp%40workspace%3Apackages%2Fdapp":
+  version: 0.46.7-1-x
+  resolution: "@polkagate/extension-dapp@file:../../../polkadot-js-extension/packages/extension-dapp/build#../../../polkadot-js-extension/packages/extension-dapp/build::hash=47b866&locator=dapp%40workspace%3Apackages%2Fdapp"
   dependencies:
-    "@polkadot/extension-inject": 0.46.6
-    "@polkadot/util": ^12.6.1
-    "@polkadot/util-crypto": ^12.6.1
+    "@polkadot/extension-inject": latest
+    "@polkadot/types": ^10.11.2
+    "@polkadot/util": ^12.6.2
+    "@polkadot/util-crypto": ^12.6.2
     tslib: ^2.6.2
   peerDependencies:
     "@polkadot/api": "*"
-    "@polkadot/types": "*"
     "@polkadot/util": "*"
     "@polkadot/util-crypto": "*"
-  checksum: 0cdb566a82025961deddb1c311dc6adc29d837fd2c473816f30d60f586294526c95dd311b82c9566024227005fa7f2510311edef4f83dc0f128fc2fc94c174c4
+  checksum: 7180f30de3524f871677648cb50eba4d1d7ca906e66e74bc274d36ccc9db231dff0a2b84cd8d0956f198a79c9ea4a5ac68b72063f4246ed750fe943eb2a2d79c
   languageName: node
   linkType: hard
 
@@ -11943,7 +11943,7 @@ __metadata:
     "@polkadot/api-derive": latest
     "@polkadot/apps-config": latest
     "@polkadot/extension-inject": latest
-    "@polkagate/extension-dapp": ^0.46.6-17
+    "@polkagate/extension-dapp": ../../../polkadot-js-extension/packages/extension-dapp/build
     "@testing-library/jest-dom": ^5.17.0
     "@testing-library/react": ^13.4.0
     "@testing-library/user-event": ^13.5.0