Bitcoin Lightning Web Component

Query coindesk bitcoin price from inside Salesforce dashboard.

Community

In order to make the component availble publicly, I created a Salesforce Community and reused the same component. View the component in my Community Sandbox.

Community References

Deployment

To import to your own org,

Download the project folder, "BitcoinLightningWebComponent".

gh repo clone ManuelVargas1251/Bitcoin-Lightning-Web-Component

CD into the project folder

cd Bitcoin-Lightning-Web-Component

Make sure you are logged in to the org you want to deploy to by checking your auth list; if not, log in!

sfdx auth:list
sfdx auth:web:login -a yourOrgName --instanceurl [your url]

Deploy to your org. sfdx reference gist

sfdx force:source:deploy -m LightningComponentBundle:bitcoinComponent

Deployment References

Javascript

Calling the coindesk api and assigning to global variable

import { LightningElement } from 'lwc';
export default class bitcoinComponent extends LightningElement {
	BTCVALUE;
	lastUpdatedDateTime;
	loading = true;
	updateButton() {
		fetch('https://api.coindesk.com/v1/bpi/currentprice.json')
			.then(response => response.json())
			.then(data => {
				this.BTCVALUE = data.bpi.USD.rate_float;	//display price
				this.loading = false;						// hide loading spinner
				this.lastUpdatedDateTime = new Date().getTime()
				console.log(this.BTCVALUE);
			}).catch((error) => {
				console.log(error)
			});
	}
	connectedCallback() { this.updateButton() }
}

Javascript References

HTML

Using ecma templates and lwc functionality

<template>
	<lightning-card title="BTC Price" icon-name="custom:custom41">
		<div class="slds-var-m-around_medium">
			<!-- BTC Price -->
			<lightning-formatted-number
				class="slds-align_absolute-center slds-text-heading_large slds-var-p-bottom_large"
				maximum-fraction-digits="2" format-style="currency" currency-code="USD" value={BTCVALUE}>
			</lightning-formatted-number>
			<!-- Formatted Grid -->
			<div class="slds-grid slds-grid_vertical-align-end">
				<div class="slds-col slds-size_2-of-3">
					<!-- Last Updated Datetime -->
					<div>Last Updated:</div>
					<lightning-formatted-date-time value={lastUpdatedDateTime} year="numeric" month="numeric"
						day="numeric" hour="2-digit" minute="2-digit" time-zone-name="short">
					</lightning-formatted-date-time>
				</div>
				<div class="slds-col slds-size_1-of-3">
					<!-- Refresh Price Button -->
					<lightning-button label="Refresh" onclick={updateButton} class="slds-float_right">
					</lightning-button>
				</div>
			</div>
			<!-- Loading Icon -->
			<template if:true={loading}>
				<lightning-spinner alternative-text="Loading" size="small">
				</lightning-spinner>
			</template>
		</div>
		<!-- Footer Link - New Tab -->
		<div slot="footer">
			<lightning-formatted-url value="https://www.coindesk.com/price/bitcoin/" tooltip="Click to view more info"
				label="View on CoinDesk" target="_blank"></lightning-formatted-url>
		</div>
	</lightning-card>
</template>

Markup References

Security Permissions

For API callouts to CoinDesk, add a new Trusted Site record in Setup > CSP Trusted Sites.

ManuelVargas1251/Bitcoin-Lightning-Web-Component